chore: break up token list grouping

Author: kyleleighton

src/hooks/useTokenListGrouping.ts

@@ -0,0 +1,49 @@
+import { useMemo } from 'react';
+import type { Token } from 'config/tokens';
+import { amount as sdkAmount } from '@wormhole-foundation/sdk';
+import type { Balances } from 'utils/wallet';
+
+export function useTokenListGrouping({
+  sortedTokens,
+  opts,
+}: {
+  sortedTokens: Token[];
+  opts: {
+    isWalletConnected: boolean;
+    isGroupingEnabled: boolean;
+    balances: Balances;
+  };
+}): { listItems: Token[]; ownedCount: number } {
+  const { isWalletConnected, isGroupingEnabled, balances } = opts;
+
+  return useMemo(() => {
+    if (!isGroupingEnabled) {
+      return { listItems: sortedTokens, ownedCount: 0 };
+    }
+
+    const getHasPositiveBalance = (t: Token) => {
+      if (!isWalletConnected) return false;
+      const bal = balances?.[t.key]?.balance;
+      return bal != null && sdkAmount.units(bal) > 0n;
+    };
+
+    const native = sortedTokens.find((t) => t.isNativeGasToken);
+    const nativeKey = native?.key;
+
+    const ownedTokens = sortedTokens.filter(getHasPositiveBalance);
+    const ownedKeys = new Set(ownedTokens.map((t) => t.key));
+
+    const listItems = [
+      // 1) Owned
+      ...ownedTokens,
+      // 2) Native (only if not owned)
+      ...(native && nativeKey && !ownedKeys.has(nativeKey) ? [native] : []),
+      // 3) The rest
+      ...sortedTokens.filter(
+        (t) => !ownedKeys.has(t.key) && t.key !== nativeKey,
+      ),
+    ];
+
+    return { listItems, ownedCount: ownedTokens.length };
+  }, [sortedTokens, isGroupingEnabled, isWalletConnected, balances]);
+}

src/utils/index.ts

@@ -204,7 +204,13 @@ export const getUSDFormat = (price: number | undefined): string => {
   }
 
   if (price > 0 && price < 0.01) {
-    return '<$0.01';
+    // return '<$0.01';
+    return Intl.NumberFormat('en-EN', {
+      style: 'currency',
+      currency: 'USD',
+      maximumFractionDigits: 2,
+      minimumFractionDigits: 2,
+    }).format(price);
   }
 
   return Intl.NumberFormat('en-EN', {

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

@@ -14,7 +14,8 @@ 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';
+import TokenSectionHeader from './TokenSectionHeader';
+import { useTokenListGrouping } from 'hooks/useTokenListGrouping';
 
 type Props = {
   tokenList: Array<Token>;
@@ -124,36 +125,14 @@ const TokenList = (props: Props) => {
   const isGroupingEnabled = props.isSource && !props.searchQuery;
   const isWalletConnected = Boolean(props.wallet?.address);
 
-  const { listItems, ownedCount } = useMemo(() => {
-    if (!isGroupingEnabled) {
-      return { listItems: sortedTokens, ownedCount: 0 };
-    }
-
-    const hasPositiveBalance = (token: Token) => {
-      if (!isWalletConnected) {
-        return false;
-      }
-
-      const bal = props.balances?.[token.key]?.balance;
-      return Boolean(bal && sdkAmount.units(bal) > 0n);
-    };
-
-    const nativeToken = sortedTokens.find((token) => token.isNativeGasToken);
-    const ownedTokens = sortedTokens.filter(hasPositiveBalance);
-    const ownedSet = new Set(ownedTokens.map((t) => t.key));
-
-    const nativePart =
-      nativeToken && !ownedSet.has(nativeToken.key) ? [nativeToken] : [];
-
-    const rest = sortedTokens.filter(
-      (tok) =>
-        !ownedSet.has(tok.key) && (!nativeToken || tok.key !== nativeToken.key),
-    );
-
-    const listItems = [...ownedTokens, ...nativePart, ...rest];
-
-    return { listItems, ownedCount: ownedTokens.length };
-  }, [isGroupingEnabled, isWalletConnected, props.balances, sortedTokens]);
+  const { listItems, ownedCount } = useTokenListGrouping({
+    sortedTokens,
+    opts: {
+      isWalletConnected,
+      isGroupingEnabled,
+      balances: props.balances,
+    },
+  });
 
   const searchList = (
     <SearchableList<Token>
@@ -190,20 +169,11 @@ const TokenList = (props: Props) => {
 
         return (
           <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>
-            )}
+            <TokenSectionHeader
+              index={index}
+              ownedCount={ownedCount}
+              isGroupingEnabled={isGroupingEnabled}
+            />
             <TokenItem
               key={token.key}
               token={token}

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

@@ -0,0 +1,37 @@
+import { Box, useTheme } from '@mui/material';
+
+import { Typography } from '@mui/material';
+import React from 'react';
+
+const TokenSectionHeader = ({
+  index,
+  ownedCount,
+  isGroupingEnabled,
+}: {
+  index: number;
+  ownedCount: number;
+  isGroupingEnabled: boolean;
+}) => {
+  const theme = useTheme();
+
+  return (
+    <>
+      {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>
+      )}
+    </>
+  );
+};
+
+export default TokenSectionHeader;