feat(yield): define token category by default for selection

apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx

@@ -43,7 +43,11 @@ export interface CurrencyInputPanelProps extends Partial<BuiltItProps> {
   subsidyAndBalance?: BalanceAndSubsidy
   onCurrencySelection: (field: Field, currency: Currency) => void
   onUserInput: (field: Field, typedValue: string) => void
-  openTokenSelectWidget(selectedToken: string | undefined, onCurrencySelection: (currency: Currency) => void): void
+  openTokenSelectWidget(
+    selectedToken: string | undefined,
+    field: Field | undefined,
+    onCurrencySelection: (currency: Currency) => void,
+  ): void
   topLabel?: string
 }
 
@@ -84,7 +88,7 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
       setTypedValue(typedValue)
       onUserInput(field, typedValue)
     },
-    [onUserInput, field]
+    [onUserInput, field],
   )
   const handleMaxInput = useCallback(() => {
     if (!maxBalance) {
@@ -136,7 +140,7 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
   }, [_priceImpactParams, bothCurrenciesSet])
 
   const onTokenSelectClick = useCallback(() => {
-    openTokenSelectWidget(selectedTokenAddress, (currency) => onCurrencySelection(field, currency))
+    openTokenSelectWidget(selectedTokenAddress, field, (currency) => onCurrencySelection(field, currency))
   }, [openTokenSelectWidget, selectedTokenAddress, onCurrencySelection, field])
 
   return (

apps/cowswap-frontend/src/common/updaters/orders/OrdersFromApiUpdater.ts

@@ -3,7 +3,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
 
 import { NATIVE_CURRENCIES } from '@cowprotocol/common-const'
 import { EnrichedOrder, EthflowData, OrderClass, SupportedChainId as ChainId } from '@cowprotocol/cow-sdk'
-import { TokensByAddress, useAllTokens } from '@cowprotocol/tokens'
+import { TokensByAddress, useAllActiveTokens } from '@cowprotocol/tokens'
 import { useIsSafeWallet, useWalletInfo } from '@cowprotocol/wallet'
 
 import { Order, OrderStatus } from 'legacy/state/orders/actions'
@@ -32,7 +32,7 @@ const statusMapping: Record<OrderTransitionStatus, OrderStatus | undefined> = {
 function _transformOrderBookOrderToStoreOrder(
   order: EnrichedOrder,
   chainId: ChainId,
-  allTokens: TokensByAddress
+  allTokens: TokensByAddress,
 ): Order | undefined {
   const {
     uid: id,
@@ -63,7 +63,7 @@ function _transformOrderBookOrderToStoreOrder(
     console.warn(
       `OrdersFromApiUpdater::Tokens not found for order ${id}: sellToken ${
         !inputToken ? sellToken : 'found'
-      } - buyToken ${!outputToken ? buyToken : 'found'}`
+      } - buyToken ${!outputToken ? buyToken : 'found'}`,
     )
     return
   }
@@ -110,7 +110,7 @@ function _getInputToken(
   isEthFlow: boolean,
   chainId: ChainId,
   sellToken: string,
-  allTokens: TokensByAddress
+  allTokens: TokensByAddress,
 ): ReturnType<typeof getTokenFromMapping> {
   return isEthFlow ? NATIVE_CURRENCIES[chainId] : getTokenFromMapping(sellToken, chainId, allTokens)
 }
@@ -141,7 +141,7 @@ export function OrdersFromApiUpdater(): null {
   const clearOrderStorage = useClearOrdersStorage()
 
   const { account, chainId } = useWalletInfo()
-  const allTokens = useAllTokens()
+  const allTokens = useAllActiveTokens()
   const tokensAreLoaded = useMemo(() => Object.keys(allTokens).length > 0, [allTokens])
   const addOrUpdateOrders = useAddOrUpdateOrders()
   const updateApiOrders = useSetAtom(apiOrdersAtom)
@@ -176,7 +176,7 @@ export function OrdersFromApiUpdater(): null {
         console.error(`OrdersFromApiUpdater::Failed to fetch orders`, e)
       }
     },
-    [addOrUpdateOrders, ordersFromOrderBook, getTokensForOrdersList, isSafeWallet]
+    [addOrUpdateOrders, ordersFromOrderBook, getTokensForOrdersList, isSafeWallet],
   )
 
   useEffect(() => {

apps/cowswap-frontend/src/modules/hooksStore/containers/RescueFundsFromProxy/index.tsx

@@ -32,7 +32,7 @@ const BALANCE_UPDATE_INTERVAL = ms`5s`
 const selectedCurrencyAtom = atom<Currency | undefined>(undefined)
 
 export function RescueFundsFromProxy({ onDismiss }: { onDismiss: Command }) {
-  const [selectedCurrency, seSelectedCurrency] = useAtom(selectedCurrencyAtom)
+  const [selectedCurrency, setSelectedCurrency] = useAtom(selectedCurrencyAtom)
   const [tokenBalance, setTokenBalance] = useState<CurrencyAmount<Currency> | null>(null)
 
   const selectedTokenAddress = selectedCurrency ? getCurrencyAddress(selectedCurrency) : undefined
@@ -81,8 +81,8 @@ export function RescueFundsFromProxy({ onDismiss }: { onDismiss: Command }) {
   }, [rescueFundsCallback, addTransaction, handleSetError])
 
   const onCurrencySelectClick = useCallback(() => {
-    onSelectToken(selectedTokenAddress, seSelectedCurrency)
-  }, [onSelectToken, selectedTokenAddress, seSelectedCurrency])
+    onSelectToken(selectedTokenAddress, undefined, undefined, setSelectedCurrency)
+  }, [onSelectToken, selectedTokenAddress, setSelectedCurrency])
 
   return (
     <Wrapper>

apps/cowswap-frontend/src/modules/tokensList/containers/LpTokenListsWidget/index.tsx

@@ -2,7 +2,13 @@ import { ReactNode, useMemo } from 'react'
 
 import { useTokensBalances } from '@cowprotocol/balances-and-allowances'
 import { TokenWithLogo } from '@cowprotocol/common-const'
-import { getTokenSearchFilter, LP_TOKEN_LIST_CATEGORIES, TokenListCategory, useAllLpTokens } from '@cowprotocol/tokens'
+import {
+  getTokenSearchFilter,
+  LP_TOKEN_LIST_CATEGORIES,
+  LP_TOKEN_LIST_COW_AMM_ONLY,
+  TokenListCategory,
+  useAllLpTokens,
+} from '@cowprotocol/tokens'
 import { ProductLogo, ProductVariant, UI } from '@cowprotocol/ui'
 
 import { usePoolsInfo } from 'modules/yield/shared'
@@ -16,6 +22,7 @@ interface LpTokenListsProps<T = TokenListCategory[] | null> {
   account: string | undefined
   children: ReactNode
   search: string
+  disableErc20?: boolean
   onSelectToken(token: TokenWithLogo): void
   openPoolPage(poolAddress: string): void
   tokenListCategoryState: [T, (category: T) => void]
@@ -35,7 +42,7 @@ const tabs = [
         />{' '}
         CoW AMM only
       </>
-    ), value: [TokenListCategory.COW_AMM_LP] },
+    ), value: LP_TOKEN_LIST_COW_AMM_ONLY },
 ]
 
 export function LpTokenListsWidget({
@@ -45,6 +52,7 @@ export function LpTokenListsWidget({
   onSelectToken,
   openPoolPage,
   tokenListCategoryState,
+  disableErc20,
 }: LpTokenListsProps) {
   const [listsCategories, setListsCategories] = tokenListCategoryState
   const lpTokens = useAllLpTokens(listsCategories)
@@ -62,7 +70,7 @@ export function LpTokenListsWidget({
   return (
     <>
       <TabsContainer>
-        {tabs.map((tab) => {
+        {(disableErc20 ? tabs.slice(1) : tabs).map((tab) => {
           return (
             <TabButton
               key={tab.id}

apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/getDefaultTokenListCategories.ts

@@ -0,0 +1,38 @@
+import { LpToken } from '@cowprotocol/common-const'
+import { LP_TOKEN_LIST_CATEGORIES, LP_TOKEN_LIST_COW_AMM_ONLY, TokenListCategory } from '@cowprotocol/tokens'
+import { Currency } from '@uniswap/sdk-core'
+
+import { Field } from 'legacy/state/types'
+
+export function getDefaultTokenListCategories(
+  field: Field | undefined,
+  oppositeToken: Currency | LpToken | undefined,
+  lpTokensWithBalancesCount: number,
+): TokenListCategory[] | null {
+  const isOppositeLp = oppositeToken instanceof LpToken
+
+  // When select buy token
+  if (field === Field.OUTPUT) {
+    // If sell token is LP token
+    if (isOppositeLp) {
+      // And sell token is COW AMM LP token, propose all LP tokens by default as buy token
+      if (oppositeToken.isCowAmm) {
+        return LP_TOKEN_LIST_CATEGORIES
+      } else {
+        // And sell token is not COW AMM LP token, propose COW AMM LP tokens by default as buy token
+        return LP_TOKEN_LIST_COW_AMM_ONLY
+      }
+    } else {
+      // And sell token is not LP token, propose all LP tokens by default as buy token
+      return LP_TOKEN_LIST_COW_AMM_ONLY
+    }
+  }
+
+  if (isOppositeLp && oppositeToken.isCowAmm) {
+    return LP_TOKEN_LIST_CATEGORIES
+  }
+
+  // When select sell token
+  // If there are LP tokens with balances, propose LP tokens by default as sell token
+  return lpTokensWithBalancesCount > 0 ? LP_TOKEN_LIST_CATEGORIES : null
+}

apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/index.tsx

@@ -1,15 +1,15 @@
 import { useCallback, useState } from 'react'
 
 import { useTokensBalances } from '@cowprotocol/balances-and-allowances'
-import { TokenWithLogo } from '@cowprotocol/common-const'
+import { LpToken, TokenWithLogo } from '@cowprotocol/common-const'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
 import {
   ListState,
   TokenListCategory,
   useAddList,
   useAddUserToken,
   useAllListsList,
-  useAllTokens,
+  useAllActiveTokens,
   useFavoriteTokens,
   useUnsupportedTokens,
   useUserAddedTokens,
@@ -18,8 +18,13 @@ import { useWalletInfo } from '@cowprotocol/wallet'
 
 import styled from 'styled-components/macro'
 
+import { Field } from 'legacy/state/types'
+
 import { addListAnalytics } from 'modules/analytics'
 import { usePermitCompatibleTokens } from 'modules/permit'
+import { useLpTokensWithBalances } from 'modules/yield/shared'
+
+import { getDefaultTokenListCategories } from './getDefaultTokenListCategories'
 
 import { useOnTokenListAddingError } from '../../hooks/useOnTokenListAddingError'
 import { useSelectTokenWidgetState } from '../../hooks/useSelectTokenWidgetState'
@@ -44,18 +49,33 @@ interface SelectTokenWidgetProps {
 }
 
 export function SelectTokenWidget({ displayLpTokenLists }: SelectTokenWidgetProps) {
-  const { open, onSelectToken, tokenToImport, listToImport, selectedToken, onInputPressEnter, selectedPoolAddress } =
-    useSelectTokenWidgetState()
+  const {
+    open,
+    onSelectToken,
+    tokenToImport,
+    listToImport,
+    selectedToken,
+    onInputPressEnter,
+    selectedPoolAddress,
+    field,
+    oppositeToken,
+  } = useSelectTokenWidgetState()
+  const { count: lpTokensWithBalancesCount } = useLpTokensWithBalances()
+
   const [isManageWidgetOpen, setIsManageWidgetOpen] = useState(false)
-  const tokenListCategoryState = useState<TokenListCategory[] | null>(null)
+  const isSellErc20Selected = field === Field.OUTPUT && !(oppositeToken instanceof LpToken)
+
+  const tokenListCategoryState = useState<TokenListCategory[] | null>(
+    getDefaultTokenListCategories(field, oppositeToken, lpTokensWithBalancesCount),
+  )
 
   const updateSelectTokenWidget = useUpdateSelectTokenWidgetState()
   const { account } = useWalletInfo()
 
   const addCustomTokenLists = useAddList((source) => addListAnalytics('Success', source))
   const importTokenCallback = useAddUserToken()
 
-  const allTokens = useAllTokens()
+  const allTokens = useAllActiveTokens()
   const favoriteTokens = useFavoriteTokens()
   const userAddedTokens = useUserAddedTokens()
   const allTokenLists = useAllListsList()
@@ -181,6 +201,7 @@ export function SelectTokenWidget({ displayLpTokenLists }: SelectTokenWidgetProp
             hideFavoriteTokensTooltip={isInjectedWidgetMode}
             openPoolPage={openPoolPage}
             tokenListCategoryState={tokenListCategoryState}
+            disableErc20={isSellErc20Selected}
             account={account}
           />
         )

apps/cowswap-frontend/src/modules/tokensList/hooks/useOpenTokenSelectWidget.ts

@@ -1,26 +1,33 @@
 import { useCallback } from 'react'
 
+import { LpToken, TokenWithLogo } from '@cowprotocol/common-const'
 import { Currency } from '@uniswap/sdk-core'
 
+import { Field } from 'legacy/state/types'
+
 import { useUpdateSelectTokenWidgetState } from './useUpdateSelectTokenWidgetState'
 
 export function useOpenTokenSelectWidget(): (
   selectedToken: string | undefined,
-  onSelectToken: (currency: Currency) => void
+  field: Field | undefined,
+  oppositeToken: TokenWithLogo | LpToken | Currency | undefined,
+  onSelectToken: (currency: Currency) => void,
 ) => void {
   const updateSelectTokenWidget = useUpdateSelectTokenWidgetState()
 
   return useCallback(
-    (selectedToken, onSelectToken) => {
+    (selectedToken, field, oppositeToken, onSelectToken) => {
       updateSelectTokenWidget({
         selectedToken,
+        field,
+        oppositeToken,
         open: true,
         onSelectToken: (currency) => {
           updateSelectTokenWidget({ open: false })
           onSelectToken(currency)
         },
       })
     },
-    [updateSelectTokenWidget]
+    [updateSelectTokenWidget],
   )
 }

apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/index.tsx

@@ -26,6 +26,7 @@ export interface SelectTokenModalProps<T = TokenListCategory[] | null> {
   permitCompatibleTokens: PermitCompatibleTokens
   hideFavoriteTokensTooltip?: boolean
   displayLpTokenLists?: boolean
+  disableErc20?: boolean
   account: string | undefined
   tokenListCategoryState: [T, (category: T) => void]
 
@@ -60,6 +61,7 @@ export function SelectTokenModal(props: SelectTokenModalProps) {
     displayLpTokenLists,
     openPoolPage,
     tokenListCategoryState,
+    disableErc20,
   } = props
 
   const [inputValue, setInputValue] = useState<string>(defaultInputValue)
@@ -119,6 +121,7 @@ export function SelectTokenModal(props: SelectTokenModalProps) {
           search={inputValue}
           onSelectToken={onSelectToken}
           openPoolPage={openPoolPage}
+          disableErc20={disableErc20}
           tokenListCategoryState={tokenListCategoryState}
         >
           {allListsContent}

apps/cowswap-frontend/src/modules/tokensList/state/selectTokenWidgetAtom.ts

@@ -1,14 +1,18 @@
 import { atom } from 'jotai'
 
-import { TokenWithLogo } from '@cowprotocol/common-const'
+import { LpToken, TokenWithLogo } from '@cowprotocol/common-const'
 import { atomWithPartialUpdate } from '@cowprotocol/common-utils'
 import { ListState } from '@cowprotocol/tokens'
 import { Command } from '@cowprotocol/types'
 import { Currency } from '@uniswap/sdk-core'
 
+import { Field } from 'legacy/state/types'
+
 export const { atom: selectTokenWidgetAtom, updateAtom: updateSelectTokenWidgetAtom } = atomWithPartialUpdate(
   atom<{
     open: boolean
+    field?: Field
+    oppositeToken?: TokenWithLogo | LpToken | Currency
     selectedToken?: string
     selectedPoolAddress?: string
     tokenToImport?: TokenWithLogo

apps/cowswap-frontend/src/modules/tokensList/utils/tokensListSorter.ts

@@ -18,6 +18,10 @@ export function tokensListSorter(balances: BalancesState['values']): (a: TokenWi
       return +bBalance.sub(aBalance)
     }
 
+    if (aBalance && !bBalance) {
+      return -1
+    }
+
     return 0
   }
 }