feat: pass in custom filteredTokensGenerator function to asset-picker

MetaMask · Aug 21, 2024 · 13275a9 · 13275a9
1 parent 7d017e9
commit 13275a9
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 2 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
@@ -77,6 +77,15 @@ type AssetPickerModalProps = {
    */
   sendingAsset?: { image: string; symbol: string } | undefined;
   onNetworkPickerClick?: () => void;
+  /**
+   * Generator function that returns a list of tokens filtered by a predicate and sorted
+   * by a custom order.
+   */
+  customTokenListGenerator?: (
+    filterPredicate: (token: ERC20Asset | NativeAsset) => boolean,
+  ) => Generator<
+    AssetWithDisplayData<NativeAsset> | AssetWithDisplayData<ERC20Asset>
+  >;
 } & Pick<
   React.ComponentProps<typeof AssetPickerModalTabs>,
   'visibleTabs' | 'defaultActiveTabKey'
@@ -94,6 +103,7 @@ export function AssetPickerModal({
   sendingAsset,
   network,
   onNetworkPickerClick,
+  customTokenListGenerator,
   ...tabProps
 }: AssetPickerModalProps) {
   const t = useI18nContext();
@@ -222,10 +232,31 @@ export function AssetPickerModal({
   );
 
   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 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;
+    }
+
+    // Otherwise use the default token list generator
     for (const token of sortedTokenListGenerator()) {
       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'
+  'visibleTabs' | 'header' | 'sendingAsset' | 'customTokenListGenerator'
 >;
 
 // A component that lets the user pick from a list of assets.
@@ -82,6 +82,7 @@ export function AssetPicker({
   onClick,
   isDisabled = false,
   visibleTabs,
+  customTokenListGenerator,
 }: AssetPickerProps) {
   ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
   const t = useI18nContext();
@@ -156,6 +157,7 @@ export function AssetPicker({
         defaultActiveTabKey={
           asset?.type === AssetType.NFT ? TabName.NFTS : TabName.TOKENS
         }
+        customTokenListGenerator={customTokenListGenerator}
       />
 
       <Button