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

* UX: Multichain: Move location of test networks * Re-add Linea
2024-12-22 17:33:23 +01:00 · 2023-07-05 05:01:45 -05:00 · 2023-07-05 05:01:45 -05:00 · fdac94e361
commit fdac94e361
parent ecea2d7506
3 changed files with 112 additions and 102 deletions
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/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,20 +64,61 @@ 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(() => {
-    if (showTestNetworks && !showTestNetworksRef.current) {
-      // Scroll to the bottom of the list
-      networkListRef.current.lastChild.scrollIntoView();
-    }
-    showTestNetworksRef.current = showTestNetworks;
-  }, [showTestNetworks, showTestNetworksRef]);
+  const generateMenuItems = (desiredNetworks) => {
+    return desiredNetworks.map((network, index) => {
+      if (!lineaMainnetReleased && network.providerType === 'linea-mainnet') {
+        return null;
+      }
+      const isCurrentNetwork = currentChainId === network.chainId;
+      const canDeleteNetwork =
+        !isCurrentNetwork && !UNREMOVABLE_CHAIN_IDS.includes(network.chainId);
+
+      return (
+        <NetworkListItem
+          name={network.nickname}
+          iconSrc={network?.rpcPrefs?.imageUrl}
+          key={`${network.id || network.chainId}-${index}`}
+          selected={isCurrentNetwork}
+          onClick={async () => {
+            dispatch(toggleNetworkMenu());
+            if (network.providerType) {
+              dispatch(setProviderType(network.providerType));
+            } else {
+              dispatch(setActiveNetwork(network.id));
+            }
+            trackEvent({
+              event: MetaMetricsEventName.NavNetworkSwitched,
+              category: MetaMetricsEventCategory.Network,
+              properties: {
+                location: 'Network Menu',
+                chain_id: currentChainId,
+                from_network: currentChainId,
+                to_network: network.id || network.chainId,
+              },
+            });
+          }}
+          onDeleteClick={
+            canDeleteNetwork
+              ? () => {
+                  dispatch(toggleNetworkMenu());
+                  dispatch(
+                    showModal({
+                      name: 'CONFIRM_DELETE_NETWORK',
+                      target: network.id || network.chainId,
+                      onConfirm: () => undefined,
+                    }),
+                  );
+                }
+              : null
+          }
+        />
+      );
+    });
+  };

  return (
    <Popover
@ -83,60 +128,8 @@ export const NetworkListMenu = ({ onClose }) => {
      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 &&
-              !UNREMOVABLE_CHAIN_IDS.includes(network.chainId);
-
-            return (
-              <NetworkListItem
-                name={network.nickname}
-                iconSrc={network?.rpcPrefs?.imageUrl}
-                key={`${network.id || network.chainId}-${index}`}
-                selected={isCurrentNetwork}
-                onClick={async () => {
-                  dispatch(toggleNetworkMenu());
-                  if (network.providerType) {
-                    dispatch(setProviderType(network.providerType));
-                  } else {
-                    dispatch(setActiveNetwork(network.id));
-                  }
-                  trackEvent({
-                    event: MetaMetricsEventName.NavNetworkSwitched,
-                    category: MetaMetricsEventCategory.Network,
-                    properties: {
-                      location: 'Network Menu',
-                      chain_id: currentChainId,
-                      from_network: currentChainId,
-                      to_network: network.id || network.chainId,
-                    },
-                  });
-                }}
-                onDeleteClick={
-                  canDeleteNetwork
-                    ? () => {
-                        dispatch(toggleNetworkMenu());
-                        dispatch(
-                          showModal({
-                            name: 'CONFIRM_DELETE_NETWORK',
-                            target: network.id || network.chainId,
-                            onConfirm: () => undefined,
-                          }),
-                        );
-                      }
-                    : null
-                }
-              />
-            );
-          })}
+        <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}
--- a/ui/selectors/selectors.js
+++ b/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
-    ? allNetworks
-    : allNetworks.filter(
-        (network) => TEST_CHAINS.includes(network.chainId) === false,
-      );
+  return showTestnetNetworks ? allNetworks : nonTestNetworks;
 }

-export function getAllNetworks(state) {
+export function getTestNetworks(state) {
  const networkConfigurations = getNetworkConfigurations(state) || {};

-  const networks = [
-    // 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
+  return [
    {
      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;
 }
--- a/ui/selectors/selectors.test.js
+++ b/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: {