mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
Fix #20140 - Ensure only one network displays as selected in the network picker when chain IDs collide (#20152)
This commit is contained in:
parent
62f0e0955f
commit
19e2296131
@ -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);
|
||||||
|
|
||||||
|
@ -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');
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
Loading…
x
Reference in New Issue
Block a user