m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

UX: Multichain: Fix Network Picker when Test Networks Disabled (#18694)

Browse Source
This commit is contained in:
David Walsh 2023-04-26 08:22:18 -05:00 committed by GitHub
parent 15d64b6467
commit 062a8b376f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 63 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,7 +15,7 @@ import {
import { CHAIN_IDS, TEST_CHAINS } from '../../../../shared/constants/network';
import {
getShowTestNetworks,
getAllNetworks,
getAllEnabledNetworks,
getCurrentChainId,
} from '../../../selectors';
import Box from '../../ui/box/box';
@ -33,7 +33,7 @@ const UNREMOVABLE_CHAIN_IDS = [CHAIN_IDS.MAINNET, ...TEST_CHAINS];
export const NetworkListMenu = ({ onClose }) => {
const t = useI18nContext();
const networks = useSelector(getAllNetworks);
const networks = useSelector(getAllEnabledNetworks);
const showTestNetworks = useSelector(getShowTestNetworks);
const currentChainId = useSelector(getCurrentChainId);
const dispatch = useDispatch();

66
ui/selectors/selectors.js
View File

@ -1158,9 +1158,19 @@ export function getCurrentNetwork(state) {
return allNetworks.find((network) => network.chainId === currentChainId);
}
export function getAllEnabledNetworks(state) {
const allNetworks = getAllNetworks(state);
const showTestnetNetworks = getShowTestNetworks(state);
return showTestnetNetworks
? allNetworks
: allNetworks.filter(
(network) => TEST_CHAINS.includes(network.chainId) === false,
);
}
export function getAllNetworks(state) {
const networkConfigurations = getNetworkConfigurations(state) || {};
const showTestnetNetworks = getShowTestNetworks(state);
const localhostFilter = (network) => network.chainId === CHAIN_IDS.LOCALHOST;
const networks = [];
@ -1183,34 +1193,32 @@ export function getAllNetworks(state) {
)
.map(([, network]) => network),
);
// Test networks if flag is on
if (showTestnetNetworks) {
networks.push(
...[
{
chainId: CHAIN_IDS.GOERLI,
nickname: GOERLI_DISPLAY_NAME,
rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.GOERLI],
providerType: NETWORK_TYPES.GOERLI,
},
{
chainId: CHAIN_IDS.SEPOLIA,
nickname: SEPOLIA_DISPLAY_NAME,
rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.SEPOLIA],
providerType: NETWORK_TYPES.SEPOLIA,
},
{
chainId: CHAIN_IDS.LINEA_TESTNET,
nickname: LINEA_TESTNET_DISPLAY_NAME,
rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_TESTNET],
provderType: NETWORK_TYPES.LINEA_TESTNET,
},
], // Localhosts
...Object.entries(networkConfigurations)
.filter(([, network]) => localhostFilter(network))
.map(([, network]) => network),
);
}
// Test networks
networks.push(
...[
{
chainId: CHAIN_IDS.GOERLI,
nickname: GOERLI_DISPLAY_NAME,
rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.GOERLI],
providerType: NETWORK_TYPES.GOERLI,
},
{
chainId: CHAIN_IDS.SEPOLIA,
nickname: SEPOLIA_DISPLAY_NAME,
rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.SEPOLIA],
providerType: NETWORK_TYPES.SEPOLIA,
},
{
chainId: CHAIN_IDS.LINEA_TESTNET,
nickname: LINEA_TESTNET_DISPLAY_NAME,
rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_TESTNET],
provderType: NETWORK_TYPES.LINEA_TESTNET,
},
], // Localhosts
...Object.entries(networkConfigurations)
.filter(([, network]) => localhostFilter(network))
.map(([, network]) => network),
);
return networks;
}

50
ui/selectors/selectors.test.js
View File

@ -3,7 +3,6 @@ import { KeyringType } from '../../shared/constants/keyring';
import {
CHAIN_IDS,
LOCALHOST_DISPLAY_NAME,
MAINNET_DISPLAY_NAME,
} from '../../shared/constants/network';
import * as selectors from './selectors';
@ -109,31 +108,6 @@ describe('Selectors', () => {
});
describe('#getAllNetworks', () => {
it('returns an array even if there are no custom networks', () => {
const networks = selectors.getAllNetworks({
metamask: {
preferences: {
showTestNetworks: false,
},
},
});
expect(networks instanceof Array).toBe(true);
// The only returning item should be Ethereum Mainnet
expect(networks).toHaveLength(1);
expect(networks[0].nickname).toStrictEqual(MAINNET_DISPLAY_NAME);
});
it('returns more test networks with showTestNetworks on', () => {
const networks = selectors.getAllNetworks({
metamask: {
preferences: {
showTestNetworks: true,
},
},
});
expect(networks.length).toBeGreaterThan(1);
});
it('sorts Localhost to the bottom of the test lists', () => {
const networks = selectors.getAllNetworks({
metamask: {
@ -153,6 +127,30 @@ describe('Selectors', () => {
});
});
describe('#getAllEnabledNetworks', () => {
it('returns only MainNet with showTestNetworks off', () => {
const networks = selectors.getAllEnabledNetworks({
metamask: {
preferences: {
showTestNetworks: false,
},
},
});
expect(networks).toHaveLength(1);
});
it('returns networks with showTestNetworks on', () => {
const networks = selectors.getAllEnabledNetworks({
metamask: {
preferences: {
showTestNetworks: true,
},
},
});
expect(networks.length).toBeGreaterThan(1);
});
});
describe('#isHardwareWallet', () => {
it('returns false if it is not a HW wallet', () => {
mockState.metamask.keyrings[0].type = KeyringType.imported;