[DRAFT] feat: token selector

apps/cow-fi/data/cow-swap/const.tsx

@@ -8,8 +8,9 @@ import IMG_COWSWAP_NOFEES from '@cowprotocol/assets/images/image-cowswap-nofees.
 import IMG_COWSWAP_SWAPS from '@cowprotocol/assets/images/image-cowswap-swaps.svg'
 import IMG_COWSWAP_TWAP from '@cowprotocol/assets/images/image-cowswap-twap.svg'
 import IMG_COWSWAP_UX from '@cowprotocol/assets/images/image-cowswap-ux.svg'
-import { Color, UI } from '@cowprotocol/ui'
 import { getAvailableChainsText } from '@cowprotocol/common-const'
+import { Color, UI } from '@cowprotocol/ui'
+
 import { CowFiCategory } from 'src/common/analytics/types'
 
 import { Link } from '@/components/Link'

apps/cowswap-frontend/src/common/hooks/useGetExecutedBridgeSummary.ts

@@ -1,4 +1,3 @@
-/* eslint-disable no-restricted-imports */ // TODO: Don't use 'modules' import
 import { useMemo } from 'react'
 
 import { useTokenByAddress } from '@cowprotocol/tokens'

apps/cowswap-frontend/src/common/updaters/BridgingEnabledUpdater.test.tsx

@@ -0,0 +1,66 @@
+import { AccountType } from '@cowprotocol/types'
+
+import { render } from '@testing-library/react'
+
+import { BridgingEnabledUpdater } from './BridgingEnabledUpdater'
+
+import { Routes } from '../constants/routes'
+
+jest.mock('@cowprotocol/common-hooks', () => ({
+  ...jest.requireActual('@cowprotocol/common-hooks'),
+  useSetIsBridgingEnabled: jest.fn(),
+}))
+
+jest.mock('@cowprotocol/wallet', () => ({
+  ...jest.requireActual('@cowprotocol/wallet'),
+  useWalletInfo: jest.fn(),
+  useAccountType: jest.fn(),
+}))
+
+jest.mock('modules/trade', () => ({
+  ...jest.requireActual('modules/trade'),
+  useTradeTypeInfo: jest.fn(),
+}))
+
+const { useSetIsBridgingEnabled } = require('@cowprotocol/common-hooks')
+const mockUseSetIsBridgingEnabled = useSetIsBridgingEnabled as jest.MockedFunction<typeof useSetIsBridgingEnabled>
+const { useWalletInfo, useAccountType } = require('@cowprotocol/wallet')
+
+const mockUseWalletInfo = useWalletInfo as jest.MockedFunction<typeof useWalletInfo>
+const mockUseAccountType = useAccountType as jest.MockedFunction<typeof useAccountType>
+const { useTradeTypeInfo } = require('modules/trade')
+const mockUseTradeTypeInfo = useTradeTypeInfo as jest.MockedFunction<typeof useTradeTypeInfo>
+
+describe('BridgingEnabledUpdater', () => {
+  const setIsBridgingEnabled = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+    mockUseSetIsBridgingEnabled.mockReturnValue(setIsBridgingEnabled)
+    mockUseWalletInfo.mockReturnValue({ account: '0x123' })
+    mockUseAccountType.mockReturnValue(AccountType.EOA)
+    mockUseTradeTypeInfo.mockReturnValue({ route: Routes.SWAP })
+  })
+
+  it('disables bridging for smart contract wallets', () => {
+    mockUseAccountType.mockReturnValue(AccountType.SMART_CONTRACT)
+
+    render(<BridgingEnabledUpdater />)
+
+    expect(setIsBridgingEnabled).toHaveBeenCalledWith(false)
+  })
+
+  it('enables bridging on swap route for a compatible wallet', () => {
+    render(<BridgingEnabledUpdater />)
+
+    expect(setIsBridgingEnabled).toHaveBeenCalledWith(true)
+  })
+
+  it('disables bridging on non-swap routes', () => {
+    mockUseTradeTypeInfo.mockReturnValue({ route: Routes.LIMIT_ORDER })
+
+    render(<BridgingEnabledUpdater />)
+
+    expect(setIsBridgingEnabled).toHaveBeenCalledWith(false)
+  })
+})

apps/cowswap-frontend/src/common/updaters/BridgingEnabledUpdater.ts

