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,
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);

View File

@ -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');
});
});