chore: break up token list grouping

Author: kyleleighton

src/hooks/useTokenListGrouping.ts

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+
+import type { Token } from 'config/tokens';
+
+import { amount as sdkAmount } from '@wormhole-foundation/sdk';
+import type { Balances } from 'utils/wallet/types';
+
+export function useTokenListGrouping(
+  sortedTokens: Token[],
+  isWalletConnected: boolean,
+  isGroupingEnabled: boolean,
+  balances: Balances,
+): {
+  listItems: Token[];
+  ownedCount: number;
+} {
+  const { listItems, ownedCount } = useMemo(() => {
+    if (!isGroupingEnabled) {
+      return { listItems: sortedTokens, ownedCount: 0 };
+    }
+
+    const hasPositiveBalance = (token: Token) => {
+      if (!isWalletConnected) {
+        return false;
+      }
+
+      const bal = 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, balances, sortedTokens]);
+  return { listItems, ownedCount };
+}

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

@@ -15,6 +15,8 @@ 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 +126,12 @@ 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,
+    isWalletConnected,
+    isGroupingEnabled,
+    props.balances,
+  );
 
   const searchList = (
     <SearchableList<Token>
@@ -190,20 +168,12 @@ 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}
+              theme={theme}
+            />
             <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;