perf: Speed up the creation of the token list for Predict withdraw (#27735)

## **Description**

This speeds up the withdraw token-selection path by moving the allowlist
filter earlier in the pipeline.

Before this change, withdraw flows loaded the full token catalog, built
`AssetType`s for all matching catalog entries, sorted the full result,
and only then filtered down to the small allowlisted set we actually
care about. This change adds a `tokenFilter` hook parameter so
`useAccountTokens` can skip irrelevant catalog entries before building
them, and `useWithdrawTokenFilter` passes the withdraw allowlist down to
that lower-level loop.

It also keeps the existing post-filter in place for correctness, so
allowlisted tokens already owned by the user and native-token address
mapping still work as before.

Local dev measurements while opening **Predict Withdraw**:

| Metric | Before | After |
| --- | ---: | ---: |
| `useAccountTokens` | 954-1,143ms | 41-48ms |
| Catalog tokens built | 18,524 | 0 |
| Total tokens sorted | 18,618 | 15 |

This brings the measured token-loading path from roughly `~1.05s` down
to `~44ms` (`~24x` faster).

## **Changelog**

CHANGELOG entry: Improved performance when loading Predict withdraw
token selection

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/CONF-1054

## **Manual testing steps**
1. Open Predict Withdraw, it will load much faster now



<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Medium risk because it changes how withdraw token lists are
constructed and filtered, which could inadvertently hide valid tokens if
chainId/address normalization or `assetId` handling is wrong. Scope is
limited to token-selection hooks and is covered by updated/added unit
tests.
> 
> **Overview**
> Speeds up Predict Withdraw token selection by pushing the withdraw
allowlist filter down into token collection, avoiding building/sorting
the full token catalog before narrowing to allowlisted entries.
> 
> This introduces an optional `tokenFilter(chainId, address)` plumbed
from `useWithdrawTokenFilter` → `useSendTokens` → `useAccountTokens`,
and replaces the previous post-filtering in `useWithdrawTokenFilter`
with a precomputed allowlist lookup that also maps zero-address entries
to chain-specific native token addresses.
> 
> Tests are updated to assert `useSendTokens` is called with the new
filtering options and to validate `tokenFilter` behavior
(case-insensitive matching, chain gating, and native-token mapping),
plus new `useAccountTokens` coverage ensuring both owned assets and
catalog token building respect `tokenFilter`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
b8e1cc7. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Signed-off-by: dan437 <80175477+dan437@users.noreply.github.com>

Author: dan437

app/components/Views/confirmations/hooks/pay/useWithdrawTokenFilter.test.ts

@@ -8,6 +8,7 @@ import { otherControllersMock } from '../../__mocks__/controllers/other-controll
 import { TransactionType } from '@metamask/transaction-controller';
 import { AssetType, TokenStandard } from '../../types/token';
 import { EthAccountType } from '@metamask/keyring-api';
+import { getNativeTokenAddress } from '@metamask/assets-controllers';
 import { useSendTokens } from '../send/useSendTokens';
 
 jest.mock('../send/useSendTokens');
@@ -133,7 +134,7 @@ describe('useWithdrawTokenFilter', () => {
     expect(result.current(input)).toBe(input);
   });
 
-  it('filters useSendTokens result to only those matching the allowlist', () => {
+  it('returns allTokens from useSendTokens for withdraw with allowlist', () => {
     const { result } = runHook({
       type: TransactionType.predictWithdraw,
       postQuoteFlags: {
@@ -144,189 +145,119 @@ describe('useWithdrawTokenFilter', () => {
       },
     });
 
-    const filtered = result.current([]);
+    const returned = result.current([]);
 
-    expect(filtered).toHaveLength(1);
-    expect(filtered[0].address).toBe('0xaaa');
-    expect(filtered[0].balance).toBe('1.0');
+    expect(returned).toBe(ALL_TOKENS_MOCK);
   });
 
-  it('includes zero-balance tokens from useSendTokens that match the allowlist', () => {
-    const { result } = runHook({
-      type: TransactionType.predictWithdraw,
-      postQuoteFlags: {
-        default: {
-          enabled: true,
-          tokens: { '0x1': ['0xaaa', '0xddd'] },
-        },
-      },
-    });
-
-    const filtered = result.current([]);
+  it('calls useSendTokens without full catalog options for non-withdraw transactions', () => {
+    runHook({ type: TransactionType.simpleSend });
 
-    expect(filtered).toHaveLength(2);
-    expect(filtered[0].address).toBe('0xaaa');
-    expect(filtered[1].address).toBe('0xDDD');
-    expect(filtered[1].name).toBe('Catalog Token');
-    expect(filtered[1].balance).toBe('0');
+    expect(mockUseSendTokens).toHaveBeenCalledWith({
+      includeNoBalance: false,
+      includeAllTokens: false,
+      tokenFilter: undefined,
+    });
   });
 
-  it('uses override allowlist when override key matches transaction type', () => {
-    const { result } = runHook({
+  it('calls useSendTokens without full catalog options when withdraw allowlist is missing', () => {
+    runHook({
       type: TransactionType.predictWithdraw,
       postQuoteFlags: {
-        default: {
-          enabled: true,
-          tokens: { '0x1': ['0xaaa'] },
-        },
-        overrides: {
-          predictWithdraw: {
-            enabled: true,
-            tokens: { '0x1': ['0xbbb'] },
-          },
-        },
+        default: { enabled: true },
       },
     });
 
-    const filtered = result.current([]);
-
-    expect(filtered).toHaveLength(1);
-    expect(filtered[0].address).toBe('0xbbb');
+    expect(mockUseSendTokens).toHaveBeenCalledWith({
+      includeNoBalance: false,
+      includeAllTokens: false,
+      tokenFilter: undefined,
+    });
   });
 
-  it('override tokens replace default tokens for same property', () => {
-    const { result } = runHook({
+  it('calls useSendTokens with full catalog options and tokenFilter when withdraw allowlist is present', () => {
+    runHook({
       type: TransactionType.predictWithdraw,
       postQuoteFlags: {
-        default: {
-          enabled: true,
-          tokens: { '0x1': ['0xaaa'], '0x89': ['0xccc'] },
-        },
-        overrides: {
-          predictWithdraw: {
-            enabled: true,
-            tokens: { '0x89': ['0xccc'] },
-          },
-        },
+        default: { enabled: true, tokens: { '0x1': ['0xaaa'] } },
       },
     });
 
-    const filtered = result.current([]);
-
-    expect(filtered).toHaveLength(1);
-    expect(filtered[0].address).toBe('0xccc');
-    expect(filtered[0].chainId).toBe('0x89');
+    expect(mockUseSendTokens).toHaveBeenCalledWith({
+      includeNoBalance: true,
+      includeAllTokens: true,
+      tokenFilter: expect.any(Function),
+    });
   });
 
-  it('falls back to default tokens when override has no tokens property', () => {
-    const { result } = runHook({
+  it('passes a tokenFilter that matches allowlisted chainId and address', () => {
+    runHook({
       type: TransactionType.predictWithdraw,
       postQuoteFlags: {
-        default: {
-          enabled: true,
-          tokens: { '0x1': ['0xaaa'] },
-        },
-        overrides: {
-          predictWithdraw: { enabled: false },
-        },
+        default: { enabled: true, tokens: { '0x1': ['0xaaa', '0xbbb'] } },
       },
     });
 
-    const filtered = result.current([]);
+    const args = mockUseSendTokens.mock.calls[0]?.[0] ?? {};
+    const filter = args.tokenFilter;
 
-    expect(filtered).toHaveLength(1);
-    expect(filtered[0].address).toBe('0xaaa');
+    expect(filter).toBeDefined();
+    expect(filter?.('0x1', '0xaaa')).toBe(true);
+    expect(filter?.('0x1', '0xbbb')).toBe(true);
+    expect(filter?.('0x1', '0xccc')).toBe(false);
+    expect(filter?.('0x89', '0xaaa')).toBe(false);
   });
 
-  it('matches native token via zero address in allowlist', () => {
-    const { result } = runHook({
+  it('passes a tokenFilter that matches case-insensitively', () => {
+    runHook({
       type: TransactionType.predictWithdraw,
       postQuoteFlags: {
-        default: {
-          enabled: true,
-          tokens: {
-            '0x1': ['0x0000000000000000000000000000000000000000', '0xaaa'],
-          },
-        },
+        default: { enabled: true, tokens: { '0x1': ['0xAAA'] } },
       },
     });
 
-    const filtered = result.current([]);
+    const args = mockUseSendTokens.mock.calls[0]?.[0] ?? {};
+    const filter = args.tokenFilter;
 
-    expect(filtered).toHaveLength(2);
-    expect(filtered[0].address).toBe('0xaaa');
-    expect(filtered[1].isNative).toBe(true);
-    expect(filtered[1].symbol).toBe('ETH');
+    expect(filter).toBeDefined();
+    expect(filter?.('0x1', '0xaaa')).toBe(true);
+    expect(filter?.('0X1', '0xAAA')).toBe(true);
   });
 
-  it('excludes tokens not in allowlist', () => {
-    const { result } = runHook({
+  it('passes a tokenFilter that returns false for chains not in allowlist', () => {
+    runHook({
       type: TransactionType.predictWithdraw,
       postQuoteFlags: {
-        default: {
-          enabled: true,
-          tokens: { '0x1': ['0xaaa', '0xzzz'] },
-        },
+        default: { enabled: true, tokens: { '0x1': ['0xaaa'] } },
       },
     });
 
-    const filtered = result.current([]);
+    const args = mockUseSendTokens.mock.calls[0]?.[0] ?? {};
+    const filter = args.tokenFilter;
 
-    expect(filtered).toHaveLength(1);
-    expect(filtered[0].address).toBe('0xaaa');
+    expect(filter).toBeDefined();
+    expect(filter?.('0x999', '0xaaa')).toBe(false);
   });
 
-  it('matches chain ID case-insensitively', () => {
-    const { result } = runHook({
+  it('passes a tokenFilter that matches native tokens via zero address in allowlist', () => {
+    runHook({
       type: TransactionType.predictWithdraw,
       postQuoteFlags: {
         default: {
           enabled: true,
-          tokens: { '0x89': ['0xccc'] },
+          tokens: {
+            '0x89': ['0x0000000000000000000000000000000000000000'],
+          },
         },
       },
     });
 
-    const filtered = result.current([]);
-
-    expect(filtered).toHaveLength(1);
-    expect(filtered[0].address).toBe('0xccc');
-  });
-
-  it('calls useSendTokens without full catalog options for non-withdraw transactions', () => {
-    runHook({ type: TransactionType.simpleSend });
-
-    expect(mockUseSendTokens).toHaveBeenCalledWith({
-      includeNoBalance: false,
-      includeAllTokens: false,
-    });
-  });
+    const args = mockUseSendTokens.mock.calls[0]?.[0] ?? {};
+    const filter = args.tokenFilter;
+    const nativeAddress = getNativeTokenAddress('0x89');
 
-  it('calls useSendTokens without full catalog options when withdraw allowlist is missing', () => {
-    runHook({
-      type: TransactionType.predictWithdraw,
-      postQuoteFlags: {
-        default: { enabled: true },
-      },
-    });
-
-    expect(mockUseSendTokens).toHaveBeenCalledWith({
-      includeNoBalance: false,
-      includeAllTokens: false,
-    });
-  });
-
-  it('calls useSendTokens with full catalog options when withdraw allowlist is present', () => {
-    runHook({
-      type: TransactionType.predictWithdraw,
-      postQuoteFlags: {
-        default: { enabled: true, tokens: { '0x1': ['0xaaa'] } },
-      },
-    });
-
-    expect(mockUseSendTokens).toHaveBeenCalledWith({
-      includeNoBalance: true,
-      includeAllTokens: true,
-    });
+    expect(filter).toBeDefined();
+    expect(filter?.('0x89', nativeAddress)).toBe(true);
+    expect(filter?.('0x89', '0xrandom')).toBe(false);
   });
 });

app/components/Views/confirmations/hooks/pay/useWithdrawTokenFilter.ts

@@ -29,58 +29,58 @@ export function useWithdrawTokenFilter(): (tokens: AssetType[]) => AssetType[] {
   );
   const allowlist = config.tokens;
   const shouldLoadFullTokenCatalog = isWithdraw && Boolean(allowlist);
+
+  const tokenFilter = useMemo(() => {
+    if (!allowlist) {
+      return undefined;
+    }
+    const lookup = buildAllowlistLookup(allowlist);
+    return (chainId: string, address: string) =>
+      lookup.get(chainId.toLowerCase())?.has(address.toLowerCase()) ?? false;
+  }, [allowlist]);
+
   const allTokens = useSendTokens({
     includeNoBalance: shouldLoadFullTokenCatalog,
     includeAllTokens: shouldLoadFullTokenCatalog,
+    tokenFilter,
   });
 
-  const filtered = useMemo(() => {
-    if (!shouldLoadFullTokenCatalog || !allowlist) {
-      return undefined;
-    }
-    return allTokens.filter((token) => isAllowlisted(token, allowlist));
-  }, [allTokens, allowlist, shouldLoadFullTokenCatalog]);
-
   return useCallback(
     (tokens: AssetType[]): AssetType[] => {
-      if (!isWithdraw || !filtered) {
+      if (!isWithdraw || !shouldLoadFullTokenCatalog) {
         return tokens;
       }
-      return filtered;
+      return allTokens;
     },
-    [isWithdraw, filtered],
+    [isWithdraw, shouldLoadFullTokenCatalog, allTokens],
   );
 }
 
-function isAllowlisted(
-  token: AssetType,
+/**
+ * Pre-computes a Map<chainId, Set<address>> from the allowlist for O(1) lookups.
+ * Expands zero-address entries to also include the chain-specific native address.
+ */
+function buildAllowlistLookup(
   allowlist: Record<Hex, Hex[]>,
-): boolean {
-  const chainId = token.chainId?.toLowerCase() as Hex | undefined;
-  if (!chainId) {
-    return false;
-  }
+): Map<string, Set<string>> {
+  const lookup = new Map<string, Set<string>>();
 
-  const allowlistKey = Object.keys(allowlist).find(
-    (key) => key.toLowerCase() === chainId,
-  ) as Hex | undefined;
-  const addresses = allowlistKey ? allowlist[allowlistKey] : undefined;
-  if (!addresses) {
-    return false;
-  }
+  for (const [chainId, addresses] of Object.entries(allowlist)) {
+    const lowerChainId = chainId.toLowerCase();
+    const addressSet = new Set<string>();
 
-  const tokenAddr = token.address?.toLowerCase();
-  return addresses.some((allowed) => {
-    const allowedLower = allowed.toLowerCase();
-    if (tokenAddr === allowedLower) {
-      return true;
-    }
-    // Allowlist may use 0x000…000 for native tokens while the token list
-    // uses the chain-specific native address (e.g. 0x…1010 on Polygon).
-    if (isNativeAddress(allowedLower)) {
-      const nativeAddr = getNativeTokenAddress(chainId);
-      return tokenAddr === nativeAddr.toLowerCase();
+    for (const addr of addresses) {
+      const lowerAddr = addr.toLowerCase();
+      addressSet.add(lowerAddr);
+
+      if (isNativeAddress(lowerAddr)) {
+        const nativeAddr = getNativeTokenAddress(lowerChainId as Hex);
+        addressSet.add(nativeAddr.toLowerCase());
+      }
     }
-    return false;
-  });
+
+    lookup.set(lowerChainId, addressSet);
+  }
+
+  return lookup;
 }