1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-10-22 03:12:42 +02:00

Fix #20140 - Ensure only one network displays as selected in the network picker when chain IDs collide (#20152)

This commit is contained in:
David Walsh 2023-07-24 19:06:37 -05:00 committed by Dan J Miller
parent 62f0e0955f
commit 19e2296131
2 changed files with 37 additions and 6 deletions

View File

@ -17,6 +17,7 @@ import {
getCurrentChainId, getCurrentChainId,
getNonTestNetworks, getNonTestNetworks,
getTestNetworks, getTestNetworks,
getCurrentNetwork,
} from '../../../selectors'; } from '../../../selectors';
import ToggleButton from '../../ui/toggle-button'; import ToggleButton from '../../ui/toggle-button';
import { import {
@ -64,6 +65,7 @@ export const NetworkListMenu = ({ onClose }) => {
const history = useHistory(); const history = useHistory();
const trackEvent = useContext(MetaMetricsContext); const trackEvent = useContext(MetaMetricsContext);
const currentNetwork = useSelector(getCurrentNetwork);
const currentlyOnTestNetwork = TEST_CHAINS.includes(currentChainId); const currentlyOnTestNetwork = TEST_CHAINS.includes(currentChainId);
const environmentType = getEnvironmentType(); const environmentType = getEnvironmentType();
@ -85,7 +87,8 @@ export const NetworkListMenu = ({ onClose }) => {
return null; return null;
} }
const isCurrentNetwork = currentChainId === network.chainId; const isCurrentNetwork = currentNetwork.id === network.id;
const canDeleteNetwork = const canDeleteNetwork =
!isCurrentNetwork && !UNREMOVABLE_CHAIN_IDS.includes(network.chainId); !isCurrentNetwork && !UNREMOVABLE_CHAIN_IDS.includes(network.chainId);

View File

@ -19,19 +19,26 @@ jest.mock('../../../store/actions.ts', () => ({
toggleNetworkMenu: () => mockToggleNetworkMenu, toggleNetworkMenu: () => mockToggleNetworkMenu,
})); }));
const render = (showTestNetworks = false, currentChainId = '0x1') => { const render = (
const store = configureStore({ showTestNetworks = false,
currentChainId = '0x5',
providerConfigId = 'chain5',
) => {
const state = {
metamask: { metamask: {
...mockState.metamask, ...mockState.metamask,
providerConfig: { providerConfig: {
...mockState.metamask.providerConfig, ...mockState.metamask.providerConfig,
chainId: currentChainId, chainId: currentChainId,
id: providerConfigId,
}, },
preferences: { preferences: {
showTestNetworks, showTestNetworks,
}, },
}, },
}); };
const store = configureStore(state);
return renderWithProvider(<NetworkListMenu onClose={jest.fn()} />, store); return renderWithProvider(<NetworkListMenu onClose={jest.fn()} />, store);
}; };
@ -61,8 +68,8 @@ describe('NetworkListMenu', () => {
}); });
it('disables toggle when on test network', () => { it('disables toggle when on test network', () => {
const { container } = render(false, CHAIN_IDS.GOERLI); render(false, CHAIN_IDS.GOERLI);
expect(container.querySelector('.toggle-button--disabled')).toBeDefined(); expect(document.querySelector('.toggle-button--disabled')).toBeDefined();
}); });
it('switches networks when an item is clicked', () => { it('switches networks when an item is clicked', () => {
@ -71,4 +78,25 @@ describe('NetworkListMenu', () => {
expect(mockToggleNetworkMenu).toHaveBeenCalled(); expect(mockToggleNetworkMenu).toHaveBeenCalled();
expect(mockSetProviderType).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');
});
}); });