feat: enhance token search results with bridge support

Author: fairlighteth

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

@@ -1,6 +1,6 @@
 import { ReactNode, useCallback, useEffect, useMemo } from 'react'
 
-import { doesTokenMatchSymbolOrAddress } from '@cowprotocol/common-utils'
+import { doesTokenMatchSymbolOrAddress, getTokenAddressKey } from '@cowprotocol/common-utils'
 import { getTokenSearchFilter, TokenSearchResponse, useSearchToken } from '@cowprotocol/tokens'
 
 import { useAddTokenImportCallback } from '../../hooks/useAddTokenImportCallback'
@@ -14,25 +14,32 @@ import { TokenSearchContent } from '../../pure/TokenSearchContent'
 export function TokenSearchResults(): ReactNode {
   const { searchInput } = useTokenListViewState()
 
-  const { selectTokenContext, areTokensFromBridge, allTokens } = useTokenListContext()
+  const { selectTokenContext, areTokensFromBridge, allTokens, bridgeSupportedTokensMap } = useTokenListContext()
 
   const { onTokenListItemClick } = selectTokenContext
 
   const { onSelectToken } = useSelectTokenWidgetState()
 
-  // Do not make search when tokens are from bridge
-  const defaultSearchResults = useSearchToken(areTokensFromBridge ? null : searchInput)
+  // Search all tokens (used in both modes)
+  const defaultSearchResults = useSearchToken(searchInput)
 
-  // For bridge output tokens just filter them instead of making search
+  // For bridge mode, merge bridge-supported tokens with search results (non-bridgeable shown as disabled)
   const searchResults: TokenSearchResponse = useMemo(() => {
     if (!areTokensFromBridge) return defaultSearchResults
 
+    // Filter bridge-supported tokens (target chain) by search input
     const filter = getTokenSearchFilter(searchInput)
-    const filteredTokens = allTokens.filter(filter)
+    const filteredBridgeTokens = allTokens.filter(filter)
+
+    // Merge: bridge tokens first, then additional search results (will be marked disabled)
+    const bridgeAddresses = new Set(filteredBridgeTokens.map((t) => getTokenAddressKey(t.address)))
+    const additionalTokens = defaultSearchResults.activeListsResult.filter(
+      (t) => !bridgeAddresses.has(getTokenAddressKey(t.address)),
+    )
 
     return {
       ...defaultSearchResults,
-      activeListsResult: filteredTokens,
+      activeListsResult: [...filteredBridgeTokens, ...additionalTokens],
     }
   }, [searchInput, areTokensFromBridge, allTokens, defaultSearchResults])
 
@@ -53,12 +60,30 @@ export function TokenSearchResults(): ReactNode {
     if (activeListsResult.length === 1 || matchedTokens.length === 1) {
       const tokenToSelect = matchedTokens[0] || activeListsResult[0]
 
+      // In bridge mode, don't select non-bridgeable tokens (also block while map is loading)
       if (tokenToSelect) {
-        onTokenListItemClick?.(tokenToSelect)
-        onSelectToken?.(tokenToSelect)
+        const hasAddress = !!tokenToSelect.address
+        const isInBridgeMap =
+          hasAddress &&
+          bridgeSupportedTokensMap !== null &&
+          !!bridgeSupportedTokensMap[getTokenAddressKey(tokenToSelect.address)]
+        const isBridgeable = !areTokensFromBridge || isInBridgeMap
+
+        if (isBridgeable) {
+          onTokenListItemClick?.(tokenToSelect)
+          onSelectToken?.(tokenToSelect)
+        }
       }
     }
-  }, [searchInput, activeListsResult, matchedTokens, onSelectToken, onTokenListItemClick])
+  }, [
+    searchInput,
+    activeListsResult,
+    matchedTokens,
+    onSelectToken,
+    onTokenListItemClick,
+    areTokensFromBridge,
+    bridgeSupportedTokensMap,
+  ])
 
   useEffect(() => {
     updateSelectTokenWidget({
@@ -73,6 +98,8 @@ export function TokenSearchResults(): ReactNode {
         searchInput={searchInput}
         selectTokenContext={selectTokenContext}
         searchResults={searchResults}
+        areTokensFromBridge={areTokensFromBridge}
+        bridgeSupportedTokensMap={bridgeSupportedTokensMap}
       />
     </CommonListContainer>
   )

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

@@ -27,6 +27,9 @@ export interface TokenListContext {
   areTokensLoading: boolean
   areTokensFromBridge: boolean
 
+  // Bridge support map (null when loading, populated when bridge tokens are fetched)
+  bridgeSupportedTokensMap: Record<string, boolean> | null
+
   // UI config
   hideFavoriteTokensTooltip: boolean
   selectedTargetChainId: number | undefined
@@ -71,6 +74,7 @@ export function useTokenListContext(): TokenListContext {
       recentTokens,
       areTokensLoading: tokensState.isLoading,
       areTokensFromBridge: tokensState.areTokensFromBridge,
+      bridgeSupportedTokensMap: tokensState.bridgeSupportedTokensMap,
       hideFavoriteTokensTooltip: isInjectedWidget(),
       selectedTargetChainId: widgetState.selectedTargetChainId,
       onClearRecentTokens: clearRecentTokens,
@@ -81,6 +85,7 @@ export function useTokenListContext(): TokenListContext {
       tokensState.tokens,
       tokensState.isLoading,
       tokensState.areTokensFromBridge,
+      tokensState.bridgeSupportedTokensMap,
       favoriteTokens,
       recentTokens,
       widgetState.selectedTargetChainId,

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

@@ -19,6 +19,7 @@ export interface TokensToSelectContext {
   favoriteTokens: TokenWithLogo[]
   areTokensFromBridge: boolean
   isRouteAvailable: boolean | undefined
+  bridgeSupportedTokensMap: Record<string, boolean> | null
 }
 
 export function useTokensToSelect(): TokensToSelectContext {
@@ -59,6 +60,7 @@ export function useTokensToSelect(): TokensToSelectContext {
       favoriteTokens: favoriteTokensToSelect,
       areTokensFromBridge,
       isRouteAvailable: result?.isRouteAvailable,
+      bridgeSupportedTokensMap,
     }
   }, [allTokens, bridgeSupportedTokensMap, isLoading, areTokensFromBridge, favoriteTokens, result])
 }

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

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react'
 
 import { TokenWithLogo } from '@cowprotocol/common-const'
+import { HoverTooltip } from '@cowprotocol/ui'
 
 import { Trans } from '@lingui/react/macro'
 import { CheckCircle } from 'react-feather'
@@ -18,15 +19,27 @@ export interface ImportTokenItemProps {
   wrapperId?: string
   isFirstInSection?: boolean
   isLastInSection?: boolean
+  disabledReason?: string
 }
 
 export function ImportTokenItem(props: ImportTokenItemProps): ReactNode {
-  const { token, importToken, shadowed, existing, wrapperId, isFirstInSection, isLastInSection } = props
+  const { token, importToken, shadowed, existing, wrapperId, isFirstInSection, isLastInSection, disabledReason } = props
+
+  const tokenInfo = (
+    <div style={{ opacity: shadowed ? 0.6 : 1 }}>
+      <TokenInfo token={token} />
+    </div>
+  )
+
   return (
     <styledEl.Wrapper id={wrapperId} $isFirst={isFirstInSection} $isLast={isLastInSection}>
-      <div style={{ opacity: shadowed ? 0.6 : 1 }}>
-        <TokenInfo token={token} />
-      </div>
+      {disabledReason ? (
+        <HoverTooltip wrapInContainer placement="top" content={disabledReason}>
+          {tokenInfo}
+        </HoverTooltip>
+      ) : (
+        tokenInfo
+      )}
       <div>
         {existing && (
           <styledEl.ActiveToken>

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

@@ -4,7 +4,7 @@ import { TokenWithLogo } from '@cowprotocol/common-const'
 import { areAddressesEqual, getCurrencyAddress, getTokenId } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { TokenListTags } from '@cowprotocol/tokens'
-import { FiatAmount, LoadingRows, LoadingRowSmall, TokenAmount } from '@cowprotocol/ui'
+import { FiatAmount, HoverTooltip, LoadingRows, LoadingRowSmall, TokenAmount } from '@cowprotocol/ui'
 import { BigNumber } from '@ethersproject/bignumber'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
@@ -37,10 +37,38 @@ export interface TokenListItemProps {
   tokenListTags?: TokenListTags
   children?: ReactNode
   className?: string
+  disabled?: boolean
+  disabledReason?: string
 }
 
-function getClassName(isTokenSelected: boolean, className = ''): string {
-  return `${className} ${isTokenSelected ? 'token-item-selected' : ''}`
+function getClassName(isTokenSelected: boolean, disabled: boolean, className = ''): string {
+  const selectedClass = isTokenSelected ? 'token-item-selected' : ''
+  const disabledClass = disabled ? 'token-item-disabled' : ''
+  return `${className} ${selectedClass} ${disabledClass}`.trim()
+}
+
+interface DisabledProps {
+  'aria-disabled'?: true
+  tabIndex?: -1
+}
+
+function getDisabledProps(disabled: boolean): DisabledProps {
+  if (!disabled) return {}
+  return { 'aria-disabled': true, tabIndex: -1 }
+}
+
+function checkIsTokenSelected(token: TokenWithLogo, selectedToken: Nullish<Currency>): boolean {
+  if (!selectedToken) return false
+  return areAddressesEqual(token.address, getCurrencyAddress(selectedToken)) && token.chainId === selectedToken.chainId
+}
+
+function wrapWithTooltip(content: ReactNode, disabled: boolean, disabledReason?: string): ReactNode {
+  if (!disabled || !disabledReason) return content
+  return (
+    <HoverTooltip wrapInContainer placement="top" content={disabledReason}>
+      {content}
+    </HoverTooltip>
+  )
 }
 
 const EMPTY_TAGS = {}
@@ -58,46 +86,41 @@ export function TokenListItem(props: TokenListItemProps): ReactNode {
     tokenListTags = EMPTY_TAGS,
     children,
     className,
+    disabled = false,
+    disabledReason,
   } = props
 
-  const tokenKey = getTokenId(token)
-  // Defer heavyweight UI (tooltips, formatted numbers) until the row is about to enter the viewport.
   const { ref: visibilityRef, isVisible: hasIntersected } = useDeferredVisibility<HTMLDivElement>({
-    resetKey: tokenKey,
+    resetKey: getTokenId(token),
     rootMargin: '200px',
   })
 
-  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
-    if (isTokenSelected) {
-      e.preventDefault()
-      e.stopPropagation()
-    } else {
-      onSelectToken?.(token)
-    }
-  }
-
-  const isTokenSelected = Boolean(
-    selectedToken &&
-      areAddressesEqual(token.address, getCurrencyAddress(selectedToken)) &&
-      token.chainId === selectedToken.chainId,
-  )
-
+  const isTokenSelected = checkIsTokenSelected(token, selectedToken)
   const isSupportedChain = token.chainId in SupportedChainId
   const shouldShowBalances = isWalletConnected && isSupportedChain
-  // Formatting balances (BigNumber -> CurrencyAmount -> Fiat) is expensive; delay until the row is visible.
   const shouldFormatBalances = shouldShowBalances && hasIntersected
   const balanceAmount =
     shouldFormatBalances && balance ? CurrencyAmount.fromRawAmount(token, balance.toHexString()) : undefined
 
-  return (
+  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
+    if (isTokenSelected || disabled) {
+      e.preventDefault()
+      e.stopPropagation()
+      return
+    }
+    onSelectToken?.(token)
+  }
+
+  return wrapWithTooltip(
     <styledEl.TokenItem
       ref={visibilityRef}
       data-address={token.address.toLowerCase()}
       data-token-symbol={token.symbol || ''}
       data-token-name={token.name || ''}
       data-element-type="token-selection"
       onClick={handleClick}
-      className={getClassName(isTokenSelected, className)}
+      className={getClassName(isTokenSelected, disabled, className)}
+      {...getDisabledProps(disabled)}
     >
       <TokenInfo
         token={token}
@@ -120,7 +143,9 @@ export function TokenListItem(props: TokenListItemProps): ReactNode {
         usdAmount={usdAmount}
       />
       {children}
-    </styledEl.TokenItem>
+    </styledEl.TokenItem>,
+    disabled,
+    disabledReason,
   )
 }
 

apps/cowswap-frontend/src/modules/tokensList/pure/TokenListItem/styled.ts

@@ -47,6 +47,15 @@ export const TokenItem = styled.div`
   &.token-item-selected:hover {
     background: none;
   }
+
+  &.token-item-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &.token-item-disabled:hover {
+    background: none;
+  }
 `
 
 export const TokenBalance = styled.span`

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

@@ -10,9 +10,16 @@ import { TokenListItem } from '../TokenListItem'
 interface TokenListItemContainerProps {
   token: TokenWithLogo
   context: SelectTokenContext
+  disabled?: boolean
+  disabledReason?: string
 }
 
-export function TokenListItemContainer({ token, context }: TokenListItemContainerProps): ReactNode {
+export function TokenListItemContainer({
+  token,
+  context,
+  disabled,
+  disabledReason,
+}: TokenListItemContainerProps): ReactNode {
   const {
     unsupportedTokens,
     onTokenListItemClick,
@@ -43,6 +50,8 @@ export function TokenListItemContainer({ token, context }: TokenListItemContaine
       onSelectToken={handleSelectToken}
       isWalletConnected={isWalletConnected}
       tokenListTags={tokenListTags}
+      disabled={disabled}
+      disabledReason={disabledReason}
     />
   )
 }

apps/cowswap-frontend/src/modules/tokensList/pure/TokenSearchContent/TokenSearchRowRenderer.tsx

@@ -17,7 +17,14 @@ export function TokenSearchRowRenderer({
     case 'banner':
       return <GuideBanner />
     case 'token':
-      return <TokenListItemContainer token={row.token} context={selectTokenContext} />
+      return (
+        <TokenListItemContainer
+          token={row.token}
+          context={selectTokenContext}
+          disabled={row.disabled}
+          disabledReason={row.disabledReason}
+        />
+      )
     case 'section-title': {
       const tooltip = row.tooltip?.trim() || undefined
       return (
@@ -30,11 +37,12 @@ export function TokenSearchRowRenderer({
       return (
         <ImportTokenItem
           token={row.token}
-          importToken={importToken}
+          importToken={row.hideImport ? undefined : importToken}
           shadowed={row.shadowed}
           wrapperId={row.wrapperId}
           isFirstInSection={row.isFirstInSection}
           isLastInSection={row.isLastInSection}
+          disabledReason={row.disabledReason}
         />
       )
     default: