diff --git a/ui/components/app/assets/asset-list/network-filter/network-filter.tsx b/ui/components/app/assets/asset-list/network-filter/network-filter.tsx index 4e9aa14eea25..f7f868b4a8b1 100644 --- a/ui/components/app/assets/asset-list/network-filter/network-filter.tsx +++ b/ui/components/app/assets/asset-list/network-filter/network-filter.tsx @@ -5,9 +5,9 @@ import { getCurrentChainId, getCurrentNetwork, getPreferences, - getChainIdsToPoll, getShouldHideZeroBalanceTokens, getSelectedAccount, + getAllChainsToPoll, } from '../../../../../selectors'; import { getNetworkConfigurationsByChainId } from '../../../../../../shared/modules/selectors/networks'; import { useI18nContext } from '../../../../../hooks/useI18nContext'; @@ -49,7 +49,7 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => { const shouldHideZeroBalanceTokens = useSelector( getShouldHideZeroBalanceTokens, ); - const allChainIDs = useSelector(getChainIdsToPoll); + const allChainIDs = useSelector(getAllChainsToPoll); const { formattedTokensWithBalancesPerChain } = useGetFormattedTokensPerChain( selectedAccount, shouldHideZeroBalanceTokens, diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index b6df07bd2bd0..b5f52f42dcc8 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -2364,6 +2364,42 @@ export const getAllEnabledNetworks = createDeepEqualSelector( ), ); +/* + * USE THIS WITH CAUTION + * + * Only use this selector if you are absolutely sure that your UI component needs + * data from _all chains_ to compute a value. Else, use `getChainIdsToPoll`. + * + * Examples: + * - Components that should NOT use this selector: + * - Token list: This only needs to poll for chains based on the network filter + * (potentially only one chain). In this case, use `getChainIdsToPoll`. + * - Components that SHOULD use this selector: + * - Aggregated balance: This needs to display data regardless of network filter + * selection (always showing aggregated balances across all chains). + * + * Key Considerations: + * - This selector can cause expensive computations. It should only be used when + * necessary, and where possible, optimized to use `getChainIdsToPoll` instead. + * - Logic Overview: + * - If `PORTFOLIO_VIEW` is not enabled, the selector returns only the `currentChainId`. + * - Otherwise, it includes all chains from `networkConfigurations`, excluding + * `TEST_CHAINS`, while ensuring the `currentChainId` is included. + */ +export const getAllChainsToPoll = createDeepEqualSelector( + getNetworkConfigurationsByChainId, + getCurrentChainId, + (networkConfigurations, currentChainId) => { + if (!process.env.PORTFOLIO_VIEW) { + return [currentChainId]; + } + + return Object.keys(networkConfigurations).filter( + (chainId) => chainId === currentChainId || !TEST_CHAINS.includes(chainId), + ); + }, +); + export const getChainIdsToPoll = createDeepEqualSelector( getNetworkConfigurationsByChainId, getCurrentChainId,