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 dd9278bc1..fb4ae7dbb 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(, 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'); + }); });