[Redesign] Address the latest product feedback for the token list

Signed-off-by: Emre Bogazliyanlioglu <emre@wormholelabs.xyz>
wormhole-foundation · Sep 24, 2024 · e5db696 · e5db696
1 parent 32f7a70
commit e5db696
Showing 1 changed file with 36 additions and 51 deletions.
diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx
@@ -76,51 +76,20 @@ const TokenList = (props: Props) => {
     const tokenSet: Set<string> = new Set();
     const tokens: Array<TokenConfig> = [];
 
-    const addToken = (tokenConfig: TokenConfig) => {
-      // Get token balance
-      const tokenBalance = balances?.[tokenConfig.key]?.balance;
-      // Check "no balance" only when a wallet is connected
-      const noBalance =
-        props.wallet?.address && (!tokenBalance || Number(tokenBalance) === 0);
-
-      // Exclude frankenstein tokens with no balance
-      if (
-        isFrankensteinToken(tokenConfig, selectedChainConfig.key) &&
-        noBalance
-      ) {
-        return;
-      }
-
-      // Exclude wormhole-wrapped tokens with no balance
-      // unless it's canonical
-      if (
-        props.isSource &&
-        isWrappedToken(tokenConfig, selectedChainConfig.key) &&
-        !isCanonicalToken(tokenConfig, selectedChainConfig.key) &&
-        noBalance
-      ) {
-        return;
-      }
-
-      if (!tokenSet.has(tokenConfig.key)) {
-        tokenSet.add(tokenConfig.key);
-        tokens.push(tokenConfig);
-      }
-    };
-
     // First: Add previously selected token at the top of the list
-    if (selectedTokenConfig) {
-      addToken(selectedTokenConfig);
+    if (selectedTokenConfig && !tokenSet.has(selectedTokenConfig.key)) {
+      tokenSet.add(selectedTokenConfig.key);
+      tokens.push(selectedTokenConfig);
     }
 
     // Second: Add the wrapped token of the source token, if sourceToken is defined (meaning
     // this is being rendered with destination tokens).
     if (props.sourceToken) {
-      const sourceToken = config.tokens[props.sourceToken];
-      if (sourceToken) {
-        const destTokenKey = sourceToken.wrappedAsset;
+      const sourceTokenConfig = config.tokens[props.sourceToken];
+      if (sourceTokenConfig) {
+        const destTokenKey = sourceTokenConfig.wrappedAsset;
         if (destTokenKey) {
-          const destToken = props.tokenList?.find(
+          const destTokenConfig = props.tokenList?.find(
             (t) =>
               t.key === destTokenKey &&
               // Only add the wrapped token if it actually exists on the destination chain
@@ -129,31 +98,32 @@ const TokenList = (props: Props) => {
                 selectedChainConfig.key,
               ),
           );
-          if (destToken) {
-            addToken(destToken);
+          if (destTokenConfig && !tokenSet.has(destTokenConfig.key)) {
+            tokenSet.add(destTokenConfig.key);
+            tokens.push(destTokenConfig);
           }
         }
       }
     }
 
-    // Third: Add the native gas token, if not previously selected
+    // Third: Add the native gas token
     if (
       nativeTokenConfig &&
-      nativeTokenConfig.key !== selectedTokenConfig?.key
+      nativeTokenConfig.key !== selectedTokenConfig?.key &&
+      !tokenSet.has(nativeTokenConfig.key)
     ) {
-      addToken(nativeTokenConfig);
+      tokenSet.add(nativeTokenConfig.key);
+      tokens.push(nativeTokenConfig);
     }
 
     // Fourth: Add tokens with a balances in the connected wallet
     Object.entries(balances).forEach(([key, val]) => {
       if (val?.balance && Number(val.balance) > 0) {
         const tokenConfig = props.tokenList?.find((t) => t.key === key);
-        const tokenNotAdded = !tokens.find(
-          (addedToken) => addedToken.key === key,
-        );
 
-        if (tokenConfig && tokenNotAdded) {
-          addToken(tokenConfig);
+        if (tokenConfig && !tokenSet.has(tokenConfig.key)) {
+          tokenSet.add(tokenConfig.key);
+          tokens.push(tokenConfig);
         }
       }
     });
@@ -162,12 +132,27 @@ const TokenList = (props: Props) => {
     // fill up any remaining space from supported and non-Frankenstein tokens
     if (!props.isSource || !props.wallet?.address) {
       props.tokenList?.forEach((t) => {
+        // Check if previously added
+        if (tokenSet.has(t.key)) {
+          return;
+        }
+
+        // Exclude frankenstein tokens
+        if (isFrankensteinToken(t, selectedChainConfig.key)) {
+          return;
+        }
+
+        // Exclude wormhole-wrapped tokens, unless it's canonical
         if (
-          !tokenSet.has(t.key) &&
-          !isFrankensteinToken(t, selectedChainConfig.key)
+          props.isSource &&
+          isWrappedToken(t, selectedChainConfig.key) &&
+          !isCanonicalToken(t, selectedChainConfig.key)
         ) {
-          addToken(t);
+          return;
         }
+
+        tokenSet.add(t.key);
+        tokens.push(t);
       });
     }