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

132
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,20 +64,61 @@ 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]);
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);
return (
<NetworkListItem
name={network.nickname}
iconSrc={network?.rpcPrefs?.imageUrl}
key={`${network.id || network.chainId}-${index}`}
selected={isCurrentNetwork}
onClick={async () => {
dispatch(toggleNetworkMenu());
if (network.providerType) {
dispatch(setProviderType(network.providerType));
} else {
dispatch(setActiveNetwork(network.id));
}
trackEvent({
event: MetaMetricsEventName.NavNetworkSwitched,
category: MetaMetricsEventCategory.Network,
properties: {
location: 'Network Menu',
chain_id: currentChainId,
from_network: currentChainId,
to_network: network.id || network.chainId,
},
});
}}
onDeleteClick={
canDeleteNetwork
? () => {
dispatch(toggleNetworkMenu());
dispatch(
showModal({
name: 'CONFIRM_DELETE_NETWORK',
target: network.id || network.chainId,
onConfirm: () => undefined,
}),
);
}
: null
}
/>
);
});
};
return (
<Popover
@ -83,60 +128,8 @@ export const NetworkListMenu = ({ onClose }) => {
title={t('networkMenuHeading')}
>
<>
<Box className="multichain-network-list-menu" ref={networkListRef}>
{networks.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);
return (
<NetworkListItem
name={network.nickname}
iconSrc={network?.rpcPrefs?.imageUrl}
key={`${network.id || network.chainId}-${index}`}
selected={isCurrentNetwork}
onClick={async () => {
dispatch(toggleNetworkMenu());
if (network.providerType) {
dispatch(setProviderType(network.providerType));
} else {
dispatch(setActiveNetwork(network.id));
}
trackEvent({
event: MetaMetricsEventName.NavNetworkSwitched,
category: MetaMetricsEventCategory.Network,
properties: {
location: 'Network Menu',
chain_id: currentChainId,
from_network: currentChainId,
to_network: network.id || network.chainId,
},
});
}}
onDeleteClick={
canDeleteNetwork
? () => {
dispatch(toggleNetworkMenu());
dispatch(
showModal({
name: 'CONFIRM_DELETE_NETWORK',
target: network.id || network.chainId,
onConfirm: () => undefined,
}),
);
}
: null
}
/>
);
})}
<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: {