UX: Network Menu: Disable testnet toggle when on testnet (#19951)

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

@@ -17,7 +17,6 @@ import {
   getCurrentChainId,
   getNonTestNetworks,
   getTestNetworks,
-  getCurrentNetwork,
 } from '../../../selectors';
 import ToggleButton from '../../ui/toggle-button';
 import {
@@ -58,16 +57,15 @@ export const NetworkListMenu = ({ onClose }) => {
 
   const nonTestNetworks = useSelector(getNonTestNetworks);
   const testNetworks = useSelector(getTestNetworks);
-
   const showTestNetworks = useSelector(getShowTestNetworks);
   const currentChainId = useSelector(getCurrentChainId);
 
-  const currentNetwork = useSelector(getCurrentNetwork);
-
   const dispatch = useDispatch();
   const history = useHistory();
   const trackEvent = useContext(MetaMetricsContext);
 
+  const currentlyOnTestNetwork = TEST_CHAINS.includes(currentChainId);
+
   const environmentType = getEnvironmentType();
   const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
 
@@ -80,8 +78,8 @@ export const NetworkListMenu = ({ onClose }) => {
       if (!lineaMainnetReleased && network.providerType === 'linea-mainnet') {
         return null;
       }
-      const isCurrentNetwork = currentNetwork.id === network.id;
 
+      const isCurrentNetwork = currentChainId === network.chainId;
       const canDeleteNetwork =
         !isCurrentNetwork && !UNREMOVABLE_CHAIN_IDS.includes(network.chainId);
 
@@ -155,6 +153,7 @@ export const NetworkListMenu = ({ onClose }) => {
             <Text>{t('showTestnetNetworks')}</Text>
             <ToggleButton
               value={showTestNetworks}
+              disabled={currentlyOnTestNetwork}
               onToggle={(value) => {
                 const shouldShowTestNetworks = !value;
                 dispatch(setShowTestNetworks(shouldShowTestNetworks));
@@ -167,7 +166,7 @@ export const NetworkListMenu = ({ onClose }) => {
               }}
             />
           </Box>
-          {showTestNetworks ? (
+          {showTestNetworks || currentlyOnTestNetwork ? (
             <Box className="multichain-network-list-menu">
               {generateMenuItems(testNetworks)}
             </Box>

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

@@ -4,6 +4,7 @@ import { fireEvent, renderWithProvider } from '../../../../test/jest';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
 import {
+  CHAIN_IDS,
   MAINNET_DISPLAY_NAME,
   SEPOLIA_DISPLAY_NAME,
 } from '../../../../shared/constants/network';
@@ -18,10 +19,14 @@ jest.mock('../../../store/actions.ts', () => ({
   toggleNetworkMenu: () => mockToggleNetworkMenu,
 }));
 
-const render = (showTestNetworks = false) => {
+const render = (showTestNetworks = false, currentChainId = '0x1') => {
   const store = configureStore({
     metamask: {
       ...mockState.metamask,
+      providerConfig: {
+        ...mockState.metamask.providerConfig,
+        chainId: currentChainId,
+      },
       preferences: {
         showTestNetworks,
       },
@@ -55,6 +60,11 @@ describe('NetworkListMenu', () => {
     expect(mockSetShowTestNetworks).toHaveBeenCalled();
   });
 
+  it('disables toggle when on test network', () => {
+    const { container } = render(false, CHAIN_IDS.GOERLI);
+    expect(container.querySelector('.toggle-button--disabled')).toBeDefined();
+  });
+
   it('switches networks when an item is clicked', () => {
     const { getByText } = render();
     fireEvent.click(getByText(MAINNET_DISPLAY_NAME));