UX: Multichain: Fix Network Picker when Test Networks Disabled (#18694)

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();

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
+  // Test networks
-  if (showTestnetNetworks) {
+  networks.push(
-    networks.push(
+    ...[
-      ...[
+      {
-        {
+        chainId: CHAIN_IDS.GOERLI,
-          chainId: CHAIN_IDS.GOERLI,
+        nickname: GOERLI_DISPLAY_NAME,
-          nickname: GOERLI_DISPLAY_NAME,
+        rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.GOERLI],
-          rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.GOERLI],
+        providerType: NETWORK_TYPES.GOERLI,
-          providerType: NETWORK_TYPES.GOERLI,
+      },
-        },
+      {
-        {
+        chainId: CHAIN_IDS.SEPOLIA,
-          chainId: CHAIN_IDS.SEPOLIA,
+        nickname: SEPOLIA_DISPLAY_NAME,
-          nickname: SEPOLIA_DISPLAY_NAME,
+        rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.SEPOLIA],
-          rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.SEPOLIA],
+        providerType: NETWORK_TYPES.SEPOLIA,
-          providerType: NETWORK_TYPES.SEPOLIA,
+      },
-        },
+      {
-        {
+        chainId: CHAIN_IDS.LINEA_TESTNET,
-          chainId: CHAIN_IDS.LINEA_TESTNET,
+        nickname: LINEA_TESTNET_DISPLAY_NAME,
-          nickname: LINEA_TESTNET_DISPLAY_NAME,
+        rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_TESTNET],
-          rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_TESTNET],
+        provderType: NETWORK_TYPES.LINEA_TESTNET,
-          provderType: NETWORK_TYPES.LINEA_TESTNET,
+      },
-        },
+    ], // Localhosts
-      ], // Localhosts
+    ...Object.entries(networkConfigurations)
-      ...Object.entries(networkConfigurations)
+      .filter(([, network]) => localhostFilter(network))
-        .filter(([, network]) => localhostFilter(network))
+      .map(([, network]) => network),
-        .map(([, network]) => network),
+  );
-    );
-  }
 
   return networks;
 }

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;