Fix #19832 - UX: Multichain: Move location of test networks (#19812)

* UX: Multichain: Move location of test networks

* Re-add Linea

ui/components/multichain/network-list-menu/network-list-menu.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useRef } from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
@@ -15,8 +15,9 @@ import {
 import { CHAIN_IDS, TEST_CHAINS } from '../../../../shared/constants/network';
 import {
   getShowTestNetworks,
-  getAllEnabledNetworks,
   getCurrentChainId,
+  getNonTestNetworks,
+  getTestNetworks,
 } from '../../../selectors';
 import ToggleButton from '../../ui/toggle-button';
 import {
@@ -50,7 +51,10 @@ const UNREMOVABLE_CHAIN_IDS = [
 
 export const NetworkListMenu = ({ onClose }) => {
   const t = useI18nContext();
-  const networks = useSelector(getAllEnabledNetworks);
+
+  const nonTestNetworks = useSelector(getNonTestNetworks);
+  const testNetworks = useSelector(getTestNetworks);
+
   const showTestNetworks = useSelector(getShowTestNetworks);
   const currentChainId = useSelector(getCurrentChainId);
   const dispatch = useDispatch();
@@ -60,41 +64,18 @@ export const NetworkListMenu = ({ onClose }) => {
   const environmentType = getEnvironmentType();
   const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
 
-  const showTestNetworksRef = useRef(showTestNetworks);
-  const networkListRef = useRef(null);
-
   const completedOnboarding = useSelector(getCompletedOnboarding);
 
   const lineaMainnetReleased = useSelector(isLineaMainnetNetworkReleased);
 
-  useEffect(() => {
+  const generateMenuItems = (desiredNetworks) => {
-    if (showTestNetworks && !showTestNetworksRef.current) {
+    return desiredNetworks.map((network, index) => {
-      // Scroll to the bottom of the list
+      if (!lineaMainnetReleased && network.providerType === 'linea-mainnet') {
-      networkListRef.current.lastChild.scrollIntoView();
-    }
-    showTestNetworksRef.current = showTestNetworks;
-  }, [showTestNetworks, showTestNetworksRef]);
-
-  return (
-    <Popover
-      contentClassName="multichain-network-list-menu-content-wrapper"
-      onClose={onClose}
-      centerTitle
-      title={t('networkMenuHeading')}
-    >
-      <>
-        <Box className="multichain-network-list-menu" ref={networkListRef}>
-          {networks.map((network, index) => {
-            if (
-              !lineaMainnetReleased &&
-              network.providerType === 'linea-mainnet'
-            ) {
         return null;
       }
       const isCurrentNetwork = currentChainId === network.chainId;
       const canDeleteNetwork =
-              !isCurrentNetwork &&
+        !isCurrentNetwork && !UNREMOVABLE_CHAIN_IDS.includes(network.chainId);
-              !UNREMOVABLE_CHAIN_IDS.includes(network.chainId);
 
       return (
         <NetworkListItem
@@ -136,7 +117,19 @@ export const NetworkListMenu = ({ onClose }) => {
           }
         />
       );
-          })}
+    });
+  };
+
+  return (
+    <Popover
+      contentClassName="multichain-network-list-menu-content-wrapper"
+      onClose={onClose}
+      centerTitle
+      title={t('networkMenuHeading')}
+    >
+      <>
+        <Box className="multichain-network-list-menu">
+          {generateMenuItems(nonTestNetworks)}
         </Box>
         <Box
           padding={4}
@@ -158,6 +151,11 @@ export const NetworkListMenu = ({ onClose }) => {
             }}
           />
         </Box>
+        {showTestNetworks ? (
+          <Box className="multichain-network-list-menu">
+            {generateMenuItems(testNetworks)}
+          </Box>
+        ) : null}
         <Box padding={4}>
           <ButtonSecondary
             size={BUTTON_SECONDARY_SIZES.LG}

ui/selectors/selectors.js

@@ -34,8 +34,8 @@ import {
   CURRENCY_SYMBOLS,
   TEST_NETWORK_TICKER_MAP,
   LINEA_GOERLI_TOKEN_IMAGE_URL,
-  LINEA_MAINNET_TOKEN_IMAGE_URL,
   LINEA_MAINNET_DISPLAY_NAME,
+  LINEA_MAINNET_TOKEN_IMAGE_URL,
 } from '../../shared/constants/network';
 import {
   WebHIDConnectedStatuses,
@@ -1176,46 +1176,17 @@ export function getCurrentNetwork(state) {
 }
 
 export function getAllEnabledNetworks(state) {
+  const nonTestNetworks = getNonTestNetworks(state);
   const allNetworks = getAllNetworks(state);
   const showTestnetNetworks = getShowTestNetworks(state);
 
-  return showTestnetNetworks
+  return showTestnetNetworks ? allNetworks : nonTestNetworks;
-    ? allNetworks
-    : allNetworks.filter(
-        (network) => TEST_CHAINS.includes(network.chainId) === false,
-      );
 }
 
-export function getAllNetworks(state) {
+export function getTestNetworks(state) {
   const networkConfigurations = getNetworkConfigurations(state) || {};
 
-  const networks = [
+  return [
-    // Mainnet always first
-    {
-      chainId: CHAIN_IDS.MAINNET,
-      nickname: MAINNET_DISPLAY_NAME,
-      rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.MAINNET],
-      rpcPrefs: {
-        imageUrl: ETH_TOKEN_IMAGE_URL,
-      },
-      providerType: NETWORK_TYPES.MAINNET,
-      ticker: CURRENCY_SYMBOLS.ETH,
-    },
-    {
-      chainId: CHAIN_IDS.LINEA_MAINNET,
-      nickname: LINEA_MAINNET_DISPLAY_NAME,
-      rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_MAINNET],
-      rpcPrefs: {
-        imageUrl: LINEA_MAINNET_TOKEN_IMAGE_URL,
-      },
-      providerType: NETWORK_TYPES.LINEA_MAINNET,
-      ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.LINEA_MAINNET],
-    },
-    // Custom networks added by the user
-    ...Object.values(networkConfigurations).filter(
-      ({ chainId }) => ![CHAIN_IDS.LOCALHOST].includes(chainId),
-    ),
-    // Test networks
     {
       chainId: CHAIN_IDS.GOERLI,
       nickname: GOERLI_DISPLAY_NAME,
@@ -1245,6 +1216,47 @@ export function getAllNetworks(state) {
       ({ chainId }) => chainId === CHAIN_IDS.LOCALHOST,
     ),
   ];
+}
+
+export function getNonTestNetworks(state) {
+  const networkConfigurations = getNetworkConfigurations(state) || {};
+
+  return [
+    // Mainnet always first
+    {
+      chainId: CHAIN_IDS.MAINNET,
+      nickname: MAINNET_DISPLAY_NAME,
+      rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.MAINNET],
+      rpcPrefs: {
+        imageUrl: ETH_TOKEN_IMAGE_URL,
+      },
+      providerType: NETWORK_TYPES.MAINNET,
+      ticker: CURRENCY_SYMBOLS.ETH,
+    },
+    {
+      chainId: CHAIN_IDS.LINEA_MAINNET,
+      nickname: LINEA_MAINNET_DISPLAY_NAME,
+      rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_MAINNET],
+      rpcPrefs: {
+        imageUrl: LINEA_MAINNET_TOKEN_IMAGE_URL,
+      },
+      providerType: NETWORK_TYPES.LINEA_MAINNET,
+      ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.LINEA_MAINNET],
+    },
+    // Custom networks added by the user
+    ...Object.values(networkConfigurations).filter(
+      ({ chainId }) => ![CHAIN_IDS.LOCALHOST].includes(chainId),
+    ),
+  ];
+}
+
+export function getAllNetworks(state) {
+  const networks = [
+    // Mainnet and custom networks
+    ...getNonTestNetworks(state),
+    // Test networks
+    ...getTestNetworks(state),
+  ];
 
   return networks;
 }

ui/selectors/selectors.test.js

@@ -317,7 +317,7 @@ describe('Selectors', () => {
   });
 
   describe('#getAllEnabledNetworks', () => {
-    it('returns only MainNet with showTestNetworks off', () => {
+    it('returns only Mainnet and Linea with showTestNetworks off', () => {
       const networks = selectors.getAllEnabledNetworks({
         metamask: {
           preferences: {