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

Fix #19832 - UX: Multichain: Move location of test networks (#19812)

Browse Source 
* UX: Multichain: Move location of test networks

* Re-add Linea
This commit is contained in:
David Walsh 2023-07-05 05:01:45 -05:00 committed by GitHub
parent ecea2d7506
commit fdac94e361
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 112 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React, { useContext, useEffect, useRef } from 'react';
import React, { useContext } from 'react';
import PropTypes from 'prop-types';
import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom';
@ -15,8 +15,9 @@ import {
import { CHAIN_IDS, TEST_CHAINS } from '../../../../shared/constants/network';
import {
getShowTestNetworks,
getAllEnabledNetworks,
getCurrentChainId,
getNonTestNetworks,
getTestNetworks,
} from '../../../selectors';
import ToggleButton from '../../ui/toggle-button';
import {
@ -50,7 +51,10 @@ const UNREMOVABLE_CHAIN_IDS = [
export const NetworkListMenu = ({ onClose }) => {
const t = useI18nContext();
const networks = useSelector(getAllEnabledNetworks);
const nonTestNetworks = useSelector(getNonTestNetworks);
const testNetworks = useSelector(getTestNetworks);
const showTestNetworks = useSelector(getShowTestNetworks);
const currentChainId = useSelector(getCurrentChainId);
const dispatch = useDispatch();
@ -60,41 +64,18 @@ export const NetworkListMenu = ({ onClose }) => {
const environmentType = getEnvironmentType();
const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
const showTestNetworksRef = useRef(showTestNetworks);
const networkListRef = useRef(null);
const completedOnboarding = useSelector(getCompletedOnboarding);
const lineaMainnetReleased = useSelector(isLineaMainnetNetworkReleased);
useEffect(() => {
if (showTestNetworks && !showTestNetworksRef.current) {
// Scroll to the bottom of the list
networkListRef.current.lastChild.scrollIntoView();
}
showTestNetworksRef.current = showTestNetworks;
}, [showTestNetworks, showTestNetworksRef]);
return (
<Popover
contentClassName="multichain-network-list-menu-content-wrapper"
onClose={onClose}
centerTitle
title={t('networkMenuHeading')}
>
<>
<Box className="multichain-network-list-menu" ref={networkListRef}>
{networks.map((network, index) => {
if (
!lineaMainnetReleased &&
network.providerType === 'linea-mainnet'
) {
const generateMenuItems = (desiredNetworks) => {
return desiredNetworks.map((network, index) => {
if (!lineaMainnetReleased && network.providerType === 'linea-mainnet') {
return null;
}
const isCurrentNetwork = currentChainId === network.chainId;
const canDeleteNetwork =
!isCurrentNetwork &&
!UNREMOVABLE_CHAIN_IDS.includes(network.chainId);
!isCurrentNetwork && !UNREMOVABLE_CHAIN_IDS.includes(network.chainId);
return (
<NetworkListItem
@ -136,7 +117,19 @@ export const NetworkListMenu = ({ onClose }) => {
}
/>
);
})}
});
};
return (
<Popover
contentClassName="multichain-network-list-menu-content-wrapper"
onClose={onClose}
centerTitle
title={t('networkMenuHeading')}
>
<>
<Box className="multichain-network-list-menu">
{generateMenuItems(nonTestNetworks)}
</Box>
<Box
padding={4}
@ -158,6 +151,11 @@ export const NetworkListMenu = ({ onClose }) => {
}}
/>
</Box>
{showTestNetworks ? (
<Box className="multichain-network-list-menu">
{generateMenuItems(testNetworks)}
</Box>
) : null}
<Box padding={4}>
<ButtonSecondary
size={BUTTON_SECONDARY_SIZES.LG}

80
ui/selectors/selectors.js
View File

@ -34,8 +34,8 @@ import {
CURRENCY_SYMBOLS,
TEST_NETWORK_TICKER_MAP,
LINEA_GOERLI_TOKEN_IMAGE_URL,
LINEA_MAINNET_TOKEN_IMAGE_URL,
LINEA_MAINNET_DISPLAY_NAME,
LINEA_MAINNET_TOKEN_IMAGE_URL,
} from '../../shared/constants/network';
import {
WebHIDConnectedStatuses,
@ -1176,46 +1176,17 @@ export function getCurrentNetwork(state) {
}
export function getAllEnabledNetworks(state) {
const nonTestNetworks = getNonTestNetworks(state);
const allNetworks = getAllNetworks(state);
const showTestnetNetworks = getShowTestNetworks(state);
return showTestnetNetworks
? allNetworks
: allNetworks.filter(
(network) => TEST_CHAINS.includes(network.chainId) === false,
);
return showTestnetNetworks ? allNetworks : nonTestNetworks;
}
export function getAllNetworks(state) {
export function getTestNetworks(state) {
const networkConfigurations = getNetworkConfigurations(state) || {};
const networks = [
// Mainnet always first
{
chainId: CHAIN_IDS.MAINNET,
nickname: MAINNET_DISPLAY_NAME,
rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.MAINNET],
rpcPrefs: {
imageUrl: ETH_TOKEN_IMAGE_URL,
},
providerType: NETWORK_TYPES.MAINNET,
ticker: CURRENCY_SYMBOLS.ETH,
},
{
chainId: CHAIN_IDS.LINEA_MAINNET,
nickname: LINEA_MAINNET_DISPLAY_NAME,
rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_MAINNET],
rpcPrefs: {
imageUrl: LINEA_MAINNET_TOKEN_IMAGE_URL,
},
providerType: NETWORK_TYPES.LINEA_MAINNET,
ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.LINEA_MAINNET],
},
// Custom networks added by the user
...Object.values(networkConfigurations).filter(
({ chainId }) => ![CHAIN_IDS.LOCALHOST].includes(chainId),
),
// Test networks
return [
{
chainId: CHAIN_IDS.GOERLI,
nickname: GOERLI_DISPLAY_NAME,
@ -1245,6 +1216,47 @@ export function getAllNetworks(state) {
({ chainId }) => chainId === CHAIN_IDS.LOCALHOST,
),
];
}
export function getNonTestNetworks(state) {
const networkConfigurations = getNetworkConfigurations(state) || {};
return [
// Mainnet always first
{
chainId: CHAIN_IDS.MAINNET,
nickname: MAINNET_DISPLAY_NAME,
rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.MAINNET],
rpcPrefs: {
imageUrl: ETH_TOKEN_IMAGE_URL,
},
providerType: NETWORK_TYPES.MAINNET,
ticker: CURRENCY_SYMBOLS.ETH,
},
{
chainId: CHAIN_IDS.LINEA_MAINNET,
nickname: LINEA_MAINNET_DISPLAY_NAME,
rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_MAINNET],
rpcPrefs: {
imageUrl: LINEA_MAINNET_TOKEN_IMAGE_URL,
},
providerType: NETWORK_TYPES.LINEA_MAINNET,
ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.LINEA_MAINNET],
},
// Custom networks added by the user
...Object.values(networkConfigurations).filter(
({ chainId }) => ![CHAIN_IDS.LOCALHOST].includes(chainId),
),
];
}
export function getAllNetworks(state) {
const networks = [
// Mainnet and custom networks
...getNonTestNetworks(state),
// Test networks
...getTestNetworks(state),
];
return networks;
}

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

@ -317,7 +317,7 @@ describe('Selectors', () => {
});
describe('#getAllEnabledNetworks', () => {
it('returns only MainNet with showTestNetworks off', () => {
it('returns only Mainnet and Linea with showTestNetworks off', () => {
const networks = selectors.getAllEnabledNetworks({
metamask: {
preferences: {