diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx index 8a8b207c6397..a2ba7674f6a2 100644 --- a/ui/components/app/assets/token-list/token-list.tsx +++ b/ui/components/app/assets/token-list/token-list.tsx @@ -8,6 +8,7 @@ import { getCurrencyRates, getCurrentNetwork, getIsTestnet, + getIsTokenNetworkFilterEqualCurrentNetwork, getMarketData, getNetworkConfigurationIdByChainId, getNewTokensImported, @@ -87,7 +88,8 @@ export default function TokenList({ const dispatch = useDispatch(); const currentNetwork = useSelector(getCurrentNetwork); const allNetworks = useSelector(getNetworkConfigurationIdByChainId); - const { tokenSortConfig, privacyMode } = useSelector(getPreferences); + const { tokenSortConfig, privacyMode, hideZeroBalanceTokens } = + useSelector(getPreferences); const tokenNetworkFilter = useSelector(getTokenNetworkFilter); const selectedAccount = useSelector(getSelectedAccount); const conversionRate = useSelector(getConversionRate); @@ -97,6 +99,9 @@ export default function TokenList({ ); const newTokensImported = useSelector(getNewTokensImported); const selectedAccountTokensChains = useFilteredAccountTokens(currentNetwork); + const isOnCurrentNetwork = useSelector( + getIsTokenNetworkFilterEqualCurrentNetwork, + ); const { tokenBalances } = useTokenBalances(); const selectedAccountTokenBalancesAcrossChains = @@ -110,7 +115,7 @@ export default function TokenList({ const nativeBalances: Record = useSelector( getSelectedAccountNativeTokenCachedBalanceByChainId, ) as Record; - + const isTestnet = useSelector(getIsTestnet); // Ensure newly added networks are included in the tokenNetworkFilter useEffect(() => { if (process.env.PORTFOLIO_VIEW) { @@ -148,14 +153,28 @@ export default function TokenList({ currencyRates, }); - // Append processed token with balance and fiat amount - tokensWithBalance.push({ - ...token, - balance, - tokenFiatAmount, - chainId, - string: String(balance), - }); + // Respect the "hide zero balance" setting (when true): + // - Native tokens should always display with zero balance when on the current network filter. + // - Native tokens should not display with zero balance when on all networks filter + // - ERC20 tokens with zero balances should respect the setting on both the current and all networks. + + // Respect the "hide zero balance" setting (when false): + // - Native tokens should always display with zero balance when on the current network filter. + // - Native tokens should always display with zero balance when on all networks filter + // - ERC20 tokens always display with zero balance on both the current and all networks filter. + if ( + !hideZeroBalanceTokens || + balance !== '0' || + (token.isNative && isOnCurrentNetwork) + ) { + tokensWithBalance.push({ + ...token, + balance, + tokenFiatAmount, + chainId, + string: String(balance), + }); + } }); }, ); @@ -217,8 +236,6 @@ export default function TokenList({ console.log(t('loadingTokens')); } - // Check if testnet - const isTestnet = useSelector(getIsTestnet); const shouldShowFiat = useMultichainSelector( getMultichainShouldShowFiat, selectedAccount,