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 47a9e0e95397..f348a4d46b0a 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 @@ -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 - | ((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, - 'visibleTabs' | 'defaultActiveTabKey' -> & - Pick, 'network'>; + filteredTokensGenerator?: ( + filterPredicate: (token: ERC20Asset | NativeAsset) => boolean, + ) => Generator< + AssetWithDisplayData | AssetWithDisplayData + >; +} & Pick, 'network'> & + Pick< + React.ComponentProps, + '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 = { address: null, symbol: nativeCurrency, @@ -188,7 +180,13 @@ export function AssetPickerModal({ type: AssetType.native, }; - return (function* (): TokenListGenerator { + return (function* (): Generator< + | AssetWithDisplayData + | ((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[] = []; + const filteredTokens: ( + | AssetWithDisplayData + | AssetWithDisplayData + )[] = []; // undefined would be the native token address const filteredTokensAddresses = new Set(); + 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 index 4eeded19e07c..c4dd1126d85c 100644 --- 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, - '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} />