feat: Prioritize same tokens for both source and dest token selections

src/hooks/useTokenList.ts

@@ -19,6 +19,7 @@ interface UseTokenListParams {
   selectedChainConfig: ChainConfig;
   selectedToken?: Token;
   sourceToken?: Token;
+  destToken?: Token;
   wallet: WalletData;
   balances: Balances;
   isSourceList?: boolean; // true for source tokens, false for destination tokens
@@ -30,6 +31,7 @@ export const useTokenList = ({
   selectedChainConfig,
   selectedToken,
   sourceToken,
+  destToken,
   wallet,
   balances,
   isSourceList = false,
@@ -42,12 +44,17 @@ export const useTokenList = ({
     // Apply search input - find tokens with exact match of address, or partial match of symbol
     let tokens = applyTokenSearch(tokenList, searchQuery, selectedChainConfig);
 
+    // For bidirectional symbol matching: use opposite side's token
+    // Source list shows tokens matching dest token's symbol at top
+    // Dest list shows tokens matching source token's symbol at top
+    const oppositeToken = isSourceList ? destToken : sourceToken;
+
     tokens = sortTokensByPreference(
       tokens,
       selectedToken,
       balances,
       getTokenPrice,
-      sourceToken,
+      oppositeToken,
     );
 
     // Apply token whitelist filtering if configured
@@ -75,5 +82,6 @@ export const useTokenList = ({
     lastTokenPriceUpdate,
     isSourceList,
     sourceToken,
+    destToken,
   ]);
 };

src/utils/tokenListUtils.ts

@@ -19,17 +19,17 @@ import type { Balances } from './wallet/types';
 export const getTokenPreferenceScore = (
   token: Token,
   selectedToken?: Token,
-  sourceToken?: Token,
+  oppositeToken?: Token,
 ): number => {
   // Currently selected token should be shown first
   if (selectedToken && isSameToken(selectedToken, token)) {
     return 5;
   }
-  // For destination picker: prioritize tokens with same symbol as source token
-  // Only prioritize native (non-wrapped) destination tokens
+  // Prioritize tokens with same symbol as the opposite side's token
+  // Exclude Wormhole-wrapped tokens from this preference
   if (
-    sourceToken &&
-    token.symbol === sourceToken.symbol &&
+    oppositeToken &&
+    token.symbol === oppositeToken.symbol &&
     !token.isTokenBridgeWrappedToken
   ) {
     return 4;
@@ -100,11 +100,11 @@ export const sortTokensByPreference = (
   selectedToken: Token | undefined,
   balances: Balances,
   getTokenPrice: (token: Token) => number | undefined,
-  sourceToken?: Token,
+  oppositeToken?: Token,
 ): Token[] => {
   return tokens.sort((a, b) => {
-    const scoreA = getTokenPreferenceScore(a, selectedToken, sourceToken);
-    const scoreB = getTokenPreferenceScore(b, selectedToken, sourceToken);
+    const scoreA = getTokenPreferenceScore(a, selectedToken, oppositeToken);
+    const scoreB = getTokenPreferenceScore(b, selectedToken, oppositeToken);
     if (scoreA > scoreB) return -1;
     if (scoreB > scoreA) return 1;
 

src/views/v3/Bridge/AssetPicker/index.tsx

@@ -42,6 +42,7 @@ type Props = {
   chainList: Array<ChainConfig>;
   token?: Token;
   sourceToken?: Token;
+  destToken?: Token;
   tokenList?: Array<Token> | undefined;
   isFetchingQuotes?: boolean;
   isFetchingTokens?: boolean;
@@ -87,6 +88,7 @@ function AssetPicker(props: Props) {
     selectedChainConfig: props.chain ? config.chains[props.chain] : ({} as any),
     selectedToken: props.token,
     sourceToken: props.sourceToken,
+    destToken: props.destToken,
     wallet: props.wallet,
     balances: props.balances,
     isSourceList: props.isSource, // true for source, false for destination

src/views/v3/Bridge/index.tsx

@@ -540,6 +540,7 @@ function Bridge(props: BridgeProps) {
                 chain={sourceChain}
                 chainList={supportedSourceChains}
                 token={sourceToken}
+                destToken={destToken}
                 tokenList={sourceTokens}
                 setChain={handleSourceChainChange}
                 setToken={handleSourceTokenChange}