diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx index 6a82295cb2f3..3cd06ec4686b 100644 --- a/ui/components/app/assets/asset-list/asset-list.tsx +++ b/ui/components/app/assets/asset-list/asset-list.tsx @@ -7,10 +7,9 @@ import { getAllDetectedTokensForSelectedAddress, getDetectedTokensInCurrentNetwork, getIstokenDetectionInactiveOnNonMainnetSupportedNetwork, + getIsTokenNetworkFilterEqualCurrentNetwork, getSelectedAccount, - getTokenNetworkFilter, } from '../../../../selectors'; -import { getNetworkConfigurationsByChainId } from '../../../../../shared/modules/selectors/networks'; import { getMultichainIsEvm, getMultichainSelectedAccountCachedBalance, @@ -79,16 +78,9 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => { getIstokenDetectionInactiveOnNonMainnetSupportedNetwork, ); - const allNetworks = useSelector(getNetworkConfigurationsByChainId); - const tokenNetworkFilter = useSelector(getTokenNetworkFilter); - const allOpts: Record = {}; - Object.keys(allNetworks || {}).forEach((chainId) => { - allOpts[chainId] = true; - }); - - const allNetworksFilterShown = - Object.keys(tokenNetworkFilter).length !== - Object.keys(allOpts || {}).length; + const isTokenNetworkFilterEqualCurrentNetwork = useSelector( + getIsTokenNetworkFilterEqualCurrentNetwork, + ); const [showFundingMethodModal, setShowFundingMethodModal] = useState(false); const [showReceiveModal, setShowReceiveModal] = useState(false); @@ -118,7 +110,7 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => { const totalTokens = process.env.PORTFOLIO_VIEW && - !allNetworksFilterShown && + !isTokenNetworkFilterEqualCurrentNetwork && detectedTokensMultichain ? (Object.values(detectedTokensMultichain).reduce( // @ts-expect-error TS18046: 'tokenArray' is of type 'unknown' 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 4f75dcc7381a..2c50824702b1 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 @@ -7,6 +7,7 @@ import { getSelectedAccount, getAllChainsToPoll, getTokenNetworkFilter, + getIsTokenNetworkFilterEqualCurrentNetwork, } from '../../../../../selectors'; import { getCurrentChainId, @@ -49,6 +50,10 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => { const allNetworks = useSelector(getNetworkConfigurationsByChainId); const [chainsToShow, setChainsToShow] = useState([]); const tokenNetworkFilter = useSelector(getTokenNetworkFilter); + const isTokenNetworkFilterEqualCurrentNetwork = useSelector( + getIsTokenNetworkFilterEqualCurrentNetwork, + ); + const shouldHideZeroBalanceTokens = useSelector( getShouldHideZeroBalanceTokens, ); @@ -101,10 +106,7 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => { return ( <> handleFilter(allOpts)} testId="network-filter-all" > diff --git a/ui/components/app/detected-token/detected-token-selection-popover/detected-token-selection-popover.js b/ui/components/app/detected-token/detected-token-selection-popover/detected-token-selection-popover.js index ae5e1048037f..570e52fb055b 100644 --- a/ui/components/app/detected-token/detected-token-selection-popover/detected-token-selection-popover.js +++ b/ui/components/app/detected-token/detected-token-selection-popover/detected-token-selection-popover.js @@ -9,15 +9,12 @@ import { MetaMetricsEventName, MetaMetricsTokenEventSource, } from '../../../../../shared/constants/metametrics'; -import { - getCurrentChainId, - getNetworkConfigurationsByChainId, -} from '../../../../../shared/modules/selectors/networks'; +import { getCurrentChainId } from '../../../../../shared/modules/selectors/networks'; import { getAllDetectedTokensForSelectedAddress, getCurrentNetwork, getDetectedTokensInCurrentNetwork, - getTokenNetworkFilter, + getIsTokenNetworkFilterEqualCurrentNetwork, } from '../../../../selectors'; import Popover from '../../../ui/popover'; @@ -40,16 +37,9 @@ const DetectedTokenSelectionPopover = ({ const chainId = useSelector(getCurrentChainId); const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork); - const allNetworks = useSelector(getNetworkConfigurationsByChainId); - const tokenNetworkFilter = useSelector(getTokenNetworkFilter); - const allOpts = {}; - Object.keys(allNetworks || {}).forEach((networkId) => { - allOpts[networkId] = true; - }); - - const allNetworksFilterShown = - Object.keys(tokenNetworkFilter).length !== - Object.keys(allOpts || {}).length; + const isTokenNetworkFilterEqualCurrentNetwork = useSelector( + getIsTokenNetworkFilterEqualCurrentNetwork, + ); const currentNetwork = useSelector(getCurrentNetwork); @@ -58,13 +48,18 @@ const DetectedTokenSelectionPopover = ({ ); const totalTokens = useMemo(() => { - return process.env.PORTFOLIO_VIEW && !allNetworksFilterShown + return process.env.PORTFOLIO_VIEW && + !isTokenNetworkFilterEqualCurrentNetwork ? Object.values(detectedTokensMultichain).reduce( (count, tokenArray) => count + tokenArray.length, 0, ) : detectedTokens.length; - }, [detectedTokensMultichain, detectedTokens, allNetworksFilterShown]); + }, [ + detectedTokensMultichain, + detectedTokens, + isTokenNetworkFilterEqualCurrentNetwork, + ]); const { selected: selectedTokens = [] } = sortingBasedOnTokenSelection(tokensListDetected); @@ -124,7 +119,8 @@ const DetectedTokenSelectionPopover = ({ onClose={onClose} footer={footer} > - {process.env.PORTFOLIO_VIEW && !allNetworksFilterShown ? ( + {process.env.PORTFOLIO_VIEW && + !isTokenNetworkFilterEqualCurrentNetwork ? ( {Object.entries(detectedTokensMultichain).map( ([networkId, tokens]) => { diff --git a/ui/components/app/detected-token/detected-token.js b/ui/components/app/detected-token/detected-token.js index b28eb8f51ff8..3e4d586ce77c 100644 --- a/ui/components/app/detected-token/detected-token.js +++ b/ui/components/app/detected-token/detected-token.js @@ -16,7 +16,7 @@ import { import { getAllDetectedTokensForSelectedAddress, getDetectedTokensInCurrentNetwork, - getTokenNetworkFilter, + getIsTokenNetworkFilterEqualCurrentNetwork, } from '../../../selectors'; import { MetaMetricsContext } from '../../../contexts/metametrics'; @@ -63,27 +63,30 @@ const DetectedToken = ({ setShowDetectedTokens }) => { ); const currentChainId = useSelector(getCurrentChainId); const allNetworks = useSelector(getNetworkConfigurationsByChainId); - const tokenNetworkFilter = useSelector(getTokenNetworkFilter); - const allOpts = {}; - Object.keys(allNetworks || {}).forEach((chainId) => { - allOpts[chainId] = true; - }); - const allNetworksFilterShown = - Object.keys(tokenNetworkFilter).length !== - Object.keys(allOpts || {}).length; + const isTokenNetworkFilterEqualCurrentNetwork = useSelector( + getIsTokenNetworkFilterEqualCurrentNetwork, + ); const totalDetectedTokens = useMemo(() => { - return process.env.PORTFOLIO_VIEW && !allNetworksFilterShown + return process.env.PORTFOLIO_VIEW && + !isTokenNetworkFilterEqualCurrentNetwork ? Object.values(detectedTokensMultichain).flat().length : detectedTokens.length; - }, [detectedTokens, detectedTokensMultichain, allNetworksFilterShown]); + }, [ + detectedTokens, + detectedTokensMultichain, + isTokenNetworkFilterEqualCurrentNetwork, + ]); const [tokensListDetected, setTokensListDetected] = useState({}); useEffect(() => { const newTokensList = () => { - if (process.env.PORTFOLIO_VIEW && !allNetworksFilterShown) { + if ( + process.env.PORTFOLIO_VIEW && + !isTokenNetworkFilterEqualCurrentNetwork + ) { return Object.entries(detectedTokensMultichain).reduce( (acc, [chainId, tokens]) => { if (Array.isArray(tokens)) { @@ -112,7 +115,7 @@ const DetectedToken = ({ setShowDetectedTokens }) => { setTokensListDetected(newTokensList()); }, [ - allNetworksFilterShown, + isTokenNetworkFilterEqualCurrentNetwork, detectedTokensMultichain, detectedTokens, currentChainId, @@ -141,7 +144,10 @@ const DetectedToken = ({ setShowDetectedTokens }) => { }); }); - if (process.env.PORTFOLIO_VIEW && !allNetworksFilterShown) { + if ( + process.env.PORTFOLIO_VIEW && + !isTokenNetworkFilterEqualCurrentNetwork + ) { const tokensByChainId = selectedTokens.reduce((acc, token) => { const { chainId } = token; @@ -197,7 +203,10 @@ const DetectedToken = ({ setShowDetectedTokens }) => { }, }); - if (process.env.PORTFOLIO_VIEW && !allNetworksFilterShown) { + if ( + process.env.PORTFOLIO_VIEW && + !isTokenNetworkFilterEqualCurrentNetwork + ) { // group deselected tokens by chainId const groupedByChainId = deSelectedTokens.reduce((acc, token) => { const { chainId } = token; diff --git a/ui/components/multichain/detected-token-banner/detected-token-banner.js b/ui/components/multichain/detected-token-banner/detected-token-banner.js index 2b6f7238024f..fa2ab6d62f84 100644 --- a/ui/components/multichain/detected-token-banner/detected-token-banner.js +++ b/ui/components/multichain/detected-token-banner/detected-token-banner.js @@ -11,7 +11,7 @@ import { import { getDetectedTokensInCurrentNetwork, getAllDetectedTokensForSelectedAddress, - getTokenNetworkFilter, + getIsTokenNetworkFilterEqualCurrentNetwork, } from '../../../selectors'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { @@ -28,7 +28,10 @@ export const DetectedTokensBanner = ({ }) => { const t = useI18nContext(); const trackEvent = useContext(MetaMetricsContext); - const tokenNetworkFilter = useSelector(getTokenNetworkFilter); + const isTokenNetworkFilterEqualCurrentNetwork = useSelector( + getIsTokenNetworkFilterEqualCurrentNetwork, + ); + const allNetworks = useSelector(getNetworkConfigurationsByChainId); const allOpts = {}; @@ -36,10 +39,6 @@ export const DetectedTokensBanner = ({ allOpts[chainId] = true; }); - const allNetworksFilterShown = - Object.keys(tokenNetworkFilter).length !== - Object.keys(allOpts || {}).length; - const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork); const detectedTokensMultichain = useSelector( @@ -48,14 +47,14 @@ export const DetectedTokensBanner = ({ const chainId = useSelector(getCurrentChainId); const detectedTokensDetails = - process.env.PORTFOLIO_VIEW && !allNetworksFilterShown + process.env.PORTFOLIO_VIEW && !isTokenNetworkFilterEqualCurrentNetwork ? Object.values(detectedTokensMultichain) .flat() .map(({ address, symbol }) => `${symbol} - ${address}`) : detectedTokens.map(({ address, symbol }) => `${symbol} - ${address}`); const totalTokens = - process.env.PORTFOLIO_VIEW && !allNetworksFilterShown + process.env.PORTFOLIO_VIEW && !isTokenNetworkFilterEqualCurrentNetwork ? Object.values(detectedTokensMultichain).reduce( (count, tokenArray) => count + tokenArray.length, 0, diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js index b4b748104189..cfee47dfafe2 100644 --- a/ui/selectors/selectors.test.js +++ b/ui/selectors/selectors.test.js @@ -2178,4 +2178,63 @@ describe('#getConnectedSitesList', () => { }); }); }); + + describe('getIsTokenNetworkFilterEqualCurrentNetwork', () => { + beforeEach(() => { + process.env.PORTFOLIO_VIEW = 'true'; + }); + + afterEach(() => { + process.env.PORTFOLIO_VIEW = undefined; + }); + + it('returns true when the token network filter is equal to the current network', () => { + const state = { + metamask: { + preferences: { + tokenNetworkFilter: { + '0x1': true, + }, + }, + selectedNetworkClientId: 'mainnetNetworkConfigurationId', + networkConfigurationsByChainId: { + '0x1': { + chainId: '0x1', + rpcEndpoints: [ + { networkClientId: 'mainnetNetworkConfigurationId' }, + ], + }, + }, + }, + }; + expect(selectors.getIsTokenNetworkFilterEqualCurrentNetwork(state)).toBe( + true, + ); + }); + + it('returns false when the token network filter is on multiple networks', () => { + const state = { + metamask: { + preferences: { + tokenNetworkFilter: { + '0x1': true, + '0x89': true, + }, + }, + selectedNetworkClientId: 'mainnetNetworkConfigurationId', + networkConfigurationsByChainId: { + '0x1': { + chainId: '0x1', + rpcEndpoints: [ + { networkClientId: 'mainnetNetworkConfigurationId' }, + ], + }, + }, + }, + }; + expect(selectors.getIsTokenNetworkFilterEqualCurrentNetwork(state)).toBe( + false, + ); + }); + }); });