diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js index 64a84f9da..ef0f873fe 100644 --- a/ui/components/multichain/network-list-menu/network-list-menu.js +++ b/ui/components/multichain/network-list-menu/network-list-menu.js @@ -15,7 +15,7 @@ import { import { CHAIN_IDS, TEST_CHAINS } from '../../../../shared/constants/network'; import { getShowTestNetworks, - getAllNetworks, + getAllEnabledNetworks, getCurrentChainId, } from '../../../selectors'; import Box from '../../ui/box/box'; @@ -33,7 +33,7 @@ const UNREMOVABLE_CHAIN_IDS = [CHAIN_IDS.MAINNET, ...TEST_CHAINS]; export const NetworkListMenu = ({ onClose }) => { const t = useI18nContext(); - const networks = useSelector(getAllNetworks); + const networks = useSelector(getAllEnabledNetworks); const showTestNetworks = useSelector(getShowTestNetworks); const currentChainId = useSelector(getCurrentChainId); const dispatch = useDispatch(); diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 538fa7f35..41f7b6da7 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -1158,9 +1158,19 @@ export function getCurrentNetwork(state) { return allNetworks.find((network) => network.chainId === currentChainId); } +export function getAllEnabledNetworks(state) { + const allNetworks = getAllNetworks(state); + const showTestnetNetworks = getShowTestNetworks(state); + + return showTestnetNetworks + ? allNetworks + : allNetworks.filter( + (network) => TEST_CHAINS.includes(network.chainId) === false, + ); +} + export function getAllNetworks(state) { const networkConfigurations = getNetworkConfigurations(state) || {}; - const showTestnetNetworks = getShowTestNetworks(state); const localhostFilter = (network) => network.chainId === CHAIN_IDS.LOCALHOST; const networks = []; @@ -1183,34 +1193,32 @@ export function getAllNetworks(state) { ) .map(([, network]) => network), ); - // Test networks if flag is on - if (showTestnetNetworks) { - networks.push( - ...[ - { - chainId: CHAIN_IDS.GOERLI, - nickname: GOERLI_DISPLAY_NAME, - rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.GOERLI], - providerType: NETWORK_TYPES.GOERLI, - }, - { - chainId: CHAIN_IDS.SEPOLIA, - nickname: SEPOLIA_DISPLAY_NAME, - rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.SEPOLIA], - providerType: NETWORK_TYPES.SEPOLIA, - }, - { - chainId: CHAIN_IDS.LINEA_TESTNET, - nickname: LINEA_TESTNET_DISPLAY_NAME, - rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_TESTNET], - provderType: NETWORK_TYPES.LINEA_TESTNET, - }, - ], // Localhosts - ...Object.entries(networkConfigurations) - .filter(([, network]) => localhostFilter(network)) - .map(([, network]) => network), - ); - } + // Test networks + networks.push( + ...[ + { + chainId: CHAIN_IDS.GOERLI, + nickname: GOERLI_DISPLAY_NAME, + rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.GOERLI], + providerType: NETWORK_TYPES.GOERLI, + }, + { + chainId: CHAIN_IDS.SEPOLIA, + nickname: SEPOLIA_DISPLAY_NAME, + rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.SEPOLIA], + providerType: NETWORK_TYPES.SEPOLIA, + }, + { + chainId: CHAIN_IDS.LINEA_TESTNET, + nickname: LINEA_TESTNET_DISPLAY_NAME, + rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_TESTNET], + provderType: NETWORK_TYPES.LINEA_TESTNET, + }, + ], // Localhosts + ...Object.entries(networkConfigurations) + .filter(([, network]) => localhostFilter(network)) + .map(([, network]) => network), + ); return networks; } diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js index af59b8931..a16bec7ec 100644 --- a/ui/selectors/selectors.test.js +++ b/ui/selectors/selectors.test.js @@ -3,7 +3,6 @@ import { KeyringType } from '../../shared/constants/keyring'; import { CHAIN_IDS, LOCALHOST_DISPLAY_NAME, - MAINNET_DISPLAY_NAME, } from '../../shared/constants/network'; import * as selectors from './selectors'; @@ -109,31 +108,6 @@ describe('Selectors', () => { }); describe('#getAllNetworks', () => { - it('returns an array even if there are no custom networks', () => { - const networks = selectors.getAllNetworks({ - metamask: { - preferences: { - showTestNetworks: false, - }, - }, - }); - expect(networks instanceof Array).toBe(true); - // The only returning item should be Ethereum Mainnet - expect(networks).toHaveLength(1); - expect(networks[0].nickname).toStrictEqual(MAINNET_DISPLAY_NAME); - }); - - it('returns more test networks with showTestNetworks on', () => { - const networks = selectors.getAllNetworks({ - metamask: { - preferences: { - showTestNetworks: true, - }, - }, - }); - expect(networks.length).toBeGreaterThan(1); - }); - it('sorts Localhost to the bottom of the test lists', () => { const networks = selectors.getAllNetworks({ metamask: { @@ -153,6 +127,30 @@ describe('Selectors', () => { }); }); + describe('#getAllEnabledNetworks', () => { + it('returns only MainNet with showTestNetworks off', () => { + const networks = selectors.getAllEnabledNetworks({ + metamask: { + preferences: { + showTestNetworks: false, + }, + }, + }); + expect(networks).toHaveLength(1); + }); + + it('returns networks with showTestNetworks on', () => { + const networks = selectors.getAllEnabledNetworks({ + metamask: { + preferences: { + showTestNetworks: true, + }, + }, + }); + expect(networks.length).toBeGreaterThan(1); + }); + }); + describe('#isHardwareWallet', () => { it('returns false if it is not a HW wallet', () => { mockState.metamask.keyrings[0].type = KeyringType.imported;