@@ -16,7 +16,6 @@ export function BridgingEnabledUpdater(): null {
   const setIsBridgingEnabled = useSetIsBridgingEnabled()
 
   const isSwapRoute = tradeTypeInfo?.route === Routes.SWAP
-
   const isWalletCompatible = Boolean(account ? accountType !== AccountType.SMART_CONTRACT : true)
   const shouldEnableBridging = isWalletCompatible && isSwapRoute
 

apps/cowswap-frontend/src/entities/bridgeProvider/index.ts

@@ -1,3 +1,4 @@
 export { useBridgeSupportedNetworks, useBridgeSupportedNetwork } from './useBridgeSupportedNetworks'
 export { useBridgeSupportedTokens } from './useBridgeSupportedTokens'
+export { useRoutesAvailability } from './useRoutesAvailability'
 export { BridgeProvidersUpdater } from './BridgeProvidersUpdater'

apps/cowswap-frontend/src/entities/bridgeProvider/useRoutesAvailability.ts

@@ -0,0 +1,112 @@
+import { useMemo } from 'react'
+
+import { SWR_NO_REFRESH_OPTIONS } from '@cowprotocol/common-const'
+import { useIsBridgingEnabled } from '@cowprotocol/common-hooks'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
+
+import useSWR from 'swr'
+import { bridgingSdk } from 'tradingSdk/bridgingSdk'
+
+import { useBridgeProvidersIds } from './useBridgeProvidersIds'
+
+export interface RoutesAvailabilityResult {
+  unavailableChainIds: Set<number>
+  loadingChainIds: Set<number>
+  isLoading: boolean
+}
+
+const EMPTY_RESULT: RoutesAvailabilityResult = {
+  unavailableChainIds: new Set(),
+  loadingChainIds: new Set(),
+  isLoading: false,
+}
+
+interface RouteCheckResult {
+  chainId: number
+  isAvailable: boolean
+}
+
+/**
+ * Pre-checks route availability for multiple destination chains from a source chain.
+ * Returns which chains have unavailable routes and which are still loading.
+ *
+ * Note: Fires parallel requests for all destination chains without throttling.
+ * This is acceptable because:
+ * - SWR caches results, so repeated opens don't re-fetch
+ * - Chain count is limited (~10-15 max)
+ * - Requests are lightweight (token existence checks)
+ * If this becomes a bottleneck, consider batching or sequential fetching.
+ */
+export function useRoutesAvailability(
+  sourceChainId: SupportedChainId | undefined,
+  destinationChainIds: number[],
+): RoutesAvailabilityResult {
+  const isBridgingEnabled = useIsBridgingEnabled()
+  const providerIds = useBridgeProvidersIds()
+  const providersKey = providerIds.join('|')
+
+  // Filter out the source chain (same-chain swaps are always available)
+  const chainsToCheck = useMemo(
+    () => destinationChainIds.filter((id) => id !== sourceChainId),
+    [destinationChainIds, sourceChainId],
+  )
+
+  // Create a stable key for the SWR request
+  const swrKey = useMemo(() => {
+    if (!isBridgingEnabled || !sourceChainId || chainsToCheck.length === 0) {
+      return null
+    }
+    return [sourceChainId, chainsToCheck.sort().join(','), providersKey, 'useRoutesAvailability']
+  }, [isBridgingEnabled, sourceChainId, chainsToCheck, providersKey])
+
+  const { data, isLoading } = useSWR<RouteCheckResult[]>(
+    swrKey,
+    async (key) => {
+      const [sellChainId, chainIdsString] = key as [SupportedChainId, string, string, string]
+      const chainIds = chainIdsString.split(',').map(Number)
+
+      // Check routes in parallel for all destination chains
+      const results = await Promise.all(
+        chainIds.map(async (buyChainId: number): Promise<RouteCheckResult> => {
+          try {
+            const result = await bridgingSdk.getBuyTokens({ sellChainId, buyChainId })
+            const isAvailable = result.tokens.length > 0 && result.isRouteAvailable
+            return { chainId: buyChainId, isAvailable }
+          } catch (error) {
+            console.warn(`[useRoutesAvailability] Failed to check route ${sellChainId} -> ${buyChainId}`, error)
+            // Treat errors as unavailable routes
+            return { chainId: buyChainId, isAvailable: false }
+          }
+        }),
+      )
+
+      return results
+    },
+    SWR_NO_REFRESH_OPTIONS,
+  )
+
+  return useMemo(() => {
+    if (!swrKey) {
+      return EMPTY_RESULT
+    }
+
+    if (isLoading || !data) {
+      // While loading, mark all chains being checked as loading
+      return {
+        unavailableChainIds: new Set(),
+        loadingChainIds: new Set(chainsToCheck),
+        isLoading: true,
+      }
+    }
+
+    const unavailableChainIds = new Set<number>(
+      data.filter((result) => !result.isAvailable).map((result) => result.chainId),
+    )
+
+    return {
+      unavailableChainIds,
+      loadingChainIds: new Set(),
+      isLoading: false,
+    }
+  }, [swrKey, isLoading, data, chainsToCheck])
+}

apps/cowswap-frontend/src/locales/es-ES.po

@@ -4212,6 +4212,14 @@ msgstr "Habilitar aprobación parcial"
 msgid "Version"
 msgstr "Versión"
 
+#: apps/cowswap-frontend/src/modules/tokensList/pure/TokensVirtualList/index.tsx
+msgid "Recent"
+msgstr "Recientes"
+
+#: apps/cowswap-frontend/src/modules/tokensList/pure/TokensVirtualList/index.tsx
+msgid "Clear"
+msgstr "Borrar"
+
 #: apps/cowswap-frontend/src/pages/Account/Tokens/TokensOverview.tsx
 msgid "All tokens"
 msgstr "Todos los tokens"
@@ -5211,7 +5219,7 @@ msgstr "parte"
 
 #: apps/cowswap-frontend/src/modules/swap/pure/CrossChainUnlockScreen/index.tsx
 msgid "Cross-chain swaps are here"
-msgstr "Los swaps de cadena media están aquí"
+msgstr "Los swaps entre cadenas están aquí"
 
 #: apps/cowswap-frontend/src/modules/erc20Approve/containers/ApprovalAmountInput/ApprovalAmountInput.tsx
 #~ msgid "Approval amount:"
@@ -6294,3 +6302,84 @@ msgstr "Aprende más"
 msgid "Swap and bridge costs are at least {formattedFeePercentage}% of the swap amount"
 msgstr "Los costos de intercambio y puente son por lo menos {formattedFeePercentage}% del monto de intercambio"
 
+# Receive amount labels
+msgid "Receive (incl. fees)"
+msgstr "Recibir (incl. comisiones)"
+
+msgid "From (incl. fees)"
+msgstr "De (incl. comisiones)"
+
+# Notifications / jobs aria labels
+msgid "Trade alert settings"
+msgstr "Configuración de alertas de trading"
+
+msgid "View jobs (opens in a new tab)"
+msgstr "Ver trabajos (se abre en una pestaña nueva)"
+
+#: apps/cowswap-frontend/src/modules/tokensList/pure/ChainPanel/index.tsx
+msgid "Search network"
+msgstr "Buscar red"
+
+#: apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/controllerState.ts
+msgid "Select token"
+msgstr "Seleccionar token"
+
+#: apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/controllerState.ts
+msgid "From network"
+msgstr "Red de origen"
+
+#: apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/controllerState.ts
+msgid "To network"
+msgstr "Red de destino"
+
+#: apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/controllerState.ts
+msgid "Select network"
+msgstr "Seleccionar red"
+
+#: apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/index.tsx
+msgid "Cross chain swap"
+msgstr "Swap entre cadenas"
+
+#: apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/controllerState.ts
+msgid "Swap from"
+msgstr "Swap desde"
+
+#: apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/controllerState.ts
+msgid "Swap to"
+msgstr "Swap a"
+
+#: apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/controllerState.ts
+msgid "Sell token"
+msgstr "Vender token"
+
+#: apps/cowswap-frontend/src/modules/tokensList/containers/SelectTokenWidget/controllerState.ts
+msgid "Buy token"
+msgstr "Comprar token"
+
+#: apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/helpers.tsx
+msgid "Manage token lists"
+msgstr "Gestionar listas de tokens"
+
+#: apps/cowswap-frontend/src/modules/tokensList/pure/ChainPanel/index.tsx
+msgid "No networks available for this trade."
+msgstr "No hay redes disponibles para este intercambio."
+
+#: apps/cowswap-frontend/src/modules/tokensList/pure/ChainPanel/index.tsx
+msgid "No networks match {chainQuery}."
+msgstr "No hay redes que coincidan con {chainQuery}."
+
+#: apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/MobileChainSelector.tsx
+msgid "View all ({totalChains})"
+msgstr "Ver todas ({totalChains})"
+
+#: apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/MobileChainSelector.tsx
+msgid "View all {totalChains} networks"
+msgstr "Ver todas las {totalChains} redes"
+
+#: apps/cowswap-frontend/src/modules/tokensList/pure/SelectTokenModal/MobileChainSelector.tsx
+msgid "Selected network {activeChainLabel}"
+msgstr "Red seleccionada {activeChainLabel}"
+
+#: apps/cowswap-frontend/src/modules/tokensList/pure/ChainsSelector/index.tsx
+msgid "This destination is not supported for this source chain"
+msgstr "Este destino no es compatible con esta red de origen"