m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00
Code

UX: Network Menu: Disable testnet toggle when on testnet (#19951)

Browse Source
This commit is contained in:
David Walsh 2023-07-14 08:21:53 -05:00 committed by GitHub
parent 91c84996b7
commit 45b7b0ca76
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/components/multichain/network-list-menu/network-list-menu.js
View File

@ -17,7 +17,6 @@ import {
getCurrentChainId,
getNonTestNetworks,
getTestNetworks,
getCurrentNetwork,
} from '../../../selectors';
import ToggleButton from '../../ui/toggle-button';
import {
@ -58,16 +57,15 @@ export const NetworkListMenu = ({ onClose }) => {
const nonTestNetworks = useSelector(getNonTestNetworks);
const testNetworks = useSelector(getTestNetworks);
const showTestNetworks = useSelector(getShowTestNetworks);
const currentChainId = useSelector(getCurrentChainId);
const currentNetwork = useSelector(getCurrentNetwork);
const dispatch = useDispatch();
const history = useHistory();
const trackEvent = useContext(MetaMetricsContext);
const currentlyOnTestNetwork = TEST_CHAINS.includes(currentChainId);
const environmentType = getEnvironmentType();
const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
@ -80,8 +78,8 @@ export const NetworkListMenu = ({ onClose }) => {
if (!lineaMainnetReleased && network.providerType === 'linea-mainnet') {
return null;
}
const isCurrentNetwork = currentNetwork.id === network.id;
const isCurrentNetwork = currentChainId === network.chainId;
const canDeleteNetwork =
!isCurrentNetwork && !UNREMOVABLE_CHAIN_IDS.includes(network.chainId);
@ -155,6 +153,7 @@ export const NetworkListMenu = ({ onClose }) => {
<Text>{t('showTestnetNetworks')}</Text>
<ToggleButton
value={showTestNetworks}
disabled={currentlyOnTestNetwork}
onToggle={(value) => {
const shouldShowTestNetworks = !value;
dispatch(setShowTestNetworks(shouldShowTestNetworks));
@ -167,7 +166,7 @@ export const NetworkListMenu = ({ onClose }) => {
}}
/>
</Box>
{showTestNetworks ? (
{showTestNetworks || currentlyOnTestNetwork ? (
<Box className="multichain-network-list-menu">
{generateMenuItems(testNetworks)}
</Box>

12
ui/components/multichain/network-list-menu/network-list-menu.test.js
View File

@ -4,6 +4,7 @@ import { fireEvent, renderWithProvider } from '../../../../test/jest';
import configureStore from '../../../store/store';
import mockState from '../../../../test/data/mock-state.json';
import {
CHAIN_IDS,
MAINNET_DISPLAY_NAME,
SEPOLIA_DISPLAY_NAME,
} from '../../../../shared/constants/network';
@ -18,10 +19,14 @@ jest.mock('../../../store/actions.ts', () => ({
toggleNetworkMenu: () => mockToggleNetworkMenu,
}));
const render = (showTestNetworks = false) => {
const render = (showTestNetworks = false, currentChainId = '0x1') => {
const store = configureStore({
metamask: {
...mockState.metamask,
providerConfig: {
...mockState.metamask.providerConfig,
chainId: currentChainId,
},
preferences: {
showTestNetworks,
},
@ -55,6 +60,11 @@ describe('NetworkListMenu', () => {
expect(mockSetShowTestNetworks).toHaveBeenCalled();
});
it('disables toggle when on test network', () => {
const { container } = render(false, CHAIN_IDS.GOERLI);
expect(container.querySelector('.toggle-button--disabled')).toBeDefined();
});
it('switches networks when an item is clicked', () => {
const { getByText } = render();
fireEvent.click(getByText(MAINNET_DISPLAY_NAME));