Show selected token at the top only for the network it's selected from (

#2890) * Show selected token at the top only for the network it's selected from Signed-off-by: Emre Bogazliyanlioglu <[email protected]> * Addressing the first round of feedback Signed-off-by: Emre Bogazliyanlioglu <[email protected]> --------- Signed-off-by: Emre Bogazliyanlioglu <[email protected]>
wormhole-foundation · Nov 1, 2024 · d599ec1 · d599ec1
1 parent 18f5118
commit d599ec1
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 17 deletions.
diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/TokenList.tsx
@@ -46,6 +46,7 @@ type Props = {
   isFetching?: boolean;
   selectedChainConfig: ChainConfig;
   selectedToken?: string;
+  selectedTokenChain?: string;
   sourceToken?: string;
   wallet: WalletData;
   onSelectToken: (key: string) => void;
@@ -63,21 +64,24 @@ const TokenList = (props: Props) => {
   );
 
   const sortedTokens = useMemo(() => {
-    const { selectedToken, selectedChainConfig } = props;
-
-    const selectedTokenConfig = selectedToken
-      ? config.tokens[selectedToken]
-      : undefined;
+    const selectedTokenConfig = props.tokenList?.find(
+      (t) => t.key === props.selectedToken,
+    );
 
     const nativeTokenConfig = props.tokenList?.find(
-      (t) => t.key === selectedChainConfig.gasToken,
+      (t) => t.key === props.selectedChainConfig.gasToken,
     );
 
     const tokenSet: Set<string> = new Set();
     const tokens: Array<TokenConfig> = [];
 
-    // First: Add previously selected token at the top of the list
-    if (selectedTokenConfig && !tokenSet.has(selectedTokenConfig.key)) {
+    // First: Add previously selected token at the top of the list,
+    // only if it's the selected token's chain
+    if (
+      selectedTokenConfig &&
+      props.selectedTokenChain === props.selectedChainConfig.key &&
+      !tokenSet.has(selectedTokenConfig.key)
+    ) {
       tokenSet.add(selectedTokenConfig.key);
       tokens.push(selectedTokenConfig);
     }
@@ -95,14 +99,14 @@ const TokenList = (props: Props) => {
               // Only add the wrapped token if it actually exists on the destination chain
               !!getTokenBridgeWrappedTokenAddressSync(
                 t,
-                selectedChainConfig.key,
+                props.selectedChainConfig.key,
               ),
           );
 
           if (
             destTokenConfig &&
             !tokenSet.has(destTokenConfig.key) &&
-            !isFrankensteinToken(destTokenConfig, selectedChainConfig.key)
+            !isFrankensteinToken(destTokenConfig, props.selectedChainConfig.key)
           ) {
             tokenSet.add(destTokenConfig.key);
             tokens.push(destTokenConfig);
@@ -143,15 +147,15 @@ const TokenList = (props: Props) => {
         }
 
         // Exclude frankenstein tokens
-        if (isFrankensteinToken(t, selectedChainConfig.key)) {
+        if (isFrankensteinToken(t, props.selectedChainConfig.key)) {
           return;
         }
 
         // Exclude wormhole-wrapped tokens, unless it's canonical
         if (
           props.isSource &&
-          isWrappedToken(t, selectedChainConfig.key) &&
-          !isCanonicalToken(t, selectedChainConfig.key)
+          isWrappedToken(t, props.selectedChainConfig.key) &&
+          !isCanonicalToken(t, props.selectedChainConfig.key)
         ) {
           return;
         }
@@ -162,15 +166,25 @@ const TokenList = (props: Props) => {
     }
 
     return tokens;
-  }, [balances, props.tokenList, props.sourceToken]);
+  }, [
+    balances,
+    props.tokenList,
+    props.selectedChainConfig.key,
+    props.selectedChainConfig.gasToken,
+    props.sourceToken,
+    props.isSource,
+    props.wallet?.address,
+    props.selectedToken,
+    props.selectedTokenChain,
+  ]);
 
   const noTokensMessage = useMemo(
     () => (
       <Typography variant="body2" color={theme.palette.grey.A400}>
         No supported tokens found in wallet
       </Typography>
     ),
-    [],
+    [theme.palette.grey.A400],
   );
 
   const shouldShowEmptyMessage =

diff --git a/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx b/wormhole-connect/src/views/v2/Bridge/AssetPicker/index.tsx
@@ -78,6 +78,7 @@ type Props = {
 
 const AssetPicker = (props: Props) => {
   const [showChainSearch, setShowChainSearch] = useState(false);
+  const [selectedTokenChain, setSelectedTokenChain] = useState('');
   const { classes } = useStyles();
 
   const popupState = usePopupState({
@@ -108,6 +109,8 @@ const AssetPicker = (props: Props) => {
         props.setChain(firstAllowedChain.key);
       }
     }
+    // Re-run only when popup state changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [popupState.isOpen]);
 
   const chainConfig: ChainConfig | undefined = useMemo(() => {
@@ -141,7 +144,7 @@ const AssetPicker = (props: Props) => {
         <TokenIcon icon={tokenConfig?.icon} height={48} />
       </Badge>
     );
-  }, [chainConfig, tokenConfig]);
+  }, [chainConfig, classes.chainBadge, tokenConfig?.icon]);
 
   const selection = useMemo(() => {
     if (!chainConfig && !tokenConfig) {
@@ -162,7 +165,7 @@ const AssetPicker = (props: Props) => {
         </Typography>
       </div>
     );
-  }, [props.chain, props.token]);
+  }, [chainConfig, tokenConfig]);
 
   return (
     <>
@@ -211,10 +214,12 @@ const AssetPicker = (props: Props) => {
             isFetching={props.isFetching}
             selectedChainConfig={chainConfig}
             selectedToken={props.token}
+            selectedTokenChain={selectedTokenChain}
             sourceToken={props.sourceToken}
             wallet={props.wallet}
             onSelectToken={(key: string) => {
               props.setToken(key);
+              setSelectedTokenChain(chainConfig.key);
               popupState.close();
             }}
             isSource={props.isSource}