From 5c540a4141ed7382db7ffb8e6c82de2ebad3eb19 Mon Sep 17 00:00:00 2001
From: Micaela Estabillo <micaela.estabillo@consensys.net>
Date: Thu, 8 Aug 2024 16:09:46 -0700
Subject: [PATCH] chore: pass filter predicate to filteredTokensGenerator

---
 .../asset-picker-modal/asset-picker-modal.tsx | 96 +++++++++----------
 1 file changed, 48 insertions(+), 48 deletions(-)

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx
index 105fafb8a514..8b94166479af 100644
--- a/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx
+++ b/ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx
@@ -82,7 +82,7 @@ type AssetPickerModalProps = {
    * by a custom order.
    */
   customTokenListGenerator?: (
-    filterPredicate: (token: ERC20Asset | NativeAsset) => boolean,
+    filterPredicate: (symbol: string, address?: string) => boolean,
   ) => Generator<
     AssetWithDisplayData<NativeAsset> | AssetWithDisplayData<ERC20Asset>
   >;
@@ -173,8 +173,10 @@ export function AssetPickerModal({
     );
   }, [tokensWithBalances, tokens]);
 
-  const sortedTokenListGenerator = useCallback(
-    function* (): Generator<
+  const tokenListGenerator = useCallback(
+    function* (
+      shouldAddToken: (symbol: string, address?: null | string) => boolean,
+    ): Generator<
       | AssetWithDisplayData<NativeAsset>
       | ((Token | TokenListToken) & {
           balance?: string;
@@ -191,18 +193,22 @@ export function AssetPickerModal({
         type: AssetType.native,
       };
 
-      yield nativeToken;
+      if (shouldAddToken(nativeToken.symbol, nativeToken.address)) {
+        yield nativeToken;
+      }
 
       const blockedTokens = [];
 
       for (const token of memoizedUsersTokens) {
-        yield token;
+        if (shouldAddToken(token.symbol, token.address)) {
+          yield token;
+        }
       }
 
       // topTokens should already be sorted by popularity
       for (const address of Object.keys(topTokens)) {
         const token = tokenList?.[address];
-        if (token) {
+        if (token && shouldAddToken(token.symbol, token.address)) {
           if (getIsDisabled(token)) {
             blockedTokens.push(token);
             continue;
@@ -213,7 +219,9 @@ export function AssetPickerModal({
       }
 
       for (const token of Object.values(tokenList)) {
-        yield token;
+        if (shouldAddToken(token.symbol, token.address)) {
+          yield token;
+        }
       }
 
       for (const token of blockedTokens) {
@@ -239,47 +247,38 @@ export function AssetPickerModal({
     // undefined would be the native token address
     const filteredTokensAddresses = new Set<string | undefined>();
 
-    // If filteredTokensGenerator is passed in, use it to generate the filtered tokens
-    if (customTokenListGenerator) {
-      for (const token of customTokenListGenerator(
-        ({ symbol, address }) =>
-          symbol?.toLowerCase().includes(searchQuery.toLowerCase()) &&
-          !filteredTokensAddresses.has(address?.toLowerCase()),
-      )) {
-        filteredTokensAddresses.add(token.address?.toLowerCase());
-        filteredTokens.push(token);
-
-        if (filteredTokens.length > MAX_UNOWNED_TOKENS_RENDERED) {
-          break;
-        }
-      }
-      return filteredTokens;
-    }
+    // Default filter predicate for whether a token should be included in displayed list
+    const shouldAddToken = (symbol: string, address?: string | null) => {
+      return (
+        symbol?.toLowerCase().includes(searchQuery.toLowerCase()) &&
+        !filteredTokensAddresses.has(address?.toLowerCase())
+      );
+    };
 
-    // Otherwise use the default token list generator
-    for (const token of sortedTokenListGenerator()) {
-      if (
-        token.symbol?.toLowerCase().includes(searchQuery.toLowerCase()) &&
-        !filteredTokensAddresses.has(token.address?.toLowerCase())
-      ) {
-        filteredTokensAddresses.add(token.address?.toLowerCase());
-        filteredTokens.push(
-          getRenderableTokenData(
-            token.address
-              ? ({
-                  ...token,
-                  ...tokenList[token.address.toLowerCase()],
-                  type: AssetType.token,
-                } as AssetWithDisplayData<ERC20Asset>)
-              : token,
-            tokenConversionRates,
-            conversionRate,
-            currentCurrency,
-            chainId,
-            tokenList,
-          ),
-        );
-      }
+    // If filteredTokensGenerator is passed in, use it to generate the filtered tokens
+    // Otherwise use the default tokenGenerator
+    for (const token of (customTokenListGenerator ?? tokenListGenerator)(
+      shouldAddToken,
+    )) {
+      filteredTokensAddresses.add(token.address?.toLowerCase());
+      filteredTokens.push(
+        customTokenListGenerator
+          ? token
+          : getRenderableTokenData(
+              token.address
+                ? ({
+                    ...token,
+                    ...tokenList[token.address.toLowerCase()],
+                    type: AssetType.token,
+                  } as AssetWithDisplayData<ERC20Asset>)
+                : token,
+              tokenConversionRates,
+              conversionRate,
+              currentCurrency,
+              chainId,
+              tokenList,
+            ),
+      );
 
       if (filteredTokens.length > MAX_UNOWNED_TOKENS_RENDERED) {
         break;
@@ -293,7 +292,8 @@ export function AssetPickerModal({
     conversionRate,
     currentCurrency,
     chainId,
-    sortedTokenListGenerator,
+    tokenListGenerator,
+    customTokenListGenerator,
   ]);
 
   return (