From d1bc22a4e254224ff1111919e8282198ee857cc8 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Mon, 24 Jul 2023 19:06:37 -0500
Subject: [PATCH] Fix #20140 - Ensure only one network displays as selected in
 the network picker when chain IDs collide (#20152)

---
 .../network-list-menu/network-list-menu.js    |  5 ++-
 .../network-list-menu.test.js                 | 38 ++++++++++++++++---
 2 files changed, 37 insertions(+), 6 deletions(-)

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 ab3ad899c..d89a4e9d2 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -17,6 +17,7 @@ import {
   getCurrentChainId,
   getNonTestNetworks,
   getTestNetworks,
+  getCurrentNetwork,
 } from '../../../selectors';
 import ToggleButton from '../../ui/toggle-button';
 import {
@@ -64,6 +65,7 @@ export const NetworkListMenu = ({ onClose }) => {
   const history = useHistory();
   const trackEvent = useContext(MetaMetricsContext);
 
+  const currentNetwork = useSelector(getCurrentNetwork);
   const currentlyOnTestNetwork = TEST_CHAINS.includes(currentChainId);
 
   const environmentType = getEnvironmentType();
@@ -85,7 +87,8 @@ export const NetworkListMenu = ({ onClose }) => {
         return null;
       }
 
-      const isCurrentNetwork = currentChainId === network.chainId;
+      const isCurrentNetwork = currentNetwork.id === network.id;
+
       const canDeleteNetwork =
         !isCurrentNetwork && !UNREMOVABLE_CHAIN_IDS.includes(network.chainId);
 
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.test.js b/ui/components/multichain/network-list-menu/network-list-menu.test.js
index 6608b1bae..9ef01f599 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.test.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.test.js
@@ -19,19 +19,26 @@ jest.mock('../../../store/actions.ts', () => ({
   toggleNetworkMenu: () => mockToggleNetworkMenu,
 }));
 
-const render = (showTestNetworks = false, currentChainId = '0x1') => {
-  const store = configureStore({
+const render = (
+  showTestNetworks = false,
+  currentChainId = '0x5',
+  providerConfigId = 'chain5',
+) => {
+  const state = {
     metamask: {
       ...mockState.metamask,
       providerConfig: {
         ...mockState.metamask.providerConfig,
         chainId: currentChainId,
+        id: providerConfigId,
       },
       preferences: {
         showTestNetworks,
       },
     },
-  });
+  };
+
+  const store = configureStore(state);
   return renderWithProvider(<NetworkListMenu onClose={jest.fn()} />, store);
 };
 
@@ -61,8 +68,8 @@ describe('NetworkListMenu', () => {
   });
 
   it('disables toggle when on test network', () => {
-    const { container } = render(false, CHAIN_IDS.GOERLI);
-    expect(container.querySelector('.toggle-button--disabled')).toBeDefined();
+    render(false, CHAIN_IDS.GOERLI);
+    expect(document.querySelector('.toggle-button--disabled')).toBeDefined();
   });
 
   it('switches networks when an item is clicked', () => {
@@ -71,4 +78,25 @@ describe('NetworkListMenu', () => {
     expect(mockToggleNetworkMenu).toHaveBeenCalled();
     expect(mockSetProviderType).toHaveBeenCalled();
   });
+
+  it('shows the correct selected network when networks share the same chain ID', () => {
+    // Mainnet and Custom Mainnet RPC both use chain ID 0x1
+    render(false, '0x1', 'testNetworkConfigurationId');
+
+    // Contains Mainnet and the two custom networks
+    const networkItems = document.querySelectorAll(
+      '.multichain-network-list-item',
+    );
+    expect(networkItems).toHaveLength(3);
+
+    const selectedNodes = document.querySelectorAll(
+      '.multichain-network-list-item--selected',
+    );
+    expect(selectedNodes).toHaveLength(1);
+
+    const selectedNodeText = selectedNodes[0].querySelector(
+      '.multichain-network-list-item__network-name',
+    ).textContent;
+    expect(selectedNodeText).toStrictEqual('Custom Mainnet RPC');
+  });
 });