chore: pass in filteredTokensGenerator

MetaMask · Aug 20, 2024 · f85cac7 · f85cac7
1 parent b6e1e9f
commit f85cac7
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 25 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
@@ -64,14 +64,6 @@ import AssetList from './AssetList';
 import { Search } from './asset-picker-modal-search';
 import { AssetPickerModalNetwork } from './asset-picker-modal-network';
 
-type TokenListGenerator = Generator<
-  | AssetWithDisplayData<NativeAsset>
-  | ((Token | TokenListToken) & {
-      balance?: string;
-      string?: string;
-    })
->;
-
 type AssetPickerModalProps = {
   header: JSX.Element | string | null;
   isOpen: boolean;
@@ -85,12 +77,16 @@ type AssetPickerModalProps = {
    */
   sendingAsset?: { image: string; symbol: string } | undefined;
   onNetworkPickerClick?: () => void;
-  tokenListGenerator?: () => TokenListGenerator;
-} & Pick<
-  React.ComponentProps<typeof AssetPickerModalTabs>,
-  'visibleTabs' | 'defaultActiveTabKey'
-> &
-  Pick<React.ComponentProps<typeof AssetPickerModalNetwork>, 'network'>;
+  filteredTokensGenerator?: (
+    filterPredicate: (token: ERC20Asset | NativeAsset) => boolean,
+  ) => Generator<
+    AssetWithDisplayData<NativeAsset> | AssetWithDisplayData<ERC20Asset>
+  >;
+} & Pick<React.ComponentProps<typeof AssetPickerModalNetwork>, 'network'> &
+  Pick<
+    React.ComponentProps<typeof AssetPickerModalTabs>,
+    'visibleTabs' | 'defaultActiveTabKey'
+  >;
 
 const MAX_UNOWNED_TOKENS_RENDERED = 30;
 
@@ -103,7 +99,7 @@ export function AssetPickerModal({
   sendingAsset,
   network,
   onNetworkPickerClick,
-  tokenListGenerator,
+  filteredTokensGenerator,
   ...tabProps
 }: AssetPickerModalProps) {
   const t = useI18nContext();
@@ -174,10 +170,6 @@ export function AssetPickerModal({
   }, [tokensWithBalances, tokens]);
 
   const tokenGenerator = useCallback(() => {
-    if (tokenListGenerator) {
-      return tokenListGenerator();
-    }
-
     const nativeToken: AssetWithDisplayData<NativeAsset> = {
       address: null,
       symbol: nativeCurrency,
@@ -188,7 +180,13 @@ export function AssetPickerModal({
       type: AssetType.native,
     };
 
-    return (function* (): TokenListGenerator {
+    return (function* (): Generator<
+      | AssetWithDisplayData<NativeAsset>
+      | ((Token | TokenListToken) & {
+          balance?: string;
+          string?: string;
+        })
+    > {
       yield nativeToken;
 
       const blockedTokens = [];
@@ -223,17 +221,35 @@ export function AssetPickerModal({
     nativeCurrencyImage,
     balanceValue,
     memoizedUsersTokens,
-    tokenListGenerator,
     topTokens,
     tokenList,
     getIsDisabled,
   ]);
 
   const filteredTokenList = useMemo(() => {
-    const filteredTokens: AssetWithDisplayData<ERC20Asset | NativeAsset>[] = [];
+    const filteredTokens: (
+      | AssetWithDisplayData<ERC20Asset>
+      | AssetWithDisplayData<NativeAsset>
+    )[] = [];
     // undefined would be the native token address
     const filteredTokensAddresses = new Set<string | undefined>();
 
+    if (filteredTokensGenerator) {
+      for (const token of filteredTokensGenerator(
+        ({ 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;
+    }
+
     for (const token of tokenGenerator()) {
       if (
         token.symbol?.toLowerCase().includes(searchQuery.toLowerCase()) &&

diff --git a/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx b/ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx
@@ -69,7 +69,7 @@ export type AssetPickerProps = {
   >;
 } & Pick<
   React.ComponentProps<typeof AssetPickerModal>,
-  'visibleTabs' | 'header' | 'sendingAsset' | 'tokenListGenerator'
+  'visibleTabs' | 'header' | 'sendingAsset' | 'filteredTokensGenerator'
 >;
 
 // A component that lets the user pick from a list of assets.
@@ -82,7 +82,7 @@ export function AssetPicker({
   onClick,
   isDisabled = false,
   visibleTabs,
-  tokenListGenerator,
+  filteredTokensGenerator,
 }: AssetPickerProps) {
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const t = useI18nContext();
@@ -157,7 +157,7 @@ export function AssetPicker({
         defaultActiveTabKey={
           asset?.type === AssetType.NFT ? TabName.NFTS : TabName.TOKENS
         }
-        tokenListGenerator={tokenListGenerator}
+        filteredTokensGenerator={filteredTokensGenerator}
       />
 
       <Button