diff --git a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx index 00e0692cfc73..768d2bb896eb 100644 --- a/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx +++ b/ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx @@ -1,6 +1,9 @@ import React, { useEffect, useRef, useState, useContext, useMemo } from 'react'; import { useDispatch, useSelector } from 'react-redux'; -import { getCurrentNetwork, getPreferences } from '../../../../../selectors'; +import { + getCurrentNetwork, + getTokenNetworkFilter, +} from '../../../../../selectors'; import { getNetworkConfigurationsByChainId } from '../../../../../../shared/modules/selectors/networks'; import { Box, @@ -55,7 +58,7 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => { const currentNetwork = useSelector(getCurrentNetwork); const allNetworks = useSelector(getNetworkConfigurationsByChainId); - const { tokenNetworkFilter } = useSelector(getPreferences); + const tokenNetworkFilter = useSelector(getTokenNetworkFilter); const [isTokenSortPopoverOpen, setIsTokenSortPopoverOpen] = useState(false); const [isImportTokensPopoverOpen, setIsImportTokensPopoverOpen] = useState(false); @@ -72,7 +75,7 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => { }); const allNetworksFilterShown = - Object.keys(tokenNetworkFilter || {}).length !== + Object.keys(tokenNetworkFilter).length !== Object.keys(allOpts || {}).length; useEffect(() => { @@ -88,7 +91,7 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => { useEffect(() => { if ( process.env.PORTFOLIO_VIEW && - Object.keys(tokenNetworkFilter || {}).length === 0 + Object.keys(tokenNetworkFilter).length === 0 ) { dispatch(setTokenNetworkFilter(allOpts)); } else { @@ -99,7 +102,7 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => { // When a network gets added/removed we want to make sure that we switch to the filtered list of the current network // We only want to do this if the "Current Network" filter is selected useEffect(() => { - if (Object.keys(tokenNetworkFilter || {}).length === 1) { + if (Object.keys(tokenNetworkFilter).length === 1) { dispatch(setTokenNetworkFilter({ [currentNetwork.chainId]: true })); } }, [Object.keys(allNetworks).length]); diff --git a/ui/components/app/assets/asset-list/asset-list.tsx b/ui/components/app/assets/asset-list/asset-list.tsx index ab2adb308bf4..6a82295cb2f3 100644 --- a/ui/components/app/assets/asset-list/asset-list.tsx +++ b/ui/components/app/assets/asset-list/asset-list.tsx @@ -7,8 +7,8 @@ import { getAllDetectedTokensForSelectedAddress, getDetectedTokensInCurrentNetwork, getIstokenDetectionInactiveOnNonMainnetSupportedNetwork, - getPreferences, getSelectedAccount, + getTokenNetworkFilter, } from '../../../../selectors'; import { getNetworkConfigurationsByChainId } from '../../../../../shared/modules/selectors/networks'; import { @@ -80,14 +80,14 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => { ); const allNetworks = useSelector(getNetworkConfigurationsByChainId); - const { tokenNetworkFilter } = useSelector(getPreferences); + const tokenNetworkFilter = useSelector(getTokenNetworkFilter); const allOpts: Record = {}; Object.keys(allNetworks || {}).forEach((chainId) => { allOpts[chainId] = true; }); const allNetworksFilterShown = - Object.keys(tokenNetworkFilter || {}).length !== + Object.keys(tokenNetworkFilter).length !== Object.keys(allOpts || {}).length; const [showFundingMethodModal, setShowFundingMethodModal] = useState(false); 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 e1fdd8db9535..eece5530eea4 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 @@ -3,10 +3,10 @@ import { useDispatch, useSelector } from 'react-redux'; import { setTokenNetworkFilter } from '../../../../../store/actions'; import { getCurrentNetwork, - getPreferences, getShouldHideZeroBalanceTokens, getSelectedAccount, getAllChainsToPoll, + getTokenNetworkFilter, } from '../../../../../selectors'; import { getCurrentChainId, @@ -48,7 +48,7 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => { const selectedAccount = useSelector(getSelectedAccount); const allNetworks = useSelector(getNetworkConfigurationsByChainId); const [chainsToShow, setChainsToShow] = useState([]); - const { tokenNetworkFilter } = useSelector(getPreferences); + const tokenNetworkFilter = useSelector(getTokenNetworkFilter); const shouldHideZeroBalanceTokens = useSelector( getShouldHideZeroBalanceTokens, ); @@ -102,7 +102,7 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => { <> handleFilter(allOpts)} @@ -163,8 +163,8 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => { handleFilter({ [chainId]: true })} testId="network-filter-current" diff --git a/ui/components/app/assets/token-list/token-list.tsx b/ui/components/app/assets/token-list/token-list.tsx index d3e67f6204cc..8a8b207c6397 100644 --- a/ui/components/app/assets/token-list/token-list.tsx +++ b/ui/components/app/assets/token-list/token-list.tsx @@ -17,6 +17,7 @@ import { getSelectedAccountTokensAcrossChains, getShowFiatInTestnets, getTokenExchangeRates, + getTokenNetworkFilter, } from '../../../../selectors'; import { getConversionRate } from '../../../../ducks/metamask/metamask'; import { filterAssets } from '../util/filter'; @@ -86,8 +87,8 @@ export default function TokenList({ const dispatch = useDispatch(); const currentNetwork = useSelector(getCurrentNetwork); const allNetworks = useSelector(getNetworkConfigurationIdByChainId); - const { tokenSortConfig, tokenNetworkFilter, privacyMode } = - useSelector(getPreferences); + const { tokenSortConfig, privacyMode } = useSelector(getPreferences); + const tokenNetworkFilter = useSelector(getTokenNetworkFilter); const selectedAccount = useSelector(getSelectedAccount); const conversionRate = useSelector(getConversionRate); const contractExchangeRates = useSelector( @@ -116,7 +117,7 @@ export default function TokenList({ const allNetworkFilters = Object.fromEntries( Object.keys(allNetworks).map((chainId) => [chainId, true]), ); - if (Object.keys(tokenNetworkFilter || {}).length > 1) { + if (Object.keys(tokenNetworkFilter).length > 1) { dispatch(setTokenNetworkFilter(allNetworkFilters)); } } 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 4c674a5c437f..ae5e1048037f 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 @@ -17,7 +17,7 @@ import { getAllDetectedTokensForSelectedAddress, getCurrentNetwork, getDetectedTokensInCurrentNetwork, - getPreferences, + getTokenNetworkFilter, } from '../../../../selectors'; import Popover from '../../../ui/popover'; @@ -41,14 +41,14 @@ const DetectedTokenSelectionPopover = ({ const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork); const allNetworks = useSelector(getNetworkConfigurationsByChainId); - const { tokenNetworkFilter } = useSelector(getPreferences); + const tokenNetworkFilter = useSelector(getTokenNetworkFilter); const allOpts = {}; Object.keys(allNetworks || {}).forEach((networkId) => { allOpts[networkId] = true; }); const allNetworksFilterShown = - Object.keys(tokenNetworkFilter || {}).length !== + Object.keys(tokenNetworkFilter).length !== Object.keys(allOpts || {}).length; const currentNetwork = useSelector(getCurrentNetwork); diff --git a/ui/components/app/detected-token/detected-token.js b/ui/components/app/detected-token/detected-token.js index 12957e1aca31..8d9d4735eb96 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, - getPreferences, + getTokenNetworkFilter, } from '../../../selectors'; import { MetaMetricsContext } from '../../../contexts/metametrics'; @@ -63,14 +63,14 @@ const DetectedToken = ({ setShowDetectedTokens }) => { ); const currentChainId = useSelector(getCurrentChainId); const allNetworks = useSelector(getNetworkConfigurationsByChainId); - const { tokenNetworkFilter } = useSelector(getPreferences); + const tokenNetworkFilter = useSelector(getTokenNetworkFilter); const allOpts = {}; Object.keys(allNetworks || {}).forEach((chainId) => { allOpts[chainId] = true; }); const allNetworksFilterShown = - Object.keys(tokenNetworkFilter || {}).length !== + Object.keys(tokenNetworkFilter).length !== Object.keys(allOpts || {}).length; const totalDetectedTokens = useMemo(() => { 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 7cd315d57cab..2b6f7238024f 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, - getPreferences, + getTokenNetworkFilter, } from '../../../selectors'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { @@ -28,7 +28,7 @@ export const DetectedTokensBanner = ({ }) => { const t = useI18nContext(); const trackEvent = useContext(MetaMetricsContext); - const { tokenNetworkFilter } = useSelector(getPreferences); + const tokenNetworkFilter = useSelector(getTokenNetworkFilter); const allNetworks = useSelector(getNetworkConfigurationsByChainId); const allOpts = {}; @@ -37,7 +37,7 @@ export const DetectedTokensBanner = ({ }); const allNetworksFilterShown = - Object.keys(tokenNetworkFilter || {}).length !== + Object.keys(tokenNetworkFilter).length !== Object.keys(allOpts || {}).length; const detectedTokens = useSelector(getDetectedTokensInCurrentNetwork); diff --git a/ui/components/multichain/network-list-menu/network-list-menu.tsx b/ui/components/multichain/network-list-menu/network-list-menu.tsx index 28680b24ba45..390996980f11 100644 --- a/ui/components/multichain/network-list-menu/network-list-menu.tsx +++ b/ui/components/multichain/network-list-menu/network-list-menu.tsx @@ -54,7 +54,7 @@ import { getAllDomains, getPermittedChainsForSelectedTab, getPermittedAccountsForSelectedTab, - getPreferences, + getTokenNetworkFilter, } from '../../../selectors'; import ToggleButton from '../../ui/toggle-button'; import { @@ -116,7 +116,7 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => { const dispatch = useDispatch(); const trackEvent = useContext(MetaMetricsContext); - const { tokenNetworkFilter } = useSelector(getPreferences); + const tokenNetworkFilter = useSelector(getTokenNetworkFilter); const showTestNetworks = useSelector(getShowTestNetworks); const currentChainId = useSelector(getCurrentChainId); const selectedTabOrigin = useSelector(getOriginOfCurrentTab); diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 4d14fe94cef5..4ed325d2e7e1 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -1076,8 +1076,7 @@ export function getPetnamesEnabled(state) { export function getIsTokenNetworkFilterEqualCurrentNetwork(state) { const chainId = getCurrentChainId(state); - const { tokenNetworkFilter: tokenNetworkFilterValue } = getPreferences(state); - const tokenNetworkFilter = tokenNetworkFilterValue || {}; + const tokenNetworkFilter = getTokenNetworkFilter(state); if ( Object.keys(tokenNetworkFilter).length === 1 && Object.keys(tokenNetworkFilter)[0] === chainId @@ -1087,6 +1086,11 @@ export function getIsTokenNetworkFilterEqualCurrentNetwork(state) { return false; } +export function getTokenNetworkFilter(state) { + const { tokenNetworkFilter } = getPreferences(state); + return tokenNetworkFilter || {}; +} + export function getUseTransactionSimulations(state) { return Boolean(state.metamask.useTransactionSimulations); }