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 f348a4d46b0a..d42b3f46a29d 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 @@ -78,7 +78,7 @@ type AssetPickerModalProps = { sendingAsset?: { image: string; symbol: string } | undefined; onNetworkPickerClick?: () => void; filteredTokensGenerator?: ( - filterPredicate: (token: ERC20Asset | NativeAsset) => boolean, + filterPredicate: (symbol: string, address?: string) => boolean, ) => Generator< AssetWithDisplayData | AssetWithDisplayData >; @@ -169,62 +169,71 @@ export function AssetPickerModal({ ); }, [tokensWithBalances, tokens]); - const tokenGenerator = useCallback(() => { - const nativeToken: AssetWithDisplayData = { - address: null, - symbol: nativeCurrency, - decimals: 18, - image: nativeCurrencyImage, - balance: balanceValue, - string: undefined, - type: AssetType.native, - }; + const tokenGenerator = useCallback( + (shouldAddToken: (symbol: string, address?: null | string) => boolean) => { + const nativeToken: AssetWithDisplayData = { + address: null, + symbol: nativeCurrency, + decimals: 18, + image: nativeCurrencyImage, + balance: balanceValue, + string: undefined, + type: AssetType.native, + }; + + return (function* (): Generator< + | AssetWithDisplayData + | ((Token | TokenListToken) & { + balance?: string; + string?: string; + }) + > { + if (shouldAddToken(nativeToken.symbol, nativeToken.address)) { + yield nativeToken; + } - return (function* (): Generator< - | AssetWithDisplayData - | ((Token | TokenListToken) & { - balance?: string; - string?: string; - }) - > { - yield nativeToken; + const blockedTokens = []; - const blockedTokens = []; + for (const token of memoizedUsersTokens) { + if (shouldAddToken(token.symbol, token.address)) { + yield token; + } + } - for (const token of memoizedUsersTokens) { - yield token; - } + // topTokens should already be sorted by popularity + for (const address of Object.keys(topTokens)) { + const token = tokenList?.[address]; + if (token && shouldAddToken(token.symbol, token.address)) { + if (getIsDisabled(token)) { + blockedTokens.push(token); + continue; + } else { + yield token; + } + } + } - // topTokens should already be sorted by popularity - for (const address of Object.keys(topTokens)) { - const token = tokenList?.[address]; - if (token) { - if (getIsDisabled(token)) { - blockedTokens.push(token); - continue; - } else { + for (const token of Object.values(tokenList)) { + if (shouldAddToken(token.symbol, token.address)) { yield token; } } - } - - for (const token of Object.values(tokenList)) { - yield token; - } - for (const token of blockedTokens) { - yield token; - } - })(); - }, [ - nativeCurrency, - nativeCurrencyImage, - balanceValue, - memoizedUsersTokens, - topTokens, - tokenList, - getIsDisabled, - ]); + for (const token of blockedTokens) { + yield token; + } + })(); + }, + [ + nativeCurrency, + nativeCurrencyImage, + balanceValue, + memoizedUsersTokens, + topTokens, + tokenList, + getIsDisabled, + ], + ); const filteredTokenList = useMemo(() => { const filteredTokens: ( @@ -234,45 +243,35 @@ export function AssetPickerModal({ // 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; - } + const shouldAddToken = (symbol: string, address?: string | null) => { + return ( + symbol?.toLowerCase().includes(searchQuery.toLowerCase()) && + !filteredTokensAddresses.has(address?.toLowerCase()) + ); + }; - for (const token of tokenGenerator()) { - 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) - : token, - tokenConversionRates, - conversionRate, - currentCurrency, - chainId, - tokenList, - ), - ); - } + for (const token of (filteredTokensGenerator ?? tokenGenerator)( + shouldAddToken, + )) { + filteredTokensAddresses.add(token.address?.toLowerCase()); + filteredTokens.push( + filteredTokensGenerator + ? token + : getRenderableTokenData( + token.address + ? ({ + ...token, + ...tokenList[token.address.toLowerCase()], + type: AssetType.token, + } as AssetWithDisplayData) + : token, + tokenConversionRates, + conversionRate, + currentCurrency, + chainId, + tokenList, + ), + ); if (filteredTokens.length > MAX_UNOWNED_TOKENS_RENDERED) { break; @@ -287,6 +286,7 @@ export function AssetPickerModal({ currentCurrency, chainId, tokenGenerator, + filteredTokensGenerator, ]); return (