feat: show all tokens in source

kyleleighton · kyleleighton · commit 0b084d165602 · 2025-09-04T08:40:49.000-06:00
diff --git a/src/components/TokenBalance.tsx b/src/components/TokenBalance.tsx
@@ -5,12 +5,10 @@ import { useTheme } from '@mui/material/styles';
 
 const TokenBalance = ({
   balance,
-  isSource,
   isFetching,
   price,
 }: {
   balance: sdkAmount.Amount | null;
-  isSource?: boolean;
   isFetching?: boolean;
   price?: string | null;
 }) => {
@@ -26,8 +24,8 @@ const TokenBalance = ({
     );
   }
 
-  const shouldHideBalance =
-    !isSource && balance && sdkAmount.display(balance) === '0';
+  // Hide 0 / $0 for both source and destination lists
+  const shouldHideBalance = !balance || sdkAmount.display(balance) === '0';
 
   return (
     <Stack alignItems="flex-end">
diff --git a/src/hooks/useTokenList.ts b/src/hooks/useTokenList.ts
@@ -9,7 +9,6 @@ import {
   sortTokensByPreference,
   applyTokenWhitelist,
   applyCustomTokenSupport,
-  filterTokensByBalance,
   applyShittokenFilter,
 } from 'utils/tokenListUtils';
 import config from 'config';
@@ -62,13 +61,6 @@ export const useTokenList = ({
       tokens = applyShittokenFilter(tokens);
     }
 
-    // Filter by balance for source tokens when not searching
-    // This allows users to search for zero-balance tokens by contract address if needed
-    // Never filter destination tokens by balance
-    if (isSourceList && !searchQuery) {
-      tokens = filterTokensByBalance(tokens, balances, wallet.address);
-    }
-
     return tokens;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [
diff --git a/src/hooks/useTokenListWithSearch.ts b/src/hooks/useTokenListWithSearch.ts
@@ -12,7 +12,6 @@ import type { Token } from 'config/tokens';
 import config from 'config';
 import { useTokens } from 'contexts/TokensContext';
 import { getTokenSymbol } from 'utils';
-import { filterTokensByBalance } from 'utils/tokenListUtils';
 import type { Balances } from 'utils/wallet/types';
 import { unionBy } from 'es-toolkit';
 
@@ -140,11 +139,6 @@ export const useTokenListWithSearch = ({
       });
     }
 
-    // Filter by balance for source tokens when not searching
-    if (isSource && !deferredSearch) {
-      tokens = filterTokensByBalance(tokens, balances, walletAddress);
-    }
-
     // For destination token list in same-chain swaps, filter out the source token
     if (!isSource && isSameChainSwap && sourceToken) {
       tokens = tokens.filter(
@@ -161,8 +155,6 @@ export const useTokenListWithSearch = ({
     isSource,
     isSameChainSwap,
     sourceToken,
-    balances,
-    walletAddress,
   ]);
 
   const tokenPrices = useMemo(
diff --git a/src/views/v2/Bridge/AssetPicker/TokenItem.tsx b/src/views/v2/Bridge/AssetPicker/TokenItem.tsx
@@ -153,7 +153,6 @@ function TokenItem(props: TokenItemProps) {
       <TokenBalance
         balance={props.balance}
         price={props.price}
-        isSource={props.isSource}
         isFetching={props.isFetchingBalance}
       />
     </ListItemButton>
diff --git a/src/views/v3/Bridge/AssetPicker/TokenItem.tsx b/src/views/v3/Bridge/AssetPicker/TokenItem.tsx
@@ -27,6 +27,7 @@ type TokenItemProps = {
   isSelected?: boolean;
   isFetchingBalance?: boolean;
   isSource?: boolean;
+  dimmed?: boolean;
 };
 
 function TokenItem(props: TokenItemProps) {
@@ -79,6 +80,7 @@ function TokenItem(props: TokenItemProps) {
       sx={{
         ...styles.tokenListItem,
         ...(props.isSelected && styles.tokenListItemSelected),
+        ...(props.dimmed ? { opacity: 0.6 } : {}),
       }}
       dense
       data-testid={`token-button-${chain.toLowerCase()}-${token.address.toString()}`}
@@ -154,7 +156,6 @@ function TokenItem(props: TokenItemProps) {
       <TokenBalance
         balance={props.balance}
         price={props.price}
-        isSource={props.isSource}
         isFetching={props.isFetchingBalance}
       />
     </ListItemButton>
diff --git a/src/views/v3/Bridge/AssetPicker/TokenList.tsx b/src/views/v3/Bridge/AssetPicker/TokenList.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { Fragment, useMemo } from 'react';
 import { Box, Card, CardContent, Skeleton, useTheme } from '@mui/material';
 import CircularProgress from '@mui/material/CircularProgress';
 import ListItemButton from '@mui/material/ListItemButton';
@@ -14,6 +14,7 @@ import config from 'config';
 import { useTokens } from 'contexts/TokensContext';
 import type { Balances } from 'utils/wallet/types';
 import { useTokenListWithSearch } from 'hooks/useTokenListWithSearch';
+import { amount as sdkAmount } from '@wormhole-foundation/sdk';
 
 type Props = {
   tokenList: Array<Token>;
@@ -102,11 +103,6 @@ const TokenList = (props: Props) => {
 
   // Determine the current state of the token list
   const listState = useMemo(() => {
-    // For source list, require wallet to show balances/tokens from wallet
-    if (props.isSource && !props.wallet?.address && !props.isConnectingWallet) {
-      return 'empty';
-    }
-
     // Currently fetching initial data
     if (props.isFetching) {
       return 'loading';
@@ -130,27 +126,49 @@ const TokenList = (props: Props) => {
   const shouldShowLoadingState = listState === 'loading';
   const shouldShowEmptyMessage = listState === 'empty';
 
+  // Build sectioned list for source picker when not searching
+  const isGroupingEnabled = props.isSource && !props.searchQuery;
+
+  const { itemsForRender, ownedCount } = useMemo(() => {
+    if (!isGroupingEnabled) {
+      return { itemsForRender: sortedTokens, ownedCount: 0 };
+    }
+
+    const hasPositiveBalance = (token: Token) => {
+      const bal = props.balances?.[token.key]?.balance;
+      return !!(bal && sdkAmount.units(bal) > 0n);
+    };
+
+    const nativeToken = sortedTokens.find((token) => token.isNativeGasToken);
+    const ownedTokens = sortedTokens.filter((tok) => hasPositiveBalance(tok));
+    const ownedSet = new Set(ownedTokens.map((token) => token.key));
+
+    const items: Token[] = [];
+    // Owned tokens first, preserving order from sortedTokens
+    items.push(...ownedTokens);
+
+    // Include native gas token next if not owned and exists
+    if (nativeToken && !ownedSet.has(nativeToken.key)) {
+      items.push(nativeToken);
+    }
+
+    // Then the rest
+    for (const token of sortedTokens) {
+      if (ownedSet.has(token.key)) continue;
+      if (nativeToken && token.key === nativeToken.key) continue;
+      items.push(token);
+    }
+
+    return { itemsForRender: items, ownedCount: ownedTokens.length };
+  }, [isGroupingEnabled, props.balances, sortedTokens]);
+
   const searchList = (
     <SearchableList<Token>
       searchPlaceholder={placeholder}
       sx={styles.tokenList}
       dataTestId="token-search-list"
       searchQuery={props.searchQuery}
-      listTitle={
-        shouldShowEmptyMessage ? (
-          emptyMessage
-        ) : (
-          <Box display="flex" width="100%">
-            <Typography
-              style={{ flexGrow: '2' }}
-              fontSize={14}
-              color={theme.palette.text.secondary}
-            >
-              Tokens on {props.selectedChainConfig.displayName}
-            </Typography>
-          </Box>
-        )
-      }
+      listTitle={shouldShowEmptyMessage ? emptyMessage : ''}
       loading={
         shouldShowLoadingState &&
         [1, 2, 3].map((x) => (
@@ -161,32 +179,51 @@ const TokenList = (props: Props) => {
           </ListItemButton>
         ))
       }
-      items={sortedTokens}
+      items={itemsForRender}
       onQueryChange={(query) => {
         props.onSearchQueryChange(query);
       }}
-      renderFn={(token: Token) => {
+      renderFn={(token: Token, index: number) => {
         const balance = props.balances?.[token.key]?.balance;
         const tokenPrice = tokenPrices.get(token.key);
         const price =
           balance && tokenPrice !== undefined
             ? getUSDFormat(calculateUSDPriceRaw(tokenPrice, balance, token))
             : null;
 
+        const isRestSection = isGroupingEnabled && index >= ownedCount;
+
         return (
-          <TokenItem
-            key={token.key}
-            token={token}
-            chain={props.selectedChainConfig.sdkName}
-            onClick={() => {
-              props.onSelectToken(token);
-            }}
-            isSource={props.isSource}
-            balance={balance}
-            price={price}
-            isSelected={token.key === props.selectedToken?.key}
-            isFetchingBalance={props.isFetchingBalances}
-          />
+          <Fragment key={token.key}>
+            {isGroupingEnabled && index === 0 && ownedCount > 0 && (
+              <Box sx={{ padding: '4px 16px' }}>
+                <Typography fontSize={14} color={theme.palette.text.secondary}>
+                  Your tokens
+                </Typography>
+              </Box>
+            )}
+            {isGroupingEnabled && index === ownedCount && (
+              <Box sx={{ padding: '4px 16px' }}>
+                <Typography fontSize={14} color={theme.palette.text.secondary}>
+                  All tokens
+                </Typography>
+              </Box>
+            )}
+            <TokenItem
+              key={token.key}
+              token={token}
+              chain={props.selectedChainConfig.sdkName}
+              onClick={() => {
+                props.onSelectToken(token);
+              }}
+              isSource={props.isSource}
+              balance={balance}
+              price={price}
+              isSelected={token.key === props.selectedToken?.key}
+              isFetchingBalance={props.isFetchingBalances}
+              dimmed={isRestSection}
+            />
+          </Fragment>
         );
       }}
     />
@@ -196,9 +233,6 @@ const TokenList = (props: Props) => {
     <Card sx={styles.card} variant="elevation">
       <CardContent sx={styles.tokenListContainer}>
         <Box sx={{ display: 'flex', padding: '0 16px' }}>
-          <Typography width="100%" sx={styles.title}>
-            Select a token
-          </Typography>
           {isFetchingToken || props.isFetchingBalances ? (
             <CircularProgress
               sx={{ alignSelf: 'flex-end', marginBottom: '12px' }}
