-
- F
+ 
= () => {
setIncomingTransactionsPreferences={(chainId, value) => {
console.log(chainId, value);
}}
- allNetworks={ALL_NETWORKS_DATA}
+ networkConfigurations={
+ ALL_NETWORKS_DATA as unknown as Record
+ }
incomingTransactionsPreferences={INCOMING_DATA}
/>
);
diff --git a/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.test.js b/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.test.js
index a0f8e4ed4f69..eab43bcc7113 100644
--- a/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.test.js
+++ b/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.test.js
@@ -25,7 +25,7 @@ describe('IncomingTransactionToggle', () => {
setIncomingTransactionsPreferences={
setIncomingTransactionsPreferencesStub
}
- allNetworks={ALL_NETWORKS_DATA}
+ networkConfigurations={ALL_NETWORKS_DATA}
incomingTransactionsPreferences={INCOMING_DATA}
/>
,
@@ -34,31 +34,31 @@ describe('IncomingTransactionToggle', () => {
expect(container).toMatchSnapshot();
const ethMainnetCheckbox = within(
- getByTestId(`network-toggle-${ALL_NETWORKS_DATA[0].chainId}`),
+ getByTestId(`network-toggle-${ALL_NETWORKS_DATA['0x1'].chainId}`),
).getByRole('checkbox');
expect(ethMainnetCheckbox.value).toStrictEqual('true');
const lineaMainnetCheckbox = within(
- getByTestId(`network-toggle-${ALL_NETWORKS_DATA[1].chainId}`),
+ getByTestId(`network-toggle-${ALL_NETWORKS_DATA['0xe708'].chainId}`),
).getByRole('checkbox');
expect(lineaMainnetCheckbox.value).toStrictEqual('false');
const fantomCheckbox = within(
- getByTestId(`network-toggle-${ALL_NETWORKS_DATA[2].chainId}`),
+ getByTestId(`network-toggle-${ALL_NETWORKS_DATA['0xfa'].chainId}`),
).getByRole('checkbox');
expect(fantomCheckbox.value).toStrictEqual('true');
const goerliCheckbox = within(
- getByTestId(`network-toggle-${ALL_NETWORKS_DATA[3].chainId}`),
+ getByTestId(`network-toggle-${ALL_NETWORKS_DATA['0x5'].chainId}`),
).getByRole('checkbox');
expect(goerliCheckbox.value).toStrictEqual('false');
const sepoliaCheckbox = within(
- getByTestId(`network-toggle-${ALL_NETWORKS_DATA[4].chainId}`),
+ getByTestId(`network-toggle-${ALL_NETWORKS_DATA['0xaa36a7'].chainId}`),
).getByRole('checkbox');
expect(sepoliaCheckbox.value).toStrictEqual('true');
const lineaGoerliCheckbox = within(
- getByTestId(`network-toggle-${ALL_NETWORKS_DATA[5].chainId}`),
+ getByTestId(`network-toggle-${ALL_NETWORKS_DATA['0xe704'].chainId}`),
).getByRole('checkbox');
expect(lineaGoerliCheckbox.value).toStrictEqual('true');
const lineaSepoliaCheckbox = within(
- getByTestId(`network-toggle-${ALL_NETWORKS_DATA[6].chainId}`),
+ getByTestId(`network-toggle-${ALL_NETWORKS_DATA['0xe705'].chainId}`),
).getByRole('checkbox');
expect(lineaSepoliaCheckbox.value).toStrictEqual('true');
});
@@ -70,14 +70,14 @@ describe('IncomingTransactionToggle', () => {
setIncomingTransactionsPreferences={
setIncomingTransactionsPreferencesStub
}
- allNetworks={ALL_NETWORKS_DATA}
+ networkConfigurations={ALL_NETWORKS_DATA}
incomingTransactionsPreferences={INCOMING_DATA}
/>
,
mockStore,
);
const lineaMainnetCheckbox = within(
- getByTestId(`network-toggle-${ALL_NETWORKS_DATA[1].chainId}`),
+ getByTestId(`network-toggle-${ALL_NETWORKS_DATA['0xe708'].chainId}`),
).getByRole('checkbox');
fireEvent.click(lineaMainnetCheckbox);
// set 1 false to true
@@ -91,7 +91,7 @@ describe('IncomingTransactionToggle', () => {
// set 1 false to true
const goerliCheckbox = within(
- getByTestId(`network-toggle-${ALL_NETWORKS_DATA[3].chainId}`),
+ getByTestId(`network-toggle-${ALL_NETWORKS_DATA['0x5'].chainId}`),
).getByRole('checkbox');
fireEvent.click(goerliCheckbox);
expect(
diff --git a/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.tsx b/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.tsx
index 3b44a56b262f..d1274075d056 100644
--- a/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.tsx
+++ b/ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.tsx
@@ -1,6 +1,8 @@
import React, { useContext, useEffect, useState } from 'react';
import PropTypes from 'prop-types';
+import { NetworkConfiguration } from '@metamask/network-controller';
+import { Hex } from '@metamask/utils';
import { I18nContext } from '../../../contexts/i18n';
import { Box, Text } from '../../component-library';
@@ -10,7 +12,10 @@ import {
} from '../../../helpers/constants/design-system';
import { PolymorphicRef } from '../../component-library/box';
-import { TEST_CHAINS } from '../../../../shared/constants/network';
+import {
+ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
+ TEST_CHAINS,
+} from '../../../../shared/constants/network';
import NetworkToggle from './network-toggle';
type IncomingTransactionToggleProps = {
@@ -18,9 +23,7 @@ type IncomingTransactionToggleProps = {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
wrapperRef?: PolymorphicRef;
incomingTransactionsPreferences: Record;
- // TODO: Replace `any` with type
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- allNetworks: Record[];
+ networkConfigurations: Record;
setIncomingTransactionsPreferences: (
chainId: string,
isAllEnabledValue: boolean,
@@ -30,7 +33,7 @@ type IncomingTransactionToggleProps = {
const IncomingTransactionToggle = ({
wrapperRef,
incomingTransactionsPreferences,
- allNetworks,
+ networkConfigurations,
setIncomingTransactionsPreferences,
}: IncomingTransactionToggleProps) => {
const t = useContext(I18nContext);
@@ -38,7 +41,7 @@ const IncomingTransactionToggle = ({
const [networkPreferences, setNetworkPreferences] = useState(
generateIncomingNetworkPreferences(
incomingTransactionsPreferences,
- allNetworks,
+ networkConfigurations,
),
);
@@ -46,10 +49,10 @@ const IncomingTransactionToggle = ({
setNetworkPreferences(
generateIncomingNetworkPreferences(
incomingTransactionsPreferences,
- allNetworks,
+ networkConfigurations,
),
);
- }, [incomingTransactionsPreferences, allNetworks]);
+ }, [incomingTransactionsPreferences, networkConfigurations]);
const toggleSingleNetwork = (chainId: string, value: boolean): void => {
setIncomingTransactionsPreferences(chainId, value);
@@ -80,15 +83,13 @@ export default IncomingTransactionToggle;
IncomingTransactionToggle.propTypes = {
wrapperRef: PropTypes.object,
incomingTransactionsPreferences: PropTypes.object.isRequired,
- allNetworks: PropTypes.array.isRequired,
+ networkConfigurations: PropTypes.object.isRequired,
setIncomingTransactionsPreferences: PropTypes.func.isRequired,
};
function generateIncomingNetworkPreferences(
incomingTransactionsPreferences: Record,
- // TODO: Replace `any` with type
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- allNetworks: Record,
+ networkConfigurations: Record,
// TODO: Replace `any` with type
// eslint-disable-next-line @typescript-eslint/no-explicit-any
): Record {
@@ -96,13 +97,18 @@ function generateIncomingNetworkPreferences(
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const incomingTxnPreferences: Record = {};
- Object.keys(allNetworks).forEach((id) => {
- const { chainId } = allNetworks[id];
- incomingTxnPreferences[chainId] = {
- isShowIncomingTransactions: incomingTransactionsPreferences[chainId],
- isATestNetwork: TEST_CHAINS.includes(chainId),
- label: allNetworks[id].nickname,
- imageUrl: allNetworks[id].rpcPrefs?.imageUrl,
+ Object.values(networkConfigurations).forEach((network) => {
+ incomingTxnPreferences[network.chainId] = {
+ isShowIncomingTransactions:
+ incomingTransactionsPreferences[network.chainId],
+ isATestNetwork: TEST_CHAINS.includes(
+ network.chainId as (typeof TEST_CHAINS)[number],
+ ),
+ label: network.name,
+ imageUrl:
+ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
+ network.chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+ ],
};
});
diff --git a/ui/components/app/incoming-trasaction-toggle/mock-data.ts b/ui/components/app/incoming-trasaction-toggle/mock-data.ts
index 3e048c9c026e..29a704c7ce3c 100644
--- a/ui/components/app/incoming-trasaction-toggle/mock-data.ts
+++ b/ui/components/app/incoming-trasaction-toggle/mock-data.ts
@@ -1,80 +1,89 @@
-export const ALL_NETWORKS_DATA = [
- {
+export const ALL_NETWORKS_DATA = {
+ '0x1': {
+ nativeCurrency: 'ETH',
chainId: '0x1',
- nickname: 'Ethereum Mainnet',
- rpcUrl: 'https://mainnet.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
- rpcPrefs: {
- imageUrl: './images/eth_logo.svg',
- },
- providerType: 'mainnet',
- ticker: 'ETH',
- id: 'mainnet',
- removable: false,
+ defaultRpcEndpointIndex: 0,
+ name: 'Ethereum Mainnet',
+ blockExplorerUrls: [],
+ rpcEndpoints: [
+ {
+ networkClientId: 'mainnet',
+ },
+ ],
},
- {
+ '0xe708': {
+ nativeCurrency: 'ETH',
chainId: '0xe708',
- nickname: 'Linea Mainnet',
- rpcUrl:
- 'https://linea-mainnet.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
- rpcPrefs: {
- imageUrl: './images/linea-logo-mainnet.svg',
- },
- providerType: 'linea-mainnet',
- id: 'linea-mainnet',
- removable: false,
+ defaultRpcEndpointIndex: 0,
+ name: 'Linea Mainnet',
+ blockExplorerUrls: [],
+ rpcEndpoints: [
+ {
+ networkClientId: 'linea-mainnet',
+ },
+ ],
},
- {
+ '0xfa': {
+ nativeCurrency: 'FTM',
chainId: '0xfa',
- nickname: 'FANTOM',
- rpcPrefs: {},
- rpcUrl: 'http://ftmscan.com5',
- ticker: 'FTM',
+ defaultRpcEndpointIndex: 0,
+ name: 'FANTOM',
+ blockExplorerUrls: [],
+ rpcEndpoints: [
+ {
+ networkClientId: 'fantom-network-client-id',
+ },
+ ],
},
- {
+ '0x5': {
+ nativeCurrency: 'GoerliETH',
chainId: '0x5',
- nickname: 'Goerli',
- rpcUrl: 'https://goerli.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
- providerType: 'goerli',
- ticker: 'GoerliETH',
- id: 'goerli',
- removable: false,
+ defaultRpcEndpointIndex: 0,
+ name: 'Goerli',
+ blockExplorerUrls: [],
+ rpcEndpoints: [
+ {
+ networkClientId: 'goerli',
+ },
+ ],
},
- {
+ '0xaa36a7': {
+ nativeCurrency: 'SepoliaETH',
chainId: '0xaa36a7',
- nickname: 'Sepolia',
- rpcUrl: 'https://sepolia.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
- providerType: 'sepolia',
- ticker: 'SepoliaETH',
- id: 'sepolia',
- removable: false,
+ name: 'Sepolia',
+ blockExplorerUrls: [],
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'sepolia',
+ },
+ ],
},
- {
+ '0xe704': {
+ nativeCurrency: 'LineaETH',
chainId: '0xe704',
- nickname: 'Linea Goerli',
- rpcUrl:
- 'https://linea-goerli.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
- rpcPrefs: {
- imageUrl: './images/linea-logo-testnet.png',
- },
- providerType: 'linea-goerli',
- ticker: 'LineaETH',
- id: 'linea-goerli',
- removable: false,
+ name: 'Linea Goerli',
+ blockExplorerUrls: [],
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'linea-goerli',
+ },
+ ],
},
- {
+ '0xe705': {
+ nativeCurrency: 'LineaETH',
chainId: '0xe705',
- nickname: 'Linea Sepolia',
- rpcUrl:
- 'https://linea-sepolia.infura.io/v3/6c21df2a8dcb4a77b9bbcc1b65ee9ded',
- rpcPrefs: {
- imageUrl: './images/linea-logo-testnet.png',
- },
- providerType: 'linea-sepolia',
- ticker: 'LineaETH',
- id: 'linea-sepolia',
- removable: false,
+ name: 'Linea Sepolia',
+ blockExplorerUrls: [],
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'linea-sepolia',
+ },
+ ],
},
-];
+};
export const INCOMING_DATA = {
'0x1': true,
diff --git a/ui/components/app/loading-network-screen/loading-network-screen.container.js b/ui/components/app/loading-network-screen/loading-network-screen.container.js
index dd671f8d3261..34a626bc1b5e 100644
--- a/ui/components/app/loading-network-screen/loading-network-screen.container.js
+++ b/ui/components/app/loading-network-screen/loading-network-screen.container.js
@@ -30,11 +30,9 @@ const mapStateToProps = (state) => {
let networkName = nickname;
if (networkName === undefined) {
const networks = getAllEnabledNetworks(state);
- const desiredNetwork = networks.find(
- (network) => network.chainId === chainId,
- );
+ const desiredNetwork = networks[chainId];
if (desiredNetwork) {
- networkName = desiredNetwork.nickname;
+ networkName = desiredNetwork.name;
}
}
diff --git a/ui/components/app/modals/confirm-delete-network/confirm-delete-network.component.js b/ui/components/app/modals/confirm-delete-network/confirm-delete-network.component.js
index a898488591e7..341e9a29f2c6 100644
--- a/ui/components/app/modals/confirm-delete-network/confirm-delete-network.component.js
+++ b/ui/components/app/modals/confirm-delete-network/confirm-delete-network.component.js
@@ -5,10 +5,10 @@ import Modal, { ModalContent } from '../../modal';
export default class ConfirmDeleteNetwork extends PureComponent {
static propTypes = {
hideModal: PropTypes.func.isRequired,
- removeNetworkConfiguration: PropTypes.func.isRequired,
+ removeNetwork: PropTypes.func.isRequired,
onConfirm: PropTypes.func.isRequired,
- target: PropTypes.string.isRequired,
networkNickname: PropTypes.string.isRequired,
+ chainId: PropTypes.string.isRequired,
};
static contextTypes = {
@@ -16,7 +16,7 @@ export default class ConfirmDeleteNetwork extends PureComponent {
};
handleDelete = async () => {
- await this.props.removeNetworkConfiguration(this.props.target);
+ await this.props.removeNetwork(this.props.chainId);
this.props.onConfirm();
this.props.hideModal();
};
diff --git a/ui/components/app/modals/confirm-delete-network/confirm-delete-network.container.js b/ui/components/app/modals/confirm-delete-network/confirm-delete-network.container.js
index 5ee9ff4e2087..ac4c444692d2 100644
--- a/ui/components/app/modals/confirm-delete-network/confirm-delete-network.container.js
+++ b/ui/components/app/modals/confirm-delete-network/confirm-delete-network.container.js
@@ -1,21 +1,21 @@
import { connect } from 'react-redux';
import { compose } from 'redux';
import withModalProps from '../../../../helpers/higher-order-components/with-modal-props';
-import { removeNetworkConfiguration } from '../../../../store/actions';
-import { getNetworkConfigurations } from '../../../../selectors';
+import { removeNetwork } from '../../../../store/actions';
+import { getNetworkConfigurationsByChainId } from '../../../../selectors';
import ConfirmDeleteNetwork from './confirm-delete-network.component';
const mapStateToProps = (state, ownProps) => {
- const networkConfigurations = getNetworkConfigurations(state);
- const networkNickname = networkConfigurations[ownProps.target].nickname;
-
- return { networkNickname };
+ const networks = getNetworkConfigurationsByChainId(state);
+ const { chainId, name: networkNickname } = networks[ownProps.target];
+ return { chainId, networkNickname };
};
const mapDispatchToProps = (dispatch) => {
return {
- removeNetworkConfiguration: (target) =>
- dispatch(removeNetworkConfiguration(target)),
+ removeNetwork: (chainId) => {
+ dispatch(removeNetwork(chainId));
+ },
};
};
diff --git a/ui/components/app/modals/confirm-delete-network/confirm-delete-network.test.js b/ui/components/app/modals/confirm-delete-network/confirm-delete-network.test.js
index 467171181dac..7bae50d2b188 100644
--- a/ui/components/app/modals/confirm-delete-network/confirm-delete-network.test.js
+++ b/ui/components/app/modals/confirm-delete-network/confirm-delete-network.test.js
@@ -9,8 +9,8 @@ describe('Confirm Delete Network', () => {
const props = {
hideModal: jest.fn(),
onConfirm: jest.fn(),
- removeNetworkConfiguration: jest.fn().mockResolvedValue(),
- target: 'testNetworkConfigurationId',
+ removeNetwork: jest.fn().mockResolvedValue(),
+ target: '0x1',
};
it('should match snapshot', () => {
@@ -41,7 +41,7 @@ describe('Confirm Delete Network', () => {
fireEvent.click(queryByText('[cancel]'));
- expect(props.removeNetworkConfiguration).not.toHaveBeenCalled();
+ expect(props.removeNetwork).not.toHaveBeenCalled();
expect(props.onConfirm).not.toHaveBeenCalled();
expect(props.hideModal).toHaveBeenCalled();
@@ -55,7 +55,7 @@ describe('Confirm Delete Network', () => {
fireEvent.click(queryByText('[delete]'));
await waitFor(() => {
- expect(props.removeNetworkConfiguration).toHaveBeenCalled();
+ expect(props.removeNetwork).toHaveBeenCalled();
expect(props.onConfirm).toHaveBeenCalled();
expect(props.hideModal).toHaveBeenCalled();
});
diff --git a/ui/components/app/modals/confirm-delete-rpc-url-modal/confirm-delete-rpc-url-modal.tsx b/ui/components/app/modals/confirm-delete-rpc-url-modal/confirm-delete-rpc-url-modal.tsx
deleted file mode 100644
index 3eb9a9323048..000000000000
--- a/ui/components/app/modals/confirm-delete-rpc-url-modal/confirm-delete-rpc-url-modal.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { useDispatch } from 'react-redux';
-import {
- BlockSize,
- Display,
-} from '../../../../helpers/constants/design-system';
-import {
- Box,
- ButtonPrimary,
- ButtonPrimarySize,
- ButtonSecondary,
- ButtonSecondarySize,
- Modal,
- ModalBody,
- ModalContent,
- ModalHeader,
- ModalOverlay,
-} from '../../../component-library';
-import { useI18nContext } from '../../../../hooks/useI18nContext';
-import {
- hideModal,
- setEditedNetwork,
- toggleNetworkMenu,
-} from '../../../../store/actions';
-
-const ConfirmDeleteRpcUrlModal = () => {
- const t = useI18nContext();
- const dispatch = useDispatch();
- return (
- {
- dispatch(setEditedNetwork());
- dispatch(hideModal());
- }}
- >
-
- {t('confirmDeletion')}
-
- {t('confirmRpcUrlDeletionMessage')}
-
- {
- dispatch(hideModal());
- dispatch(toggleNetworkMenu());
- }}
- >
- {t('back')}
-
- {
- console.log('TODO: Delete RPc URL');
- }}
- >
- {t('deleteRpcUrl')}
-
-
-
-
-
- );
-};
-
-export default ConfirmDeleteRpcUrlModal;
diff --git a/ui/components/app/modals/modal.js b/ui/components/app/modals/modal.js
index a093b969c8ff..ecae704a2270 100644
--- a/ui/components/app/modals/modal.js
+++ b/ui/components/app/modals/modal.js
@@ -10,8 +10,6 @@ import * as actions from '../../../store/actions';
import { mmiActionsFactory } from '../../../store/institutional/institution-background';
///: END:ONLY_INCLUDE_IF
-// Modal Components
-import AddNetworkModal from '../../../pages/onboarding-flow/add-network-modal';
///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
import ConfirmRemoveJWT from '../../institutional/confirm-remove-jwt-modal';
import CustodyConfirmLink from '../../institutional/custody-confirm-link-modal';
@@ -37,7 +35,6 @@ import TransactionAlreadyConfirmed from './transaction-already-confirmed';
// Metamask Notifications
import ConfirmTurnOffProfileSyncing from './confirm-turn-off-profile-syncing';
import TurnOnMetamaskNotifications from './turn-on-metamask-notifications/turn-on-metamask-notifications';
-import ConfirmDeleteRpcUrlModal from './confirm-delete-rpc-url-modal/confirm-delete-rpc-url-modal';
const modalContainerBaseStyle = {
transform: 'translate3d(-50%, 0, 0px)',
@@ -59,34 +56,6 @@ const modalContainerMobileStyle = {
top: '12.5%',
};
-const accountModalStyle = {
- mobileModalStyle: {
- width: '95%',
- // top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
- boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
- borderRadius: '4px',
- top: '10%',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- },
- laptopModalStyle: {
- width: '335px',
- // top: 'calc(33% + 45px)',
- boxShadow: 'var(--shadow-size-xs) var(--color-shadow-default)',
- borderRadius: '4px',
- top: '10%',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- },
- contentStyle: {
- borderRadius: '4px',
- },
-};
-
///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
const custodyConfirmModalStyle = {
mobileModalStyle: {
@@ -116,11 +85,6 @@ const custodyConfirmModalStyle = {
///: END:ONLY_INCLUDE_IF
const MODALS = {
- ONBOARDING_ADD_NETWORK: {
- contents:
+
+
+
+
+ 
+
+
+
+
+
+
+ + Ethereum Mainnet +
+
+
+
+
+
+
+ {
});
expect(screen.getByTestId('multi-rpc-edit-modal')).toBeInTheDocument();
- // TODO: enable with network controller v21 upgrade after `getNetworkConfigurationsByChainId` is implemented
- // expect(screen.getByText('Ethereum Mainnet')).toBeInTheDocument();
+ expect(screen.getByText('Ethereum Mainnet')).toBeInTheDocument();
expect(screen.getByText('supportMultiRpcInformation')).toBeInTheDocument();
});
});
diff --git a/ui/components/app/multi-rpc-edit-modal/multi-rpc-edit-modal.tsx b/ui/components/app/multi-rpc-edit-modal/multi-rpc-edit-modal.tsx
index 7dab45d4a9d7..6df73c0b86d8 100644
--- a/ui/components/app/multi-rpc-edit-modal/multi-rpc-edit-modal.tsx
+++ b/ui/components/app/multi-rpc-edit-modal/multi-rpc-edit-modal.tsx
@@ -1,6 +1,6 @@
import React from 'react';
-import { useDispatch } from 'react-redux';
-import { Hex } from '@metamask/utils';
+import { useDispatch, useSelector } from 'react-redux';
+import { NetworkConfiguration } from '@metamask/network-controller';
import {
Modal,
ModalContent,
@@ -22,6 +22,7 @@ import {
} from '../../../helpers/constants/design-system';
import { setShowMultiRpcModal } from '../../../store/actions';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
+import { getNetworkConfigurationsByChainId } from '../../../selectors';
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
import NetworkListItem from './network-list-item/network-list-item';
@@ -29,10 +30,7 @@ function MultiRpcEditModal() {
const t = useI18nContext();
const dispatch = useDispatch();
const isPopUp = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
-
- // TODO: useSelector(getNetworkConfigurationsByChainId) with network controller v21 upgrade
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- const networkConfigurations = {} as Record;
+ const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
return (
{Object.values(networkConfigurations).map(
- (networkConfiguration) =>
+ (networkConfiguration: NetworkConfiguration) =>
networkConfiguration.rpcEndpoints.length > 1 ? (
{
rpcEndpoints: [
{
name: 'Infura Mainnet',
+ type: RpcEndpointType.Infura,
url: 'https://mainnet.infura.io/v3/YOUR_INFURA_KEY',
},
],
diff --git a/ui/components/app/multi-rpc-edit-modal/network-list-item/network-list-item.tsx b/ui/components/app/multi-rpc-edit-modal/network-list-item/network-list-item.tsx
index 551d34d70643..e90aac3a25d8 100644
--- a/ui/components/app/multi-rpc-edit-modal/network-list-item/network-list-item.tsx
+++ b/ui/components/app/multi-rpc-edit-modal/network-list-item/network-list-item.tsx
@@ -1,5 +1,9 @@
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
+import {
+ NetworkConfiguration,
+ RpcEndpointType,
+} from '@metamask/network-controller';
import {
Box,
Text,
@@ -25,18 +29,10 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
import { setEditedNetwork, toggleNetworkMenu } from '../../../../store/actions';
import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../shared/constants/network';
-// TODO: Use version from network controller with v21 upgrade
-enum RpcEndpointType {
- Custom = 'custom',
- Infura = 'infura',
-}
-
const NetworkListItem = ({
networkConfiguration,
}: {
- // TODO: `NetworkConfiguration` with network controller v21 upgrade
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- networkConfiguration: any;
+ networkConfiguration: NetworkConfiguration;
}) => {
const rpcEndpoint =
networkConfiguration.rpcEndpoints[
diff --git a/ui/components/app/network-display/network-display.js b/ui/components/app/network-display/network-display.js
index 11c56a60fcb7..e69ff57b2bed 100644
--- a/ui/components/app/network-display/network-display.js
+++ b/ui/components/app/network-display/network-display.js
@@ -10,6 +10,7 @@ import { PickerNetwork, AvatarNetworkSize } from '../../component-library';
export default function NetworkDisplay() {
const currentNetwork = useSelector(getCurrentNetwork);
+
return (
+
+`;
diff --git a/ui/components/app/selected-account/selected-account-component.test.js b/ui/components/app/selected-account/selected-account-component.test.js
index 6097ab7f6bc9..290e737c0808 100644
--- a/ui/components/app/selected-account/selected-account-component.test.js
+++ b/ui/components/app/selected-account/selected-account-component.test.js
@@ -1,7 +1,7 @@
import React from 'react';
import configureMockStore from 'redux-mock-store';
import copyToClipboard from 'copy-to-clipboard';
-import { fireEvent } from '@testing-library/react';
+import { fireEvent, waitFor } from '@testing-library/react';
import { renderWithProvider } from '../../../../test/lib/render-helpers';
import mockState from '../../../../test/data/mock-state.json';
import { COPY_OPTIONS } from '../../../../shared/constants/copy';
@@ -49,24 +49,35 @@ jest.mock('../../../selectors', () => {
const mockGetSelectedAccount = jest.fn(() => mockSelectedAccount);
return {
- ...jest.requireActual('../../../selectors'),
getAccountType: mockGetAccountType,
getSelectedInternalAccount: mockGetSelectedAccount,
- getCurrentChainId: jest.fn(() => '0x1'),
+ getCurrentChainId: jest.fn(() => '0x5'),
+ getSelectedNetworkClientId: jest.fn(() => 'goerli'),
+ getNetworkConfigurationsByChainId: jest.fn(() => ({
+ '0x5': {
+ chainId: '0x5',
+ rpcEndpoints: [{ networkClientId: 'goerli' }],
+ },
+ })),
};
});
describe('SelectedAccount Component', () => {
const mockStore = configureMockStore()(mockState);
- it('should render correctly', () => {
+ it('should match snapshot', () => {
+ const { container } = renderWithProvider(
+
+
+
+
+
+
+
+
+
+`;
diff --git a/ui/components/multichain/address-copy-button/address-copy-button.test.js b/ui/components/multichain/address-copy-button/address-copy-button.test.js
index 62158712753a..c7d7c869ff5b 100644
--- a/ui/components/multichain/address-copy-button/address-copy-button.test.js
+++ b/ui/components/multichain/address-copy-button/address-copy-button.test.js
@@ -32,6 +32,18 @@ const SAMPLE_ADDRESS = '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc';
describe('AccountListItem', () => {
const mockStore = configureMockStore()(mockState);
+ afterEach(() => {
+ jest.clearAllMocks(); // Clear mocks to ensure no test interference
+ });
+
+ it('should match snapshot', () => {
+ const { container } = renderWithProvider(
+
+
+
+
setUrl(e.target.value)}
+ autoFocus
/>
{error && (
{error}
diff --git a/ui/components/multichain/network-list-menu/index.scss b/ui/components/multichain/network-list-menu/index.scss
index 32a7c394e6f7..33e4c2b6caae 100644
--- a/ui/components/multichain/network-list-menu/index.scss
+++ b/ui/components/multichain/network-list-menu/index.scss
@@ -1,10 +1,19 @@
.multichain-network-list-menu-content-wrapper {
&__dialog {
+ height: 100vh;
max-height: 100%;
}
}
.multichain-network-list-menu {
- max-height: 100%;
+ height: 100%;
overflow: auto;
}
+
+.rpc-list-item {
+ overflow: hidden;
+}
+
+.rpc-list-item button {
+ text-align: start;
+}
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
deleted file mode 100644
index 3900ba4a067a..000000000000
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ /dev/null
@@ -1,647 +0,0 @@
-import React, { useContext, useEffect, useMemo, useState } from 'react';
-import PropTypes from 'prop-types';
-import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
-import Fuse from 'fuse.js';
-import { useI18nContext } from '../../../hooks/useI18nContext';
-import { NetworkListItem } from '../network-list-item';
-import {
- hideNetworkBanner,
- setActiveNetwork,
- setShowTestNetworks,
- showModal,
- toggleNetworkMenu,
- updateNetworksList,
- setNetworkClientIdForDomain,
- setEditedNetwork,
-} from '../../../store/actions';
-import {
- FEATURED_RPCS,
- TEST_CHAINS,
-} from '../../../../shared/constants/network';
-import {
- getCurrentChainId,
- getCurrentNetwork,
- getNonTestNetworks,
- getShowTestNetworks,
- getTestNetworks,
- getOrderedNetworksList,
- getOnboardedInThisUISession,
- getShowNetworkBanner,
- getOriginOfCurrentTab,
- getUseRequestQueue,
- getNetworkConfigurations,
- getEditedNetwork,
- getAllDomains,
-} from '../../../selectors';
-import ToggleButton from '../../ui/toggle-button';
-import {
- AlignItems,
- BackgroundColor,
- Display,
- FlexDirection,
- JustifyContent,
- TextColor,
-} from '../../../helpers/constants/design-system';
-import {
- Box,
- ButtonSecondary,
- ButtonSecondarySize,
- Modal,
- ModalOverlay,
- Text,
- BannerBase,
- IconName,
- ModalContent,
- ModalHeader,
- AvatarNetworkSize,
-} from '../../component-library';
-import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
-import { getEnvironmentType } from '../../../../app/scripts/lib/util';
-import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
-import { MetaMetricsContext } from '../../../contexts/metametrics';
-import {
- MetaMetricsEventCategory,
- MetaMetricsEventName,
-} from '../../../../shared/constants/metametrics';
-import {
- getCompletedOnboarding,
- getIsUnlocked,
-} from '../../../ducks/metamask/metamask';
-import { getLocalNetworkMenuRedesignFeatureFlag } from '../../../helpers/utils/feature-flags';
-import AddNetworkModal from '../../../pages/onboarding-flow/add-network-modal';
-import PopularNetworkList from './popular-network-list/popular-network-list';
-import NetworkListSearch from './network-list-search/network-list-search';
-import AddRpcUrlModal from './add-rpc-url-modal/add-rpc-url-modal';
-
-export const ACTION_MODES = {
- // Displays the search box and network list
- LIST: 'list',
- // Displays the Add form
- ADD: 'add',
- // Displays the Edit form
- EDIT: 'edit',
- // Displays the page for adding an additional RPC URL
- ADD_RPC: 'add_rpc',
-};
-
-export const NetworkListMenu = ({ onClose }) => {
- const t = useI18nContext();
-
- const nonTestNetworks = useSelector(getNonTestNetworks);
- const testNetworks = useSelector(getTestNetworks);
- const showTestNetworks = useSelector(getShowTestNetworks);
- const currentChainId = useSelector(getCurrentChainId);
- const networkMenuRedesign = useSelector(
- getLocalNetworkMenuRedesignFeatureFlag,
- );
-
- const selectedTabOrigin = useSelector(getOriginOfCurrentTab);
- const useRequestQueue = useSelector(getUseRequestQueue);
- const networkConfigurations = useSelector(getNetworkConfigurations);
- const domains = useSelector(getAllDomains);
-
- const dispatch = useDispatch();
- const history = useHistory();
- const trackEvent = useContext(MetaMetricsContext);
-
- const currentNetwork = useSelector(getCurrentNetwork);
- const currentlyOnTestNetwork = TEST_CHAINS.includes(currentChainId);
-
- const environmentType = getEnvironmentType();
- const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
-
- const completedOnboarding = useSelector(getCompletedOnboarding);
-
- const isUnlocked = useSelector(getIsUnlocked);
-
- const orderedNetworksList = useSelector(getOrderedNetworksList);
-
- const editedNetwork = useSelector(getEditedNetwork);
-
- const [actionMode, setActionMode] = useState(
- editedNetwork ? ACTION_MODES.EDIT : ACTION_MODES.LIST,
- );
- const [networkFormInformation, setNetworkFormInformation] = useState({
- networkNameForm: '',
- networkChainIdForm: '',
- networkTickerForm: '',
- });
-
- const [prevActionMode, setPrevActionMode] = useState(null);
-
- const networkToEdit = useMemo(() => {
- const network = [...nonTestNetworks, ...testNetworks].find(
- (n) => n.id === editedNetwork?.networkConfigurationId,
- );
- return network ? { ...network, label: network.nickname } : undefined;
- }, [editedNetwork, nonTestNetworks, testNetworks]);
-
- const networkConfigurationChainIds = Object.values(networkConfigurations).map(
- (net) => net.chainId,
- );
-
- const sortedFeaturedNetworks = FEATURED_RPCS.sort((a, b) =>
- a.nickname > b.nickname ? 1 : -1,
- ).slice(0, FEATURED_RPCS.length);
-
- const notExistingNetworkConfigurations = sortedFeaturedNetworks.filter(
- ({ chainId }) => !networkConfigurationChainIds.includes(chainId),
- );
-
- const newOrderNetworks = () => {
- if (!orderedNetworksList || orderedNetworksList.length === 0) {
- return nonTestNetworks;
- }
-
- // Create a mapping of chainId to index in orderedNetworksList
- const orderedIndexMap = {};
- orderedNetworksList.forEach((network, index) => {
- orderedIndexMap[`${network.networkId}_${network.networkRpcUrl}`] = index;
- });
-
- // Sort nonTestNetworks based on the order in orderedNetworksList
- const sortedNonTestNetworks = nonTestNetworks.sort((a, b) => {
- const keyA = `${a.chainId}_${a.rpcUrl}`;
- const keyB = `${b.chainId}_${b.rpcUrl}`;
- return orderedIndexMap[keyA] - orderedIndexMap[keyB];
- });
-
- return sortedNonTestNetworks;
- };
-
- const networksList = newOrderNetworks();
- const [items, setItems] = useState([...networksList]);
-
- useEffect(() => {
- setActionMode(ACTION_MODES.LIST);
- setPrevActionMode(null);
- if (currentlyOnTestNetwork) {
- dispatch(setShowTestNetworks(currentlyOnTestNetwork));
- }
- }, [dispatch, currentlyOnTestNetwork]);
-
- const [searchQuery, setSearchQuery] = useState('');
- const [focusSearch, setFocusSearch] = useState(false);
- const onboardedInThisUISession = useSelector(getOnboardedInThisUISession);
- const showNetworkBanner = useSelector(getShowNetworkBanner);
- const showBanner =
- completedOnboarding && !onboardedInThisUISession && showNetworkBanner;
-
- const onDragEnd = (result) => {
- if (!result.destination) {
- return;
- }
-
- const newItems = [...items];
- const [removed] = newItems.splice(result.source.index, 1);
- newItems.splice(result.destination.index, 0, removed);
-
- // Convert the updated array back to NetworksInfo format
- const orderedArray = newItems.map((obj) => ({
- networkId: obj.chainId, // Assuming chainId is the networkId
- networkRpcUrl: obj.rpcUrl,
- }));
-
- dispatch(updateNetworksList(orderedArray));
-
- setItems(newItems);
- };
-
- let searchResults =
- [...networksList].length === items.length ? items : [...networksList];
-
- let searchAddNetworkResults =
- [...notExistingNetworkConfigurations].length === items.length
- ? items
- : [...notExistingNetworkConfigurations];
-
- let searchTestNetworkResults = [...testNetworks];
-
- if (focusSearch && searchQuery !== '') {
- const fuse = new Fuse(searchResults, {
- threshold: 0.2,
- location: 0,
- distance: 100,
- maxPatternLength: 32,
- minMatchCharLength: 1,
- shouldSort: true,
- keys: ['nickname', 'chainId', 'ticker'],
- });
- const fuseForPopularNetworks = new Fuse(searchAddNetworkResults, {
- threshold: 0.2,
- location: 0,
- distance: 100,
- maxPatternLength: 32,
- minMatchCharLength: 1,
- shouldSort: true,
- keys: ['nickname', 'chainId', 'ticker'],
- });
-
- const fuseForTestsNetworks = new Fuse(searchTestNetworkResults, {
- threshold: 0.2,
- location: 0,
- distance: 100,
- maxPatternLength: 32,
- minMatchCharLength: 1,
- shouldSort: true,
- keys: ['nickname', 'chainId', 'ticker'],
- });
-
- fuse.setCollection(searchResults);
- fuseForPopularNetworks.setCollection(searchAddNetworkResults);
- fuseForTestsNetworks.setCollection(searchTestNetworkResults);
-
- const fuseResults = fuse.search(searchQuery);
- const fuseForPopularNetworksResults =
- fuseForPopularNetworks.search(searchQuery);
- const fuseForTestsNetworksResults =
- fuseForTestsNetworks.search(searchQuery);
-
- searchResults = searchResults.filter((network) =>
- fuseResults.includes(network),
- );
- searchAddNetworkResults = searchAddNetworkResults.filter((network) =>
- fuseForPopularNetworksResults.includes(network),
- );
- searchTestNetworkResults = searchTestNetworkResults.filter((network) =>
- fuseForTestsNetworksResults.includes(network),
- );
- }
-
- const getOnEditCallback = (network) => {
- dispatch(
- setEditedNetwork({
- networkConfigurationId: network.id,
- nickname: network.nickname,
- }),
- );
- setActionMode(ACTION_MODES.EDIT);
- setPrevActionMode(ACTION_MODES.LIST);
- };
-
- const getOnEdit = (network) => {
- return () => getOnEditCallback(network);
- };
-
- const generateNetworkListItem = ({
- network,
- isCurrentNetwork,
- canDeleteNetwork,
- }) => {
- return (
- {
- dispatch(toggleNetworkMenu());
- dispatch(setActiveNetwork(network.providerType || network.id));
-
- // If presently on and connected to a dapp, communicate a change to
- // the dapp via silent switchEthereumChain that the network has
- // changed due to user action
- if (
- useRequestQueue &&
- selectedTabOrigin &&
- domains[selectedTabOrigin]
- ) {
- setNetworkClientIdForDomain(selectedTabOrigin, network.id);
- }
-
- trackEvent({
- event: MetaMetricsEventName.NavNetworkSwitched,
- category: MetaMetricsEventCategory.Network,
- properties: {
- location: 'Network Menu',
- chain_id: currentChainId,
- from_network: currentChainId,
- to_network: network.chainId,
- },
- });
- }}
- onDeleteClick={
- canDeleteNetwork
- ? () => {
- dispatch(toggleNetworkMenu());
- dispatch(
- showModal({
- name: 'CONFIRM_DELETE_NETWORK',
- target: network.id,
- onConfirm: () => undefined,
- }),
- );
- }
- : null
- }
- onEditClick={() => getOnEditCallback(network)}
- />
- );
- };
-
- const generateMenuItems = (desiredNetworks) => {
- return desiredNetworks.map((network) => {
- const isCurrentNetwork =
- currentNetwork.id === network.id &&
- currentNetwork.rpcUrl === network.rpcUrl;
-
- const canDeleteNetwork =
- isUnlocked && !isCurrentNetwork && network.removable;
-
- return generateNetworkListItem({
- network,
- isCurrentNetwork,
- canDeleteNetwork,
- });
- });
- };
-
- const handleToggle = (value) => {
- const shouldShowTestNetworks = !value;
- dispatch(setShowTestNetworks(shouldShowTestNetworks));
- if (shouldShowTestNetworks) {
- trackEvent({
- event: MetaMetricsEventName.TestNetworksDisplayed,
- category: MetaMetricsEventCategory.Network,
- });
- }
- };
-
- const goToRpcFormEdit = () => {
- setActionMode(ACTION_MODES.ADD_RPC);
- setPrevActionMode(ACTION_MODES.EDIT);
- };
- const goToRpcFormAdd = () => {
- setActionMode(ACTION_MODES.ADD_RPC);
- setPrevActionMode(ACTION_MODES.ADD);
- };
-
- const renderListNetworks = () => {
- if (actionMode === ACTION_MODES.LIST) {
- return (
- <>
-
- {showBanner ? (
-
- 
-
- }
- onClose={() => hideNetworkBanner()}
- description={t('dragAndDropBanner')}
- />
- ) : null}
-
- {searchResults.length > 0 ? (
-
-
- {t('enabledNetworks')}
-
-
- ) : null}
-
- {searchResults.length === 0 &&
- searchAddNetworkResults.length === 0 &&
- searchTestNetworkResults.length === 0 &&
- focusSearch ? (
-
- {t('noNetworksFound')}
-
- ) : (
-
-
- {(provided) => (
-
- {searchResults.map((network, index) => {
- const isCurrentNetwork =
- currentNetwork.id === network.id;
-
- const canDeleteNetwork =
- isUnlocked &&
- !isCurrentNetwork &&
- network.removable;
-
- const networkListItem = generateNetworkListItem({
- network,
- isCurrentNetwork,
- canDeleteNetwork,
- });
-
- return (
-
- {(providedDrag) => (
-
- {networkListItem}
-
- )}
-
- );
- })}
- {provided.placeholder}
-
- )}
-
-
- )}
- {networkMenuRedesign ? (
-
-
- {t('showTestnetNetworks')}
-
-
- ) : null}
-
- {showTestNetworks || currentlyOnTestNetwork ? (
-
- {generateMenuItems(searchTestNetworkResults)}
-
- ) : null}
-
-
-
-
- {
- if (!networkMenuRedesign) {
- if (isFullScreen) {
- if (completedOnboarding) {
- history.push(ADD_POPULAR_CUSTOM_NETWORK);
- } else {
- dispatch(showModal({ name: 'ONBOARDING_ADD_NETWORK' }));
- }
- } else {
- global.platform.openExtensionInBrowser(
- ADD_POPULAR_CUSTOM_NETWORK,
- );
- }
- dispatch(toggleNetworkMenu());
- return;
- }
- trackEvent({
- event: MetaMetricsEventName.AddNetworkButtonClick,
- category: MetaMetricsEventCategory.Network,
- });
- setActionMode(ACTION_MODES.ADD);
- setPrevActionMode(ACTION_MODES.LIST);
- }}
- >
- {networkMenuRedesign ? t('addCustomNetwork') : t('addNetwork')}
-
-
-
- );
- } else if (actionMode === ACTION_MODES.ADD) {
- return (
-
-
-
- {title}
-
- {renderListNetworks()}
-
-
- );
-};
-
-NetworkListMenu.propTypes = {
- /**
- * Executes when the menu should be closed
- */
- onClose: PropTypes.func.isRequired,
-};
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.test.js b/ui/components/multichain/network-list-menu/network-list-menu.test.js
index f7c346fb2070..702f5b00bf75 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.test.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.test.js
@@ -8,6 +8,9 @@ import {
MAINNET_DISPLAY_NAME,
SEPOLIA_DISPLAY_NAME,
NETWORK_TYPES,
+ LINEA_MAINNET_DISPLAY_NAME,
+ BNB_DISPLAY_NAME,
+ LINEA_SEPOLIA_DISPLAY_NAME,
} from '../../../../shared/constants/network';
import { NetworkListMenu } from '.';
@@ -36,8 +39,77 @@ const render = ({
const state = {
metamask: {
...mockState.metamask,
+ // this could use the network controllers default state instead
+ networkConfigurationsByChainId: {
+ '0x1': {
+ nativeCurrency: 'ETH',
+ chainId: '0x1',
+ name: MAINNET_DISPLAY_NAME,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: NETWORK_TYPES.MAINNET,
+ },
+ ],
+ },
+ '0xe708': {
+ nativeCurrency: 'ETH',
+ chainId: '0xe708',
+ name: LINEA_MAINNET_DISPLAY_NAME,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'linea-mainnet',
+ },
+ ],
+ },
+ '0x38': {
+ nativeCurrency: 'BNB',
+ chainId: '0x38',
+ name: BNB_DISPLAY_NAME,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'bnb-network',
+ },
+ ],
+ },
+ '0x5': {
+ nativeCurrency: 'ETH',
+ chainId: '0x5',
+ name: 'Chain 5',
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'goerli',
+ },
+ ],
+ },
+ '0x539': {
+ nativeCurrency: 'ETH',
+ chainId: '0x539',
+ name: SEPOLIA_DISPLAY_NAME,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'sepolia',
+ },
+ ],
+ },
+ '0xe705': {
+ nativeCurrency: 'ETH',
+ chainId: '0xe705',
+ name: LINEA_SEPOLIA_DISPLAY_NAME,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'linea-sepolia',
+ },
+ ],
+ },
+ },
isUnlocked,
- selectedNetworkClientId,
+ selectedNetworkClientId: NETWORK_TYPES.MAINNET,
preferences: {
showTestNetworks,
},
@@ -49,7 +121,7 @@ const render = ({
},
},
activeTab: {
- origin,
+ origin: selectedTabOriginInDomainsState ? origin : undefined,
},
};
@@ -59,7 +131,6 @@ const render = ({
describe('NetworkListMenu', () => {
beforeEach(() => {
- process.env.ENABLE_NETWORK_UI_REDESIGN = 'false';
jest.clearAllMocks();
});
@@ -70,7 +141,7 @@ describe('NetworkListMenu', () => {
it('displays important controls', () => {
const { getByText, getByPlaceholderText } = render();
- expect(getByText('Add network')).toBeInTheDocument();
+ expect(getByText('Add a custom network')).toBeInTheDocument();
expect(getByText('Show test networks')).toBeInTheDocument();
expect(getByPlaceholderText('Search')).toBeInTheDocument();
});
@@ -106,7 +177,7 @@ describe('NetworkListMenu', () => {
it('shows the correct selected network when networks share the same chain ID', () => {
// Mainnet and Custom Mainnet RPC both use chain ID 0x1
- render({
+ const { queryByText } = render({
showTestNetworks: false,
currentChainId: CHAIN_IDS.MAINNET,
selectedNetworkClientId: 'testNetworkConfigurationId',
@@ -123,10 +194,7 @@ describe('NetworkListMenu', () => {
);
expect(selectedNodes).toHaveLength(1);
- const selectedNodeText = selectedNodes[0].querySelector(
- '.multichain-network-list-item__network-name',
- ).textContent;
- expect(selectedNodeText).toStrictEqual('Custom Mainnet RPC');
+ expect(queryByText('Ethereum Mainnet')).toBeInTheDocument();
});
it('narrows down search results', () => {
@@ -141,14 +209,14 @@ describe('NetworkListMenu', () => {
expect(queryByText('Chain 5')).not.toBeInTheDocument();
});
- it('enables the "Add Network" button when MetaMask is locked', () => {
+ it('enables the "Add a custom network" button when MetaMask is locked', () => {
const { queryByText } = render({ isUnlocked: false });
- expect(queryByText('Add network')).toBeEnabled();
+ expect(queryByText('Add a custom network')).toBeEnabled();
});
- it('enables the "Add Network" button when MetaMask is true', () => {
+ it('enables the "AAdd a custom network" button when MetaMask is true', () => {
const { queryByText } = render({ isUnlocked: true });
- expect(queryByText('Add network')).toBeEnabled();
+ expect(queryByText('Add a custom network')).toBeEnabled();
});
it('does not allow deleting networks when locked', () => {
@@ -187,20 +255,6 @@ describe('NetworkListMenu', () => {
});
describe('NetworkListMenu with ENABLE_NETWORK_UI_REDESIGN', () => {
- // Set the environment variable before tests run
- beforeEach(() => {
- window.metamaskFeatureFlags = {
- networkMenuRedesign: true,
- };
- });
-
- // Reset the environment variable after tests complete
- afterEach(() => {
- window.metamaskFeatureFlags = {
- networkMenuRedesign: false,
- };
- });
-
it('should display "Arbitrum" when ENABLE_NETWORK_UI_REDESIGN is true', async () => {
const { queryByText, getByPlaceholderText } = render();
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.tsx b/ui/components/multichain/network-list-menu/network-list-menu.tsx
new file mode 100644
index 000000000000..3e9892a9a9f3
--- /dev/null
+++ b/ui/components/multichain/network-list-menu/network-list-menu.tsx
@@ -0,0 +1,601 @@
+import React, { useContext, useEffect, useMemo, useState } from 'react';
+import {
+ DragDropContext,
+ Droppable,
+ Draggable,
+ DropResult,
+} from 'react-beautiful-dnd';
+import { useDispatch, useSelector } from 'react-redux';
+import Fuse from 'fuse.js';
+import {
+ NetworkConfiguration,
+ RpcEndpointType,
+} from '@metamask/network-controller';
+import { Hex } from '@metamask/utils';
+import { useI18nContext } from '../../../hooks/useI18nContext';
+import { NetworkListItem } from '../network-list-item';
+import {
+ hideNetworkBanner,
+ setActiveNetwork,
+ setShowTestNetworks,
+ showModal,
+ toggleNetworkMenu,
+ updateNetworksList,
+ setNetworkClientIdForDomain,
+ setEditedNetwork,
+} from '../../../store/actions';
+import {
+ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
+ CHAIN_IDS,
+ FEATURED_RPCS,
+ TEST_CHAINS,
+} from '../../../../shared/constants/network';
+import {
+ getCurrentChainId,
+ getShowTestNetworks,
+ getOnboardedInThisUISession,
+ getShowNetworkBanner,
+ getOriginOfCurrentTab,
+ getUseRequestQueue,
+ getEditedNetwork,
+ getNetworkConfigurationsByChainId,
+ getOrderedNetworksList,
+ getIsAddingNewNetwork,
+ getIsMultiRpcOnboarding,
+ getAllDomains,
+} from '../../../selectors';
+import ToggleButton from '../../ui/toggle-button';
+import {
+ AlignItems,
+ BackgroundColor,
+ BorderRadius,
+ Display,
+ FlexDirection,
+ JustifyContent,
+ TextAlign,
+ TextColor,
+ TextVariant,
+} from '../../../helpers/constants/design-system';
+import {
+ Box,
+ ButtonSecondary,
+ ButtonSecondarySize,
+ Modal,
+ ModalOverlay,
+ Text,
+ BannerBase,
+ IconName,
+ ModalContent,
+ ModalHeader,
+ AvatarNetworkSize,
+} from '../../component-library';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
+import {
+ MetaMetricsEventCategory,
+ MetaMetricsEventName,
+} from '../../../../shared/constants/metametrics';
+import {
+ getCompletedOnboarding,
+ getIsUnlocked,
+} from '../../../ducks/metamask/metamask';
+import NetworksForm from '../../../pages/settings/networks-tab/networks-form';
+import { useNetworkFormState } from '../../../pages/settings/networks-tab/networks-form/networks-form-state';
+import PopularNetworkList from './popular-network-list/popular-network-list';
+import NetworkListSearch from './network-list-search/network-list-search';
+import AddRpcUrlModal from './add-rpc-url-modal/add-rpc-url-modal';
+import { SelectRpcUrlModal } from './select-rpc-url-modal/select-rpc-url-modal';
+import AddBlockExplorerModal from './add-block-explorer-modal/add-block-explorer-modal';
+
+export enum ACTION_MODES {
+ // Displays the search box and network list
+ LIST,
+ // Displays the form to add or edit a network
+ ADD_EDIT,
+ // Displays the page for adding an additional RPC URL
+ ADD_RPC,
+ // Displays the page for adding an additional explorer URL
+ ADD_EXPLORER_URL,
+ // Displays the page for selecting an RPC URL
+ SELECT_RPC,
+}
+
+export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
+ const t = useI18nContext();
+ const dispatch = useDispatch();
+ const trackEvent = useContext(MetaMetricsContext);
+
+ const showTestNetworks = useSelector(getShowTestNetworks);
+ const currentChainId = useSelector(getCurrentChainId);
+ const selectedTabOrigin = useSelector(getOriginOfCurrentTab);
+ const useRequestQueue = useSelector(getUseRequestQueue);
+ const isUnlocked = useSelector(getIsUnlocked);
+ const domains = useSelector(getAllDomains);
+ const orderedNetworksList = useSelector(getOrderedNetworksList);
+ const isAddingNewNetwork = useSelector(getIsAddingNewNetwork);
+ const isMultiRpcOnboarding = useSelector(getIsMultiRpcOnboarding);
+ const completedOnboarding = useSelector(getCompletedOnboarding);
+ const onboardedInThisUISession = useSelector(getOnboardedInThisUISession);
+ const showNetworkBanner = useSelector(getShowNetworkBanner);
+ const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
+ const { chainId: editingChainId, editCompleted } =
+ useSelector(getEditedNetwork) ?? {};
+
+ const currentlyOnTestNetwork = (TEST_CHAINS as Hex[]).includes(
+ currentChainId,
+ );
+
+ const [nonTestNetworks, testNetworks] = useMemo(
+ () =>
+ Object.entries(networkConfigurations).reduce(
+ ([nonTestNetworksList, testNetworksList], [chainId, network]) => {
+ const isTest = (TEST_CHAINS as string[]).includes(chainId);
+ (isTest ? testNetworksList : nonTestNetworksList)[chainId] = network;
+ return [nonTestNetworksList, testNetworksList];
+ },
+ [
+ {} as Record,
+ {} as Record,
+ ],
+ ),
+ [networkConfigurations],
+ );
+
+ // The network currently being edited, or undefined
+ // if the user is not currently editing a network.
+ const editedNetwork = useMemo(
+ () =>
+ !editingChainId || editCompleted
+ ? undefined
+ : Object.entries(networkConfigurations).find(
+ ([chainId]) => chainId === editingChainId,
+ )?.[1],
+ [editingChainId, editCompleted, networkConfigurations],
+ );
+
+ // Tracks which page the user is on
+ const [actionMode, setActionMode] = useState(
+ isAddingNewNetwork || editedNetwork
+ ? ACTION_MODES.ADD_EDIT
+ : ACTION_MODES.LIST,
+ );
+
+ const networkFormState = useNetworkFormState(editedNetwork);
+ const { rpcUrls, setRpcUrls, blockExplorers, setBlockExplorers } =
+ networkFormState;
+
+ const sortNetworks = (networks: Record) =>
+ Object.values(networks).sort(
+ (a, b) =>
+ orderedNetworksList.findIndex(
+ ({ networkId }) => networkId === a.chainId,
+ ) -
+ orderedNetworksList.findIndex(
+ ({ networkId }) => networkId === b.chainId,
+ ),
+ );
+
+ const [orderedNetworks, setOrderedNetworks] = useState(
+ sortNetworks(nonTestNetworks),
+ );
+ useEffect(
+ () => setOrderedNetworks(sortNetworks(nonTestNetworks)),
+ [nonTestNetworks, orderedNetworksList],
+ );
+
+ // Re-orders networks when the user drag + drops them
+ const onDragEnd = (result: DropResult) => {
+ if (result.destination) {
+ const newOrderedNetworks = [...orderedNetworks];
+ const [removed] = newOrderedNetworks.splice(result.source.index, 1);
+ newOrderedNetworks.splice(result.destination.index, 0, removed);
+ dispatch(updateNetworksList(newOrderedNetworks.map((n) => n.chainId)));
+ setOrderedNetworks(newOrderedNetworks);
+ }
+ };
+
+ const featuredNetworksNotYetEnabled = useMemo(
+ () =>
+ FEATURED_RPCS.filter(
+ ({ chainId }) => !networkConfigurations[chainId],
+ ).sort((a, b) => a.name.localeCompare(b.name)),
+ [networkConfigurations],
+ );
+
+ // Searches networks by user input
+ const [searchQuery, setSearchQuery] = useState('');
+ const [focusSearch, setFocusSearch] = useState(false);
+
+ const searchNetworks = (networks: T[], query: string) =>
+ searchQuery === ''
+ ? networks
+ : new Fuse(networks, {
+ threshold: 0.2,
+ location: 0,
+ distance: 100,
+ maxPatternLength: 32,
+ minMatchCharLength: 1,
+ shouldSort: false, // Maintain network order instead of ordering by search score
+ keys: ['name', 'chainId', 'nativeCrrency'],
+ }).search(query);
+
+ const searchedEnabledNetworks = searchNetworks(orderedNetworks, searchQuery);
+ const searchedFeaturedNetworks = searchNetworks(
+ featuredNetworksNotYetEnabled,
+ searchQuery,
+ );
+ const searchedTestNetworks = searchNetworks(
+ Object.values(testNetworks),
+ searchQuery,
+ );
+
+ // If any network has multiple RPC endpoints, show multi-rpc selectors for all networks
+ const showMultiRpcSelectors = [
+ ...searchedEnabledNetworks,
+ ...searchedTestNetworks,
+ ].some((network) => network.rpcEndpoints.length > 1);
+
+ // Renders a network in the network list
+ const generateNetworkListItem = (network: NetworkConfiguration) => {
+ const isCurrentNetwork = network.chainId === currentChainId;
+ const canDeleteNetwork =
+ isUnlocked &&
+ !isCurrentNetwork &&
+ network.chainId !== CHAIN_IDS.MAINNET &&
+ network.chainId !== CHAIN_IDS.LINEA_MAINNET;
+
+ return (
+ {
+ const { networkClientId } =
+ network.rpcEndpoints[network.defaultRpcEndpointIndex];
+ dispatch(setActiveNetwork(networkClientId));
+ dispatch(toggleNetworkMenu());
+
+ // If presently on a dapp, communicate a change to
+ // the dapp via silent switchEthereumChain that the
+ // network has changed due to user action
+ if (
+ useRequestQueue &&
+ selectedTabOrigin &&
+ domains[selectedTabOrigin]
+ ) {
+ setNetworkClientIdForDomain(selectedTabOrigin, networkClientId);
+ }
+
+ trackEvent({
+ event: MetaMetricsEventName.NavNetworkSwitched,
+ category: MetaMetricsEventCategory.Network,
+ properties: {
+ location: 'Network Menu',
+ chain_id: currentChainId,
+ from_network: currentChainId,
+ to_network: network.chainId,
+ },
+ });
+ }}
+ onDeleteClick={
+ canDeleteNetwork
+ ? () => {
+ dispatch(toggleNetworkMenu());
+ dispatch(
+ showModal({
+ name: 'CONFIRM_DELETE_NETWORK',
+ target: network.chainId,
+ onConfirm: () => undefined,
+ }),
+ );
+ }
+ : undefined
+ }
+ onEditClick={() => {
+ dispatch(
+ setEditedNetwork({
+ chainId: network.chainId,
+ nickname: network.name,
+ }),
+ );
+ setActionMode(ACTION_MODES.ADD_EDIT);
+ }}
+ onRpcEndpointClick={() => {
+ setActionMode(ACTION_MODES.SELECT_RPC);
+ dispatch(setEditedNetwork({ chainId: network.chainId }));
+ }}
+ />
+ );
+ };
+
+ const render = () => {
+ if (actionMode === ACTION_MODES.LIST) {
+ return (
+ <>
+
+
+
+
+ }
+ onClose={() => hideNetworkBanner()}
+ description={t('dragAndDropBanner')}
+ />
+ )}
+
+ {searchedEnabledNetworks.length > 0 && (
+
+
+ {t('enabledNetworks')}
+
+
+ )}
+
+ {searchedEnabledNetworks.length === 0 &&
+ searchedFeaturedNetworks.length === 0 &&
+ searchedTestNetworks.length === 0 &&
+ focusSearch ? (
+
+ {t('noNetworksFound')}
+
+ ) : (
+
+
+ {(provided) => (
+
+ {searchedEnabledNetworks.map((network, index) => {
+ return (
+
+ {(providedDrag) => (
+
+ {generateNetworkListItem(network)}
+
+ )}
+
+ );
+ })}
+ {provided.placeholder}
+
+ )}
+
+
+ )}
+
+
+
+ {t('showTestnetNetworks')}
+
+ {
+ dispatch(setShowTestNetworks(!value));
+ if (!value) {
+ trackEvent({
+ event: MetaMetricsEventName.TestNetworksDisplayed,
+ category: MetaMetricsEventCategory.Network,
+ });
+ }
+ }}
+ />
+
+ ) : null}
+
+ {showTestNetworks || currentlyOnTestNetwork ? (
+
+ {searchedTestNetworks.map((network) =>
+ generateNetworkListItem(network),
+ )}
+
+ ) : null}
+
+
+
+
+ {
+ trackEvent({
+ event: MetaMetricsEventName.AddNetworkButtonClick,
+ category: MetaMetricsEventCategory.Network,
+ });
+ setActionMode(ACTION_MODES.ADD_EDIT);
+ }}
+ >
+ {t('addACustomNetwork')}
+
+
+
+ );
+ } else if (actionMode === ACTION_MODES.ADD_EDIT) {
+ return (
+ setActionMode(ACTION_MODES.ADD_RPC)}
+ onBlockExplorerAdd={() =>
+ setActionMode(ACTION_MODES.ADD_EXPLORER_URL)
+ }
+ />
+ );
+ } else if (actionMode === ACTION_MODES.ADD_RPC) {
+ return (
+ {
+ // Note: We could choose to rename the URL if it already exists with a different name
+ if (rpcUrls.rpcEndpoints?.every((e) => e.url !== url)) {
+ setRpcUrls({
+ rpcEndpoints: [
+ ...rpcUrls.rpcEndpoints,
+ { url, name, type: RpcEndpointType.Custom },
+ ],
+ defaultRpcEndpointIndex: rpcUrls.rpcEndpoints.length,
+ });
+ }
+ setActionMode(ACTION_MODES.ADD_EDIT);
+ }}
+ />
+ );
+ } else if (actionMode === ACTION_MODES.ADD_EXPLORER_URL) {
+ return (
+ {
+ if (blockExplorers.blockExplorerUrls?.every((u) => u !== url)) {
+ setBlockExplorers({
+ blockExplorerUrls: [...blockExplorers.blockExplorerUrls, url],
+ defaultBlockExplorerUrlIndex:
+ blockExplorers.blockExplorerUrls.length,
+ });
+ }
+ setActionMode(ACTION_MODES.ADD_EDIT);
+ }}
+ />
+ );
+ } else if (actionMode === ACTION_MODES.SELECT_RPC && editedNetwork) {
+ return (
+
+
+
+
+ {title}
+
+
+ {render()}
+
+
+ );
+};
diff --git a/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.test.tsx b/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.test.tsx
index 468563214c6d..e67444d1eece 100644
--- a/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.test.tsx
+++ b/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.test.tsx
@@ -3,12 +3,10 @@ import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { useDispatch, useSelector } from 'react-redux';
import configureStore from 'redux-mock-store';
+import { RpcEndpointType } from '@metamask/network-controller';
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
import { getUnapprovedConfirmations } from '../../../../selectors';
-import {
- CHAIN_IDS,
- RPCDefinition,
-} from '../../../../../shared/constants/network';
+import { CHAIN_IDS } from '../../../../../shared/constants/network';
import PopularNetworkList from './popular-network-list';
jest.mock('react-redux', () => ({
@@ -57,26 +55,36 @@ describe('PopularNetworkList', () => {
...defaultProps,
searchAddNetworkResults: [
{
+ blockExplorerUrls: [],
chainId: CHAIN_IDS.MAINNET,
- nickname: 'Network 1',
- rpcPrefs: {
- blockExplorerUrl: 'https://etherscan.com/',
- imageUrl: 'https://example.com/image1.png',
- },
- ticker: 'ETH',
- rpcUrl: 'https://exampleEth.org/',
+ defaultBlockExplorerUrlIndex: 0,
+ defaultRpcEndpointIndex: 0,
+ name: 'Network 1',
+ nativeCurrency: 'ETH',
+ rpcEndpoints: [
+ {
+ url: 'https://exampleEth.org/',
+ type: RpcEndpointType.Custom as const,
+ networkClientId: 'network1',
+ },
+ ],
},
{
+ blockExplorerUrls: [],
chainId: CHAIN_IDS.BSC_TESTNET,
- nickname: 'Network 2',
- rpcPrefs: {
- blockExplorerUrl: 'https://examplescan.com/',
- imageUrl: 'https://example.com/image2.png',
- },
- ticker: 'TST',
- rpcUrl: 'https://example.org/',
+ defaultBlockExplorerUrlIndex: 0,
+ defaultRpcEndpointIndex: 0,
+ name: 'Network 2',
+ nativeCurrency: 'TST',
+ rpcEndpoints: [
+ {
+ url: 'https://example.org/',
+ type: RpcEndpointType.Custom as const,
+ networkClientId: 'network2',
+ },
+ ],
},
- ] as RPCDefinition[],
+ ],
};
render(
+
+
+ {t('additionalNetworks')}
+
+
+
+
+ {t('popularNetworkAddToolTip', [
+
+ {
+ global.platform.openTab({
+ url: ZENDESK_URLS.UNKNOWN_NETWORK,
+ });
+ }}
+ >
+ {t('learnMoreUpperCase')}
+
+ ,
+ ])}
+
+
+
+
+ );
+ }, [searchAddNetworkResults, referenceElement, isOpen]);
+
return (
- {Object.keys(searchAddNetworkResults).length === 0 ? null : (
-
-
- {t('additionalNetworks')}
-
-
- {t('popularNetworkAddToolTip', [
-
- {
- global.platform.openTab({
- url: ZENDESK_URLS.UNKNOWN_NETWORK,
- });
- }}
- >
- {t('learnMoreUpperCase')}
-
- ,
- ])}
-
-
-
-
- )}
- {searchAddNetworkResults.map((item: RPCDefinition, index: number) => (
+ {popoverContent}
+ {searchAddNetworkResults.map((network) => (
- {item.nickname}
+ {network.name}
@@ -169,12 +184,24 @@ const PopularNetworkList = ({
origin: ORIGIN_METAMASK,
type: ApprovalType.AddEthereumChain,
requestData: {
- chainId: item.chainId,
- rpcUrl: item.rpcUrl,
- ticker: item.ticker,
- rpcPrefs: item.rpcPrefs,
- imageUrl: item.rpcPrefs?.imageUrl,
- chainName: item.nickname,
+ chainId: network.chainId,
+ rpcUrl:
+ network.rpcEndpoints[network.defaultRpcEndpointIndex]
+ .url,
+ ticker: network.nativeCurrency,
+ rpcPrefs: {
+ blockExplorerUrl:
+ network.defaultBlockExplorerUrlIndex === undefined
+ ? undefined
+ : network.blockExplorerUrls[
+ network.defaultBlockExplorerUrlIndex
+ ],
+ },
+ imageUrl:
+ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
+ network.chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+ ],
+ chainName: network.name,
referrer: ORIGIN_METAMASK,
source: MetaMetricsNetworkEventSource.NewAddNetworkFlow,
},
diff --git a/ui/components/multichain/network-list-menu/rpc-list-item.tsx b/ui/components/multichain/network-list-menu/rpc-list-item.tsx
index 086f9838d142..f6297d32145f 100644
--- a/ui/components/multichain/network-list-menu/rpc-list-item.tsx
+++ b/ui/components/multichain/network-list-menu/rpc-list-item.tsx
@@ -1,3 +1,4 @@
+import { RpcEndpointType } from '@metamask/network-controller';
import React from 'react';
import { infuraProjectId } from '../../../../shared/constants/network';
import { Box, Text } from '../../component-library';
@@ -12,12 +13,6 @@ import {
BlockSize,
} from '../../../helpers/constants/design-system';
-// TODO: Use version from network controller with v21 upgrade
-enum RpcEndpointType {
- Custom = 'custom',
- Infura = 'infura',
-}
-
export const stripKeyFromInfuraUrl = (endpoint: string) => {
let modifiedEndpoint = endpoint;
diff --git a/ui/components/multichain/network-list-menu/select-rpc-url-modal/select-rpc-url-modal.test.tsx b/ui/components/multichain/network-list-menu/select-rpc-url-modal/select-rpc-url-modal.test.tsx
index 8f3de3d488f9..69e88f88f372 100644
--- a/ui/components/multichain/network-list-menu/select-rpc-url-modal/select-rpc-url-modal.test.tsx
+++ b/ui/components/multichain/network-list-menu/select-rpc-url-modal/select-rpc-url-modal.test.tsx
@@ -1,10 +1,10 @@
import React from 'react';
import { fireEvent, screen } from '@testing-library/react';
import configureMockStore from 'redux-mock-store';
+import { NetworkConfiguration } from '@metamask/network-controller';
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
import {
- // TODO: Add this API with network controller v21 upgrade
- // updateNetwork,
+ updateNetwork,
setActiveNetwork,
setEditedNetwork,
toggleNetworkMenu,
@@ -20,8 +20,7 @@ jest.mock('react-redux', () => ({
}));
jest.mock('../../../../store/actions', () => ({
- // TODO: Add this API with network controller v21 upgrade
- // updateNetwork: jest.fn(),
+ updateNetwork: jest.fn(),
setActiveNetwork: jest.fn(),
setEditedNetwork: jest.fn(),
toggleNetworkMenu: jest.fn(),
@@ -36,7 +35,7 @@ const networkConfiguration = {
{ url: 'https://rpc.flashbots.net/', networkClientId: 'flashbots' },
],
defaultRpcEndpointIndex: 0,
-};
+} as unknown as NetworkConfiguration;
const store = mockStore({
metamask: {
@@ -104,13 +103,12 @@ describe('SelectRpcUrlModal Component', () => {
);
fireEvent.click(rpcEndpoint);
- // TODO: Add this API with network controller v21 upgrade
- // expect(mockDispatch).toHaveBeenCalledWith(
- // updateNetwork({
- // ...networkConfiguration,
- // defaultRpcEndpointIndex: 1,
- // }),
- // );
+ expect(mockDispatch).toHaveBeenCalledWith(
+ updateNetwork({
+ ...networkConfiguration,
+ defaultRpcEndpointIndex: 1,
+ }),
+ );
expect(mockDispatch).toHaveBeenCalledWith(setActiveNetwork('flashbots'));
expect(mockDispatch).toHaveBeenCalledWith(setEditedNetwork());
expect(mockDispatch).toHaveBeenCalledWith(toggleNetworkMenu());
@@ -154,13 +152,12 @@ describe('SelectRpcUrlModal Component', () => {
screen.getByText(stripProtocol(networkConfiguration.rpcEndpoints[1].url)),
);
- // TODO: Add this API with network controller v21 upgrade
- // expect(mockDispatch).toHaveBeenCalledWith(
- // updateNetwork({
- // ...networkConfiguration,
- // defaultRpcEndpointIndex: 1,
- // }),
- // );
+ expect(mockDispatch).toHaveBeenCalledWith(
+ updateNetwork({
+ ...networkConfiguration,
+ defaultRpcEndpointIndex: 1,
+ }),
+ );
expect(mockDispatch).toHaveBeenCalledWith(
setActiveNetwork(networkConfiguration.rpcEndpoints[1].networkClientId),
);
diff --git a/ui/components/multichain/network-list-menu/select-rpc-url-modal/select-rpc-url-modal.tsx b/ui/components/multichain/network-list-menu/select-rpc-url-modal/select-rpc-url-modal.tsx
index b16dddf5f86e..7fc8e5e6fe3e 100644
--- a/ui/components/multichain/network-list-menu/select-rpc-url-modal/select-rpc-url-modal.tsx
+++ b/ui/components/multichain/network-list-menu/select-rpc-url-modal/select-rpc-url-modal.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { NetworkConfiguration } from '@metamask/network-controller';
import classnames from 'classnames';
import { useDispatch } from 'react-redux';
import {
@@ -20,15 +21,14 @@ import {
setActiveNetwork,
setEditedNetwork,
toggleNetworkMenu,
+ updateNetwork,
} from '../../../../store/actions';
import RpcListItem from '../rpc-list-item';
export const SelectRpcUrlModal = ({
networkConfiguration,
}: {
- // TODO: `NetworkConfiguration` with network controller v21 upgrade
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- networkConfiguration: any;
+ networkConfiguration: NetworkConfiguration;
}) => {
const dispatch = useDispatch();
@@ -61,44 +61,39 @@ export const SelectRpcUrlModal = ({
- {networkConfiguration.rpcEndpoints.map(
- // TODO: types will be inferred with network controller v21 upgrade
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
- (rpcEndpoint: any, index: number) => (
- {
- // TODO: When this API becomes available with network controller v21 upgrade
- // dispatch(
- // updateNetwork({
- // ...networkConfiguration,
- // defaultRpcEndpointIndex: index,
- // }),
- // );
- dispatch(setActiveNetwork(rpcEndpoint.networkClientId));
- dispatch(setEditedNetwork());
- dispatch(toggleNetworkMenu());
- }}
- className={classnames('select-rpc-url__item', {
- 'select-rpc-url__item--selected':
- index === networkConfiguration.defaultRpcEndpointIndex,
- })}
- >
- {index === networkConfiguration.defaultRpcEndpointIndex && (
-
- ),
- )}
+ {networkConfiguration.rpcEndpoints.map((rpcEndpoint, index) => (
+ {
+ dispatch(
+ updateNetwork({
+ ...networkConfiguration,
+ defaultRpcEndpointIndex: index,
+ }),
+ );
+ dispatch(setActiveNetwork(rpcEndpoint.networkClientId));
+ dispatch(setEditedNetwork());
+ dispatch(toggleNetworkMenu());
+ }}
+ className={classnames('select-rpc-url__item', {
+ 'select-rpc-url__item--selected':
+ index === networkConfiguration.defaultRpcEndpointIndex,
+ })}
+ >
+ {index === networkConfiguration.defaultRpcEndpointIndex && (
+
+ ))}
);
};
diff --git a/ui/components/multichain/notification-detail-block-explorer-button/notification-detail-block-explorer-button.tsx b/ui/components/multichain/notification-detail-block-explorer-button/notification-detail-block-explorer-button.tsx
index 02250c4ec36b..6ca6e27c491f 100644
--- a/ui/components/multichain/notification-detail-block-explorer-button/notification-detail-block-explorer-button.tsx
+++ b/ui/components/multichain/notification-detail-block-explorer-button/notification-detail-block-explorer-button.tsx
@@ -1,11 +1,10 @@
-import React, { useMemo } from 'react';
+import React from 'react';
import { useSelector } from 'react-redux';
-import type { NetworkConfiguration } from '@metamask/network-controller';
import type { NotificationServicesController } from '@metamask/notification-services-controller';
-import { getAllNetworks } from '../../../selectors';
+import { toHex } from '@metamask/controller-utils';
+import { getNetworkConfigurationsByChainId } from '../../../selectors';
import { CHAIN_IDS } from '../../../../shared/constants/network';
import { ButtonVariant } from '../../component-library';
-import { decimalToHex } from '../../../../shared/modules/conversion.utils';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { getNetworkDetailsByChainId } from '../../../helpers/utils/notification.util';
import { NotificationDetailButton } from '../notification-detail-button';
@@ -27,21 +26,22 @@ export const NotificationDetailBlockExplorerButton = ({
}: NotificationDetailBlockExplorerButtonProps) => {
const t = useI18nContext();
- const chainIdHex = decimalToHex(chainId);
+ const chainIdHex = toHex(chainId);
const { blockExplorerConfig } = getNetworkDetailsByChainId(
- `0x${chainIdHex}` as keyof typeof CHAIN_IDS,
+ chainIdHex as keyof typeof CHAIN_IDS,
);
- const defaultNetworks: NetworkConfiguration[] = useSelector(getAllNetworks);
- const defaultNetwork = useMemo(() => {
- return defaultNetworks.find((n) => n.chainId === chainIdHex);
- }, [defaultNetworks]);
+ const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
+ const networkConfiguration = networkConfigurations[chainIdHex];
+ const configuredBlockExplorer =
+ networkConfiguration?.blockExplorerUrls?.[
+ networkConfiguration.defaultBlockExplorerUrlIndex ?? -1
+ ];
- const blockExplorerUrl =
- defaultNetwork?.rpcPrefs?.blockExplorerUrl ?? blockExplorerConfig?.url;
+ const blockExplorerUrl = configuredBlockExplorer ?? blockExplorerConfig?.url;
const getBlockExplorerButtonText = () => {
- if (defaultNetwork?.rpcPrefs?.blockExplorerUrl) {
+ if (configuredBlockExplorer) {
return t('notificationItemCheckBlockExplorer');
}
if (blockExplorerConfig?.name) {
diff --git a/ui/components/multichain/pages/permissions-page/permissions-page.test.js b/ui/components/multichain/pages/permissions-page/permissions-page.test.js
index dacdda2f25d3..026cddeff34d 100644
--- a/ui/components/multichain/pages/permissions-page/permissions-page.test.js
+++ b/ui/components/multichain/pages/permissions-page/permissions-page.test.js
@@ -2,6 +2,8 @@ import React from 'react';
import configureStore from '../../../../store/store';
import mockState from '../../../../../test/data/mock-state.json';
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { mockNetworkState } from '../../../../../test/stub/networks';
+import { CHAIN_IDS } from '../../../../../shared/constants/network';
import { PermissionsPage } from './permissions-page';
mockState.metamask.subjectMetadata = {
@@ -86,7 +88,13 @@ mockState.metamask.domains = {
'npm:@metamask/testSnap3': 'mainnet',
};
-let store = configureStore(mockState);
+let store = configureStore({
+ ...mockState,
+ metamask: {
+ ...mockState.metamask,
+ ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET, id: 'mainnet' }),
+ },
+});
describe('All Connections', () => {
describe('render', () => {
diff --git a/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap b/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
index aaf424f4ee44..37ca306bc436 100644
--- a/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
+++ b/ui/components/multichain/pages/send/components/__snapshots__/network-picker.test.tsx.snap
@@ -12,12 +12,12 @@ exports[`SendPageNetworkPicker render renders correctly 1`] = `
-
+
- C
+ G
- Chain 5
+ Goerli
- C
+ G
- Chain 5
+ Goerli
@@ -170,9 +170,9 @@ exports[`Header should match snapshot with transaction confirmation 1`] = `
- C
+ G
- Chain 5
+ Goerli
diff --git a/ui/pages/confirmations/components/confirm/header/header.test.tsx b/ui/pages/confirmations/components/confirm/header/header.test.tsx
index 508089d7ed8d..c6b8481c01fc 100644
--- a/ui/pages/confirmations/components/confirm/header/header.test.tsx
+++ b/ui/pages/confirmations/components/confirm/header/header.test.tsx
@@ -31,7 +31,7 @@ describe('Header', () => {
it('contains network name and account name', () => {
const { getByText } = render();
expect(getByText('Test Account')).toBeInTheDocument();
- expect(getByText('Chain 5')).toBeInTheDocument();
+ expect(getByText('Goerli')).toBeInTheDocument();
});
it('contains account info icon', async () => {
diff --git a/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx b/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx
index 3a6f6d2f88d2..fca355a9b063 100644
--- a/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx
+++ b/ui/pages/confirmations/components/confirm/network-change-toast/network-change-toast-legacy.tsx
@@ -1,13 +1,17 @@
import React, { useCallback, useEffect, useState } from 'react';
import { useSelector } from 'react-redux';
+import { Hex } from '@metamask/utils';
import { Box } from '../../../../../components/component-library';
import { Toast } from '../../../../../components/multichain';
import {
getLastInteractedConfirmationInfo,
setLastInteractedConfirmationInfo,
} from '../../../../../store/actions';
-import { getCurrentChainId, getNetworkDetails } from '../../../../../selectors';
+import {
+ getCurrentChainId,
+ getNetworkConfigurationsByChainId,
+} from '../../../../../selectors';
import { useI18nContext } from '../../../../../hooks/useI18nContext';
const CHAIN_CHANGE_THRESHOLD_MILLISECONDS = 60 * 1000; // 1 Minute
@@ -22,9 +26,8 @@ const NetworkChangeToastLegacy = ({
const newChainId = confirmation?.chainId ?? chainId;
const [toastVisible, setToastVisible] = useState(false);
const t = useI18nContext();
- const networkInfo = useSelector((state) =>
- getNetworkDetails(state, newChainId),
- );
+ const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
+ const network = networkConfigurations[newChainId as Hex];
const hideToast = useCallback(() => {
setToastVisible(false);
@@ -78,7 +81,7 @@ const NetworkChangeToastLegacy = ({
- C + G @@ -149,7 +149,7 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = ` class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative" data-testid="signature-request-network-display" > - Chain 5 + Goerli
- C + G @@ -146,7 +146,7 @@ exports[`SignatureRequestSIWE (Sign in with Ethereum) should match snapshot 1`] class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative" data-testid="signature-request-network-display" > - Chain 5 + Goerli
- C
+ G
- Chain 5
+ Goerli
- C
+ G
- Chain 5
+ Goerli
(selector) => {
return {};
case pendingApprovalsSortedSelector:
return Object.values(opts.metamask.pendingApprovals);
+ case getNetworkConfigurationsByChainId:
+ return opts.metamask.networkConfigurationsByChainId;
default:
return undefined;
}
diff --git a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
index 1da44ad87146..2bbceca19ec8 100644
--- a/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
+++ b/ui/pages/confirmations/confirm-send-ether/__snapshots__/confirm-send-ether.test.js.snap
@@ -85,13 +85,13 @@ exports[`ConfirmSendEther should render correct information for for confirm send
- C
+ G
- Chain 5
+ Goerli
- C
+ G
![Chain 5 logo]()
@@ -49,7 +48,7 @@ exports[`Confirm matches snapshot for signature - personal sign type 1`] = `
class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
data-testid="header-network-display-name"
>
- Chain 5
+ Goerli
@@ -261,9 +260,9 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
- C
+ G
- Chain 5
+ Goerli
@@ -1307,9 +1306,9 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
- C
+ G
- Chain 5
+ Goerli
@@ -2069,12 +2068,11 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
/>
![Chain 5 logo]()
@@ -2091,7 +2089,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 1`] = `
class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
data-testid="header-network-display-name"
>
- Chain 5
+ Goerli
@@ -2753,9 +2751,9 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
- C
+ G
- Chain 5
+ Goerli
@@ -3503,9 +3501,9 @@ exports[`Confirm should match snapshot signature - typed sign - order 1`] = `
- C
+ G
- Chain 5
+ Goerli
diff --git a/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.js b/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.js
index 0d8b9936ab11..6413337216be 100644
--- a/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.js
+++ b/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.js
@@ -20,7 +20,7 @@ import {
const getNetworkDetails = (network) => {
return {
...network,
- nickname: network.nickname ?? NETWORK_TO_NAME_MAP[network.chainId],
+ name: network.name ?? NETWORK_TO_NAME_MAP[network.chainId],
iconUrl:
network.iconUrl ?? CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[network.chainId],
};
@@ -44,7 +44,7 @@ export default function ConfirmationNetworkSwitch({ toNetwork, fromNetwork }) {
>
@@ -90,12 +90,10 @@ export default function ConfirmationNetworkSwitch({ toNetwork, fromNetwork }) {
ConfirmationNetworkSwitch.propTypes = {
toNetwork: PropTypes.shape({
chainId: PropTypes.string.isRequired,
- nickname: PropTypes.string.isRequired,
- type: PropTypes.string,
+ name: PropTypes.string.isRequired,
}),
fromNetwork: PropTypes.shape({
chainId: PropTypes.string.isRequired,
- nickname: PropTypes.string.isRequired,
- type: PropTypes.string,
+ name: PropTypes.string.isRequired,
}),
};
diff --git a/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js b/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js
index 372b715f7fb5..a3963055f860 100644
--- a/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js
+++ b/ui/pages/confirmations/confirmation/components/confirmation-network-switch/confirmation-network-switch.stories.js
@@ -15,13 +15,13 @@ export default {
toNetwork: {
chainId: '0xa',
ticker: 'OP',
- nickname: 'Optimism',
+ name: 'Optimism',
rpcUrl: 'https://optimism-mainnet.infura.io',
},
fromNetwork: {
chainId: '1',
ticker: 'ETH',
- nickname: 'Ethereum Mainnet',
+ name: 'Ethereum Mainnet',
},
},
};
diff --git a/ui/pages/confirmations/confirmation/confirmation.js b/ui/pages/confirmations/confirmation/confirmation.js
index 90a4e5fb4ed6..b37743c256bc 100644
--- a/ui/pages/confirmations/confirmation/confirmation.js
+++ b/ui/pages/confirmations/confirmation/confirmation.js
@@ -31,6 +31,7 @@ import {
getTotalUnapprovedCount,
useSafeChainsListValidationSelector,
getSnapsMetadata,
+ getNetworkConfigurationsByChainId,
getHideSnapBranding,
} from '../../../selectors';
import NetworkDisplay from '../../../components/app/network-display/network-display';
@@ -211,6 +212,9 @@ export default function ConfirmationPage({
const useSafeChainsListValidation = useSelector(
useSafeChainsListValidationSelector,
);
+ const networkConfigurationsByChainId = useSelector(
+ getNetworkConfigurationsByChainId,
+ );
const [approvalFlowLoadingText, setApprovalFlowLoadingText] = useState(null);
const [currentPendingConfirmation, setCurrentPendingConfirmation] =
@@ -299,6 +303,10 @@ export default function ConfirmationPage({
{
matchedChain,
currencySymbolWarning,
+ existingNetworkConfiguration:
+ networkConfigurationsByChainId?.[
+ pendingConfirmation.requestData?.chainId
+ ],
},
// Passing `t` in the contexts object is a bit redundant but since it's a
// context too, it makes sense (for completeness)
@@ -315,6 +323,7 @@ export default function ConfirmationPage({
trackEvent,
isSnapDialog,
snapName,
+ networkConfigurationsByChainId,
]);
useEffect(() => {
diff --git a/ui/pages/confirmations/confirmation/stories/util.js b/ui/pages/confirmations/confirmation/stories/util.js
index a5d8d1ba136b..bb0a661ae470 100644
--- a/ui/pages/confirmations/confirmation/stories/util.js
+++ b/ui/pages/confirmations/confirmation/stories/util.js
@@ -4,6 +4,7 @@ import { NetworkStatus } from '@metamask/network-controller';
import configureStore from '../../../../store/store';
import testData from '../../../../../.storybook/test-data';
import { Box } from '../../../../components/component-library';
+import { mockNetworkState } from '../../../../../test/stub/networks';
const STORE_MOCK = {
...testData,
@@ -22,6 +23,18 @@ const STORE_MOCK = {
status: NetworkStatus.Available,
},
},
+ ...mockNetworkState({
+ id: 'testNetworkClientId',
+ rpcUrl: 'https://testrpc.com',
+ chainId: '0x1',
+ nickname: 'mainnet',
+ name: 'mainnet',
+ blockExplorerUrl: 'https://etherscan.io',
+ metadata: {
+ EIPS: { 1559: true },
+ status: NetworkStatus.Available,
+ },
+ }),
pendingApprovals: {
testId: {
id: 'testId',
diff --git a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
index 003ef05a9469..38bdc74279f8 100644
--- a/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
+++ b/ui/pages/confirmations/confirmation/templates/__snapshots__/add-ethereum-chain.test.js.snap
@@ -35,12 +35,12 @@ exports[`add-ethereum-chain confirmation should match snapshot 1`] = `
- Allow this site to add a network?
+ Update Test initial state
- This will allow this network to be used within MetaMask.
+ This site is requesting to update your default network URL. You can edit defaults and network information any time.
- ETH
+ GoerliETH
@@ -363,7 +363,7 @@ exports[`remove-snap-account confirmation should match snapshot 1`] = `
- E
+ G
- ETH
+ GoerliETH
diff --git a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
index 656d016f0a34..d14048897e39 100644
--- a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
+++ b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
@@ -1,5 +1,6 @@
import { ethErrors } from 'eth-rpc-errors';
import React from 'react';
+import { RpcEndpointType } from '@metamask/network-controller';
import {
infuraProjectId,
@@ -224,9 +225,31 @@ function getState(pendingApproval) {
function getValues(pendingApproval, t, actions, history, data) {
const originIsMetaMask = pendingApproval.origin === 'metamask';
const customRpcUrl = pendingApproval.requestData.rpcUrl;
- const childrenTitleText = process.env.CHAIN_PERMISSIONS
- ? t('addNetworkConfirmationTitle', [pendingApproval.requestData.chainName])
- : t('addEthereumChainConfirmationTitle');
+
+ let title;
+ if (originIsMetaMask) {
+ title = t('wantToAddThisNetwork');
+ } else if (data.existingNetworkConfiguration) {
+ title = t('updateNetworkConfirmationTitle', [
+ data.existingNetworkConfiguration.name,
+ ]);
+ } else {
+ title = process.env.CHAIN_PERMISSIONS
+ ? t('addNetworkConfirmationTitle', [
+ pendingApproval.requestData.chainName,
+ ])
+ : t('addEthereumChainConfirmationTitle');
+ }
+
+ let subtitle;
+ if (data.existingNetworkConfiguration) {
+ subtitle = t('updateEthereumChainConfirmationDescription');
+ } else {
+ subtitle = process.env.CHAIN_PERMISSIONS
+ ? t('multichainAddEthereumChainConfirmationDescription')
+ : t('addEthereumChainConfirmationDescription');
+ }
+
return {
content: [
{
@@ -332,9 +355,7 @@ function getValues(pendingApproval, t, actions, history, data) {
{
element: 'Typography',
key: 'title',
- children: originIsMetaMask
- ? t('wantToAddThisNetwork')
- : childrenTitleText,
+ children: title,
props: {
variant: TypographyVariant.H3,
align: 'center',
@@ -347,9 +368,7 @@ function getValues(pendingApproval, t, actions, history, data) {
{
element: 'Typography',
key: 'description',
- children: process.env.CHAIN_PERMISSIONS
- ? t('multichainAddEthereumChainConfirmationDescription')
- : t('addEthereumChainConfirmationDescription'),
+ children: subtitle,
props: {
variant: TypographyVariant.H7,
align: 'center',
@@ -515,18 +534,26 @@ function getValues(pendingApproval, t, actions, history, data) {
pendingApproval.requestData,
);
if (originIsMetaMask) {
- const networkConfigurationId = await actions.upsertNetworkConfiguration(
- {
- ...pendingApproval.requestData,
- nickname: pendingApproval.requestData.chainName,
- },
- {
- setActive: false,
- source: pendingApproval.requestData.source,
- },
- );
+ const blockExplorer =
+ pendingApproval.requestData.rpcPrefs.blockExplorerUrl;
+
+ const addedNetwork = await actions.addNetwork({
+ chainId: pendingApproval.requestData.chainId,
+ name: pendingApproval.requestData.chainName,
+ nativeCurrency: pendingApproval.requestData.ticker,
+ blockExplorerUrls: blockExplorer ? [blockExplorer] : [],
+ defaultBlockExplorerUrlIndex: blockExplorer ? 0 : undefined,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: pendingApproval.requestData.rpcUrl,
+ type: RpcEndpointType.Custom,
+ },
+ ],
+ });
+
await actions.setNewNetworkAdded({
- networkConfigurationId,
+ networkConfigurationId: addedNetwork.rpcEndpoints[0].networkClientId,
nickname: pendingApproval.requestData.chainName,
});
diff --git a/ui/pages/confirmations/confirmation/templates/index.js b/ui/pages/confirmations/confirmation/templates/index.js
index 31b8d2210d0d..fd6df7e4959b 100644
--- a/ui/pages/confirmations/confirmation/templates/index.js
+++ b/ui/pages/confirmations/confirmation/templates/index.js
@@ -5,7 +5,7 @@ import {
rejectPendingApproval,
resolvePendingApproval,
setNewNetworkAdded,
- upsertNetworkConfiguration,
+ addNetwork,
} from '../../../../store/actions';
import {
///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
@@ -152,8 +152,7 @@ function getAttenuatedDispatch(dispatch) {
dispatch(rejectPendingApproval(...args)),
resolvePendingApproval: (...args) =>
dispatch(resolvePendingApproval(...args)),
- upsertNetworkConfiguration: (...args) =>
- dispatch(upsertNetworkConfiguration(...args)),
+ addNetwork: (...args) => dispatch(addNetwork(...args)),
setNewNetworkAdded: (...args) => dispatch(setNewNetworkAdded(...args)),
deleteInterface: (...args) => dispatch(deleteInterface(...args)),
};
diff --git a/ui/pages/confirmations/confirmation/templates/remove-snap-account.test.js b/ui/pages/confirmations/confirmation/templates/remove-snap-account.test.js
index 2d58ca66d128..9cb73c38bfea 100644
--- a/ui/pages/confirmations/confirmation/templates/remove-snap-account.test.js
+++ b/ui/pages/confirmations/confirmation/templates/remove-snap-account.test.js
@@ -7,6 +7,8 @@ import Confirmation from '../confirmation';
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES } from '../../../../../shared/constants/app';
import mockState from '../../../../../test/data/mock-state.json';
+import { mockNetworkState } from '../../../../../test/stub/networks';
+import { CHAIN_IDS } from '../../../../../shared/constants/network';
const middleware = [thunk];
@@ -39,6 +41,7 @@ const mockBaseStore = {
},
approvalFlows: [],
subjectMetadata: {},
+ ...mockNetworkState({ chainId: CHAIN_IDS.GOERLI }),
},
};
diff --git a/ui/pages/confirmations/confirmation/templates/switch-ethereum-chain.test.js b/ui/pages/confirmations/confirmation/templates/switch-ethereum-chain.test.js
index e53a8e7de190..4abcf700196f 100644
--- a/ui/pages/confirmations/confirmation/templates/switch-ethereum-chain.test.js
+++ b/ui/pages/confirmations/confirmation/templates/switch-ethereum-chain.test.js
@@ -19,20 +19,12 @@ const mockApproval = {
origin: 'https://test-dapp.metamask.io',
requestData: {
toNetworkConfiguration: {
- rpcUrl: 'https://rpcurl.test.chain',
- rpcPrefs: {
- blockExplorerUrl: 'https://blockexplorer.test.chain',
- },
- chainName: 'Test chain',
- ticker: 'TST',
chainId: '0x9999',
- nickname: 'Test chain',
+ name: 'Test chain',
},
fromNetworkConfiguration: {
- type: 'rpc',
- rpcUrl: 'http://example-custom-rpc.metamask.io',
chainId: '0x9999',
- nickname: 'Test initial state',
+ name: 'Test initial state',
},
},
};
diff --git a/ui/pages/confirmations/hooks/alerts/useConfirmationOriginAlerts.test.ts b/ui/pages/confirmations/hooks/alerts/useConfirmationOriginAlerts.test.ts
index ade12ca00328..ff2cd10cfe60 100644
--- a/ui/pages/confirmations/hooks/alerts/useConfirmationOriginAlerts.test.ts
+++ b/ui/pages/confirmations/hooks/alerts/useConfirmationOriginAlerts.test.ts
@@ -9,6 +9,7 @@ import { genUnapprovedContractInteractionConfirmation } from '../../../../../tes
import { renderHookWithConfirmContextProvider } from '../../../../../test/lib/confirmations/render-helpers';
import { unapprovedPersonalSignMsg } from '../../../../../test/data/confirmations/personal_sign';
import { SignatureRequestType } from '../../types/confirm';
+import { CHAIN_IDS } from '../../../../../shared/constants/network';
import useConfirmationOriginAlerts from './useConfirmationOriginAlerts';
const expectedAlert = [
@@ -51,7 +52,7 @@ describe('useConfirmationOriginAlerts', () => {
it('returns an alert for transaction with special characters in origin', () => {
const contractInteraction = genUnapprovedContractInteractionConfirmation({
- chainId: mockState.metamask.networkConfigurations.goerli.chainId,
+ chainId: CHAIN_IDS.GOERLI,
});
const { result } = renderHookWithConfirmContextProvider(
() => useConfirmationOriginAlerts(),
diff --git a/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts b/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts
index 1fab535733a1..4c6dddfa7a5a 100644
--- a/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts
+++ b/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts
@@ -1,52 +1,48 @@
import { useSelector } from 'react-redux';
+import { Hex } from '@metamask/utils';
import {
+ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
NETWORK_TO_NAME_MAP,
- NETWORK_TYPES,
} from '../../../../shared/constants/network';
-import { getAllNetworks } from '../../../selectors';
-import { getProviderConfig } from '../../../ducks/metamask/metamask';
+import {
+ getCurrentChainId,
+ getNetworkConfigurationsByChainId,
+} from '../../../selectors';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { useConfirmContext } from '../context/confirm';
-type KeyOfNetworkName = keyof typeof NETWORK_TO_NAME_MAP;
-
function useConfirmationNetworkInfo() {
const t = useI18nContext();
const { currentConfirmation } = useConfirmContext();
- const allNetworks = useSelector(getAllNetworks);
- const providerConfig = useSelector(getProviderConfig);
+ const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
+ const currentChainId = useSelector(getCurrentChainId);
let networkDisplayName = '';
- let confirmationNetwork;
+ let networkImageUrl = '';
if (currentConfirmation) {
// use the current confirmation chainId, else use the current network chainId
- const currentChainId =
- currentConfirmation?.chainId ?? providerConfig.chainId;
- confirmationNetwork = allNetworks.find(
- ({ id, chainId }) =>
- chainId === currentChainId &&
- (providerConfig.type === NETWORK_TYPES.RPC
- ? id === providerConfig.id
- : id === providerConfig.type),
- );
-
- if (confirmationNetwork) {
- const { nickname } = confirmationNetwork;
- if (providerConfig.type === NETWORK_TYPES.RPC) {
- networkDisplayName = nickname ?? t('privateNetwork');
- } else {
- networkDisplayName =
- NETWORK_TO_NAME_MAP[confirmationNetwork?.chainId as KeyOfNetworkName];
- }
- }
+ const chainId =
+ (currentConfirmation?.chainId as Hex | undefined) ?? currentChainId;
+
+ const networkConfiguration = networkConfigurations[chainId];
+
+ networkDisplayName =
+ networkConfiguration?.name ??
+ NETWORK_TO_NAME_MAP[chainId as keyof typeof NETWORK_TO_NAME_MAP] ??
+ t('privateNetwork');
+
+ networkImageUrl =
+ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
+ chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+ ];
}
return {
- networkImageUrl: confirmationNetwork?.rpcPrefs?.imageUrl ?? '',
+ networkImageUrl,
networkDisplayName,
};
}
diff --git a/ui/pages/confirmations/hooks/useTransactionInfo.test.js b/ui/pages/confirmations/hooks/useTransactionInfo.test.js
index 59aaf7b167c3..61ae036c4000 100644
--- a/ui/pages/confirmations/hooks/useTransactionInfo.test.js
+++ b/ui/pages/confirmations/hooks/useTransactionInfo.test.js
@@ -1,6 +1,7 @@
import { renderHookWithProvider } from '../../../../test/lib/render-helpers';
import mockState from '../../../../test/data/mock-state.json';
import { getSelectedInternalAccountFromMockState } from '../../../../test/jest/mocks';
+import { getCurrentChainId } from '../../../selectors';
import { useTransactionInfo } from './useTransactionInfo';
const mockSelectedInternalAccount =
@@ -21,9 +22,7 @@ describe('useTransactionInfo', () => {
it('should return true if transaction is NFT transfer', () => {
mockState.metamask.allNftContracts = {
[mockSelectedInternalAccount.address]: {
- [mockState.metamask.networkConfigurations[
- mockState.metamask.selectedNetworkClientId
- ].chainId]: [{ address: '0x9' }],
+ [getCurrentChainId(mockState)]: [{ address: '0x9' }],
},
};
diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js
index 19b76a881c6c..2df3f2907266 100644
--- a/ui/pages/home/home.component.js
+++ b/ui/pages/home/home.component.js
@@ -50,6 +50,9 @@ import {
ModalHeader,
ModalOverlay,
} from '../../components/component-library';
+///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+import MultiRpcEditModal from '../../components/app/multi-rpc-edit-modal/multi-rpc-edit-modal';
+///: END:ONLY_INCLUDE_IF
import {
RESTORE_VAULT_ROUTE,
CONFIRM_TRANSACTION_ROUTE,
@@ -154,6 +157,7 @@ export default class Home extends PureComponent {
announcementsToShow: PropTypes.bool.isRequired,
onboardedInThisUISession: PropTypes.bool,
isSmartTransactionsOptInModalAvailable: PropTypes.bool.isRequired,
+ showMultiRpcModal: PropTypes.bool.isRequired,
///: END:ONLY_INCLUDE_IF
newNetworkAddedConfigurationId: PropTypes.string,
isNotification: PropTypes.bool.isRequired,
@@ -177,7 +181,6 @@ export default class Home extends PureComponent {
pendingConfirmations: PropTypes.arrayOf(PropTypes.object).isRequired,
pendingConfirmationsPrioritized: PropTypes.arrayOf(PropTypes.object)
.isRequired,
- networkMenuRedesign: PropTypes.bool,
hasApprovalFlows: PropTypes.bool.isRequired,
infuraBlocked: PropTypes.bool.isRequired,
setRecoveryPhraseReminderHasBeenShown: PropTypes.func.isRequired,
@@ -374,7 +377,6 @@ export default class Home extends PureComponent {
closeNotificationPopup,
isNotification,
hasAllowedPopupRedirectApprovals,
- networkMenuRedesign,
newNetworkAddedConfigurationId,
setActiveNetwork,
clearNewNetworkAdded,
@@ -392,8 +394,8 @@ export default class Home extends PureComponent {
const { notificationClosing } = this.state;
if (
- prevNewNetworkAddedConfigurationId !== newNetworkAddedConfigurationId &&
- networkMenuRedesign
+ newNetworkAddedConfigurationId &&
+ prevNewNetworkAddedConfigurationId !== newNetworkAddedConfigurationId
) {
setActiveNetwork(newNetworkAddedConfigurationId);
clearNewNetworkAdded();
@@ -498,11 +500,8 @@ export default class Home extends PureComponent {
newTokensImportedError,
setNewTokensImported,
setNewTokensImportedError,
- newNetworkAddedConfigurationId,
- networkMenuRedesign,
clearNewNetworkAdded,
clearEditedNetwork,
- setActiveNetwork,
} = this.props;
const onAutoHide = () => {
@@ -627,7 +626,9 @@ export default class Home extends PureComponent {
- {t('newNetworkEdited', [editedNetwork.nickname])}
+ {editedNetwork.newNetwork
+ ? t('newNetworkAdded', [editedNetwork.nickname])
+ : t('newNetworkEdited', [editedNetwork.nickname])}
clearNewNetworkAdded()}
- >
-
-
- {t('networkAddedSuccessfully')}
-
-
-
-
-
-
- )}
);
}
@@ -986,6 +941,7 @@ export default class Home extends PureComponent {
firstTimeFlowType,
newNetworkAddedConfigurationId,
isSmartTransactionsOptInModalAvailable,
+ showMultiRpcModal,
///: END:ONLY_INCLUDE_IF
} = this.props;
@@ -1012,6 +968,12 @@ export default class Home extends PureComponent {
showWhatsNewPopup &&
!showSmartTransactionsOptInModal;
+ const showMultiRpcEditModal =
+ canSeeModals &&
+ showMultiRpcModal &&
+ !showSmartTransactionsOptInModal &&
+ !showWhatsNew;
+
const showTermsOfUse =
completedOnboarding && !onboardedInThisUISession && showTermsOfUsePopup;
///: END:ONLY_INCLUDE_IF
@@ -1036,6 +998,8 @@ export default class Home extends PureComponent {
isOpen={showSmartTransactionsOptInModal}
hideWhatsNewPopup={hideWhatsNewPopup}
/>
+
+ {showMultiRpcEditModal && {
@@ -118,7 +117,6 @@ const mapStateToProps = (state) => {
const pendingConfirmations = getUnapprovedTemplatedConfirmations(state);
const pendingConfirmationsPrioritized =
getPrioritizedUnapprovedTemplatedConfirmations(state);
- const networkMenuRedesign = getLocalNetworkMenuRedesignFeatureFlag(state);
///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
const institutionalConnectRequests = getInstitutionalConnectRequests(state);
@@ -195,7 +193,6 @@ const mapStateToProps = (state) => {
shouldShowWeb3ShimUsageNotification,
pendingConfirmations,
pendingConfirmationsPrioritized,
- networkMenuRedesign,
infuraBlocked: getInfuraBlocked(state),
announcementsToShow: getSortedAnnouncementsToShow(state).length > 0,
showWhatsNewPopup,
@@ -226,6 +223,7 @@ const mapStateToProps = (state) => {
///: END:ONLY_INCLUDE_IF
isSmartTransactionsOptInModalAvailable:
getIsSmartTransactionsOptInModalAvailable(state),
+ showMultiRpcModal: state.metamask.preferences.showMultiRpcModal,
};
};
diff --git a/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.test.tsx b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.test.tsx
index d459f9893e7e..6601fc1eabdb 100644
--- a/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.test.tsx
+++ b/ui/pages/institutional/institutional-entity-done-page/institutional-entity-done-page.test.tsx
@@ -18,6 +18,7 @@ const props = {
const render = () => {
const store = configureStore({
...mockState,
+ metamask: {},
history: {
mostRecentOverviewPage: 'test',
},
diff --git a/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap b/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
deleted file mode 100644
index b6a29f3cedbf..000000000000
--- a/ui/pages/onboarding-flow/add-network-modal/__snapshots__/add-network-modal.test.js.snap
+++ /dev/null
@@ -1,175 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Add Network Modal should render 1`] = `
-
-
-
- Add custom network
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
diff --git a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.stories.tsx b/ui/pages/onboarding-flow/add-network-modal/add-network-modal.stories.tsx
deleted file mode 100644
index 5153ccb2ca56..000000000000
--- a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddNetworkModal from './index';
-
-const meta: Meta = {
- title: 'Pages/OnboardingFlow/AddNetworkModal',
- component: AddNetworkModal,
- argTypes: {
- showHeader: { control: 'boolean' },
- addNewNetwork: { control: 'boolean' },
- onEditNetwork: { action: 'onEditNetwork' },
- networkToEdit: { control: 'object' },
- onRpcUrlAdd: { action: 'onRpcUrlAdd' },
- prevActionMode: { control: 'text' },
- networkFormInformation: { control: 'object' },
- setNetworkFormInformation: { action: 'setNetworkFormInformation' },
- },
- args: {
- showHeader: false,
- addNewNetwork: true,
- onEditNetwork: undefined,
- networkToEdit: undefined,
- prevActionMode: undefined,
- networkFormInformation: {},
- setNetworkFormInformation: () => null,
- onRpcUrlAdd: () => {},
- },
-};
-
-export default meta;
-type Story = StoryObj;
-
-export const Default: Story = {
- args: {},
-};
-
-export const ShowHeader: Story = {
- args: {
- showHeader: true,
- },
-};
diff --git a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js b/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js
deleted file mode 100644
index ba126bbeb2b0..000000000000
--- a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.test.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import React from 'react';
-import { waitFor } from '@testing-library/react';
-import configureMockStore from 'redux-mock-store';
-import thunk from 'redux-thunk';
-import { renderWithProvider } from '../../../../test/lib/render-helpers';
-import * as useSafeChainsModule from '../../settings/networks-tab/networks-form/use-safe-chains';
-import AddNetworkModal from '.';
-
-const mockHideModal = jest.fn();
-jest.mock('../../../store/actions', () => ({
- ...jest.requireActual('../../../store/actions'),
- hideModal: () => mockHideModal,
-}));
-
-jest.mock('../../../pages/settings/networks-tab/networks-form/use-safe-chains');
-
-const mockNetworkMenuRedesignToggle = jest.fn();
-
-jest.mock('../../../helpers/utils/feature-flags', () => ({
- ...jest.requireActual('../../../helpers/utils/feature-flags'),
- getLocalNetworkMenuRedesignFeatureFlag: () => mockNetworkMenuRedesignToggle,
-}));
-
-describe('Add Network Modal', () => {
- it('should render', async () => {
- mockNetworkMenuRedesignToggle.mockImplementation(() => false);
-
- jest.spyOn(useSafeChainsModule, 'useSafeChains').mockReturnValue({
- safeChains: [
- {
- chainId: '1',
- name: 'Mocked Ethereum Mainnet',
- nativeCurrency: { symbol: 'MOCKETH' },
- rpc: ['https://mocked.example.com/rpc'],
- },
- {
- chainId: '3',
- name: 'Mocked Another Chain',
- nativeCurrency: { symbol: 'MOCKANC' },
- rpc: ['https://mocked.another-example.com/rpc'],
- },
- ],
- });
-
- const mockStore = configureMockStore([])({
- metamask: { useSafeChainsListValidation: true, orderedNetworkList: {} },
- });
-
- const { container } = renderWithProvider(
-
-
- {t('onboardingMetametricsModalTitle')}
-
-
- ) : null}
-
dispatch(setIncomingTransactionsPreferences(chainId, value))
}
@@ -393,103 +383,85 @@ export default function PrivacySettings() {
,
])}
- {networkMenuRedesign ? (
-
-
- {[CHAIN_IDS.MAINNET, CHAIN_IDS.LINEA_MAINNET].map(
- (chainId) => (
+
+
+ {Object.values(networkConfigurations)
+ .filter(({ chainId }) => !TEST_CHAINS.includes(chainId))
+ .map((network) => (
+ {
+ dispatch(
+ setEditedNetwork({ chainId: network.chainId }),
+ );
+ dispatch(toggleNetworkMenu());
+ }}
+ display={Display.Flex}
+ alignItems={AlignItems.center}
+ justifyContent={JustifyContent.spaceBetween}
+ >
- console.log(`chain ${chainId} clicked`)
- }
display={Display.Flex}
alignItems={AlignItems.center}
- justifyContent={JustifyContent.spaceBetween}
>
-
-
-
- {NETWORK_TO_NAME_MAP[chainId]}
-
-
- {
- // Get just the protocol + domain, not the infura key in path
- new URL(
- allNetworks.find(
- (network) =>
- network.chainId === chainId,
- )?.rpcUrl,
- )?.origin
- }
-
-
-
-
+
+ {network.name}
+
+
+ {
+ // Get just the protocol + domain, not the infura key in path
+ new URL(
+ network?.rpcEndpoints[
+ network?.defaultRpcEndpointIndex
+ ]?.url,
+ )?.origin
+ }
+
+
- ),
- )}
- console.log('add a network clicked')}
- justifyContent={JustifyContent.Left}
- variant={ButtonVariant.link}
- >
-
-
- {t('addANetwork')}
-
-
-
-
-
- ) : (
-
- {currentNetwork ? (
-
- <>
- dispatch(toggleNetworkMenu())}
+
- ) : (
- {
- e.preventDefault();
- dispatch(
- showModal({ name: 'ONBOARDING_ADD_NETWORK' }),
- );
- }}
+
+ ))}
+ {
+ dispatch(
+ toggleNetworkMenu({ isAddingNewNetwork: true }),
+ );
+ }}
+ justifyContent={JustifyContent.Left}
+ variant={ButtonVariant.link}
+ >
+
- {t('onboardingAdvancedPrivacyNetworkButton')}
-
- )}
+
+ {t('addANetwork')}
+
+
+
- )}
+
}
/>
diff --git a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.test.js b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.test.js
index d85a0c53029b..80561e9376ae 100644
--- a/ui/pages/onboarding-flow/privacy-settings/privacy-settings.test.js
+++ b/ui/pages/onboarding-flow/privacy-settings/privacy-settings.test.js
@@ -26,8 +26,12 @@ jest.mock('../../../ducks/app/app.ts', () => {
describe('Privacy Settings Onboarding View', () => {
const mockStore = {
metamask: {
- ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
-
+ ...mockNetworkState(
+ { chainId: CHAIN_IDS.MAINNET },
+ { chainId: CHAIN_IDS.LINEA_MAINNET },
+ { chainId: CHAIN_IDS.SEPOLIA },
+ { chainId: CHAIN_IDS.LINEA_SEPOLIA },
+ ),
preferences: {
petnamesEnabled: true,
},
diff --git a/ui/pages/routes/routes.component.js b/ui/pages/routes/routes.component.js
index d28b99a9a5c9..5814d7a5759e 100644
--- a/ui/pages/routes/routes.component.js
+++ b/ui/pages/routes/routes.component.js
@@ -208,7 +208,6 @@ export default class Routes extends Component {
currentExtensionPopupId: PropTypes.number,
useRequestQueue: PropTypes.bool,
showSurveyToast: PropTypes.bool.isRequired,
- networkMenuRedesign: PropTypes.bool.isRequired,
showPrivacyPolicyToast: PropTypes.bool.isRequired,
newPrivacyPolicyToastShownDate: PropTypes.number,
setSurveyLinkLastClickedOrClosed: PropTypes.func.isRequired,
@@ -831,7 +830,6 @@ export default class Routes extends Component {
hideDeprecatedNetworkModal,
switchedNetworkDetails,
clearSwitchedNetworkDetails,
- networkMenuRedesign,
clearEditedNetwork,
///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
isShowKeyringSnapRemovalResultModal,
@@ -922,7 +920,7 @@ export default class Routes extends Component {
}}
/>
) : null}
- {networkMenuRedesign ? {
- setEnableNetworkRedesign(!value);
- // eslint-disable-next-line
- /* @ts-expect-error: Avoids error from window property not existing */
- window.metamaskFeatureFlags.networkMenuRedesign = !value;
- }}
- dataTestId="developer-options-network-redesign"
- settingsRef={settingsRefs[4] as React.RefObject}
- />
- );
- };
-
const renderEnableConfirmationsRedesignToggle = () => {
return (
{
{renderAnnouncementReset()}
{renderOnboardingReset()}
{renderServiceWorkerKeepAliveToggle()}
- {renderNetworkMenuRedesign()}
{renderEnableConfirmationsRedesignToggle()}
-
- );
- };
-
- const renderEndAdornment = () => {
- return (
- <>
- {searchQueryInput && (
- handleSearch('')}
- >
-
- )}
-
- );
- };
-
- return (
- handleSearch(e.target.value)}
- error={error}
- fullWidth
- autoFocus
- autoComplete="off"
- classes={{
- inputRoot: 'networks-tab__networks-list__custom-search-network',
- }}
- startAdornment={renderStartAdornment()}
- endAdornment={renderEndAdornment()}
- />
- );
-}
-
-CustomContentSearch.propTypes = {
- /**
- * The function searches the list of networks depending on
- * the entered parameter and returns the entire list of
- * networks when the user clicks on 'X' on the search tab
- */
- onSearch: PropTypes.func,
- /**
- * An error message is displayed when a user searches for a specific
- * network on the search tab and that network does not exist
- * in the networks list
- */
- error: PropTypes.string,
- /**
- * The list of networks available for search.
- */
- networksList: PropTypes.array,
- /**
- * Search for a specific network(s) by label or labelKey
- */
- searchQueryInput: PropTypes.string,
-};
diff --git a/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.stories.js b/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.stories.js
deleted file mode 100644
index b1dd46dc083a..000000000000
--- a/ui/pages/settings/networks-tab/custom-content-search/custom-content-search.stories.js
+++ /dev/null
@@ -1,23 +0,0 @@
-import React from 'react';
-import { networkList } from '../../../../../.storybook/test-data';
-import CustomContentSearch from './custom-content-search';
-
-export default {
- title: 'Pages/Settings/NetworksTab/CustomContentSearch',
-
- argTypes: {
- error: {
- control: 'text',
- },
- searchQueryInput: {
- control: 'text',
- },
- onSearch: {
- action: 'onSearch',
- },
- },
-};
-
-export const CustomContentSearchComponent = (args) => {
- return
- defaultRpcUrl
-
-
-
- https://current-rpc-url.com
-
-
-
-
-`;
diff --git a/ui/pages/settings/networks-tab/networks-form/networks-form-state.ts b/ui/pages/settings/networks-tab/networks-form/networks-form-state.ts
new file mode 100644
index 000000000000..03ec1e59615d
--- /dev/null
+++ b/ui/pages/settings/networks-tab/networks-form/networks-form-state.ts
@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import {
+ RpcEndpointType,
+ UpdateNetworkFields,
+} from '@metamask/network-controller';
+import { hexToDecimal } from '../../../../../shared/modules/conversion.utils';
+
+/**
+ * State backing the add/edit network form
+ *
+ * @param existingNetwork
+ */
+export const useNetworkFormState = (existingNetwork?: UpdateNetworkFields) => {
+ const [name, setName] = useState('');
+ const [chainId, setChainId] = useState('');
+ const [ticker, setTicker] = useState('');
+
+ const [rpcUrls, setRpcUrls] = useState<{
+ rpcEndpoints: { name?: string; url: string; type: RpcEndpointType }[];
+ defaultRpcEndpointIndex?: number;
+ }>({
+ rpcEndpoints: [],
+ defaultRpcEndpointIndex: undefined,
+ });
+
+ const [blockExplorers, setBlockExplorers] = useState<{
+ blockExplorerUrls: string[];
+ defaultBlockExplorerUrlIndex?: number;
+ }>({
+ blockExplorerUrls: [],
+ defaultBlockExplorerUrlIndex: undefined,
+ });
+
+ useEffect(() => {
+ setName(existingNetwork?.name ?? '');
+ setChainId(existingNetwork ? hexToDecimal(existingNetwork.chainId) : '');
+ setTicker(existingNetwork?.nativeCurrency ?? '');
+ setRpcUrls({
+ rpcEndpoints: existingNetwork?.rpcEndpoints ?? [],
+ defaultRpcEndpointIndex: existingNetwork?.defaultRpcEndpointIndex,
+ });
+
+ setBlockExplorers({
+ blockExplorerUrls: existingNetwork?.blockExplorerUrls ?? [],
+ defaultBlockExplorerUrlIndex:
+ existingNetwork?.defaultBlockExplorerUrlIndex,
+ });
+ }, [existingNetwork?.chainId]);
+
+ return {
+ name,
+ setName,
+ chainId,
+ setChainId,
+ ticker,
+ setTicker,
+ rpcUrls,
+ setRpcUrls,
+ blockExplorers,
+ setBlockExplorers,
+ clear: () => {
+ setName('');
+ setChainId('');
+ setTicker('');
+ setRpcUrls({
+ rpcEndpoints: [],
+ defaultRpcEndpointIndex: undefined,
+ });
+ setBlockExplorers({
+ blockExplorerUrls: [],
+ defaultBlockExplorerUrlIndex: undefined,
+ });
+ },
+ };
+};
diff --git a/ui/pages/settings/networks-tab/networks-form/networks-form.js b/ui/pages/settings/networks-tab/networks-form/networks-form.js
deleted file mode 100644
index 487bf56f8378..000000000000
--- a/ui/pages/settings/networks-tab/networks-form/networks-form.js
+++ /dev/null
@@ -1,1512 +0,0 @@
-import classnames from 'classnames';
-import { isEqual } from 'lodash';
-import log from 'loglevel';
-import PropTypes from 'prop-types';
-import React, {
- useCallback,
- useContext,
- useEffect,
- useRef,
- useState,
-} from 'react';
-import { useDispatch, useSelector } from 'react-redux';
-import { ORIGIN_METAMASK } from '@metamask/approval-controller';
-import { ApprovalType } from '@metamask/controller-utils';
-import { isWebUrl } from '../../../../../app/scripts/lib/util';
-import {
- MetaMetricsEventCategory,
- MetaMetricsEventName,
- MetaMetricsNetworkEventSource,
-} from '../../../../../shared/constants/metametrics';
-import {
- BUILT_IN_NETWORKS,
- CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
- CHAIN_ID_TO_RPC_URL_MAP,
- CHAIN_IDS,
- CHAINLIST_CURRENCY_SYMBOLS_MAP_NETWORK_COLLISION,
- FEATURED_RPCS,
- infuraProjectId,
- NETWORK_TO_NAME_MAP,
-} from '../../../../../shared/constants/network';
-import { decimalToHex } from '../../../../../shared/modules/conversion.utils';
-import {
- isPrefixedFormattedHexString,
- isSafeChainId,
-} from '../../../../../shared/modules/network.utils';
-import { jsonRpcRequest } from '../../../../../shared/modules/rpc.utils';
-import ActionableMessage from '../../../../components/ui/actionable-message';
-import Button from '../../../../components/ui/button';
-import FormField from '../../../../components/ui/form-field';
-import { MetaMetricsContext } from '../../../../contexts/metametrics';
-import { getNetworkLabelKey } from '../../../../helpers/utils/i18n-helper';
-import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { usePrevious } from '../../../../hooks/usePrevious';
-import {
- getNonTestNetworks,
- getOrderedNetworksList,
-} from '../../../../selectors';
-import {
- upsertNetworkConfiguration,
- requestUserApproval,
- setEditedNetwork,
- setNewNetworkAdded,
- setSelectedNetworkConfigurationId,
- showDeprecatedNetworkModal,
- showModal,
- toggleNetworkMenu,
-} from '../../../../store/actions';
-import {
- Box,
- ButtonLink,
- ButtonPrimary,
- ButtonPrimarySize,
- HelpText,
- HelpTextSeverity,
- IconName,
- IconSize,
- Text,
-} from '../../../../components/component-library';
-import { FormTextField } from '../../../../components/component-library/form-text-field/deprecated';
-import {
- AlignItems,
- BackgroundColor,
- BlockSize,
- Display,
- FlexDirection,
- FontWeight,
- TextAlign,
- TextColor,
- TextVariant,
-} from '../../../../helpers/constants/design-system';
-import {
- getMatchedChain,
- getMatchedNames,
- getMatchedSymbols,
-} from '../../../../helpers/utils/network-helper';
-import { getLocalNetworkMenuRedesignFeatureFlag } from '../../../../helpers/utils/feature-flags';
-import { ACTION_MODES } from '../../../../components/multichain/network-list-menu/network-list-menu';
-import InfoTooltip from '../../../../components/ui/info-tooltip';
-import { useSafeChains, rpcIdentifierUtility } from './use-safe-chains';
-
-/**
- * Attempts to convert the given chainId to a decimal string, for display
- * purposes.
- *
- * Should be called with the props chainId whenever it is used to set the
- * component's state.
- *
- * @param {unknown} chainId - The chainId to convert.
- * @returns {string} The props chainId in decimal, or the original value if
- * it can't be converted.
- */
-const getDisplayChainId = (chainId) => {
- if (!chainId || typeof chainId !== 'string' || !chainId.startsWith('0x')) {
- return chainId;
- }
- return parseInt(chainId, 16).toString(10);
-};
-
-/**
- * Prefixes a given id with '0x' if the prefix does not exist
- *
- * @param {string} chainId - The chainId to prefix
- * @returns {string} The chainId, prefixed with '0x'
- */
-const prefixChainId = (chainId) => {
- let prefixedChainId = chainId;
- if (!chainId.startsWith('0x')) {
- prefixedChainId = `0x${parseInt(chainId, 10).toString(16)}`;
- }
- return prefixedChainId;
-};
-
-const NetworksForm = ({
- addNewNetwork,
- setActiveOnSubmit = false,
- restrictHeight,
- isCurrentRpcTarget,
- networksToRender,
- selectedNetwork,
- cancelCallback,
- submitCallback,
- onEditNetwork,
- prevActionMode,
- networkFormInformation = {},
- setNetworkFormInformation = () => null,
-}) => {
- const t = useI18nContext();
- const dispatch = useDispatch();
- const DEFAULT_SUGGESTED_TICKER = [];
- const DEFAULT_SUGGESTED_NAME = [];
- const CHAIN_LIST_URL = 'https://chainid.network/';
- const BASE_HEX = 16;
- const BASE_DECIMAL = 10;
- const MAX_CHAIN_ID_LENGTH = 12;
-
- const { label, labelKey, viewOnly, rpcPrefs } = selectedNetwork;
- const selectedNetworkName =
- label || (labelKey && t(getNetworkLabelKey(labelKey)));
- const networkNameForm =
- prevActionMode === ACTION_MODES.ADD
- ? networkFormInformation.networkNameForm
- : '';
- const networkChainIdForm =
- prevActionMode === ACTION_MODES.ADD
- ? networkFormInformation.networkChainIdForm
- : '';
- const networkTickerForm =
- prevActionMode === ACTION_MODES.ADD
- ? networkFormInformation.networkTickerForm
- : '';
-
- const [networkName, setNetworkName] = useState(
- selectedNetworkName || networkNameForm,
- );
- const [rpcUrl, setRpcUrl] = useState(selectedNetwork?.rpcUrl || '');
- const [chainId, setChainId] = useState(
- selectedNetwork?.chainId || networkChainIdForm,
- );
- const [ticker, setTicker] = useState(
- selectedNetwork?.ticker || networkTickerForm,
- );
- const [suggestedTicker, setSuggestedTicker] = useState(
- DEFAULT_SUGGESTED_TICKER,
- );
- const [blockExplorerUrl, setBlockExplorerUrl] = useState(
- selectedNetwork?.blockExplorerUrl || '',
- );
-
- const [errors, setErrors] = useState({});
- const [warnings, setWarnings] = useState({});
- const [isSubmitting, setIsSubmitting] = useState(false);
- const chainIdMatchesFeaturedRPC = FEATURED_RPCS.some(
- (featuredRpc) => Number(featuredRpc.chainId) === Number(chainId),
- );
- const [isEditing, setIsEditing] = useState(Boolean(addNewNetwork));
- const [previousNetwork, setPreviousNetwork] = useState(selectedNetwork);
- const [suggestedNames, setSuggestedNames] = useState(DEFAULT_SUGGESTED_NAME);
- const nonTestNetworks = useSelector(getNonTestNetworks);
-
- const trackEvent = useContext(MetaMetricsContext);
- const { safeChains } = useSafeChains();
-
- const orderedNetworksList = useSelector(getOrderedNetworksList);
-
- const networkMenuRedesign = useSelector(
- getLocalNetworkMenuRedesignFeatureFlag,
- );
-
- const safeChainsList = useRef([]);
-
- useEffect(() => {
- Object.values(BUILT_IN_NETWORKS).forEach((network) => {
- const index = safeChains.findIndex(
- (chain) =>
- chain.chainId.toString() === getDisplayChainId(network.chainId),
- );
- if (network.ticker && index !== -1) {
- safeChains[index].nativeCurrency.symbol = network.ticker;
- }
- });
- safeChainsList.current = [
- ...safeChains,
- {
- chainId: 137,
- nativeCurrency: {
- symbol: CHAINLIST_CURRENCY_SYMBOLS_MAP_NETWORK_COLLISION.MATIC,
- },
- },
- {
- chainId: 78,
- nativeCurrency: {
- symbol: CHAINLIST_CURRENCY_SYMBOLS_MAP_NETWORK_COLLISION.WETHIO,
- },
- },
- {
- chainId: 88888,
- nativeCurrency: {
- symbol: CHAINLIST_CURRENCY_SYMBOLS_MAP_NETWORK_COLLISION.CHZ,
- },
- },
- ];
- }, [safeChains]);
-
- const resetForm = useCallback(() => {
- setNetworkName(selectedNetworkName || '');
- setRpcUrl(selectedNetwork.rpcUrl);
- setChainId(getDisplayChainId(selectedNetwork.chainId));
- setTicker(selectedNetwork?.ticker);
- setBlockExplorerUrl(selectedNetwork?.blockExplorerUrl);
- setErrors({});
- setWarnings({});
- setSuggestedTicker([]);
- setSuggestedNames([]);
- setIsSubmitting(false);
- setIsEditing(false);
- setPreviousNetwork(selectedNetwork);
- }, [selectedNetwork, selectedNetworkName]);
-
- const stateIsUnchanged = () => {
- // These added conditions are in case the saved chainId is invalid, which
- // was possible in versions <8.1 of the extension.
- // Basically, we always want to be able to overwrite an invalid chain ID.
- const chainIdIsUnchanged =
- typeof selectedNetwork.chainId === 'string' &&
- selectedNetwork.chainId.toLowerCase().startsWith('0x') &&
- chainId === getDisplayChainId(selectedNetwork.chainId);
- return (
- rpcUrl === selectedNetwork.rpcUrl &&
- chainIdIsUnchanged &&
- ticker === selectedNetwork.ticker &&
- networkName === selectedNetworkName &&
- blockExplorerUrl === selectedNetwork.blockExplorerUrl
- );
- };
-
- const prevAddNewNetwork = useRef();
- const prevNetworkName = useRef();
- const prevChainId = useRef();
- const prevRpcUrl = useRef();
- const prevTicker = useRef();
- const prevBlockExplorerUrl = useRef();
- // This effect is used to reset the form when the user switches between networks
- useEffect(() => {
- if (
- !prevAddNewNetwork.current &&
- addNewNetwork &&
- prevActionMode !== ACTION_MODES.ADD
- ) {
- setNetworkName('');
- setRpcUrl('');
- setChainId('');
- setTicker('');
- setBlockExplorerUrl('');
- setErrors({});
- setIsSubmitting(false);
- } else {
- const networkNameChanged =
- prevNetworkName.current !== selectedNetworkName;
- const rpcUrlChanged = prevRpcUrl.current !== selectedNetwork.rpcUrl;
- const chainIdChanged = prevChainId.current !== selectedNetwork.chainId;
- const tickerChanged = prevTicker.current !== selectedNetwork.ticker;
- const blockExplorerUrlChanged =
- prevBlockExplorerUrl.current !== selectedNetwork.blockExplorerUrl;
-
- if (
- (networkNameChanged ||
- rpcUrlChanged ||
- chainIdChanged ||
- tickerChanged ||
- blockExplorerUrlChanged) &&
- (!isEditing || !isEqual(selectedNetwork, previousNetwork))
- ) {
- resetForm(selectedNetwork);
- }
- }
-
- prevAddNewNetwork.current = addNewNetwork;
- prevNetworkName.current = selectedNetworkName;
- prevRpcUrl.current = selectedNetwork.rpcUrl;
- prevChainId.current = selectedNetwork.chainId;
- prevTicker.current = selectedNetwork.ticker;
- prevBlockExplorerUrl.current = selectedNetwork.blockExplorerUrl;
- }, [
- selectedNetwork,
- selectedNetworkName,
- addNewNetwork,
- previousNetwork,
- resetForm,
- isEditing,
- prevActionMode,
- ]);
-
- const newOrderNetworks = () => {
- if (!orderedNetworksList || orderedNetworksList.length === 0) {
- return nonTestNetworks;
- }
-
- // Create a mapping of chainId to index in orderedNetworksList
- const orderedIndexMap = {};
- orderedNetworksList.forEach((network, index) => {
- orderedIndexMap[`${network.networkId}_${network.networkRpcUrl}`] = index;
- });
-
- // Sort nonTestNetworks based on the order in orderedNetworksList
- const sortedNonTestNetworks = nonTestNetworks.sort((a, b) => {
- const keyA = `${a.chainId}_${a.rpcUrl}`;
- const keyB = `${b.chainId}_${b.rpcUrl}`;
- return orderedIndexMap[keyA] - orderedIndexMap[keyB];
- });
-
- return sortedNonTestNetworks;
- };
-
- const handleEditNetworkClick = () => {
- const networksList = networkMenuRedesign
- ? nonTestNetworks
- : newOrderNetworks();
-
- const networkToEdit = Object.values(networksList).find(
- (network) =>
- getDisplayChainId(chainId) === getDisplayChainId(network.chainId),
- );
-
- if (networkToEdit) {
- onEditNetwork(networkToEdit);
- }
- };
-
- useEffect(() => {
- return () => {
- if (prevActionMode !== ACTION_MODES.ADD) {
- setNetworkName('');
- setRpcUrl('');
- setChainId('');
- }
- setTicker('');
- setBlockExplorerUrl('');
- setErrors({});
- dispatch(setSelectedNetworkConfigurationId(''));
- };
- }, [
- setNetworkName,
- setRpcUrl,
- setChainId,
- setTicker,
- setBlockExplorerUrl,
- setErrors,
- dispatch,
- prevActionMode,
- ]);
-
- const autoSuggestTicker = useCallback((formChainId) => {
- const decimalChainId = getDisplayChainId(formChainId);
- if (decimalChainId.trim() === '' || safeChainsList.current.length === 0) {
- setSuggestedTicker([]);
- return;
- }
- const matchedChain = safeChainsList.current?.find(
- (chain) => chain.chainId.toString() === decimalChainId,
- );
-
- const matchedSymbol = safeChainsList.current?.reduce(
- (accumulator, currentNetwork) => {
- if (currentNetwork.chainId.toString() === decimalChainId) {
- accumulator.push(currentNetwork.nativeCurrency?.symbol);
- }
- return accumulator;
- },
- [],
- );
-
- if (matchedChain === undefined) {
- setSuggestedTicker([]);
- return;
- }
- setSuggestedTicker([...matchedSymbol]);
- }, []);
-
- const autoSuggestName = useCallback((formChainId) => {
- const decimalChainId = getDisplayChainId(formChainId);
- if (decimalChainId.trim() === '' || safeChainsList.current.length === 0) {
- setSuggestedNames([]);
- return;
- }
- const matchedChain = safeChainsList.current?.find(
- (chain) => chain.chainId.toString() === decimalChainId,
- );
-
- const matchedNames = safeChainsList.current?.reduce(
- (accumulator, currentNetwork) => {
- if (currentNetwork.chainId.toString() === decimalChainId) {
- accumulator.push(currentNetwork?.name);
- }
- return accumulator;
- },
- [],
- );
-
- if (matchedChain === undefined) {
- setSuggestedNames([]);
- return;
- }
- setSuggestedNames([...matchedNames]);
- }, []);
-
- const hasErrors = () => {
- return Object.keys(errors).some((key) => {
- const error = errors[key];
- // Do not factor in duplicate chain id error for submission disabling
- if (key === 'chainId' && error?.key === 'chainIdExistsErrorMsg') {
- return false;
- }
- return error?.key && error?.msg;
- });
- };
-
- const networksList = Object.values(orderedNetworksList);
- const validateBlockExplorerURL = useCallback(
- (url) => {
- if (url?.length > 0 && !isWebUrl(url)) {
- if (isWebUrl(`https://${url}`)) {
- return {
- key: 'urlErrorMsg',
- msg: t('urlErrorMsg'),
- };
- }
-
- return {
- key: 'invalidBlockExplorerURL',
- msg: t('invalidBlockExplorerURL'),
- };
- }
-
- return null;
- },
- [t],
- );
-
- const validateChainId = useCallback(
- async (chainArg = '') => {
- const formChainId = chainArg.trim();
- let errorKey = '';
- let errorMessage = '';
- let warningKey = '';
- let warningMessage = '';
- let radix = 10;
- let hexChainId = formChainId;
-
- if (!hexChainId.startsWith('0x')) {
- try {
- hexChainId = `0x${decimalToHex(hexChainId)}`;
- } catch (err) {
- return {
- error: {
- key: 'invalidHexNumber',
- msg: t('invalidHexNumber'),
- },
- };
- }
- }
-
- if (
- addNewNetwork &&
- networksList.some(
- (network) =>
- getDisplayChainId(chainArg) ===
- parseInt(network.networkId, BASE_HEX).toString(BASE_DECIMAL) &&
- rpcUrl === network.networkRpcUrl,
- )
- ) {
- return {
- error: {
- key: 'existingChainId',
- },
- };
- }
-
- const [matchingChainId] = networksToRender.filter(
- (e) => e.chainId === hexChainId && e.rpcUrl !== rpcUrl,
- );
-
- if (formChainId === '') {
- return null;
- } else if (matchingChainId) {
- warningKey = 'chainIdExistsErrorMsg';
- warningMessage = t('chainIdExistsErrorMsg', [
- matchingChainId.label ?? matchingChainId.labelKey,
- ]);
- } else if (formChainId.startsWith('0x')) {
- radix = 16;
- if (!/^0x[0-9a-f]+$/iu.test(formChainId)) {
- errorKey = 'invalidHexNumber';
- errorMessage = t('invalidHexNumber');
- } else if (!isPrefixedFormattedHexString(formChainId)) {
- errorMessage = t('invalidHexNumberLeadingZeros');
- }
- } else if (!/^[0-9]+$/u.test(formChainId)) {
- errorKey = 'invalidNumber';
- errorMessage = t('invalidNumber');
- } else if (formChainId.startsWith('0')) {
- errorKey = 'invalidNumberLeadingZeros';
- errorMessage = t('invalidNumberLeadingZeros');
- } else if (!isSafeChainId(parseInt(formChainId, radix))) {
- errorKey = 'invalidChainIdTooBig';
- errorMessage = t('invalidChainIdTooBig');
- }
-
- let endpointChainId;
- let providerError;
-
- try {
- endpointChainId = await jsonRpcRequest(rpcUrl, 'eth_chainId');
- } catch (err) {
- log.warn('Failed to fetch the chainId from the endpoint.', err);
- providerError = err;
- }
-
- if (rpcUrl && formChainId) {
- if (providerError || typeof endpointChainId !== 'string') {
- errorKey = 'failedToFetchChainId';
- errorMessage = t('failedToFetchChainId');
- } else if (hexChainId !== endpointChainId) {
- // Here, we are in an error state. The endpoint should always return a
- // hexadecimal string. If the user entered a decimal string, we attempt
- // to convert the endpoint's return value to decimal before rendering it
- // in an error message in the form.
- if (!formChainId.startsWith('0x')) {
- try {
- endpointChainId = parseInt(endpointChainId, 16).toString(10);
- } catch (err) {
- log.warn(
- 'Failed to convert endpoint chain ID to decimal',
- endpointChainId,
- );
- }
- }
-
- errorKey = 'endpointReturnedDifferentChainId';
- if (networkMenuRedesign) {
- errorMessage = t('wrongChainId');
- } else {
- errorMessage = t('endpointReturnedDifferentChainId', [
- endpointChainId.length <= MAX_CHAIN_ID_LENGTH
- ? endpointChainId
- : `${endpointChainId.slice(0, 9)}...`,
- ]);
- }
- }
- }
-
- if (errorKey) {
- return {
- error: {
- key: errorKey,
- msg: errorMessage,
- },
- };
- }
- if (warningKey) {
- return {
- warning: {
- key: warningKey,
- msg: warningMessage,
- },
- };
- }
- autoSuggestTicker(formChainId);
- autoSuggestName(formChainId);
- return null;
- },
- [
- rpcUrl,
- networksToRender,
- t,
- addNewNetwork,
- autoSuggestName,
- autoSuggestTicker,
- orderedNetworksList,
- ],
- );
-
- /**
- * Validates the ticker symbol by checking it against the nativeCurrency.symbol return
- * value from chainid.network trusted chain data
- * Assumes that all strings are non-empty and correctly formatted.
- *
- * @param {string} formChainId - The Chain ID currently entered in the form.
- * @param {string} formTickerSymbol - The ticker/currency symbol currently entered in the form.
- */
- const validateTickerSymbol = useCallback(
- async (formChainId, formTickerSymbol) => {
- let warningKey;
- let warningMessage;
- const decimalChainId = getDisplayChainId(formChainId);
-
- if (!decimalChainId || !formTickerSymbol) {
- return null;
- }
-
- if (safeChainsList.current.length === 0) {
- warningKey = 'failedToFetchTickerSymbolData';
- warningMessage = t('failedToFetchTickerSymbolData');
- } else {
- const matchedChain = getMatchedChain(
- decimalChainId,
- safeChainsList.current,
- );
- const matchedSymbols = getMatchedSymbols(
- decimalChainId,
- safeChainsList.current,
- );
-
- if (matchedChain === undefined) {
- warningKey = 'failedToFetchTickerSymbolData';
- warningMessage = t('failedToFetchTickerSymbolData');
- } else if (
- !matchedSymbols.some(
- (symbol) => symbol.toLowerCase() === formTickerSymbol.toLowerCase(),
- )
- ) {
- warningKey = 'chainListReturnedDifferentTickerSymbol';
- warningMessage = t('chainListReturnedDifferentTickerSymbol');
- setSuggestedTicker([...matchedSymbols]);
- }
- }
-
- if (warningKey) {
- return {
- key: warningKey,
- msg: warningMessage,
- };
- }
-
- return null;
- },
- [t],
- );
-
- const validateNetworkName = useCallback(
- async (formChainId, formName) => {
- let warningKey;
- let warningMessage;
- const decimalChainId = getDisplayChainId(formChainId);
-
- let hexChainId = formChainId;
- if (!formChainId.startsWith('0x')) {
- try {
- hexChainId = `0x${decimalToHex(formChainId)}`;
- } catch (err) {
- return {
- error: {
- key: 'invalidHexNumber',
- msg: t('invalidHexNumber'),
- },
- };
- }
- }
-
- const isMatchedName = NETWORK_TO_NAME_MAP[hexChainId] === formName;
-
- if (!decimalChainId || !formName || isMatchedName) {
- setSuggestedNames([]);
- return null;
- }
-
- if (safeChainsList.current.length === 0) {
- warningKey = 'failedToFetchTickerSymbolData';
- warningMessage = t('failedToFetchTickerSymbolData');
- } else {
- const matchedChain = getMatchedChain(
- decimalChainId,
- safeChainsList.current,
- );
-
- const matchedNames = getMatchedNames(
- decimalChainId,
- safeChainsList.current,
- );
- setSuggestedNames([...matchedNames]);
-
- if (matchedChain === undefined) {
- warningKey = 'failedToFetchTickerSymbolData';
- warningMessage = t('failedToFetchTickerSymbolData');
- } else if (
- !matchedNames.some(
- (name) => name?.toLowerCase() === formName.toLowerCase(),
- )
- ) {
- warningKey = 'wrongNetworkName';
- warningMessage = t('wrongNetworkName');
- }
- }
-
- if (warningKey) {
- return {
- key: warningKey,
- msg: warningMessage,
- };
- }
-
- return null;
- },
- [t],
- );
-
- const validateRPCUrl = useCallback(
- async (url, formChainId) => {
- const decimalChainId = getDisplayChainId(formChainId);
-
- const [
- {
- rpcUrl: matchingRPCUrl = null,
- label: matchingRPCLabel,
- labelKey: matchingRPCLabelKey,
- } = {},
- ] = networksToRender.filter((e) => e.rpcUrl === url);
- const { rpcUrl: selectedNetworkRpcUrl } = selectedNetwork;
-
- if (
- networksList.some((network) => url === network.networkRpcUrl) &&
- addNewNetwork &&
- networkMenuRedesign
- ) {
- return {
- key: 'existingRpcUrl',
- msg: t('existingRpcUrl'),
- };
- }
-
- if (!url || (!decimalChainId && networkMenuRedesign)) {
- return null;
- }
-
- if (url?.length > 0 && !isWebUrl(url)) {
- if (isWebUrl(`https://${url}`)) {
- return {
- key: 'urlErrorMsg',
- msg: t('urlErrorMsg'),
- };
- }
- return {
- key: 'invalidRPC',
- msg: t('invalidRPC'),
- };
- } else if (matchingRPCUrl && matchingRPCUrl !== selectedNetworkRpcUrl) {
- return {
- key: 'urlExistsErrorMsg',
- msg: t('urlExistsErrorMsg', [
- matchingRPCLabel ?? matchingRPCLabelKey,
- ]),
- };
- }
-
- if (networkMenuRedesign) {
- let endpointChainId;
- let providerError;
-
- try {
- endpointChainId = await jsonRpcRequest(rpcUrl, 'eth_chainId');
- } catch (err) {
- log.warn('Failed to fetch the chainId from the endpoint.', err);
- providerError = err;
- }
-
- if (providerError || typeof endpointChainId !== 'string') {
- return {
- key: 'failedToFetchChainId',
- msg: t('unMatchedChain'),
- };
- }
- }
-
- return null;
- },
- [selectedNetwork, networksToRender, t, rpcUrl],
- );
-
- // validation effect
- const previousRpcUrl = usePrevious(rpcUrl);
- const previousChainId = usePrevious(chainId);
- const previousTicker = usePrevious(ticker);
- const previousBlockExplorerUrl = usePrevious(blockExplorerUrl);
- const previousNetworkName = usePrevious(networkName);
-
- useEffect(() => {
- if (viewOnly) {
- return;
- }
-
- if (
- previousRpcUrl === rpcUrl &&
- previousChainId === chainId &&
- previousTicker === ticker &&
- previousBlockExplorerUrl === blockExplorerUrl &&
- previousNetworkName === networkName
- ) {
- return;
- }
- async function validate() {
- const { error: chainIdError, warning: chainIdWarning } =
- (await validateChainId(chainId)) || {};
- const tickerWarning = await validateTickerSymbol(chainId, ticker);
- const nameWarning = await validateNetworkName(chainId, networkName);
- const blockExplorerError = validateBlockExplorerURL(blockExplorerUrl);
- const rpcUrlError = await validateRPCUrl(rpcUrl, chainId);
-
- setErrors({
- ...errors,
- blockExplorerUrl: blockExplorerError,
- rpcUrl: rpcUrlError,
- chainId: chainIdError,
- });
-
- setWarnings({
- ...warnings,
- chainId: chainIdWarning,
- ticker: tickerWarning,
- networkName: nameWarning,
- });
- }
-
- validate();
- }, [
- errors,
- warnings,
- rpcUrl,
- chainId,
- ticker,
- blockExplorerUrl,
- viewOnly,
- networkName,
- label,
- previousRpcUrl,
- previousChainId,
- previousTicker,
- previousBlockExplorerUrl,
- previousNetworkName,
- validateBlockExplorerURL,
- validateChainId,
- validateTickerSymbol,
- validateRPCUrl,
- validateNetworkName,
- ]);
-
- const onSubmit = async () => {
- setIsSubmitting(true);
- if (networkMenuRedesign && addNewNetwork) {
- dispatch(toggleNetworkMenu());
- await dispatch(
- requestUserApproval({
- origin: ORIGIN_METAMASK,
- type: ApprovalType.AddEthereumChain,
- requestData: {
- chainId: prefixChainId(chainId),
- rpcUrl,
- ticker,
- imageUrl:
- CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[prefixChainId(chainId)] ?? '',
- chainName: networkName,
- rpcPrefs: {
- ...rpcPrefs,
- blockExplorerUrl: blockExplorerUrl || rpcPrefs?.blockExplorerUrl,
- },
- referrer: ORIGIN_METAMASK,
- source: MetaMetricsNetworkEventSource.NewAddNetworkFlow,
- },
- }),
- );
- return;
- }
- try {
- const formChainId = chainId.trim().toLowerCase();
- const prefixedChainId = prefixChainId(formChainId);
- let networkConfigurationId;
- // After this point, isSubmitting will be reset in componentDidUpdate
- if (prefixedChainId === CHAIN_IDS.GOERLI) {
- dispatch(showDeprecatedNetworkModal());
- } else if (selectedNetwork.rpcUrl && rpcUrl !== selectedNetwork.rpcUrl) {
- await dispatch(
- upsertNetworkConfiguration(
- {
- rpcUrl,
- ticker,
- id: selectedNetwork.networkConfigurationId,
- chainId: prefixedChainId,
- nickname: networkName,
- rpcPrefs: {
- ...rpcPrefs,
- blockExplorerUrl:
- blockExplorerUrl || rpcPrefs?.blockExplorerUrl,
- },
- },
- {
- source: MetaMetricsNetworkEventSource.CustomNetworkForm,
- setActive: true,
- },
- ),
- );
- } else {
- networkConfigurationId = await dispatch(
- upsertNetworkConfiguration(
- {
- rpcUrl,
- ticker,
- chainId: prefixedChainId,
- nickname: networkName,
- rpcPrefs: {
- ...rpcPrefs,
- blockExplorerUrl:
- blockExplorerUrl || rpcPrefs?.blockExplorerUrl,
- },
- },
- {
- setActive: setActiveOnSubmit,
- source: MetaMetricsNetworkEventSource.CustomNetworkForm,
- },
- ),
- );
-
- trackEvent({
- event: MetaMetricsEventName.CustomNetworkAdded,
- category: MetaMetricsEventCategory.Network,
- properties: {
- block_explorer_url: blockExplorerUrl,
- chain_id: prefixedChainId,
- network_name: networkName,
- source_connection_method:
- MetaMetricsNetworkEventSource.CustomNetworkForm,
- token_symbol: ticker,
- },
- sensitiveProperties: {
- rpcUrl: rpcIdentifierUtility(rpcUrl, safeChains),
- },
- });
- if (networkMenuRedesign) {
- dispatch(
- setEditedNetwork({
- networkConfigurationId,
- nickname: networkName,
- editCompleted: true,
- }),
- );
- }
- }
-
- if (
- addNewNetwork &&
- !setActiveOnSubmit &&
- prefixedChainId !== CHAIN_IDS.GOERLI
- ) {
- dispatch(
- setNewNetworkAdded({
- nickname: networkName,
- networkConfigurationId,
- }),
- );
- }
- submitCallback?.();
- } catch (error) {
- setIsSubmitting(false);
- throw error;
- }
- };
-
- const onCancel = () => {
- if (addNewNetwork) {
- dispatch(setSelectedNetworkConfigurationId(''));
- cancelCallback?.();
- } else {
- resetForm();
- }
- };
-
- const onDelete = () => {
- dispatch(
- showModal({
- name: 'CONFIRM_DELETE_NETWORK',
- target: selectedNetwork.networkConfigurationId,
- onConfirm: () => {
- resetForm();
- dispatch(setSelectedNetworkConfigurationId(''));
- },
- }),
- );
- };
-
- const isPopularNetwork = Object.values(FEATURED_RPCS).some(
- (network) =>
- getDisplayChainId(chainId) === getDisplayChainId(network.chainId) &&
- rpcUrl === network.rpcUrl,
- );
-
- const isDefaultNetwork = (networkId, rpcUrlLink, targetChainId) =>
- getDisplayChainId(networkId) === parseInt(targetChainId, 16).toString(10) &&
- rpcUrlLink === CHAIN_ID_TO_RPC_URL_MAP[targetChainId];
-
- const isDefaultMainnet = isDefaultNetwork(chainId, rpcUrl, CHAIN_IDS.MAINNET);
- const isDefaultLineaMainnet = isDefaultNetwork(
- chainId,
- rpcUrl,
- CHAIN_IDS.LINEA_MAINNET,
- );
- const isDefaultSepoliaTestnet = isDefaultNetwork(
- chainId,
- rpcUrl,
- CHAIN_IDS.SEPOLIA,
- );
- const isDefaultLineaSepoliaTestnet = isDefaultNetwork(
- chainId,
- rpcUrl,
- CHAIN_IDS.LINEA_SEPOLIA,
- );
-
- const deletable = !isCurrentRpcTarget && !viewOnly && !addNewNetwork;
- const stateUnchanged = stateIsUnchanged();
- const chainIdErrorOnFeaturedRpcDuringEdit =
- selectedNetwork?.rpcUrl && errors.chainId && chainIdMatchesFeaturedRPC;
- const isSubmitDisabled =
- hasErrors() ||
- isSubmitting ||
- stateUnchanged ||
- chainIdErrorOnFeaturedRpcDuringEdit ||
- !rpcUrl ||
- !chainId ||
- !ticker;
-
- let displayRpcUrl = rpcUrl?.includes(`/v3/${infuraProjectId}`)
- ? rpcUrl.replace(`/v3/${infuraProjectId}`, '')
- : rpcUrl;
- if (viewOnly) {
- displayRpcUrl = displayRpcUrl?.toLowerCase();
- }
-
- const disableEdit =
- viewOnly ||
- isDefaultMainnet ||
- isDefaultLineaMainnet ||
- isDefaultLineaSepoliaTestnet ||
- isDefaultSepoliaTestnet;
-
- return (
-
-
- {addNewNetwork ? (
- 0 &&
- !suggestedNames.some(
- (nameSuggested) => nameSuggested === networkName,
- ) ? (
-
- {t('suggestedTokenName')}
- {suggestedNames.map((suggestedName, i) => (
- {
- setNetworkName(suggestedName);
- setNetworkFormInformation((prevState) => ({
- ...prevState,
- networkNameForm: suggestedName,
- }));
- }}
- paddingLeft={1}
- paddingRight={1}
- style={{ verticalAlign: 'baseline' }}
- key={i}
- >
- {suggestedName}
-
- ))}
-
- ) : null
- }
- onChange={(e) => {
- setIsEditing(true);
- setNetworkName(e.target?.value);
- setNetworkFormInformation((prevState) => ({
- ...prevState,
- networkNameForm: e.target?.value ?? '',
- }));
- }}
- label={t('networkName')}
- labelProps={{
- variant: TextVariant.bodySm,
- fontWeight: FontWeight.Bold,
- paddingBottom: 1,
- paddingTop: 1,
- }}
- inputProps={{
- paddingLeft: 2,
- variant: TextVariant.bodySm,
- 'data-testid': 'network-form-network-name',
- }}
- value={networkName}
- disabled={disableEdit && !addNewNetwork}
- />
- {errors.networkName?.msg ? (
-
- {errors.networkName.msg}
-
- ) : null}
- {warnings.networkName?.msg ? (
-
- {warnings.networkName.msg}
-
- ) : null}
-
- {
- setIsEditing(true);
- setRpcUrl(value);
- }}
- titleText={t('rpcUrl')}
- value={displayRpcUrl}
- disabled={disableEdit && !addNewNetwork}
- dataTestId="network-form-rpc-url"
- />
-
- {errors.rpcUrl?.msg ? (
-
- {errors.rpcUrl.msg}
-
- ) : null}
- {
- setIsEditing(true);
- setChainId(e.target?.value);
- autoSuggestTicker(e.target?.value);
- autoSuggestName(e.target?.value);
- setNetworkFormInformation((prevState) => ({
- ...prevState,
- networkChainIdForm: e.target?.value ?? '',
- }));
- }}
- label={
- viewOnly || networkMenuRedesign ? (
- t('chainId')
- ) : (
- <>
- {t('chainId')}
-
-
-
- )
- }
- labelProps={{
- variant: TextVariant.bodySm,
- fontWeight: FontWeight.Bold,
- paddingBottom: 1,
- paddingTop: 1,
- }}
- inputProps={{
- paddingLeft: 2,
- variant: TextVariant.bodySm,
- 'data-testid': 'network-form-chain-id',
- }}
- value={chainId}
- disabled={(disableEdit || isPopularNetwork) && !addNewNetwork}
- />
-
- {warnings.chainId?.msg ? (
-
- {warnings.chainId?.msg}
-
- ) : null}
- {errors.chainId?.msg ? (
-
- {errors.chainId.msg}
-
- ) : null}
- {errors.chainId?.key === 'endpointReturnedDifferentChainId' &&
- networkMenuRedesign ? (
-
-
- {t('findTheRightChainId')}{' '}
- {
- global.platform.openTab({
- url: CHAIN_LIST_URL,
- });
- }}
- endIconName={IconName.Export}
- endIconProps={{
- size: IconSize.Xs,
- }}
- >
- chainid.network
-
-
-
- ) : null}
- {errors.chainId?.key === 'existingChainId' ? (
-
-
- {t('existingChainId')}
-
-
- {t('updateOrEditNetworkInformations')}{' '}
-
- {t('editNetworkLink')}
-
-
-
- ) : null}
- 0 &&
- !suggestedTicker.some(
- (symbolSuggested) => symbolSuggested === ticker,
- ) ? (
-
- {t('suggestedTokenSymbol')}
- {suggestedTicker.map((suggestedSymbol, i) => (
- {
- setTicker(suggestedSymbol);
- setNetworkFormInformation((prevState) => ({
- ...prevState,
- networkTickerForm: suggestedSymbol,
- }));
- }}
- paddingLeft={1}
- paddingRight={1}
- style={{ verticalAlign: 'baseline' }}
- key={i}
- >
- {suggestedSymbol}
-
- ))}
-
- ) : null
- }
- onChange={(e) => {
- setIsEditing(true);
- setTicker(e.target?.value);
- setNetworkFormInformation((prevState) => ({
- ...prevState,
- networkTickerForm: e.target?.value ?? '',
- }));
- }}
- label={t('currencySymbol')}
- labelProps={{
- variant: TextVariant.bodySm,
- fontWeight: FontWeight.Bold,
- paddingBottom: 1,
- paddingTop: 1,
- }}
- inputProps={{
- paddingLeft: 2,
- variant: TextVariant.bodySm,
- 'data-testid': 'network-form-ticker-input',
- }}
- value={ticker}
- disabled={disableEdit && !addNewNetwork}
- />
- {warnings.ticker?.msg ? (
-
- {warnings.ticker.msg}
-
- ) : null}
- {
- setIsEditing(true);
- setBlockExplorerUrl(e.target?.value);
- }}
- label={`${t('blockExplorerUrl')} ${t('optionalWithParanthesis')}`}
- labelProps={{
- variant: TextVariant.bodySm,
- fontWeight: FontWeight.Bold,
- paddingBottom: 1,
- paddingTop: 1,
- }}
- inputProps={{
- paddingLeft: 2,
- variant: TextVariant.bodySm,
- 'data-testid': 'network-form-block-explorer-url',
- }}
- value={blockExplorerUrl ?? ''}
- disabled={disableEdit && !addNewNetwork}
- autoFocus={
- window.location.hash.split('#')[2] === 'blockExplorerUrl'
- }
- />
- {errors.blockExplorerUrl?.msg ? (
-
- {errors.blockExplorerUrl.msg}
-
- ) : null}
-
-
- {networkMenuRedesign ? (
-
- {
- onSubmit();
- if (!networkMenuRedesign || !addNewNetwork) {
- dispatch(toggleNetworkMenu());
- }
- }}
- size={ButtonPrimarySize.Lg}
- width={BlockSize.Full}
- alignItems={AlignItems.center}
- >
- {addNewNetwork ? t('next') : t('save')}
-
-
- ) : (
-
- {!viewOnly && (
- <>
- {deletable && (
-
- )}
-
-
-
-
-
- )}
-
- )}
-
- );
-};
-
-NetworksForm.propTypes = {
- addNewNetwork: PropTypes.bool,
- isCurrentRpcTarget: PropTypes.bool,
- networksToRender: PropTypes.array.isRequired,
- selectedNetwork: PropTypes.object,
- cancelCallback: PropTypes.func,
- submitCallback: PropTypes.func,
- restrictHeight: PropTypes.bool,
- setActiveOnSubmit: PropTypes.bool,
- onEditNetwork: PropTypes.func,
- prevActionMode: PropTypes.string,
- networkFormInformation: PropTypes.object,
- setNetworkFormInformation: PropTypes.func,
-};
-
-NetworksForm.defaultProps = {
- selectedNetwork: {},
-};
-
-export default NetworksForm;
diff --git a/ui/pages/settings/networks-tab/networks-form/networks-form.test.js b/ui/pages/settings/networks-tab/networks-form/networks-form.test.js
index adaba2dce9af..9840fe979c4b 100644
--- a/ui/pages/settings/networks-tab/networks-form/networks-form.test.js
+++ b/ui/pages/settings/networks-tab/networks-form/networks-form.test.js
@@ -1,19 +1,30 @@
import React from 'react';
import configureMockStore from 'redux-mock-store';
-import { fireEvent, screen } from '@testing-library/react';
+import { screen, fireEvent, waitFor } from '@testing-library/react';
import nock from 'nock';
+import thunk from 'redux-thunk';
import { renderWithProvider } from '../../../../../test/jest/rendering';
-import { defaultNetworksData } from '../networks-tab.constants';
import {
+ CHAIN_IDS,
+ MAINNET_DISPLAY_NAME,
NETWORK_TYPES,
getRpcUrl,
} from '../../../../../shared/constants/network';
import * as fetchWithCacheModule from '../../../../../shared/lib/fetch-with-cache';
-import NetworksForm from '.';
+import { mockNetworkState } from '../../../../../test/stub/networks';
+import { addNetwork, updateNetwork } from '../../../../store/actions';
+import { NetworksForm } from './networks-form';
+
+jest.mock('../../../../../ui/store/actions', () => ({
+ ...jest.requireActual('../../../../../ui/store/actions'),
+ updateNetwork: jest.fn().mockReturnValue(jest.fn().mockResolvedValue()),
+ addNetwork: jest.fn().mockReturnValue(jest.fn().mockResolvedValue()),
+}));
const renderComponent = (props) => {
- const store = configureMockStore([])({
+ const store = configureMockStore([thunk])({
metamask: {
+ ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
useSafeChainsListValidation: true,
orderedNetworkList: {
networkId: '0x1',
@@ -24,33 +35,34 @@ const renderComponent = (props) => {
return renderWithProvider(;
+ existingNetwork?: NetworkConfiguration;
+ onRpcAdd: () => void;
+ onBlockExplorerAdd: () => void;
+}) => {
+ const t = useI18nContext();
+ const dispatch = useDispatch();
+ const trackEvent = useContext(MetaMetricsContext);
+ const scrollableRef = useRef(null);
+ const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
+
+ const {
+ name,
+ setName,
+ chainId,
+ setChainId,
+ ticker,
+ setTicker,
+ rpcUrls,
+ setRpcUrls,
+ blockExplorers,
+ setBlockExplorers,
+ } = networkFormState;
+
+ const { safeChains } = useSafeChains();
+
+ const [errors, setErrors] = useState<
+ Record
+ >({});
+
+ const [warnings, setWarnings] = useState<
+ Record
+ >({});
+
+ const [suggestedName, setSuggestedName] = useState();
+ const [suggestedTicker, setSuggestedTicker] = useState();
+ const [fetchedChainId, setFetchedChainId] = useState();
+
+ const templateInfuraRpc = (endpoint: string) =>
+ endpoint.endsWith('{infuraProjectId}')
+ ? endpoint.replace('{infuraProjectId}', infuraProjectId ?? '')
+ : endpoint;
+
+ // Validate the network name when it changes
+ useEffect(() => {
+ const chainIdHex = chainId ? toHex(chainId) : undefined;
+ const expectedName = chainIdHex
+ ? NETWORK_TO_NAME_MAP[chainIdHex as keyof typeof NETWORK_TO_NAME_MAP] ??
+ safeChains?.find((chain) => toHex(chain.chainId) === chainIdHex)?.name
+ : undefined;
+
+ const mismatch = expectedName && expectedName !== name;
+ setSuggestedName(mismatch ? expectedName : undefined);
+ setWarnings((state) => ({
+ ...state,
+ name: mismatch
+ ? {
+ key: 'wrongNetworkName',
+ msg: t('wrongNetworkName'),
+ }
+ : undefined,
+ }));
+ }, [chainId, name, safeChains]);
+
+ // Validate the ticker when it changes
+ useEffect(() => {
+ const chainIdHex = chainId ? toHex(chainId) : undefined;
+ const expectedSymbol = chainIdHex
+ ? CHAIN_ID_TO_CURRENCY_SYMBOL_MAP[
+ chainIdHex as keyof typeof CHAIN_ID_TO_CURRENCY_SYMBOL_MAP
+ ] ??
+ safeChains?.find((chain) => toHex(chain.chainId) === chainIdHex)
+ ?.nativeCurrency?.symbol
+ : undefined;
+
+ const mismatch = expectedSymbol && expectedSymbol !== ticker;
+ setSuggestedTicker(mismatch ? expectedSymbol : undefined);
+ setWarnings((state) => ({
+ ...state,
+ ticker: mismatch
+ ? {
+ key: 'chainListReturnedDifferentTickerSymbol',
+ msg: t('chainListReturnedDifferentTickerSymbol'),
+ }
+ : undefined,
+ }));
+ }, [chainId, ticker, safeChains]);
+
+ // Validate the chain ID when it changes
+ useEffect(() => {
+ let error: [string, string] | undefined;
+
+ if (chainId === undefined || chainId === '') {
+ error = undefined;
+ } else if (chainId.startsWith('0x')) {
+ if (!/^0x[0-9a-f]+$/iu.test(chainId)) {
+ error = ['invalidHexNumber', t('invalidHexNumber')];
+ } else if (!isPrefixedFormattedHexString(chainId)) {
+ error = ['invalidHexNumber', t('invalidHexNumberLeadingZeros')];
+ }
+ } else if (!/^[0-9]+$/u.test(chainId)) {
+ error = ['invalidNumber', t('invalidNumber')];
+ } else if (chainId.startsWith('0')) {
+ error = ['invalidNumberLeadingZeros', t('invalidNumberLeadingZeros')];
+ }
+
+ if (
+ chainId &&
+ !error &&
+ !isSafeChainId(parseInt(chainId, chainId.startsWith('0x') ? 16 : 10))
+ ) {
+ error = ['invalidChainIdTooBig', t('invalidChainIdTooBig')];
+ }
+
+ const chainIdHex = toHex(chainId);
+
+ if (!error && !existingNetwork) {
+ const matchingNetwork = chainIdHex
+ ? networkConfigurations[chainIdHex]
+ : undefined;
+ if (matchingNetwork) {
+ error = [
+ 'existingChainId',
+ t('chainIdExistsErrorMsg', [matchingNetwork.name]),
+ ];
+ }
+ }
+
+ let rpcError: [string, string] | undefined;
+ if (fetchedChainId && chainIdHex && fetchedChainId !== chainIdHex) {
+ rpcError = [
+ 'endpointReturnedDifferentChainId',
+ t('endpointReturnedDifferentChainId', [hexToDecimal(fetchedChainId)]),
+ ];
+ }
+
+ setErrors((state) => ({
+ ...state,
+ chainId: error ? { key: error[0], msg: error[1] } : undefined,
+ rpcUrl: rpcError ? { key: rpcError[0], msg: rpcError[1] } : undefined,
+ }));
+ }, [chainId, fetchedChainId, existingNetwork?.chainId]);
+
+ // Fetch the chain ID from the RPC endpoint when it changes
+ useEffect(() => {
+ const rpcUrl =
+ rpcUrls?.rpcEndpoints?.[rpcUrls?.defaultRpcEndpointIndex ?? -1]?.url;
+
+ if (rpcUrl) {
+ jsonRpcRequest(templateInfuraRpc(rpcUrl), 'eth_chainId')
+ .then((response) => {
+ setFetchedChainId(response as string);
+ })
+ .catch((err) => {
+ setFetchedChainId(undefined);
+ log.warn('Failed to fetch the chainId from the endpoint.', err);
+ setErrors((state) => ({
+ ...state,
+ rpcUrl: {
+ key: 'failedToFetchChainId',
+ msg: t('failedToFetchChainId'),
+ },
+ }));
+ });
+ }
+ }, [chainId, rpcUrls]);
+
+ const onSubmit = async () => {
+ try {
+ const chainIdHex = chainId ? toHex(chainId) : undefined;
+ if (chainIdHex === CHAIN_IDS.GOERLI) {
+ dispatch(showDeprecatedNetworkModal());
+ } else if (chainIdHex) {
+ const networkPayload = {
+ chainId: chainIdHex,
+ name,
+ nativeCurrency: ticker,
+ rpcEndpoints: rpcUrls?.rpcEndpoints,
+ defaultRpcEndpointIndex: rpcUrls?.defaultRpcEndpointIndex ?? 0,
+ blockExplorerUrls: blockExplorers?.blockExplorerUrls,
+ defaultBlockExplorerUrlIndex:
+ blockExplorers?.defaultBlockExplorerUrlIndex,
+ };
+
+ if (existingNetwork) {
+ const options = {
+ replacementSelectedRpcEndpointIndex:
+ chainIdHex === existingNetwork.chainId
+ ? rpcUrls?.defaultRpcEndpointIndex
+ : undefined,
+ };
+ await dispatch(updateNetwork(networkPayload, options));
+ } else {
+ await dispatch(addNetwork(networkPayload));
+ }
+
+ trackEvent({
+ event: MetaMetricsEventName.CustomNetworkAdded,
+ category: MetaMetricsEventCategory.Network,
+ properties: {
+ block_explorer_url:
+ blockExplorers?.blockExplorerUrls?.[
+ blockExplorers?.defaultBlockExplorerUrlIndex ?? -1
+ ],
+ chain_id: chainIdHex,
+ network_name: name,
+ source_connection_method:
+ MetaMetricsNetworkEventSource.CustomNetworkForm,
+ token_symbol: ticker,
+ },
+ sensitiveProperties: {
+ rpcUrl: rpcIdentifierUtility(
+ rpcUrls?.rpcEndpoints[rpcUrls.defaultRpcEndpointIndex ?? -1]?.url,
+ safeChains ?? [],
+ ),
+ },
+ });
+
+ dispatch(
+ setEditedNetwork({
+ chainId: chainIdHex,
+ nickname: name,
+ editCompleted: true,
+ newNetwork: !existingNetwork,
+ }),
+ );
+ }
+ } catch (e) {
+ console.error(e);
+ } finally {
+ dispatch(toggleNetworkMenu());
+ }
+ };
+
+ return (
+
+
+
+ {name && warnings?.name?.msg && (
+
+ {warnings.name.msg}
+
+ )}
+
+ {suggestedName && (
+
+ {t('suggestedTokenName')}
+ {
+ setName(suggestedName);
+ }}
+ paddingLeft={1}
+ paddingRight={1}
+ style={{ verticalAlign: 'baseline' }}
+ >
+ {suggestedName}
+
+
+ )}
+
+ )
+ }
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ onChange={(e: any) => {
+ setName(e.target?.value);
+ }}
+ label={t('networkName')}
+ labelProps={{
+ children: undefined,
+ variant: TextVariant.bodyMdMedium,
+ }}
+ textFieldProps={{
+ borderRadius: BorderRadius.LG,
+ }}
+ inputProps={{
+ 'data-testid': 'network-form-network-name',
+ }}
+ value={name}
+ />
+ endpoint.url}
+ selectedItemIndex={rpcUrls.defaultRpcEndpointIndex}
+ error={Boolean(errors.rpcUrl)}
+ buttonDataTestId="test-add-rpc-drop-down"
+ renderItem={(item, isList) =>
+ isList || item?.name || item?.type === RpcEndpointType.Infura ? (
+
+ {stripProtocol(stripKeyFromInfuraUrl(item.url))}
+
+ )
+ }
+ renderTooltip={(item, isList) => {
+ const url = stripKeyFromInfuraUrl(item.url);
+ return url.length > (isList ? 37 : 35) ? url : undefined;
+ }}
+ addButtonText={t('addRpcUrl')}
+ itemIsDeletable={(item) => item.type !== RpcEndpointType.Infura}
+ onItemAdd={onRpcAdd}
+ onItemSelected={(index) =>
+ setRpcUrls((state) => ({
+ ...state,
+ defaultRpcEndpointIndex: index,
+ }))
+ }
+ onItemDeleted={(deletedIndex, newSelectedIndex) => {
+ setRpcUrls({
+ rpcEndpoints: rpcUrls.rpcEndpoints
+ ?.slice(0, deletedIndex)
+ .concat(rpcUrls.rpcEndpoints.slice(deletedIndex + 1)),
+ defaultRpcEndpointIndex: newSelectedIndex,
+ });
+ }}
+ />
+
+ {errors.rpcUrl?.msg && (
+
+
+ {errors.rpcUrl?.msg}
+
+
+ )}
+ {
+ setChainId(e.target?.value.trim());
+ }}
+ error={Boolean(errors?.chainId)}
+ label={t('chainId')}
+ labelProps={{
+ children: undefined,
+ variant: TextVariant.bodyMdMedium,
+ }}
+ textFieldProps={{
+ borderRadius: BorderRadius.LG,
+ }}
+ inputProps={{
+ 'data-testid': 'network-form-chain-id',
+ }}
+ value={chainId}
+ disabled={Boolean(existingNetwork)}
+ />
+
+ {errors.chainId?.msg ? (
+
+ {errors.chainId.msg}
+
+ ) : null}
+ {errors.chainId?.key === 'existingChainId' ? (
+
+
+ {t('updateOrEditNetworkInformations')}{' '}
+ {
+ const chainIdHex = toHex(chainId);
+ if (chainIdHex) {
+ dispatch(
+ setEditedNetwork({
+ chainId: chainIdHex,
+ }),
+ );
+ }
+ }}
+ >
+ {t('editNetworkLink')}
+
+
+
+ ) : null}
+
+ {t('suggestedCurrencySymbol')}
+ {
+ setTicker(suggestedTicker);
+ }}
+ paddingLeft={1}
+ paddingRight={1}
+ style={{ verticalAlign: 'baseline' }}
+ >
+ {suggestedTicker}
+
+
+ ) : null
+ }
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ onChange={(e: any) => {
+ setTicker(e.target?.value);
+ }}
+ label={t('currencySymbol')}
+ labelProps={{
+ children: undefined,
+ variant: TextVariant.bodyMdMedium,
+ }}
+ textFieldProps={{
+ borderRadius: BorderRadius.LG,
+ }}
+ inputProps={{
+ 'data-testid': 'network-form-ticker-input',
+ }}
+ value={ticker}
+ />
+ {ticker && warnings.ticker?.msg ? (
+
+ {warnings.ticker.msg}
+
+ ) : null}
+
+ `${item}`}
+ selectedItemIndex={blockExplorers.defaultBlockExplorerUrlIndex}
+ addButtonText={t('addBlockExplorerUrl')}
+ onItemAdd={onBlockExplorerAdd}
+ buttonDataTestId="test-explorer-drop-down"
+ onItemSelected={(index) =>
+ setBlockExplorers((state) => ({
+ ...state,
+ defaultBlockExplorerUrlIndex: index,
+ }))
+ }
+ onItemDeleted={(deletedIndex, newSelectedIndex) => {
+ setBlockExplorers({
+ blockExplorerUrls: blockExplorers.blockExplorerUrls
+ ?.slice(0, deletedIndex)
+ .concat(
+ blockExplorers.blockExplorerUrls.slice(deletedIndex + 1),
+ ),
+ defaultBlockExplorerUrlIndex: newSelectedIndex,
+ });
+ }}
+ // Scroll to bottom so all URLs are visible
+ onDropdownOpened={() => {
+ if (scrollableRef.current) {
+ scrollableRef.current.scrollTop =
+ scrollableRef.current.scrollHeight;
+ }
+ }}
+ renderItem={(item) => (
+
+ {stripProtocol(item)}
+
+ )}
+ renderTooltip={(item) => (item.length > 36 ? item : undefined)}
+ />
+
+
+ e)
+ }
+ onClick={onSubmit}
+ size={ButtonPrimarySize.Lg}
+ width={BlockSize.Full}
+ >
+ {t('save')}
+
+
+
+ );
+};
+
+function toHex(value: string): Hex | undefined {
+ if (isStrictHexString(value)) {
+ return value;
+ } else if (/^\d+$/u.test(value)) {
+ return `0x${decimalToHex(value)}`;
+ }
+ return undefined;
+}
+
+export default NetworksForm;
diff --git a/ui/pages/settings/networks-tab/networks-form/rpc-url-editor.test.tsx b/ui/pages/settings/networks-tab/networks-form/rpc-url-editor.test.tsx
deleted file mode 100644
index 8adf0fcbc985..000000000000
--- a/ui/pages/settings/networks-tab/networks-form/rpc-url-editor.test.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { useDispatch } from 'react-redux';
-import { showModal, toggleNetworkMenu } from '../../../../store/actions';
-import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { RpcUrlEditor } from './rpc-url-editor';
-
-// Mock useDispatch
-jest.mock('react-redux', () => ({
- useDispatch: jest.fn(),
-}));
-
-jest.mock('../../../../hooks/useI18nContext', () => ({
- useI18nContext: jest.fn(),
-}));
-
-describe('RpcUrlEditor', () => {
- const useDispatchMock = useDispatch as jest.Mock;
- const mockOnRpcUrlAdd = jest.fn();
- const mockOnRpcSelected = jest.fn();
- const useI18nContextMock = useI18nContext as jest.Mock;
- const mockDispatch = jest.fn();
-
- const defaultProps = {
- currentRpcUrl: 'https://current-rpc-url.com',
- onRpcUrlAdd: mockOnRpcUrlAdd,
- onRpcSelected: mockOnRpcSelected,
- dummyRpcUrls: [
- { url: 'https://rpc-url-1.com', selected: false },
- { url: 'https://rpc-url-2.com', selected: true },
- ],
- };
-
- beforeEach(() => {
- useDispatchMock.mockReturnValue(mockDispatch);
- useI18nContextMock.mockReturnValue((key: string) => key);
- jest.clearAllMocks();
- });
-
- it('should render correctly', () => {
- const { container } = render(
- {t('defaultRpcUrl')}
-
- setIsDropdownOpen(!isDropdownOpen)}
- className="networks-tab__rpc-dropdown"
- display={Display.Flex}
- justifyContent={JustifyContent.spaceBetween}
- borderRadius={BorderRadius.MD}
- borderColor={BorderColor.borderDefault}
- borderWidth={1}
- padding={2}
- ref={rpcDropdown}
- >
- {currentRpcEndpoint}
-
- setIsDropdownOpen(!isDropdownOpen)}
- >
- {dummyRpcUrls.map(({ url }) => (
- {
- handleSelectRpc(url);
- setIsDropdownOpen(false);
- }}
- className={classnames('networks-tab__rpc-item', {
- 'networks-tab__rpc-item--selected': url === currentRpcEndpoint,
- })}
- >
- {url === currentRpcEndpoint && (
-
- {url}
-
- {
- e.stopPropagation();
- dispatch(toggleNetworkMenu());
- dispatch(
- showModal({
- name: 'CONFIRM_DELETE_RPC_URL',
- }),
- );
- }}
- />
-
- ))}
-
-
- {t('addRpcUrl')}
-
-
-
-
- );
-};
-
-export default RpcUrlEditor;
diff --git a/ui/pages/settings/networks-tab/networks-list-item/index.js b/ui/pages/settings/networks-tab/networks-list-item/index.js
deleted file mode 100644
index e4911213c597..000000000000
--- a/ui/pages/settings/networks-tab/networks-list-item/index.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './networks-list-item';
diff --git a/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js b/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js
deleted file mode 100644
index c23a1c6a4a3b..000000000000
--- a/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.js
+++ /dev/null
@@ -1,147 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import { useDispatch, useSelector } from 'react-redux';
-import { useI18nContext } from '../../../../hooks/useI18nContext';
-import {
- CHAIN_IDS,
- CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
- NETWORK_TYPES,
-} from '../../../../../shared/constants/network';
-import { NETWORKS_ROUTE } from '../../../../helpers/constants/routes';
-import { setSelectedNetworkConfigurationId } from '../../../../store/actions';
-import { getEnvironmentType } from '../../../../../app/scripts/lib/util';
-import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../../shared/constants/app';
-import { getProviderConfig } from '../../../../ducks/metamask/metamask';
-import Identicon from '../../../../components/ui/identicon';
-import UrlIcon from '../../../../components/ui/url-icon';
-
-import { handleSettingsRefs } from '../../../../helpers/utils/settings-search';
-import {
- Icon,
- IconName,
- IconSize,
-} from '../../../../components/component-library';
-import { IconColor } from '../../../../helpers/constants/design-system';
-import { getNetworkLabelKey } from '../../../../helpers/utils/i18n-helper';
-
-const NetworksListItem = ({
- network,
- networkIsSelected,
- selectedNetworkConfigurationId,
- setSearchQuery,
- setSearchedNetworks,
-}) => {
- const t = useI18nContext();
- const dispatch = useDispatch();
- const environmentType = getEnvironmentType();
- const isFullScreen = environmentType === ENVIRONMENT_TYPE_FULLSCREEN;
- const providerConfig = useSelector(getProviderConfig);
- const {
- label,
- labelKey,
- networkConfigurationId,
- rpcUrl,
- providerType: currentProviderType,
- } = network;
-
- const listItemNetworkIsSelected =
- selectedNetworkConfigurationId &&
- selectedNetworkConfigurationId === networkConfigurationId;
- const listItemUrlIsProviderUrl = rpcUrl === providerConfig.rpcUrl;
- const listItemTypeIsProviderNonRpcType =
- providerConfig.type !== NETWORK_TYPES.RPC &&
- currentProviderType === providerConfig.type;
- const listItemNetworkIsCurrentProvider =
- !networkIsSelected &&
- (listItemUrlIsProviderUrl || listItemTypeIsProviderNonRpcType);
- const displayNetworkListItemAsSelected =
- listItemNetworkIsSelected || listItemNetworkIsCurrentProvider;
- const isCurrentRpcTarget =
- listItemUrlIsProviderUrl || listItemTypeIsProviderNonRpcType;
-
- const settingsRefs = useRef();
-
- useEffect(() => {
- handleSettingsRefs(t, t('networks'), settingsRefs);
- }, [settingsRefs, t]);
-
- return (
- {
- setSearchQuery('');
- setSearchedNetworks([]);
- dispatch(setSelectedNetworkConfigurationId(networkConfigurationId));
- if (!isFullScreen) {
- global.platform.openExtensionInBrowser(NETWORKS_ROUTE);
- }
- }}
- >
- {isCurrentRpcTarget ? (
- {
- setSearchedNetworks(newResults);
- setSearchQuery(newSearchQuery);
- }}
- error={
- searchedNetworksToRender.length === 0
- ? t('settingsSearchMatchingNotFound')
- : null
- }
- networksList={networksToRender}
- searchQueryInput={searchQuery}
- />
- {searchedNetworksToRenderThatAreNotTestNetworks.map((network, _) => (
-
- {t('testNetworks')}
-
- )}
- {searchedNetworksToRenderThatAreTestNetworks.map((network, _) => (
-
- );
-};
-
-NetworksList.propTypes = {
- networkDefaultedToProvider: PropTypes.bool,
- networkIsSelected: PropTypes.bool,
- networksToRender: PropTypes.arrayOf(PropTypes.object).isRequired,
- selectedNetworkConfigurationId: PropTypes.string,
-};
-
-export default NetworksList;
diff --git a/ui/pages/settings/networks-tab/networks-list/networks-list.test.js b/ui/pages/settings/networks-tab/networks-list/networks-list.test.js
deleted file mode 100644
index bac67529ea7d..000000000000
--- a/ui/pages/settings/networks-tab/networks-list/networks-list.test.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import configureMockStore from 'redux-mock-store';
-import { renderWithProvider } from '../../../../../test/jest/rendering';
-import { defaultNetworksData } from '../networks-tab.constants';
-import { CHAIN_IDS } from '../../../../../shared/constants/network';
-import { mockNetworkState } from '../../../../../test/stub/networks';
-import NetworksList from '.';
-
-const mockState = {
- metamask: {
- ...mockNetworkState({ chainId: CHAIN_IDS.GOERLI }),
- },
-};
-
-const renderComponent = (props) => {
- const store = configureMockStore([])(mockState);
- return renderWithProvider( history.push(DEFAULT_ROUTE)}
- cancelCallback={() => history.push(NETWORKS_ROUTE)}
- />
- ) : null}
-
- );
-};
-NetworksTabContent.propTypes = {
- networkDefaultedToProvider: PropTypes.bool,
- networkIsSelected: PropTypes.bool,
- networksToRender: PropTypes.arrayOf(PropTypes.object).isRequired,
- selectedNetwork: PropTypes.object,
- shouldRenderNetworkForm: PropTypes.bool.isRequired,
-};
-
-export default NetworksTabContent;
diff --git a/ui/pages/settings/networks-tab/networks-tab-content/networks-tab-content.test.js b/ui/pages/settings/networks-tab/networks-tab-content/networks-tab-content.test.js
deleted file mode 100644
index 218982560630..000000000000
--- a/ui/pages/settings/networks-tab/networks-tab-content/networks-tab-content.test.js
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from 'react';
-import configureMockStore from 'redux-mock-store';
-import { fireEvent, screen } from '@testing-library/react';
-import { renderWithProvider } from '../../../../../test/jest/rendering';
-import { defaultNetworksData } from '../networks-tab.constants';
-import { mockNetworkState } from '../../../../../test/stub/networks';
-import { CHAIN_IDS } from '../../../../../shared/constants/network';
-import NetworksTabContent from '.';
-
-const mockState = {
- metamask: {
- ...mockNetworkState({ chainId: CHAIN_IDS.LOCALHOST }),
- orderedNetworkList: {
- chainId: '0x539',
- rpcUrl: 'http://localhost:8545',
- },
- },
-};
-
-jest.mock('../../../../helpers/utils/feature-flags', () => ({
- getLocalNetworkMenuRedesignFeatureFlag: jest.fn(() => false),
-}));
-
-const renderComponent = (props) => {
- const store = configureMockStore([])(mockState);
- return renderWithProvider( history.push(DEFAULT_ROUTE)}
- cancelCallback={() => history.push(NETWORKS_ROUTE)}
- />
- ) : (
- <>
-
-
- );
-};
-
-NetworksTab.propTypes = {
- addNewNetwork: PropTypes.bool,
-};
-export default NetworksTab;
diff --git a/ui/pages/settings/networks-tab/networks-tab.test.js b/ui/pages/settings/networks-tab/networks-tab.test.js
deleted file mode 100644
index 96f7b5c18891..000000000000
--- a/ui/pages/settings/networks-tab/networks-tab.test.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import configureMockStore from 'redux-mock-store';
-import { renderWithProvider } from '../../../../test/jest/rendering';
-import { mockNetworkState } from '../../../../test/stub/networks';
-import { CHAIN_IDS } from '../../../../shared/constants/network';
-import NetworksTab from '.';
-
-const mockState = {
- metamask: {
- ...mockNetworkState({ chainId: CHAIN_IDS.LOCALHOST }),
- orderedNetworkList: {
- chainId: '0x539',
- rpcUrl: 'http://localhost:8545',
- },
- },
- appState: {
- networksTabSelectedRpcUrl: 'http://localhost:8545',
- },
-};
-
-jest.mock('../../../helpers/utils/feature-flags', () => ({
- ...jest.requireActual('../../../helpers/utils/feature-flags'),
- getLocalNetworkMenuRedesignFeatureFlag: () => false,
-}));
-
-const renderComponent = (props) => {
- const store = configureMockStore([])(mockState);
- return renderWithProvider(
-
-
-
- Linea Mainnet
-
-
-
-
-
-
-
-
- C
-
-
-
- Chain 5
-
-
-
- Etherscan.io
-
-
-
-
-
-
-
-
-
-
-
- S
+ G
- Sepolia
+ Goerli
-
-
-
-
-
-
-
- 
-
-
-
- Linea Sepolia
-
-
-
-
diff --git a/ui/pages/settings/security-tab/security-tab.component.js b/ui/pages/settings/security-tab/security-tab.component.js
index 3931f6dae089..6ed158844198 100644
--- a/ui/pages/settings/security-tab/security-tab.component.js
+++ b/ui/pages/settings/security-tab/security-tab.component.js
@@ -71,7 +71,7 @@ export default class SecurityTab extends PureComponent {
participateInMetaMetrics: PropTypes.bool.isRequired,
setParticipateInMetaMetrics: PropTypes.func.isRequired,
incomingTransactionsPreferences: PropTypes.object.isRequired,
- allNetworks: PropTypes.array.isRequired,
+ networkConfigurations: PropTypes.object.isRequired,
setIncomingTransactionsPreferences: PropTypes.func.isRequired,
setUsePhishDetect: PropTypes.func.isRequired,
usePhishDetect: PropTypes.bool.isRequired,
@@ -259,14 +259,14 @@ export default class SecurityTab extends PureComponent {
renderIncomingTransactionsOptIn() {
const {
incomingTransactionsPreferences,
- allNetworks,
+ networkConfigurations,
setIncomingTransactionsPreferences,
} = this.props;
return (
>;
+ networkConfigurationsByChainId: Record;
currentCurrency: string;
currencyRates: Record;
completedOnboarding: boolean;
@@ -59,14 +61,13 @@ type TestState = MultichainState &
};
};
-function getEvmState(): TestState {
+function getEvmState(chainId: Hex = CHAIN_IDS.MAINNET): TestState {
return {
metamask: {
preferences: {
showFiatInTestnets: false,
},
- ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
-
+ ...mockNetworkState({ chainId }),
currentCurrency: 'ETH',
currencyRates: {
ETH: {
@@ -323,9 +324,7 @@ describe('Multichain Selectors', () => {
});
it('returns current chain ID if account is EVM (other)', () => {
- const state = getEvmState();
-
- state.metamask.selectedNetworkClientId = 'sepolia';
+ const state = getEvmState(CHAIN_IDS.SEPOLIA);
expect(getMultichainCurrentChainId(state)).toEqual(CHAIN_IDS.SEPOLIA);
});
@@ -348,9 +347,7 @@ describe('Multichain Selectors', () => {
});
it('returns false if account is EVM (testnet)', () => {
- const state = getEvmState();
-
- state.metamask.selectedNetworkClientId = 'sepolia';
+ const state = getEvmState(CHAIN_IDS.SEPOLIA);
expect(getMultichainIsMainnet(state)).toBe(false);
});
@@ -382,11 +379,10 @@ describe('Multichain Selectors', () => {
});
// @ts-expect-error This is missing from the Mocha type definitions
- it.each([NETWORK_TYPES.SEPOLIA, NETWORK_TYPES.LINEA_SEPOLIA])(
+ it.each([CHAIN_IDS.SEPOLIA, CHAIN_IDS.LINEA_SEPOLIA])(
'returns true if account is EVM (testnet): %s',
- (network: string) => {
- const state = getEvmState();
- state.metamask.selectedNetworkClientId = network;
+ (chainId: Hex) => {
+ const state = getEvmState(chainId);
expect(getMultichainIsTestnet(state)).toBe(true);
},
);
diff --git a/ui/selectors/multichain.ts b/ui/selectors/multichain.ts
index dc71d38563a9..e22883d83a03 100644
--- a/ui/selectors/multichain.ts
+++ b/ui/selectors/multichain.ts
@@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import { InternalAccount, isEvmAccountType } from '@metamask/keyring-api';
-import { NetworkConfiguration } from '@metamask/network-controller';
import type { RatesControllerState } from '@metamask/assets-controllers';
import { CaipChainId, Hex, KnownCaipNamespace } from '@metamask/utils';
import { createSelector } from '@reduxjs/toolkit';
@@ -21,8 +20,6 @@ import { BalancesControllerState } from '../../app/scripts/lib/accounts/Balances
import { MultichainNativeAssets } from '../../shared/constants/multichain/assets';
import {
CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
- NETWORK_TO_NAME_MAP,
- NETWORK_TYPES,
TEST_NETWORK_IDS,
} from '../../shared/constants/network';
import { AccountsState } from './accounts';
@@ -32,7 +29,7 @@ import {
getIsMainnet,
getMaybeSelectedInternalAccount,
getNativeCurrencyImage,
- getNetworkConfigurations,
+ getNetworkConfigurationsByChainId,
getSelectedAccountCachedBalance,
getSelectedInternalAccount,
getShouldShowFiat,
@@ -61,9 +58,6 @@ export type ProviderConfigWithImageUrlAndExplorerUrl = {
rpcPrefs?: { blockExplorerUrl?: string; imageUrl?: string };
};
-// TODO: Remove after updating to @metamask/network-controller 20.0.0
-export type NetworkConfigurationWithId = NetworkConfiguration & { id: string };
-
export type MultichainNetwork = {
nickname: string;
isEvmNetwork: boolean;
@@ -132,53 +126,25 @@ export function getMultichainNetwork(
if (isEvm) {
// EVM networks
- const evmChainId: string = getCurrentChainId(state);
+ const evmChainId: Hex = getCurrentChainId(state);
// TODO: Update to use network configurations when @metamask/network-controller is updated to 20.0.0
// ProviderConfig will be deprecated to use NetworkConfigurations
// When a user updates a network name its only updated in the NetworkConfigurations.
const evmNetwork: ProviderConfigWithImageUrlAndExplorerUrl =
- getProviderConfig(state);
- // Fallback to a known network image if network configuration does not defined it
+ getProviderConfig(state) as ProviderConfigWithImageUrlAndExplorerUrl;
+
const evmChainIdKey =
evmChainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP;
- if (
- !evmNetwork?.rpcPrefs?.imageUrl &&
- evmChainIdKey in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
- ) {
- evmNetwork.rpcPrefs = {
- ...evmNetwork.rpcPrefs,
- imageUrl: CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[evmChainIdKey],
- };
- }
-
- let nickname;
- if (evmNetwork.type === NETWORK_TYPES.RPC) {
- // These are custom networks defined by the user.
- // If there aren't any nicknames, the RPC URL is displayed.
-
- // Could be undefined for default configurations.
- const evmNetworkConfigurations = getNetworkConfigurations(state);
- const evmNetworkConfiguration =
- // id will always be defined for custom networks.
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- evmNetworkConfigurations?.[evmNetwork.id!];
- nickname =
- evmNetworkConfiguration?.nickname ??
- evmNetwork.nickname ??
- // rpcUrl will always be defined for custom networks.
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- evmNetwork.rpcUrl!;
- } else {
- // These are the default networks, they do not have nicknames
-
- // Nickname is "optional", so it might be undefined here
- nickname = NETWORK_TO_NAME_MAP[evmNetwork.type];
- }
+ evmNetwork.rpcPrefs = {
+ ...evmNetwork.rpcPrefs,
+ imageUrl: CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[evmChainIdKey],
+ };
+
+ const networkConfigurations = getNetworkConfigurationsByChainId(state);
return {
- // Current behavior is to display RPC URL as nickname if its not defined.
- nickname,
+ nickname: networkConfigurations[evmChainId]?.name ?? evmNetwork.rpcUrl,
isEvmNetwork: true,
// We assume the chain ID is `string` or `number`, so we convert it to a
// `Number` to be compliant with EIP155 CAIP chain ID
@@ -332,7 +298,7 @@ export function getMultichainDefaultToken(
) {
const symbol = getMultichainIsEvm(state, account)
? // We fallback to 'ETH' to keep original behavior of `getSwapsDefaultToken`
- getProviderConfig(state).ticker ?? 'ETH'
+ getProviderConfig(state)?.ticker ?? 'ETH'
: getMultichainProviderConfig(state, account).ticker;
return { symbol };
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index 96c956d72223..38caa10dc3ab 100644
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@@ -11,6 +11,7 @@ import { createSelector } from 'reselect';
import { NameType } from '@metamask/name-controller';
import { TransactionStatus } from '@metamask/transaction-controller';
import { isEvmAccountType } from '@metamask/keyring-api';
+import { RpcEndpointType } from '@metamask/network-controller';
import { addHexPrefix, getEnvironmentType } from '../../app/scripts/lib/util';
import {
TEST_CHAINS,
@@ -24,19 +25,14 @@ import {
NetworkStatus,
SEPOLIA_DISPLAY_NAME,
GOERLI_DISPLAY_NAME,
- ETH_TOKEN_IMAGE_URL,
LINEA_GOERLI_DISPLAY_NAME,
- CURRENCY_SYMBOLS,
- TEST_NETWORK_TICKER_MAP,
LINEA_MAINNET_DISPLAY_NAME,
- LINEA_MAINNET_TOKEN_IMAGE_URL,
CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
ARBITRUM_DISPLAY_NAME,
OPTIMISM_DISPLAY_NAME,
BASE_DISPLAY_NAME,
ZK_SYNC_ERA_DISPLAY_NAME,
CHAIN_ID_TOKEN_IMAGE_MAP,
- LINEA_SEPOLIA_TOKEN_IMAGE_URL,
LINEA_SEPOLIA_DISPLAY_NAME,
CRONOS_DISPLAY_NAME,
CELO_DISPLAY_NAME,
@@ -45,7 +41,6 @@ import {
POLYGON_ZKEVM_DISPLAY_NAME,
MOONBEAM_DISPLAY_NAME,
MOONRIVER_DISPLAY_NAME,
- BUILT_IN_NETWORKS,
TEST_NETWORK_IDS,
} from '../../shared/constants/network';
import {
@@ -656,103 +651,13 @@ export function getNeverShowSwitchedNetworkMessage(state) {
return state.metamask.switchedNetworkNeverShowMessage;
}
-export const getNonTestNetworks = createDeepEqualSelector(
- getNetworkConfigurations,
- (networkConfigurations = {}) => {
- 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,
- id: NETWORK_TYPES.MAINNET,
- removable: false,
- blockExplorerUrl:
- BUILT_IN_NETWORKS[NETWORK_TYPES.MAINNET].blockExplorerUrl,
- },
- {
- 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: CURRENCY_SYMBOLS.ETH,
- id: NETWORK_TYPES.LINEA_MAINNET,
- removable: false,
- blockExplorerUrl:
- BUILT_IN_NETWORKS[NETWORK_TYPES.LINEA_MAINNET].blockExplorerUrl,
- },
- // Custom networks added by the user
- ...Object.values(networkConfigurations)
- .filter(({ chainId }) => ![CHAIN_IDS.LOCALHOST].includes(chainId))
- .map((network) => ({
- ...network,
- blockExplorerUrl: network.rpcPrefs?.blockExplorerUrl,
- rpcPrefs: {
- ...network.rpcPrefs,
- // Provide an image based on chainID if a network
- // has been added without an image
- imageUrl:
- network?.rpcPrefs?.imageUrl ??
- CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[network.chainId],
- },
- removable: true,
- })),
- ];
- },
-);
-
-export const getTestNetworks = createDeepEqualSelector(
- getNetworkConfigurations,
- (networkConfigurations = {}) => {
- return [
- {
- chainId: CHAIN_IDS.SEPOLIA,
- nickname: SEPOLIA_DISPLAY_NAME,
- rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.SEPOLIA],
- providerType: NETWORK_TYPES.SEPOLIA,
- ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.SEPOLIA],
- id: NETWORK_TYPES.SEPOLIA,
- removable: false,
- },
- {
- chainId: CHAIN_IDS.LINEA_SEPOLIA,
- nickname: LINEA_SEPOLIA_DISPLAY_NAME,
- rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_SEPOLIA],
- rpcPrefs: {
- imageUrl: LINEA_SEPOLIA_TOKEN_IMAGE_URL,
- },
- providerType: NETWORK_TYPES.LINEA_SEPOLIA,
- ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.LINEA_SEPOLIA],
- id: NETWORK_TYPES.LINEA_SEPOLIA,
- removable: false,
- },
- // Localhosts
- ...Object.values(networkConfigurations)
- .filter(({ chainId }) => chainId === CHAIN_IDS.LOCALHOST)
- .map((network) => ({ ...network, removable: true })),
- ];
- },
-);
-
-export const getAllNetworks = createDeepEqualSelector(
- getNonTestNetworks,
- getTestNetworks,
- (nonTestNetworks, testNetworks) => {
- return [
- // Mainnet and custom networks
- ...nonTestNetworks,
- // Test networks
- ...testNetworks,
- ];
- },
+export const getNetworkConfigurationsByChainId = createDeepEqualSelector(
+ (state) => state.metamask.networkConfigurationsByChainId,
+ /**
+ * @param networkConfigurationsByChainId
+ * @returns { import('@metamask/network-controller').NetworkState['networkConfigurationsByChainId']}
+ */
+ (networkConfigurationsByChainId) => networkConfigurationsByChainId,
);
export function getRequestingNetworkInfo(state, chainIds) {
@@ -767,12 +672,11 @@ export function getRequestingNetworkInfo(state, chainIds) {
// Ensure chainIds is flattened if it contains nested arrays
const flattenedChainIds = processedChainIds.flat();
- // Get the non-test networks from the state
- const nonTestNetworks = getNonTestNetworks(state);
-
// Filter the non-test networks to include only those with chainId in flattenedChainIds
- return nonTestNetworks.filter((network) =>
- flattenedChainIds.includes(network.chainId),
+ return Object.values(getNetworkConfigurationsByChainId(state)).filter(
+ (network) =>
+ !TEST_CHAINS.includes(network.chainId) &&
+ flattenedChainIds.includes(network.chainId),
);
}
@@ -784,15 +688,20 @@ export function getRequestingNetworkInfo(state, chainIds) {
*/
export function getSwitchedNetworkDetails(state) {
const { switchedNetworkDetails } = state.metamask;
- const allNetworks = getAllNetworks(state);
+ const networkConfigurations = getNetworkConfigurationsByChainId(state);
if (switchedNetworkDetails) {
- const switchedNetwork = allNetworks.find(
- ({ id }) => switchedNetworkDetails.networkClientId === id,
+ const switchedNetwork = Object.values(networkConfigurations).find(
+ (network) =>
+ network.rpcEndpoints.some(
+ (rpcEndpoint) =>
+ rpcEndpoint.networkClientId ===
+ switchedNetworkDetails.networkClientId,
+ ),
);
return {
- nickname: switchedNetwork?.nickname,
- imageUrl: switchedNetwork?.rpcPrefs?.imageUrl,
+ nickname: switchedNetwork?.name,
+ imageUrl: CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[switchedNetwork?.chainId],
origin: switchedNetworkDetails?.origin,
};
}
@@ -800,20 +709,6 @@ export function getSwitchedNetworkDetails(state) {
return null;
}
-export function getNetworkDetails(state, chainId) {
- const allNetworks = getAllNetworks(state);
- if (chainId) {
- const network = allNetworks.find(({ chainId: id }) => chainId === id);
- return {
- nickname: network?.nickname,
- imageUrl: network?.rpcPrefs?.imageUrl,
- origin: network?.origin,
- };
- }
-
- return null;
-}
-
export function getAppIsLoading(state) {
return state.appState.isLoading;
}
@@ -1835,6 +1730,10 @@ export function getSortedAnnouncementsToShow(state) {
return announcementsSortedByDate;
}
+/**
+ * @param state
+ * @returns {{networkId: string}[]}
+ */
export function getOrderedNetworksList(state) {
return state.metamask.orderedNetworkList;
}
@@ -1881,13 +1780,14 @@ export function getNumberOfAllUnapprovedTransactionsAndMessages(state) {
}
export const getCurrentNetwork = createDeepEqualSelector(
- getAllNetworks,
- getProviderConfig,
+ getNetworkConfigurationsByChainId,
+ getCurrentChainId,
+
/**
* Get the current network configuration.
*
- * @param {Record[]} allNetworks - All network configurations.
- * @param {Record} providerConfig - The configuration for the current network's provider.
+ * @param networkConfigurationsByChainId
+ * @param currentChainId
* @returns {{
* chainId: `0x${string}`;
* id?: string;
@@ -1898,40 +1798,53 @@ export const getCurrentNetwork = createDeepEqualSelector(
* ticker: string;
* }} networkConfiguration - Configuration for the current network.
*/
- (allNetworks, providerConfig) => {
- const filter =
- providerConfig.type === 'rpc'
- ? (network) => network.id === providerConfig.id
- : (network) => network.id === providerConfig.type;
- return (
- allNetworks.find(filter) ?? {
- chainId: providerConfig.chainId,
- nickname: providerConfig.nickname,
- rpcPrefs: providerConfig.rpcPrefs,
- rpcUrl: providerConfig.rpcUrl,
- ticker: providerConfig.ticker,
- }
- );
+ (networkConfigurationsByChainId, currentChainId) => {
+ const currentNetwork = networkConfigurationsByChainId[currentChainId];
+
+ const rpcEndpoint =
+ currentNetwork.rpcEndpoints[currentNetwork.defaultRpcEndpointIndex];
+
+ const blockExplorerUrl =
+ currentNetwork.blockExplorerUrls?.[
+ currentNetwork.defaultBlockExplorerUrlIndex
+ ];
+
+ return {
+ chainId: currentNetwork.chainId,
+ id: rpcEndpoint.networkClientId,
+ nickname: currentNetwork.name,
+ rpcUrl: rpcEndpoint.url,
+ ticker: currentNetwork.nativeCurrency,
+ blockExplorerUrl,
+ rpcPrefs: {
+ blockExplorerUrl,
+ imageUrl: CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[currentNetwork.chainId],
+ },
+ ...(rpcEndpoint.type === RpcEndpointType.Infura && {
+ providerType: rpcEndpoint.networkClientId,
+ }),
+ };
},
);
export const getConnectedSitesListWithNetworkInfo = createDeepEqualSelector(
getConnectedSitesList,
getAllDomains,
- getAllNetworks,
+ getNetworkConfigurationsByChainId,
getCurrentNetwork,
(sitesList, domains, networks, currentNetwork) => {
Object.keys(sitesList).forEach((siteKey) => {
- const connectedNetwork = networks.find(
- (network) => network.id === domains[siteKey],
+ const connectedNetwork = Object.values(networks).find((network) =>
+ network.rpcEndpoints.some(
+ (rpcEndpoint) => rpcEndpoint.networkClientId === domains[siteKey],
+ ),
);
+
// For the testnets, if we do not have an image, we will have a fallback string
sitesList[siteKey].networkIconUrl =
- connectedNetwork?.rpcPrefs?.imageUrl ||
- currentNetwork?.rpcPrefs?.imageUrl ||
- '';
+ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[connectedNetwork?.chainId] || '';
sitesList[siteKey].networkName =
- connectedNetwork?.nickname || currentNetwork?.nickname || '';
+ connectedNetwork?.name || currentNetwork?.nickname || '';
});
return sitesList;
},
@@ -2143,27 +2056,37 @@ export function getNewNetworkAdded(state) {
/**
* @param state
- * @returns {{ networkConfigurationId: string; nickname: string; editCompleted: boolean} | undefined}
+ * @returns {{ chainId: import('@metamask/utils').Hex; nickname: string; editCompleted: boolean} | undefined}
*/
export function getEditedNetwork(state) {
return state.appState.editedNetwork;
}
-export function getNetworksTabSelectedNetworkConfigurationId(state) {
- return state.appState.selectedNetworkConfigurationId;
+export function getIsAddingNewNetwork(state) {
+ return state.appState.isAddingNewNetwork;
+}
+
+export function getIsMultiRpcOnboarding(state) {
+ return state.appState.isMultiRpcOnboarding;
}
-export function getNetworkConfigurations(state) {
- return state.metamask.networkConfigurations;
+export function getNetworksTabSelectedNetworkConfigurationId(state) {
+ return state.appState.selectedNetworkConfigurationId;
}
export const getAllEnabledNetworks = createDeepEqualSelector(
- getNonTestNetworks,
- getAllNetworks,
+ getNetworkConfigurationsByChainId,
getShowTestNetworks,
- (nonTestNetworks, allNetworks, showTestnetNetworks) => {
- return showTestnetNetworks ? allNetworks : nonTestNetworks;
- },
+ (networkConfigurationsByChainId, showTestNetworks) =>
+ Object.entries(networkConfigurationsByChainId).reduce(
+ (acc, [chainId, network]) => {
+ if (showTestNetworks || !TEST_CHAINS.includes(chainId)) {
+ acc[chainId] = network;
+ }
+ return acc;
+ },
+ {},
+ ),
);
/**
diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js
index a46fdcaedb0b..342e7d7187c8 100644
--- a/ui/selectors/selectors.test.js
+++ b/ui/selectors/selectors.test.js
@@ -4,16 +4,12 @@ import { EthAccountType, EthMethod } from '@metamask/keyring-api';
import { TransactionStatus } from '@metamask/transaction-controller';
import mockState from '../../test/data/mock-state.json';
import { KeyringType } from '../../shared/constants/keyring';
-import {
- CHAIN_IDS,
- LOCALHOST_DISPLAY_NAME,
- NETWORK_TYPES,
- OPTIMISM_DISPLAY_NAME,
-} from '../../shared/constants/network';
+import { CHAIN_IDS, NETWORK_TYPES } from '../../shared/constants/network';
import { SURVEY_DATE, SURVEY_GMT } from '../helpers/constants/survey';
import { PRIVACY_POLICY_DATE } from '../helpers/constants/privacy-policy';
import { createMockInternalAccount } from '../../test/jest/mocks';
import { ETH_EOA_METHODS } from '../../shared/constants/eth-methods';
+import { getProviderConfig } from '../ducks/metamask/metamask';
import { mockNetworkState } from '../../test/stub/networks';
import * as selectors from './selectors';
@@ -185,7 +181,10 @@ describe('Selectors', () => {
it('returns no details when switchedNetworkDetails is empty', () => {
expect(
selectors.getSwitchedNetworkDetails({
- metamask: { switchedNetworkDetails: undefined },
+ metamask: {
+ ...mockState.metamask,
+ switchedNetworkDetails: undefined,
+ },
}),
).toStrictEqual(null);
});
@@ -193,47 +192,38 @@ describe('Selectors', () => {
it('returns network information when valid switchedNetworkDetails are present', () => {
const origin = 'portfolio.metamask.io';
- expect(
- selectors.getSwitchedNetworkDetails({
- ...mockState,
- metamask: {
- ...mockState.metamask,
- switchedNetworkDetails: {
- networkClientId:
- mockState.metamask.networkConfigurations
- .testNetworkConfigurationId.id,
- origin,
+ const state = {
+ ...mockState,
+ metamask: {
+ ...mockState.metamask,
+ selectedNetworkClientId: 'testNetworkConfigurationId',
+
+ networkConfigurationsByChainId: {
+ '0x1': {
+ chainId: '0x1',
+ name: 'Custom Mainnet RPC',
+ nativeCurrency: 'ETH',
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: 'https://testrpc.com',
+ networkClientId: 'testNetworkConfigurationId',
+ type: 'custom',
+ },
+ ],
},
},
- }),
- ).toStrictEqual({
- imageUrl: './images/eth_logo.svg',
- nickname:
- mockState.metamask.networkConfigurations.testNetworkConfigurationId
- .nickname,
- origin,
- });
- });
- });
-
- describe('#getNetworkDetails', () => {
- it('returns no details when chainId is undefined', () => {
- expect(selectors.getNetworkDetails(mockState, undefined)).toStrictEqual(
- null,
- );
- });
+ switchedNetworkDetails: {
+ networkClientId: 'testNetworkConfigurationId',
+ origin,
+ },
+ },
+ };
- it('returns network information when valid chainId is present', () => {
- expect(
- selectors.getNetworkDetails(
- mockState,
- mockState.metamask.networkConfigurations.testNetworkConfigurationId
- .chainId,
- ),
- ).toStrictEqual({
+ expect(selectors.getSwitchedNetworkDetails(state)).toStrictEqual({
imageUrl: './images/eth_logo.svg',
- nickname: 'Ethereum Mainnet',
- origin: undefined,
+ nickname: getProviderConfig(state).nickname,
+ origin,
});
});
});
@@ -298,6 +288,12 @@ describe('Selectors', () => {
expect(
selectors.getNumberOfAllUnapprovedTransactionsAndMessages({
metamask: {
+ networkConfigurationsByChainId: {
+ [CHAIN_IDS.MAINNET]: {
+ chainId: CHAIN_IDS.MAINNET,
+ rpcEndpoints: [{}],
+ },
+ },
transactions: [
{
id: 0,
@@ -347,12 +343,23 @@ describe('Selectors', () => {
domains: {
[SELECTED_ORIGIN]: SELECTED_ORIGIN_NETWORK_ID,
},
+ networkConfigurationsByChainId: {
+ [CHAIN_IDS.MAINNET]: {
+ chainId: CHAIN_IDS.MAINNET,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: 'https://testrpc.com',
+ networkClientId: mockState.metamask.selectedNetworkClientId,
+ },
+ ],
+ },
+ },
queuedRequestCount: 0,
transactions: [],
- selectedNetworkClientId:
- mockState.metamask.networkConfigurations.testNetworkConfigurationId
- .id,
- networkConfigurations: mockState.metamask.networkConfigurations,
+ selectedNetworkClientId: mockState.metamask.selectedNetworkClientId,
+ // networkConfigurations:
+ // mockState.metamask.networkConfigurationsByChainId,
},
};
@@ -367,7 +374,20 @@ describe('Selectors', () => {
...state,
metamask: {
...state.metamask,
- selectedNetworkClientId: NETWORK_TYPES.LINEA_SEPOLIA,
+ selectedNetworkClientId: 'linea-sepolia',
+ networkConfigurationsByChainId: {
+ [CHAIN_IDS.LINEA_SEPOLIA]: {
+ chainId: CHAIN_IDS.LINEA_SEPOLIA,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: 'https://testrpc.com',
+ networkClientId: 'linea-sepolia',
+ type: 'custom',
+ },
+ ],
+ },
+ },
},
});
expect(networkToSwitchTo).toBe(null);
@@ -379,6 +399,19 @@ describe('Selectors', () => {
metamask: {
...state.metamask,
selectedNetworkClientId: NETWORK_TYPES.LINEA_SEPOLIA,
+ networkConfigurationsByChainId: {
+ [CHAIN_IDS.LINEA_SEPOLIA]: {
+ chainId: CHAIN_IDS.LINEA_SEPOLIA,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: 'https://testrpc.com',
+ networkClientId: 'linea-sepolia',
+ type: 'custom',
+ },
+ ],
+ },
+ },
transactions: [
{
id: 0,
@@ -646,129 +679,42 @@ describe('Selectors', () => {
});
});
- describe('#getNetworkConfigurations', () => {
- it('returns undefined if state.metamask.networkConfigurations is undefined', () => {
- expect(
- selectors.getNetworkConfigurations({
- metamask: {},
- }),
- ).toBeUndefined();
- });
-
- it('returns networkConfigurations', () => {
- const networkConfigurations = {
- testNetworkConfigurationId1: {
- rpcUrl: 'https://mock-rpc-url-1',
+ describe('#getNetworkConfigurationsByChainId', () => {
+ it('returns networkConfigurationsByChainId', () => {
+ const networkConfigurationsByChainId = {
+ '0xtest': {
chainId: '0xtest',
- ticker: 'TEST',
- id: 'testNetworkConfigurationId1',
+ nativeCurrency: 'TEST',
+ defaultRpcEndpointUrl: 'https://mock-rpc-url-1',
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'testNetworkConfigurationId1',
+ url: 'https://mock-rpc-url-1',
+ },
+ ],
},
- testNetworkConfigurationId2: {
- rpcUrl: 'https://mock-rpc-url-2',
+ '0x1337': {
chainId: '0x1337',
- ticker: 'RPC',
- id: 'testNetworkConfigurationId2',
+ nativeCurrency: 'RPC',
+ defaultRpcEndpointUrl: 'https://mock-rpc-url-2',
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'testNetworkConfigurationId2',
+ url: 'https://mock-rpc-url-2',
+ },
+ ],
},
};
+
expect(
- selectors.getNetworkConfigurations({
+ selectors.getNetworkConfigurationsByChainId({
metamask: {
- networkConfigurations,
+ networkConfigurationsByChainId,
},
}),
- ).toStrictEqual(networkConfigurations);
- });
- });
-
- describe('#getNonTestNetworks', () => {
- it('returns nonTestNetworks', () => {
- const nonTestNetworks = selectors.getNonTestNetworks({
- metamask: {},
- });
-
- // Assert that the `nonTestNetworks` array returned by the selector matches a specific structure.
- expect(nonTestNetworks).toStrictEqual(
- expect.arrayContaining([
- expect.objectContaining({
- chainId: expect.any(String),
- nickname: expect.any(String),
- rpcUrl: expect.any(String),
- rpcPrefs: expect.objectContaining({
- imageUrl: expect.any(String),
- }),
- providerType: expect.any(String),
- ticker: expect.any(String),
- id: expect.any(String),
- removable: expect.any(Boolean),
- }),
- ]),
- );
-
- // Verify that each network object has a 'ticker' property that is not undefined
- nonTestNetworks.forEach((network) => {
- expect(network.ticker).toBeDefined();
- });
- });
- });
- describe('#getAllNetworks', () => {
- it('sorts Localhost to the bottom of the test lists', () => {
- const networks = selectors.getAllNetworks({
- metamask: {
- preferences: {
- showTestNetworks: true,
- },
- ...mockNetworkState({
- chainId: CHAIN_IDS.LOCALHOST,
- nickname: LOCALHOST_DISPLAY_NAME,
- }),
- },
- });
- const lastItem = networks.pop();
- expect(lastItem.nickname.toLowerCase()).toContain('localhost');
- });
-
- it('properly assigns a network as removable', () => {
- const networks = selectors.getAllNetworks({
- metamask: {
- preferences: {
- showTestNetworks: true,
- },
- ...mockNetworkState({
- chainId: CHAIN_IDS.LOCALHOST,
- nickname: LOCALHOST_DISPLAY_NAME,
- id: 'some-config-name',
- }),
- },
- });
-
- const mainnet = networks.find(
- (network) => network.id === NETWORK_TYPES.MAINNET,
- );
- expect(mainnet.removable).toBe(false);
-
- const customNetwork = networks.find(
- (network) => network.id === 'some-config-name',
- );
- expect(customNetwork.removable).toBe(true);
- });
-
- it('properly proposes a known network image when not provided by adding function', () => {
- const networks = selectors.getAllNetworks({
- metamask: {
- preferences: {
- showTestNetworks: true,
- },
- ...mockNetworkState({
- chainId: CHAIN_IDS.OPTIMISM,
- nickname: OPTIMISM_DISPLAY_NAME,
- }),
- },
- });
-
- const optimismConfig = networks.find(
- ({ chainId }) => chainId === CHAIN_IDS.OPTIMISM,
- );
- expect(optimismConfig.rpcPrefs.imageUrl).toBe('./images/optimism.svg');
+ ).toStrictEqual(networkConfigurationsByChainId);
});
});
@@ -779,18 +725,23 @@ describe('Selectors', () => {
metamask: {
...mockState.metamask,
selectedNetworkClientId: NETWORK_TYPES.SEPOLIA,
+ blockExplorerUrls: [],
+ ...mockNetworkState({ chainId: CHAIN_IDS.SEPOLIA, id: 'sepolia' }),
},
};
const currentNetwork = selectors.getCurrentNetwork(modifiedMockState);
expect(currentNetwork).toMatchInlineSnapshot(`
{
+ "blockExplorerUrl": "https://localhost/blockExplorer/0xaa36a7",
"chainId": "0xaa36a7",
"id": "sepolia",
"nickname": "Sepolia",
- "providerType": "sepolia",
- "removable": false,
- "rpcUrl": "https://sepolia.infura.io/v3/undefined",
+ "rpcPrefs": {
+ "blockExplorerUrl": "https://localhost/blockExplorer/0xaa36a7",
+ "imageUrl": undefined,
+ },
+ "rpcUrl": "https://localhost/rpc/0xaa36a7",
"ticker": "SepoliaETH",
}
`);
@@ -820,8 +771,8 @@ describe('Selectors', () => {
"chainId": "0x9999",
"id": "mock-network-config-id",
"nickname": undefined,
- "removable": true,
"rpcPrefs": {
+ "blockExplorerUrl": undefined,
"imageUrl": undefined,
},
"rpcUrl": "https://mock-rpc-endpoint.test",
@@ -835,9 +786,22 @@ describe('Selectors', () => {
...mockState,
metamask: {
...mockState.metamask,
- selectedNetworkClientId:
- mockState.metamask.networkConfigurations.testNetworkConfigurationId
- .id,
+ selectedNetworkClientId: 'testNetworkConfigurationId',
+ networkConfigurationsByChainId: {
+ '0x1': {
+ chainId: '0x1',
+ name: 'Custom Mainnet RPC',
+ nativeCurrency: 'ETH',
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: 'https://testrpc.com',
+ networkClientId: 'testNetworkConfigurationId',
+ type: 'custom',
+ },
+ ],
+ },
+ },
},
};
@@ -860,15 +824,37 @@ describe('Selectors', () => {
});
describe('#getAllEnabledNetworks', () => {
+ const networkConfigurationsByChainId = {
+ [CHAIN_IDS.MAINNET]: {
+ chainId: CHAIN_IDS.MAINNET,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [{ networkClientId: 'mainnet' }],
+ },
+ [CHAIN_IDS.LINEA_MAINNET]: {
+ chainId: CHAIN_IDS.LINEA_MAINNET,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [{ networkClientId: 'linea-mainnet' }],
+ },
+ [CHAIN_IDS.SEPOLIA]: {
+ chainId: CHAIN_IDS.SEPOLIA,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [{ networkClientId: 'sepolia' }],
+ },
+ [CHAIN_IDS.LINEA_SEPOLIA]: {
+ chainId: CHAIN_IDS.LINEA_SEPOLIA,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [{ networkClientId: 'linea-sepolia' }],
+ },
+ };
+
it('returns only Mainnet and Linea with showTestNetworks off', () => {
const networks = selectors.getAllEnabledNetworks({
metamask: {
- preferences: {
- showTestNetworks: false,
- },
+ preferences: { showTestNetworks: false },
+ networkConfigurationsByChainId,
},
});
- expect(networks).toHaveLength(2);
+ expect(Object.values(networks)).toHaveLength(2);
});
it('returns networks with showTestNetworks on', () => {
@@ -877,9 +863,11 @@ describe('Selectors', () => {
preferences: {
showTestNetworks: true,
},
+ networkConfigurationsByChainId,
},
});
- expect(networks.length).toBeGreaterThan(2);
+
+ expect(Object.values(networks).length).toBeGreaterThan(2);
});
});
@@ -1015,6 +1003,10 @@ describe('Selectors', () => {
...mockState,
metamask: {
...mockState.metamask,
+ ...mockNetworkState({
+ chainId: CHAIN_IDS.GOERLI,
+ metadata: { EIPS: { 1559: true } },
+ }),
keyrings: [
{
type: KeyringType.ledger,
@@ -1910,29 +1902,35 @@ describe('#getConnectedSitesListWithNetworkInfo', () => {
const networks = [
{
id: 'network1',
- rpcPrefs: {
- imageUrl: 'network1-icon.png',
- },
- nickname: 'Network 1',
+ chainId: '0x1',
+ name: 'Network 1',
+ rpcEndpoints: [
+ {
+ networkClientId: 'network1',
+ },
+ ],
},
{
id: 'network2',
- rpcPrefs: {
- imageUrl: 'network2-icon.png',
- },
- nickname: 'Network 2',
+ chainId: '0x38',
+ name: 'Network 2',
+ rpcEndpoints: [
+ {
+ networkClientId: 'network2',
+ },
+ ],
},
];
const expectedSitesList = {
site1: {
id: 'site1',
- networkIconUrl: 'network1-icon.png',
+ networkIconUrl: './images/eth_logo.svg',
networkName: 'Network 1',
},
site2: {
id: 'site2',
- networkIconUrl: 'network2-icon.png',
+ networkIconUrl: './images/bnb.svg',
networkName: 'Network 2',
},
};
diff --git a/ui/store/actions.test.js b/ui/store/actions.test.js
index 213fa3fcf6c8..1604f5361eda 100644
--- a/ui/store/actions.test.js
+++ b/ui/store/actions.test.js
@@ -23,6 +23,12 @@ const middleware = [thunk];
const defaultState = {
metamask: {
currentLocale: 'test',
+ networkConfigurationsByChainId: {
+ [CHAIN_IDS.MAINNET]: {
+ chainId: CHAIN_IDS.MAINNET,
+ rpcEndpoints: [{}],
+ },
+ },
accounts: {
'0xFirstAddress': {
balance: '0x0',
@@ -1015,63 +1021,87 @@ describe('Actions', () => {
});
});
- describe('#upsertNetworkConfiguration', () => {
+ describe('updateNetwork', () => {
afterEach(() => {
sinon.restore();
});
- it('calls upsertNetworkConfiguration in the background with the correct arguments', async () => {
+ it('calls updateNetwork in the background with the correct arguments', async () => {
const store = mockStore();
- const upsertNetworkConfigurationStub = sinon
- .stub()
- .callsFake((_, cb) => cb());
+ const updateNetworkStub = sinon.stub().callsFake((_, cb) => cb());
background.getApi.returns({
- upsertNetworkConfiguration: upsertNetworkConfigurationStub,
+ updateNetwork: updateNetworkStub,
});
setBackgroundConnection(background.getApi());
const networkConfiguration = {
- id: 'networkConfigurationId',
rpcUrl: 'newRpc',
chainId: '0x',
- ticker: 'ETH',
- nickname: 'nickname',
- rpcPrefs: { blockExplorerUrl: 'etherscan.io' },
+ nativeCurrency: 'ETH',
+ name: 'nickname',
+ rpcEndpoints: [{ blockExplorerUrl: 'etherscan.io' }],
};
await store.dispatch(
- actions.upsertNetworkConfiguration(networkConfiguration, {
+ actions.updateNetwork(networkConfiguration, {
source: MetaMetricsNetworkEventSource.CustomNetworkForm,
}),
);
expect(
- upsertNetworkConfigurationStub.calledOnceWith(networkConfiguration, {
- referrer: ORIGIN_METAMASK,
- source: MetaMetricsNetworkEventSource.CustomNetworkForm,
- setActive: undefined,
- }),
+ updateNetworkStub.calledOnceWith(
+ '0x',
+ {
+ rpcUrl: 'newRpc',
+ chainId: '0x',
+ nativeCurrency: 'ETH',
+ name: 'nickname',
+ rpcEndpoints: [{ blockExplorerUrl: 'etherscan.io' }],
+ },
+ { source: MetaMetricsNetworkEventSource.CustomNetworkForm },
+ ),
).toBe(true);
});
- it('throws when no options object is passed as a second argument', async () => {
+ it('updateNetwork has empty object for default options', async () => {
const store = mockStore();
- await expect(() =>
- store.dispatch(
- actions.upsertNetworkConfiguration({
+
+ const updateNetworkStub = sinon.stub().callsFake((_, cb) => cb());
+
+ background.getApi.returns({
+ updateNetwork: updateNetworkStub,
+ });
+ setBackgroundConnection(background.getApi());
+
+ const networkConfiguration = {
+ id: 'networkConfigurationId',
+ rpcUrl: 'newRpc',
+ chainId: '0x',
+ ticker: 'ETH',
+ nickname: 'nickname',
+ rpcPrefs: { blockExplorerUrl: 'etherscan.io' },
+ };
+
+ await store.dispatch(
+ actions.updateNetwork(networkConfiguration, undefined),
+ );
+
+ expect(
+ updateNetworkStub.calledOnceWith(
+ '0x',
+ {
id: 'networkConfigurationId',
rpcUrl: 'newRpc',
chainId: '0x',
ticker: 'ETH',
nickname: 'nickname',
rpcPrefs: { blockExplorerUrl: 'etherscan.io' },
- }),
+ },
+ {},
),
- ).toThrow(
- "Cannot destructure property 'setActive' of 'undefined' as it is undefined.",
- );
+ ).toBe(true);
});
});
@@ -1116,31 +1146,25 @@ describe('Actions', () => {
});
});
- describe('#removeNetworkConfiguration', () => {
+ describe('removeNetwork', () => {
afterEach(() => {
sinon.restore();
});
- it('calls removeNetworkConfiguration in the background with the correct arguments', async () => {
+ it('calls removeNetwork in the background with the correct arguments', async () => {
const store = mockStore();
- const removeNetworkConfigurationStub = sinon
- .stub()
- .callsFake((_, cb) => cb());
+ const removeNetworkStub = sinon.stub().callsFake((_, cb) => cb());
background.getApi.returns({
- removeNetworkConfiguration: removeNetworkConfigurationStub,
+ removeNetwork: removeNetworkStub,
});
setBackgroundConnection(background.getApi());
- await store.dispatch(
- actions.removeNetworkConfiguration('testNetworkConfigurationId'),
- );
+ await store.dispatch(actions.removeNetwork('testNetworkConfigurationId'));
expect(
- removeNetworkConfigurationStub.calledOnceWith(
- 'testNetworkConfigurationId',
- ),
+ removeNetworkStub.calledOnceWith('testNetworkConfigurationId'),
).toBe(true);
});
});
diff --git a/ui/store/actions.ts b/ui/store/actions.ts
index c3d234100a1a..a5363411a0e5 100644
--- a/ui/store/actions.ts
+++ b/ui/store/actions.ts
@@ -32,6 +32,7 @@ import {
TransactionType,
} from '@metamask/transaction-controller';
import {
+ AddNetworkFields,
NetworkClientId,
NetworkConfiguration,
} from '@metamask/network-controller';
@@ -105,8 +106,6 @@ import {
} from '../../shared/modules/i18n';
import { decimalToHex } from '../../shared/modules/conversion.utils';
import { TxGasFees, PriorityLevels } from '../../shared/constants/gas';
-import { RPCDefinition } from '../../shared/constants/network';
-import { EtherDenomination } from '../../shared/constants/common';
import {
isErrorWithMessage,
logErrorWithMessage,
@@ -2336,59 +2335,40 @@ export function createRetryTransaction(
};
}
-//
-// config
-//
+export function addNetwork(
+ networkConfiguration: AddNetworkFields | UpdateNetworkFields,
+): ThunkAction, MetaMaskReduxState, unknown, AnyAction> {
+ return async (dispatch: MetaMaskReduxDispatch) => {
+ log.debug(`background.addNetwork`, networkConfiguration);
+ try {
+ return await submitRequestToBackground('addNetwork', [
+ networkConfiguration,
+ ]);
+ } catch (error) {
+ logErrorWithMessage(error);
+ dispatch(displayWarning('Had a problem adding networks!'));
+ }
+ return undefined;
+ };
+}
-export function upsertNetworkConfiguration(
- {
- id,
- rpcUrl,
- chainId,
- nickname,
- rpcPrefs,
- ticker = EtherDenomination.ETH,
- }: {
- id?: string;
- rpcUrl: string;
- chainId: string;
- nickname: string;
- rpcPrefs: RPCDefinition['rpcPrefs'];
- ticker: string;
- },
- {
- setActive,
- source,
- }: {
- setActive: boolean;
- source: string;
- },
-): ThunkAction {
- return async (dispatch) => {
- log.debug(
- `background.upsertNetworkConfiguration: ${id} ${rpcUrl} ${chainId} ${ticker} ${nickname}`,
- );
- let networkConfigurationId;
+export function updateNetwork(
+ networkConfiguration: AddNetworkFields | UpdateNetworkFields,
+ options: { replacementSelectedRpcEndpointIndex?: number } = {},
+): ThunkAction, MetaMaskReduxState, unknown, AnyAction> {
+ return async (dispatch: MetaMaskReduxDispatch) => {
+ log.debug(`background.updateNetwork`, networkConfiguration);
try {
- networkConfigurationId = await submitRequestToBackground(
- 'upsertNetworkConfiguration',
- [
- {
- id,
- rpcUrl,
- chainId,
- ticker,
- nickname: nickname || rpcUrl,
- rpcPrefs,
- },
- { setActive, source, referrer: ORIGIN_METAMASK },
- ],
- );
+ return await submitRequestToBackground('updateNetwork', [
+ networkConfiguration.chainId,
+ networkConfiguration,
+ options,
+ ]);
} catch (error) {
- log.error(error);
- dispatch(displayWarning('Had a problem adding network!'));
+ logErrorWithMessage(error);
+ dispatch(displayWarning('Had a problem updading networks!'));
}
- return networkConfigurationId;
+ return undefined;
};
}
@@ -2435,28 +2415,15 @@ export function rollbackToPreviousProvider(): ThunkAction<
};
}
-export function removeNetworkConfiguration(
- networkConfigurationId: string,
+export function removeNetwork(
+ chainId: Hex,
): ThunkAction, MetaMaskReduxState, unknown, AnyAction> {
- return (dispatch) => {
- log.debug(
- `background.removeNetworkConfiguration: ${networkConfigurationId}`,
- );
- return new Promise((resolve, reject) => {
- callBackgroundMethod(
- 'removeNetworkConfiguration',
- [networkConfigurationId],
- (err) => {
- if (err) {
- logErrorWithMessage(err);
- dispatch(displayWarning('Had a problem removing network!'));
- reject(err);
- return;
- }
- resolve();
- },
- );
- });
+ return async () => {
+ try {
+ await submitRequestToBackground('removeNetwork', [chainId]);
+ } catch (error) {
+ logErrorWithMessage(error);
+ }
};
}
@@ -3877,13 +3844,13 @@ export function removePermissionsFor(
/**
* Updates the order of networks after drag and drop
*
- * @param orderedNetworkList
+ * @param chainIds - An array of hexadecimal chain IDs
*/
export function updateNetworksList(
- orderedNetworkList: [],
+ chainIds: Hex[],
): ThunkAction {
return async () => {
- await submitRequestToBackground('updateNetworksList', [orderedNetworkList]);
+ await submitRequestToBackground('updateNetworksList', [chainIds]);
};
}
@@ -4035,9 +4002,9 @@ export function setEditedNetwork(
payload:
| {
chainId: string;
- networkConfigurationId?: string;
- nickname: string;
+ nickname?: string;
editCompleted?: boolean;
+ newNetwork?: boolean;
}
| undefined = undefined,
): PayloadAction
@@ -118,7 +118,7 @@ exports[`();
+
+ const { isNFT } = useIsNFT(transactionMeta);
+
const decodedResponse = useDecodedTransactionData();
const { value, pending } = decodedResponse;
@@ -37,7 +45,9 @@ const Spender = () => {
<>
Date: Fri, 20 Sep 2024 19:21:48 +0800
Subject: [PATCH 5/7] fix: Redesign Signature Message date values (#27249)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## **Description**
Fix date values:
- Formerly, conversations were converting values as if they were
milliseconds. However, these values come from Solidity where these
timestamps are unix timestamps in seconds.
- Support -1 (no expiration) value
- Display "expiry" as a date instead of a unix timestamp
This PR fixes the conversion.
[](https://codespaces.new/MetaMask/metamask-extension/pull/27249?quickstart=1)
## **Related issues**
Fixes: https://github.com/MetaMask/metamask-extension/issues/27137
## **Manual testing steps**
1. Go to test-dapp
2. Request Permit or another TypedSign request
3. Observe deadlines and dates
## **Screenshots/Recordings**
### **Before**
#### Test-dapp Permit
#### Deadline: -1
### **After**
#### Test-dapp Permit
#### Deadline: -1
## **Pre-merge author checklist**
- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
app/_locales/en/messages.json | 3 +
test/data/confirmations/typed_sign.ts | 19 +
.../confirmations/signatures/permit.spec.ts | 2 +-
.../app/confirm/info/row/date.stories.tsx | 4 +-
.../app/confirm/info/row/date.test.tsx | 4 +-
ui/components/app/confirm/info/row/date.tsx | 11 +-
ui/helpers/utils/util.js | 14 +-
ui/helpers/utils/util.test.js | 8 +-
.../personal-sign/siwe-sign/siwe-sign.tsx | 4 +-
.../__snapshots__/typed-sign.test.tsx.snap | 601 +++++++++++++++++-
.../info/typed-sign/typed-sign.test.tsx | 18 +
.../row/__snapshots__/dataTree.test.tsx.snap | 103 +++
.../components/confirm/row/dataTree.test.tsx | 13 +
.../components/confirm/row/dataTree.tsx | 23 +-
.../__snapshots__/confirm.test.tsx.snap | 12 +-
15 files changed, 812 insertions(+), 27 deletions(-)
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 5f7ae9a42121..119719b97090 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -3282,6 +3282,9 @@
"nonceFieldHeading": {
"message": "Custom nonce"
},
+ "none": {
+ "message": "None"
+ },
"notBusy": {
"message": "Not busy"
},
diff --git a/test/data/confirmations/typed_sign.ts b/test/data/confirmations/typed_sign.ts
index 8766fac9184c..f02705a2540b 100644
--- a/test/data/confirmations/typed_sign.ts
+++ b/test/data/confirmations/typed_sign.ts
@@ -183,6 +183,25 @@ export const permitSignatureMsg = {
},
} as SignatureRequestType;
+export const permitSignatureMsgWithNoDeadline = {
+ id: '0b1787a0-1c44-11ef-b70d-e7064bd7b659',
+ securityAlertResponse: {
+ reason: 'loading',
+ result_type: 'validation_in_progress',
+ securityAlertId: 'ab21395f-2190-472f-8cfa-3d224e7529d8',
+ },
+ status: 'unapproved',
+ time: 1716826404122,
+ type: 'eth_signTypedData',
+ msgParams: {
+ data: '{"types":{"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}],"Permit":[{"name":"owner","type":"address"},{"name":"spender","type":"address"},{"name":"value","type":"uint256"},{"name":"nonce","type":"uint256"},{"name":"deadline","type":"uint256"}]},"primaryType":"Permit","domain":{"name":"MyToken","version":"1","verifyingContract":"0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC","chainId":1},"message":{"owner":"0x935e73edb9ff52e23bac7f7e043a1ecd06d05477","spender":"0x5B38Da6a701c568545dCfcB03FcB875f56beddC4","value":3000,"nonce":0,"deadline":-1}}',
+ from: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+ version: 'V4',
+ signatureMethod: 'eth_signTypedData_v4',
+ origin: 'https://metamask.github.io',
+ },
+} as SignatureRequestType;
+
export const permitBatchSignatureMsg = {
id: '0b1787a0-1c44-11ef-b70d-e7064bd7b659',
securityAlertResponse: {
diff --git a/test/e2e/tests/confirmations/signatures/permit.spec.ts b/test/e2e/tests/confirmations/signatures/permit.spec.ts
index f6d2a6866adb..8455a9fa8254 100644
--- a/test/e2e/tests/confirmations/signatures/permit.spec.ts
+++ b/test/e2e/tests/confirmations/signatures/permit.spec.ts
@@ -125,7 +125,7 @@ async function assertInfoValues(driver: Driver) {
});
const value = driver.findElement({ text: '3,000' });
const nonce = driver.findElement({ text: '0' });
- const deadline = driver.findElement({ text: '02 August 1971, 16:53' });
+ const deadline = driver.findElement({ text: '09 June 3554, 16:53' });
assert.ok(await origin, 'origin');
assert.ok(await contractPetName, 'contractPetName');
diff --git a/ui/components/app/confirm/info/row/date.stories.tsx b/ui/components/app/confirm/info/row/date.stories.tsx
index 971ba7624f3e..e0e6a9a07dec 100644
--- a/ui/components/app/confirm/info/row/date.stories.tsx
+++ b/ui/components/app/confirm/info/row/date.stories.tsx
@@ -18,9 +18,9 @@ const ConfirmInfoRowDateStory = {
},
};
-export const DefaultStory = ({ date }) => (
gap={2}
>
- {formatUTCDate(date)}
+ {formatUTCDateFromUnixTimestamp(unixTimestamp)}
);
diff --git a/ui/helpers/utils/util.js b/ui/helpers/utils/util.js
index 051dec05d1f9..2b021e89c399 100644
--- a/ui/helpers/utils/util.js
+++ b/ui/helpers/utils/util.js
@@ -39,13 +39,17 @@ export function formatDate(date, format = "M/d/y 'at' T") {
return DateTime.fromMillis(date).toFormat(format);
}
-export const formatUTCDate = (dateInMillis) => {
- if (!dateInMillis) {
- return dateInMillis;
+/**
+ * @param {number} unixTimestamp - timestamp as seconds since unix epoch
+ * @returns {string} formatted date string e.g. "14 July 2034, 22:22"
+ */
+export const formatUTCDateFromUnixTimestamp = (unixTimestamp) => {
+ if (!unixTimestamp) {
+ return unixTimestamp;
}
- return DateTime.fromMillis(dateInMillis)
- .setZone('utc')
+ return DateTime.fromSeconds(unixTimestamp)
+ .toUTC()
.toFormat('dd LLLL yyyy, HH:mm');
};
diff --git a/ui/helpers/utils/util.test.js b/ui/helpers/utils/util.test.js
index e9485a262197..e10c70630dba 100644
--- a/ui/helpers/utils/util.test.js
+++ b/ui/helpers/utils/util.test.js
@@ -1044,15 +1044,15 @@ describe('util', () => {
});
});
- describe('formatUTCDate', () => {
+ describe('formatUTCDateFromUnixTimestamp', () => {
it('formats passed date string', () => {
- expect(util.formatUTCDate(1633019124000)).toStrictEqual(
- '30 September 2021, 16:25',
+ expect(util.formatUTCDateFromUnixTimestamp(2036528542)).toStrictEqual(
+ '14 July 2034, 22:22',
);
});
it('returns empty string if empty string is passed', () => {
- expect(util.formatUTCDate('')).toStrictEqual('');
+ expect(util.formatUTCDateFromUnixTimestamp('')).toStrictEqual('');
});
});
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx
index c5518a4fbe6f..404390a03754 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx
@@ -63,7 +63,9 @@ const SIWESignInfo: React.FC = () => {
{requestId && (
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
index 7b20ba3e9ddc..2f72ee8069de 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
@@ -587,7 +587,606 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = `
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 02 August 1971, 16:53
+ 09 June 3554, 16:53
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`TypedSignInfo correctly renders permit sign type with no deadline 1`] = `
+
+
+
+
+
+ Estimated changes
+
+
+
+
+
+
+
+
+
+ You're giving the spender permission to spend this many tokens from your account.
+
+
+
+
+
+
+ Spending cap
+
+
+
+
+
+
+
+
+
+ 3,000
+
+
+
+
+
+
+
+
+ 0xCcCCc...ccccC
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Spender
+
+
+
+
+
+
+
+
+
+
+ 0x5B38D...eddC4
+
+
+
+
+
+
+
+
+ Request from
+
+
+
+
+
+
+
+
+
+ metamask.github.io
+
+
+
+
+
+
+ Interacting with
+
+
+
+
+
+
+
+
+
+
+ 0xCcCCc...ccccC
+
+
+
+
+
+
+
+
+
+ Message
+
+
+
+
+
+
+ Primary type:
+
+
+
+
+ Permit
+
+
+
+
+
+
+
+
+ Owner:
+
+
+
+
+
+
+
+
+
+
+ 0x935E7...05477
+
+
+
+
+
+
+
+ Spender:
+
+
+
+
+
+
+
+
+
+
+ 0x5B38D...eddC4
+
+
+
+
+
+
+
+ Value:
+
+
+
+
+
+
+ 3,000
+
+
+
+
+
+
+
+
+ Nonce:
+
+
+
+
+ 0
+
+
+
+
+
+
+ Deadline:
+
+
+
+
+ None
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
index ce6ed43c07c3..86826c5a60b0 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
@@ -12,6 +12,7 @@ import {
} from '../../../../../../../test/data/confirmations/helper';
import {
permitSignatureMsg,
+ permitSignatureMsgWithNoDeadline,
unapprovedTypedSignMsgV3,
} from '../../../../../../../test/data/confirmations/typed_sign';
import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
@@ -109,4 +110,21 @@ describe('TypedSignInfo', () => {
);
expect(container).toMatchSnapshot();
});
+
+ it('correctly renders permit sign type with no deadline', () => {
+ const state = getMockTypedSignConfirmStateForRequest(
+ permitSignatureMsgWithNoDeadline,
+ {
+ metamask: {
+ useTransactionSimulations: true,
+ },
+ },
+ );
+ const mockStore = configureMockStore([])(state);
+ const { container } = renderWithConfirmContextProvider(
+
+ Types:
+
+
+
+
+
+
+
+
+
+ PrimaryType:
+
+
+
+
+
+
+
+
+
+ Domain:
+
+
+
+
+
+
+
+
+
+ Message:
+
+
+
+
+ 3000
+
+
+
+
+
+`;
diff --git a/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx b/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx
index 699539d21a71..b427b6a8ee97 100644
--- a/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx
+++ b/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx
@@ -83,6 +83,19 @@ describe('DataTree', () => {
expect(container).toMatchSnapshot();
});
+ it('should match snapshot for permit signature type and deadline is -1 (None)', () => {
+ const mockPermitData = JSON.parse(
+ permitSignatureMsg.msgParams?.data as string,
+ );
+ mockPermitData.message.deadline = '-1';
+
+ const { container } = renderWithProvider(
+ = {
[Field.Deadline]: [...PRIMARY_TYPES_PERMIT],
[Field.EndTime]: [...PRIMARY_TYPES_ORDER],
[Field.Expiration]: [PrimaryType.PermitBatch, PrimaryType.PermitSingle],
+ [Field.Expiry]: [...PRIMARY_TYPES_PERMIT],
[Field.SigDeadline]: [...PRIMARY_TYPES_PERMIT],
[Field.StartTime]: [...PRIMARY_TYPES_ORDER],
[Field.ValidTo]: [...PRIMARY_TYPES_ORDER],
};
+/**
+ * Date values may include -1 to represent a null value
+ * e.g.
+ * {@see {@link https://eips.ethereum.org/EIPS/eip-2612}}
+ * "The deadline argument can be set to uint(-1) to create Permits that effectively never expire."
+ */
+const NONE_DATE_VALUE = -1;
+
const getTokenDecimalsOfDataTree = async (
dataTreeData: Record | TreeData[],
): Promise => {
@@ -144,6 +155,8 @@ const DataField = memo(
value: ValueType;
tokenDecimals: number;
}) => {
+ const t = useI18nContext();
+
if (typeof value === 'object' && value !== null) {
return (
@@ -1084,7 +1084,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 20 January 1970, 22:34
+ 05 August 2024, 19:54
@@ -1210,7 +1210,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 20 January 1970, 21:51
+ 06 July 2024, 20:22
@@ -1884,7 +1884,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 20 January 1970, 22:34
+ 05 August 2024, 19:52
@@ -2008,7 +2008,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 20 January 1970, 21:51
+ 06 July 2024, 20:22
@@ -3405,7 +3405,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 02 August 1971, 16:53
+ 09 June 3554, 16:53
From 27d8a54fef58d7f39727b6c4fdd242d711558b1d Mon Sep 17 00:00:00 2001
From: Maarten Zuidhoorn
Date: Fri, 20 Sep 2024 13:53:57 +0200
Subject: [PATCH 6/7] chore: Add preinstalled example Snap (#27271)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## **Description**
This adds a preinstalled example Snap to the Flask build for testing
purposes.
As requested by @legobeat I removed this change from #27057.
[](https://codespaces.new/MetaMask/metamask-extension/pull/27271?quickstart=1)
## **Pre-merge author checklist**
- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
app/scripts/snaps/preinstalled-snaps.ts | 2 ++
package.json | 1 +
yarn.lock | 10 ++++++++++
3 files changed, 13 insertions(+)
diff --git a/app/scripts/snaps/preinstalled-snaps.ts b/app/scripts/snaps/preinstalled-snaps.ts
index d38d4f1fca4a..81755e98da2b 100644
--- a/app/scripts/snaps/preinstalled-snaps.ts
+++ b/app/scripts/snaps/preinstalled-snaps.ts
@@ -4,6 +4,7 @@ import EnsResolverSnap from '@metamask/ens-resolver-snap/dist/preinstalled-snap.
import AccountWatcherSnap from '@metamask/account-watcher/dist/preinstalled-snap.json';
///: BEGIN:ONLY_INCLUDE_IF(build-flask)
import BitcoinWalletSnap from '@metamask/bitcoin-wallet-snap/dist/preinstalled-snap.json';
+import PreinstalledExampleSnap from '@metamask/preinstalled-example-snap/dist/preinstalled-snap.json';
///: END:ONLY_INCLUDE_IF
// The casts here are less than ideal but we expect the SnapController to validate the inputs.
@@ -13,6 +14,7 @@ const PREINSTALLED_SNAPS = Object.freeze([
AccountWatcherSnap as PreinstalledSnap,
///: BEGIN:ONLY_INCLUDE_IF(build-flask)
BitcoinWalletSnap as unknown as PreinstalledSnap,
+ PreinstalledExampleSnap as unknown as PreinstalledSnap,
///: END:ONLY_INCLUDE_IF
]);
diff --git a/package.json b/package.json
index c6889c6fec0e..587ab7b5abde 100644
--- a/package.json
+++ b/package.json
@@ -342,6 +342,7 @@
"@metamask/phishing-controller": "^12.0.1",
"@metamask/post-message-stream": "^8.0.0",
"@metamask/ppom-validator": "0.34.0",
+ "@metamask/preinstalled-example-snap": "^0.1.0",
"@metamask/profile-sync-controller": "^0.8.0",
"@metamask/providers": "^14.0.2",
"@metamask/queued-request-controller": "^2.0.0",
diff --git a/yarn.lock b/yarn.lock
index 20374916934d..56b12ef4ccb9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6044,6 +6044,15 @@ __metadata:
languageName: node
linkType: hard
+"@metamask/preinstalled-example-snap@npm:^0.1.0":
+ version: 0.1.0
+ resolution: "@metamask/preinstalled-example-snap@npm:0.1.0"
+ dependencies:
+ "@metamask/snaps-sdk": "npm:^6.5.0"
+ checksum: 10/0540aa6c20b17171f3a3bcf9ea2a7be551d6abbf16de9bd55dce038c5602c62a3921c7e840b82a325b0db00f26b96f54568854bdcd091558bd3b8fa8c6188023
+ languageName: node
+ linkType: hard
+
"@metamask/profile-sync-controller@npm:^0.8.0":
version: 0.8.0
resolution: "@metamask/profile-sync-controller@npm:0.8.0"
@@ -26126,6 +26135,7 @@ __metadata:
"@metamask/phishing-warning": "npm:^4.0.0"
"@metamask/post-message-stream": "npm:^8.0.0"
"@metamask/ppom-validator": "npm:0.34.0"
+ "@metamask/preinstalled-example-snap": "npm:^0.1.0"
"@metamask/profile-sync-controller": "npm:^0.8.0"
"@metamask/providers": "npm:^14.0.2"
"@metamask/queued-request-controller": "npm:^2.0.0"
From c323433e9fb00f73ed8ad1697ef462ae65912e98 Mon Sep 17 00:00:00 2001
From: Guillaume Roux
Date: Fri, 20 Sep 2024 15:53:52 +0200
Subject: [PATCH 7/7] fix(snap): Use default buttons when `hideSnapsBranding`
is `true` (#27303)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## **Description**
This PR makes the button not use the snap branding when the
`hideSnapsBranding` flag is set to `true`.
It also fixes an issue with the snap homepage footer having a margin
when only one button is rendered in the footer.
The `snap-footer-button` was also renamed
`snap-ui-renderer__footer-button` to conform to the conventional naming
of ui elements used in the `snap-ui-renderer`
[](https://codespaces.new/MetaMask/metamask-extension/pull/27303?quickstart=1)
## **Related issues**
Fixes: N/A
## **Manual testing steps**
1. Go to test-snaps
2. Try the preinstalled example snap
## **Screenshots/Recordings**
### **Before**
### **After**
## **Pre-merge author checklist**
- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
ui/components/app/app-components.scss | 2 +-
.../safe-component-list.js | 4 +-
.../app/snaps/snap-footer-button/index.scss | 45 ----------------
.../app/snaps/snap-footer-button/index.ts | 1 -
.../snaps/snap-ui-footer-button/index.scss | 51 +++++++++++++++++++
.../app/snaps/snap-ui-footer-button/index.ts | 1 +
.../snap-ui-footer-button.tsx} | 26 +++++++---
.../snap-ui-renderer/components/container.ts | 2 +-
.../snap-ui-renderer/components/footer.ts | 43 ++++++++--------
.../app/snaps/snap-ui-renderer/index.scss | 16 ------
10 files changed, 99 insertions(+), 92 deletions(-)
delete mode 100644 ui/components/app/snaps/snap-footer-button/index.scss
delete mode 100644 ui/components/app/snaps/snap-footer-button/index.ts
create mode 100644 ui/components/app/snaps/snap-ui-footer-button/index.scss
create mode 100644 ui/components/app/snaps/snap-ui-footer-button/index.ts
rename ui/components/app/snaps/{snap-footer-button/snap-footer-button.tsx => snap-ui-footer-button/snap-ui-footer-button.tsx} (70%)
diff --git a/ui/components/app/app-components.scss b/ui/components/app/app-components.scss
index d7d07b9afb55..a9f65cad0714 100644
--- a/ui/components/app/app-components.scss
+++ b/ui/components/app/app-components.scss
@@ -34,7 +34,7 @@
@import 'snaps/insight-warnings/index';
@import 'snaps/snap-authorship-header/index';
@import 'snaps/snap-authorship-pill/index';
-@import 'snaps/snap-footer-button/index';
+@import 'snaps/snap-ui-footer-button/index';
@import 'hold-to-reveal-button/index';
@import 'home-notification/index';
@import 'info-box/index';
diff --git a/ui/components/app/metamask-template-renderer/safe-component-list.js b/ui/components/app/metamask-template-renderer/safe-component-list.js
index 5756c5cbed2b..14abe8eceea7 100644
--- a/ui/components/app/metamask-template-renderer/safe-component-list.js
+++ b/ui/components/app/metamask-template-renderer/safe-component-list.js
@@ -44,7 +44,7 @@ import { SnapUITooltip } from '../snaps/snap-ui-tooltip';
import { SnapUICard } from '../snaps/snap-ui-card';
import { SnapUIAddress } from '../snaps/snap-ui-address';
import { SnapUISelector } from '../snaps/snap-ui-selector';
-import { SnapFooterButton } from '../snaps/snap-footer-button';
+import { SnapUIFooterButton } from '../snaps/snap-ui-footer-button';
///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
import { SnapAccountSuccessMessage } from '../../../pages/confirmations/components/snap-account-success-message';
import { SnapAccountErrorMessage } from '../../../pages/confirmations/components/snap-account-error-message';
@@ -106,7 +106,7 @@ export const safeComponentList = {
SnapUICard,
SnapUISelector,
SnapUIAddress,
- SnapFooterButton,
+ SnapUIFooterButton,
FormTextField,
///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
CreateSnapAccount,
diff --git a/ui/components/app/snaps/snap-footer-button/index.scss b/ui/components/app/snaps/snap-footer-button/index.scss
deleted file mode 100644
index 10a830eccf80..000000000000
--- a/ui/components/app/snaps/snap-footer-button/index.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.snap-footer-button {
- &.mm-button-primary {
- box-shadow: none;
- color: var(--color-text-alternative);
- background-color: var(--color-icon-default);
-
- &:hover:not(&--disabled) {
- opacity: 80%;
- box-shadow: none;
- }
-
- &:active:not(&--disabled) {
- opacity: 60%;
- }
- }
-
- &.mm-button-secondary {
- border-color: var(--color-icon-default);
- color: var(--color-icon-default);
-
- & span {
- color: var(--color-icon-default);
- }
-
- &:hover:not(&--disabled) {
- border-color: var(--color-icon-default);
- color: var(--color-background-default);
- background-color: var(--color-background-default-hover);
- box-shadow: none;
-
- & span {
- color: var(--color-icon-default);
- }
- }
-
- &:active:not(&--disabled) {
- border-color: var(--color-icon-default);
- opacity: 60%;
-
- & span {
- color: var(--color-icon-default);
- }
- }
- }
-}
diff --git a/ui/components/app/snaps/snap-footer-button/index.ts b/ui/components/app/snaps/snap-footer-button/index.ts
deleted file mode 100644
index caec6d30d2f8..000000000000
--- a/ui/components/app/snaps/snap-footer-button/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './snap-footer-button';
diff --git a/ui/components/app/snaps/snap-ui-footer-button/index.scss b/ui/components/app/snaps/snap-ui-footer-button/index.scss
new file mode 100644
index 000000000000..db46c4928592
--- /dev/null
+++ b/ui/components/app/snaps/snap-ui-footer-button/index.scss
@@ -0,0 +1,51 @@
+.snap-ui-renderer__footer-button {
+ &:not(.hide-snap-branding) {
+ &.mm-button-primary {
+ box-shadow: none;
+ color: var(--color-text-alternative);
+ background-color: var(--color-icon-default);
+
+ &:hover:not(&--disabled) {
+ opacity: 80%;
+ box-shadow: none;
+ }
+
+ &:active:not(&--disabled) {
+ opacity: 60%;
+ }
+ }
+
+ &.mm-button-secondary {
+ border-color: var(--color-icon-default);
+ color: var(--color-icon-default);
+
+ & span {
+ color: var(--color-icon-default);
+ }
+
+ &:hover:not(&--disabled) {
+ border-color: var(--color-icon-default);
+ color: var(--color-background-default);
+ background-color: var(--color-background-default-hover);
+ box-shadow: none;
+
+ & span {
+ color: var(--color-icon-default);
+ }
+ }
+
+ &:active:not(&--disabled) {
+ border-color: var(--color-icon-default);
+ opacity: 60%;
+
+ & span {
+ color: var(--color-icon-default);
+ }
+ }
+ }
+ }
+
+ &--disabled {
+ cursor: default !important;
+ }
+}
diff --git a/ui/components/app/snaps/snap-ui-footer-button/index.ts b/ui/components/app/snaps/snap-ui-footer-button/index.ts
new file mode 100644
index 000000000000..83e2a7827f8a
--- /dev/null
+++ b/ui/components/app/snaps/snap-ui-footer-button/index.ts
@@ -0,0 +1 @@
+export * from './snap-ui-footer-button';
diff --git a/ui/components/app/snaps/snap-footer-button/snap-footer-button.tsx b/ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx
similarity index 70%
rename from ui/components/app/snaps/snap-footer-button/snap-footer-button.tsx
rename to ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx
index e2b8c9609714..240024bb673a 100644
--- a/ui/components/app/snaps/snap-footer-button/snap-footer-button.tsx
+++ b/ui/components/app/snaps/snap-ui-footer-button/snap-ui-footer-button.tsx
@@ -5,9 +5,10 @@ import {
UserInputEventType,
} from '@metamask/snaps-sdk';
import { useSelector } from 'react-redux';
+import classnames from 'classnames';
import {
Button,
- ButtonLinkProps,
+ ButtonProps,
ButtonSize,
IconSize,
} from '../../../component-library';
@@ -20,20 +21,23 @@ import { useSnapInterfaceContext } from '../../../../contexts/snaps';
import { SnapIcon } from '../snap-icon';
import { getHideSnapBranding } from '../../../../selectors';
-type SnapFooterButtonProps = {
+type SnapUIFooterButtonProps = {
name?: string;
+ variant?: ButtonVariant;
isSnapAction?: boolean;
onCancel?: () => void;
};
-export const SnapFooterButton: FunctionComponent<
- SnapFooterButtonProps & ButtonLinkProps<'button'>
+export const SnapUIFooterButton: FunctionComponent<
+ SnapUIFooterButtonProps & ButtonProps<'button'>
> = ({
onCancel,
name,
children,
+ disabled = false,
isSnapAction = false,
type,
+ variant = ButtonVariant.Primary,
form,
...props
}) => {
@@ -55,15 +59,25 @@ export const SnapFooterButton: FunctionComponent<
const handleClick = isSnapAction ? handleSnapAction : onCancel;
+ const brandedButtonVariant = isSnapAction
+ ? ButtonVariant.Primary
+ : ButtonVariant.Secondary;
+
+ const buttonVariant = hideSnapBranding ? variant : brandedButtonVariant;
+
return (
- E
+ G
- ETH
+ GoerliETH
diff --git a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
index 656d016f0a34..d14048897e39 100644
--- a/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
+++ b/ui/pages/confirmations/confirmation/templates/add-ethereum-chain.js
@@ -1,5 +1,6 @@
import { ethErrors } from 'eth-rpc-errors';
import React from 'react';
+import { RpcEndpointType } from '@metamask/network-controller';
import {
infuraProjectId,
@@ -224,9 +225,31 @@ function getState(pendingApproval) {
function getValues(pendingApproval, t, actions, history, data) {
const originIsMetaMask = pendingApproval.origin === 'metamask';
const customRpcUrl = pendingApproval.requestData.rpcUrl;
- const childrenTitleText = process.env.CHAIN_PERMISSIONS
- ? t('addNetworkConfirmationTitle', [pendingApproval.requestData.chainName])
- : t('addEthereumChainConfirmationTitle');
+
+ let title;
+ if (originIsMetaMask) {
+ title = t('wantToAddThisNetwork');
+ } else if (data.existingNetworkConfiguration) {
+ title = t('updateNetworkConfirmationTitle', [
+ data.existingNetworkConfiguration.name,
+ ]);
+ } else {
+ title = process.env.CHAIN_PERMISSIONS
+ ? t('addNetworkConfirmationTitle', [
+ pendingApproval.requestData.chainName,
+ ])
+ : t('addEthereumChainConfirmationTitle');
+ }
+
+ let subtitle;
+ if (data.existingNetworkConfiguration) {
+ subtitle = t('updateEthereumChainConfirmationDescription');
+ } else {
+ subtitle = process.env.CHAIN_PERMISSIONS
+ ? t('multichainAddEthereumChainConfirmationDescription')
+ : t('addEthereumChainConfirmationDescription');
+ }
+
return {
content: [
{
@@ -332,9 +355,7 @@ function getValues(pendingApproval, t, actions, history, data) {
{
element: 'Typography',
key: 'title',
- children: originIsMetaMask
- ? t('wantToAddThisNetwork')
- : childrenTitleText,
+ children: title,
props: {
variant: TypographyVariant.H3,
align: 'center',
@@ -347,9 +368,7 @@ function getValues(pendingApproval, t, actions, history, data) {
{
element: 'Typography',
key: 'description',
- children: process.env.CHAIN_PERMISSIONS
- ? t('multichainAddEthereumChainConfirmationDescription')
- : t('addEthereumChainConfirmationDescription'),
+ children: subtitle,
props: {
variant: TypographyVariant.H7,
align: 'center',
@@ -515,18 +534,26 @@ function getValues(pendingApproval, t, actions, history, data) {
pendingApproval.requestData,
);
if (originIsMetaMask) {
- const networkConfigurationId = await actions.upsertNetworkConfiguration(
- {
- ...pendingApproval.requestData,
- nickname: pendingApproval.requestData.chainName,
- },
- {
- setActive: false,
- source: pendingApproval.requestData.source,
- },
- );
+ const blockExplorer =
+ pendingApproval.requestData.rpcPrefs.blockExplorerUrl;
+
+ const addedNetwork = await actions.addNetwork({
+ chainId: pendingApproval.requestData.chainId,
+ name: pendingApproval.requestData.chainName,
+ nativeCurrency: pendingApproval.requestData.ticker,
+ blockExplorerUrls: blockExplorer ? [blockExplorer] : [],
+ defaultBlockExplorerUrlIndex: blockExplorer ? 0 : undefined,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: pendingApproval.requestData.rpcUrl,
+ type: RpcEndpointType.Custom,
+ },
+ ],
+ });
+
await actions.setNewNetworkAdded({
- networkConfigurationId,
+ networkConfigurationId: addedNetwork.rpcEndpoints[0].networkClientId,
nickname: pendingApproval.requestData.chainName,
});
diff --git a/ui/pages/confirmations/confirmation/templates/index.js b/ui/pages/confirmations/confirmation/templates/index.js
index 31b8d2210d0d..fd6df7e4959b 100644
--- a/ui/pages/confirmations/confirmation/templates/index.js
+++ b/ui/pages/confirmations/confirmation/templates/index.js
@@ -5,7 +5,7 @@ import {
rejectPendingApproval,
resolvePendingApproval,
setNewNetworkAdded,
- upsertNetworkConfiguration,
+ addNetwork,
} from '../../../../store/actions';
import {
///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
@@ -152,8 +152,7 @@ function getAttenuatedDispatch(dispatch) {
dispatch(rejectPendingApproval(...args)),
resolvePendingApproval: (...args) =>
dispatch(resolvePendingApproval(...args)),
- upsertNetworkConfiguration: (...args) =>
- dispatch(upsertNetworkConfiguration(...args)),
+ addNetwork: (...args) => dispatch(addNetwork(...args)),
setNewNetworkAdded: (...args) => dispatch(setNewNetworkAdded(...args)),
deleteInterface: (...args) => dispatch(deleteInterface(...args)),
};
diff --git a/ui/pages/confirmations/confirmation/templates/remove-snap-account.test.js b/ui/pages/confirmations/confirmation/templates/remove-snap-account.test.js
index 2d58ca66d128..9cb73c38bfea 100644
--- a/ui/pages/confirmations/confirmation/templates/remove-snap-account.test.js
+++ b/ui/pages/confirmations/confirmation/templates/remove-snap-account.test.js
@@ -7,6 +7,8 @@ import Confirmation from '../confirmation';
import { renderWithProvider } from '../../../../../test/lib/render-helpers';
import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES } from '../../../../../shared/constants/app';
import mockState from '../../../../../test/data/mock-state.json';
+import { mockNetworkState } from '../../../../../test/stub/networks';
+import { CHAIN_IDS } from '../../../../../shared/constants/network';
const middleware = [thunk];
@@ -39,6 +41,7 @@ const mockBaseStore = {
},
approvalFlows: [],
subjectMetadata: {},
+ ...mockNetworkState({ chainId: CHAIN_IDS.GOERLI }),
},
};
diff --git a/ui/pages/confirmations/confirmation/templates/switch-ethereum-chain.test.js b/ui/pages/confirmations/confirmation/templates/switch-ethereum-chain.test.js
index e53a8e7de190..4abcf700196f 100644
--- a/ui/pages/confirmations/confirmation/templates/switch-ethereum-chain.test.js
+++ b/ui/pages/confirmations/confirmation/templates/switch-ethereum-chain.test.js
@@ -19,20 +19,12 @@ const mockApproval = {
origin: 'https://test-dapp.metamask.io',
requestData: {
toNetworkConfiguration: {
- rpcUrl: 'https://rpcurl.test.chain',
- rpcPrefs: {
- blockExplorerUrl: 'https://blockexplorer.test.chain',
- },
- chainName: 'Test chain',
- ticker: 'TST',
chainId: '0x9999',
- nickname: 'Test chain',
+ name: 'Test chain',
},
fromNetworkConfiguration: {
- type: 'rpc',
- rpcUrl: 'http://example-custom-rpc.metamask.io',
chainId: '0x9999',
- nickname: 'Test initial state',
+ name: 'Test initial state',
},
},
};
diff --git a/ui/pages/confirmations/hooks/alerts/useConfirmationOriginAlerts.test.ts b/ui/pages/confirmations/hooks/alerts/useConfirmationOriginAlerts.test.ts
index ade12ca00328..ff2cd10cfe60 100644
--- a/ui/pages/confirmations/hooks/alerts/useConfirmationOriginAlerts.test.ts
+++ b/ui/pages/confirmations/hooks/alerts/useConfirmationOriginAlerts.test.ts
@@ -9,6 +9,7 @@ import { genUnapprovedContractInteractionConfirmation } from '../../../../../tes
import { renderHookWithConfirmContextProvider } from '../../../../../test/lib/confirmations/render-helpers';
import { unapprovedPersonalSignMsg } from '../../../../../test/data/confirmations/personal_sign';
import { SignatureRequestType } from '../../types/confirm';
+import { CHAIN_IDS } from '../../../../../shared/constants/network';
import useConfirmationOriginAlerts from './useConfirmationOriginAlerts';
const expectedAlert = [
@@ -51,7 +52,7 @@ describe('useConfirmationOriginAlerts', () => {
it('returns an alert for transaction with special characters in origin', () => {
const contractInteraction = genUnapprovedContractInteractionConfirmation({
- chainId: mockState.metamask.networkConfigurations.goerli.chainId,
+ chainId: CHAIN_IDS.GOERLI,
});
const { result } = renderHookWithConfirmContextProvider(
() => useConfirmationOriginAlerts(),
diff --git a/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts b/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts
index 1fab535733a1..4c6dddfa7a5a 100644
--- a/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts
+++ b/ui/pages/confirmations/hooks/useConfirmationNetworkInfo.ts
@@ -1,52 +1,48 @@
import { useSelector } from 'react-redux';
+import { Hex } from '@metamask/utils';
import {
+ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
NETWORK_TO_NAME_MAP,
- NETWORK_TYPES,
} from '../../../../shared/constants/network';
-import { getAllNetworks } from '../../../selectors';
-import { getProviderConfig } from '../../../ducks/metamask/metamask';
+import {
+ getCurrentChainId,
+ getNetworkConfigurationsByChainId,
+} from '../../../selectors';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { useConfirmContext } from '../context/confirm';
-type KeyOfNetworkName = keyof typeof NETWORK_TO_NAME_MAP;
-
function useConfirmationNetworkInfo() {
const t = useI18nContext();
const { currentConfirmation } = useConfirmContext();
- const allNetworks = useSelector(getAllNetworks);
- const providerConfig = useSelector(getProviderConfig);
+ const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
+ const currentChainId = useSelector(getCurrentChainId);
let networkDisplayName = '';
- let confirmationNetwork;
+ let networkImageUrl = '';
if (currentConfirmation) {
// use the current confirmation chainId, else use the current network chainId
- const currentChainId =
- currentConfirmation?.chainId ?? providerConfig.chainId;
- confirmationNetwork = allNetworks.find(
- ({ id, chainId }) =>
- chainId === currentChainId &&
- (providerConfig.type === NETWORK_TYPES.RPC
- ? id === providerConfig.id
- : id === providerConfig.type),
- );
-
- if (confirmationNetwork) {
- const { nickname } = confirmationNetwork;
- if (providerConfig.type === NETWORK_TYPES.RPC) {
- networkDisplayName = nickname ?? t('privateNetwork');
- } else {
- networkDisplayName =
- NETWORK_TO_NAME_MAP[confirmationNetwork?.chainId as KeyOfNetworkName];
- }
- }
+ const chainId =
+ (currentConfirmation?.chainId as Hex | undefined) ?? currentChainId;
+
+ const networkConfiguration = networkConfigurations[chainId];
+
+ networkDisplayName =
+ networkConfiguration?.name ??
+ NETWORK_TO_NAME_MAP[chainId as keyof typeof NETWORK_TO_NAME_MAP] ??
+ t('privateNetwork');
+
+ networkImageUrl =
+ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
+ chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+ ];
}
return {
- networkImageUrl: confirmationNetwork?.rpcPrefs?.imageUrl ?? '',
+ networkImageUrl,
networkDisplayName,
};
}
diff --git a/ui/pages/confirmations/hooks/useTransactionInfo.test.js b/ui/pages/confirmations/hooks/useTransactionInfo.test.js
index 59aaf7b167c3..61ae036c4000 100644
--- a/ui/pages/confirmations/hooks/useTransactionInfo.test.js
+++ b/ui/pages/confirmations/hooks/useTransactionInfo.test.js
@@ -1,6 +1,7 @@
import { renderHookWithProvider } from '../../../../test/lib/render-helpers';
import mockState from '../../../../test/data/mock-state.json';
import { getSelectedInternalAccountFromMockState } from '../../../../test/jest/mocks';
+import { getCurrentChainId } from '../../../selectors';
import { useTransactionInfo } from './useTransactionInfo';
const mockSelectedInternalAccount =
@@ -21,9 +22,7 @@ describe('useTransactionInfo', () => {
it('should return true if transaction is NFT transfer', () => {
mockState.metamask.allNftContracts = {
[mockSelectedInternalAccount.address]: {
- [mockState.metamask.networkConfigurations[
- mockState.metamask.selectedNetworkClientId
- ].chainId]: [{ address: '0x9' }],
+ [getCurrentChainId(mockState)]: [{ address: '0x9' }],
},
};
diff --git a/ui/pages/home/home.component.js b/ui/pages/home/home.component.js
index 19b76a881c6c..2df3f2907266 100644
--- a/ui/pages/home/home.component.js
+++ b/ui/pages/home/home.component.js
@@ -50,6 +50,9 @@ import {
ModalHeader,
ModalOverlay,
} from '../../components/component-library';
+///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
+import MultiRpcEditModal from '../../components/app/multi-rpc-edit-modal/multi-rpc-edit-modal';
+///: END:ONLY_INCLUDE_IF
import {
RESTORE_VAULT_ROUTE,
CONFIRM_TRANSACTION_ROUTE,
@@ -154,6 +157,7 @@ export default class Home extends PureComponent {
announcementsToShow: PropTypes.bool.isRequired,
onboardedInThisUISession: PropTypes.bool,
isSmartTransactionsOptInModalAvailable: PropTypes.bool.isRequired,
+ showMultiRpcModal: PropTypes.bool.isRequired,
///: END:ONLY_INCLUDE_IF
newNetworkAddedConfigurationId: PropTypes.string,
isNotification: PropTypes.bool.isRequired,
@@ -177,7 +181,6 @@ export default class Home extends PureComponent {
pendingConfirmations: PropTypes.arrayOf(PropTypes.object).isRequired,
pendingConfirmationsPrioritized: PropTypes.arrayOf(PropTypes.object)
.isRequired,
- networkMenuRedesign: PropTypes.bool,
hasApprovalFlows: PropTypes.bool.isRequired,
infuraBlocked: PropTypes.bool.isRequired,
setRecoveryPhraseReminderHasBeenShown: PropTypes.func.isRequired,
@@ -374,7 +377,6 @@ export default class Home extends PureComponent {
closeNotificationPopup,
isNotification,
hasAllowedPopupRedirectApprovals,
- networkMenuRedesign,
newNetworkAddedConfigurationId,
setActiveNetwork,
clearNewNetworkAdded,
@@ -392,8 +394,8 @@ export default class Home extends PureComponent {
const { notificationClosing } = this.state;
if (
- prevNewNetworkAddedConfigurationId !== newNetworkAddedConfigurationId &&
- networkMenuRedesign
+ newNetworkAddedConfigurationId &&
+ prevNewNetworkAddedConfigurationId !== newNetworkAddedConfigurationId
) {
setActiveNetwork(newNetworkAddedConfigurationId);
clearNewNetworkAdded();
@@ -498,11 +500,8 @@ export default class Home extends PureComponent {
newTokensImportedError,
setNewTokensImported,
setNewTokensImportedError,
- newNetworkAddedConfigurationId,
- networkMenuRedesign,
clearNewNetworkAdded,
clearEditedNetwork,
- setActiveNetwork,
} = this.props;
const onAutoHide = () => {
@@ -627,7 +626,9 @@ export default class Home extends PureComponent {
-
-`;
diff --git a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.stories.tsx b/ui/pages/onboarding-flow/add-network-modal/add-network-modal.stories.tsx
deleted file mode 100644
index 5153ccb2ca56..000000000000
--- a/ui/pages/onboarding-flow/add-network-modal/add-network-modal.stories.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import AddNetworkModal from './index';
-
-const meta: Meta
-
- - Add custom network -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- <>
- dispatch(toggleNetworkMenu())}
+
- ) : (
-
-
-
-
-
- Network Menu Redesign
-
-
-
- Toggles the new design of the Networks menu
-
-
-
-
-
diff --git a/ui/pages/settings/developer-options-tab/developer-options-tab.tsx b/ui/pages/settings/developer-options-tab/developer-options-tab.tsx
index da1bd4685a75..12fd53b60dbb 100644
--- a/ui/pages/settings/developer-options-tab/developer-options-tab.tsx
+++ b/ui/pages/settings/developer-options-tab/developer-options-tab.tsx
@@ -64,11 +64,6 @@ const DeveloperOptionsTab = () => {
isRedesignedConfirmationsFeatureEnabled,
setIsRedesignedConfirmationsFeatureEnabled,
] = useState(redesignConfirmationsFeatureToggle);
- const [enableNetworkRedesign, setEnableNetworkRedesign] = useState(
- // eslint-disable-next-line
- /* @ts-expect-error: Avoids error from window property not existing */
- window.metamaskFeatureFlags.networkMenuRedesign,
- );
const settingsRefs = Array(
getNumberOfSettingRoutesInTab(t, t('developerOptions')),
@@ -228,24 +223,6 @@ const DeveloperOptionsTab = () => {
);
};
- const renderNetworkMenuRedesign = () => {
- return (
- {
- setEnableNetworkRedesign(!value);
- // eslint-disable-next-line
- /* @ts-expect-error: Avoids error from window property not existing */
- window.metamaskFeatureFlags.networkMenuRedesign = !value;
- }}
- dataTestId="developer-options-network-redesign"
- settingsRef={settingsRefs[4] as React.RefObject}
- />
- );
- };
-
const renderEnableConfirmationsRedesignToggle = () => {
return (
{
{renderAnnouncementReset()}
{renderOnboardingReset()}
{renderServiceWorkerKeepAliveToggle()}
- {renderNetworkMenuRedesign()}
{renderEnableConfirmationsRedesignToggle()}
-
-`;
diff --git a/ui/pages/settings/networks-tab/networks-form/networks-form-state.ts b/ui/pages/settings/networks-tab/networks-form/networks-form-state.ts
new file mode 100644
index 000000000000..03ec1e59615d
--- /dev/null
+++ b/ui/pages/settings/networks-tab/networks-form/networks-form-state.ts
@@ -0,0 +1,75 @@
+import { useEffect, useState } from 'react';
+import {
+ RpcEndpointType,
+ UpdateNetworkFields,
+} from '@metamask/network-controller';
+import { hexToDecimal } from '../../../../../shared/modules/conversion.utils';
+
+/**
+ * State backing the add/edit network form
+ *
+ * @param existingNetwork
+ */
+export const useNetworkFormState = (existingNetwork?: UpdateNetworkFields) => {
+ const [name, setName] = useState- defaultRpcUrl -
-
-
-- https://current-rpc-url.com -
- -
- {addNewNetwork ? (
-
- {networkMenuRedesign ? (
-
- 0 &&
- !suggestedNames.some(
- (nameSuggested) => nameSuggested === networkName,
- ) ? (
-
- {t('suggestedTokenName')}
- {suggestedNames.map((suggestedName, i) => (
- {
- setNetworkName(suggestedName);
- setNetworkFormInformation((prevState) => ({
- ...prevState,
- networkNameForm: suggestedName,
- }));
- }}
- paddingLeft={1}
- paddingRight={1}
- style={{ verticalAlign: 'baseline' }}
- key={i}
- >
- {suggestedName}
-
- ))}
-
- ) : null
- }
- onChange={(e) => {
- setIsEditing(true);
- setNetworkName(e.target?.value);
- setNetworkFormInformation((prevState) => ({
- ...prevState,
- networkNameForm: e.target?.value ?? '',
- }));
- }}
- label={t('networkName')}
- labelProps={{
- variant: TextVariant.bodySm,
- fontWeight: FontWeight.Bold,
- paddingBottom: 1,
- paddingTop: 1,
- }}
- inputProps={{
- paddingLeft: 2,
- variant: TextVariant.bodySm,
- 'data-testid': 'network-form-network-name',
- }}
- value={networkName}
- disabled={disableEdit && !addNewNetwork}
- />
- {errors.networkName?.msg ? (
-
- {errors.networkName.msg}
-
- ) : null}
- {warnings.networkName?.msg ? (
-
- {warnings.networkName.msg}
-
- ) : null}
-
- {
- setIsEditing(true);
- setRpcUrl(value);
- }}
- titleText={t('rpcUrl')}
- value={displayRpcUrl}
- disabled={disableEdit && !addNewNetwork}
- dataTestId="network-form-rpc-url"
- />
-
- {errors.rpcUrl?.msg ? (
-
- {errors.rpcUrl.msg}
-
- ) : null}
- {
- setIsEditing(true);
- setChainId(e.target?.value);
- autoSuggestTicker(e.target?.value);
- autoSuggestName(e.target?.value);
- setNetworkFormInformation((prevState) => ({
- ...prevState,
- networkChainIdForm: e.target?.value ?? '',
- }));
- }}
- label={
- viewOnly || networkMenuRedesign ? (
- t('chainId')
- ) : (
- <>
- {t('chainId')}
-
-
-
- )
- }
- labelProps={{
- variant: TextVariant.bodySm,
- fontWeight: FontWeight.Bold,
- paddingBottom: 1,
- paddingTop: 1,
- }}
- inputProps={{
- paddingLeft: 2,
- variant: TextVariant.bodySm,
- 'data-testid': 'network-form-chain-id',
- }}
- value={chainId}
- disabled={(disableEdit || isPopularNetwork) && !addNewNetwork}
- />
-
- {warnings.chainId?.msg ? (
-
- {warnings.chainId?.msg}
-
- ) : null}
- {errors.chainId?.msg ? (
-
- {errors.chainId.msg}
-
- ) : null}
- {errors.chainId?.key === 'endpointReturnedDifferentChainId' &&
- networkMenuRedesign ? (
-
-
- {t('findTheRightChainId')}{' '}
- {
- global.platform.openTab({
- url: CHAIN_LIST_URL,
- });
- }}
- endIconName={IconName.Export}
- endIconProps={{
- size: IconSize.Xs,
- }}
- >
- chainid.network
-
-
-
- ) : null}
- {errors.chainId?.key === 'existingChainId' ? (
-
-
- {t('existingChainId')}
-
-
- {t('updateOrEditNetworkInformations')}{' '}
-
- {t('editNetworkLink')}
-
-
-
- ) : null}
- 0 &&
- !suggestedTicker.some(
- (symbolSuggested) => symbolSuggested === ticker,
- ) ? (
-
- {t('suggestedTokenSymbol')}
- {suggestedTicker.map((suggestedSymbol, i) => (
- {
- setTicker(suggestedSymbol);
- setNetworkFormInformation((prevState) => ({
- ...prevState,
- networkTickerForm: suggestedSymbol,
- }));
- }}
- paddingLeft={1}
- paddingRight={1}
- style={{ verticalAlign: 'baseline' }}
- key={i}
- >
- {suggestedSymbol}
-
- ))}
-
- ) : null
- }
- onChange={(e) => {
- setIsEditing(true);
- setTicker(e.target?.value);
- setNetworkFormInformation((prevState) => ({
- ...prevState,
- networkTickerForm: e.target?.value ?? '',
- }));
- }}
- label={t('currencySymbol')}
- labelProps={{
- variant: TextVariant.bodySm,
- fontWeight: FontWeight.Bold,
- paddingBottom: 1,
- paddingTop: 1,
- }}
- inputProps={{
- paddingLeft: 2,
- variant: TextVariant.bodySm,
- 'data-testid': 'network-form-ticker-input',
- }}
- value={ticker}
- disabled={disableEdit && !addNewNetwork}
- />
- {warnings.ticker?.msg ? (
-
- {warnings.ticker.msg}
-
- ) : null}
- {
- setIsEditing(true);
- setBlockExplorerUrl(e.target?.value);
- }}
- label={`${t('blockExplorerUrl')} ${t('optionalWithParanthesis')}`}
- labelProps={{
- variant: TextVariant.bodySm,
- fontWeight: FontWeight.Bold,
- paddingBottom: 1,
- paddingTop: 1,
- }}
- inputProps={{
- paddingLeft: 2,
- variant: TextVariant.bodySm,
- 'data-testid': 'network-form-block-explorer-url',
- }}
- value={blockExplorerUrl ?? ''}
- disabled={disableEdit && !addNewNetwork}
- autoFocus={
- window.location.hash.split('#')[2] === 'blockExplorerUrl'
- }
- />
- {errors.blockExplorerUrl?.msg ? (
-
- {errors.blockExplorerUrl.msg}
-
- ) : null}
-
-
- {!viewOnly && (
- <>
- {deletable && (
-
- )}
-
-
-
-
-
- )}
-
- )}
- {
- setSearchQuery('');
- setSearchedNetworks([]);
- dispatch(setSelectedNetworkConfigurationId(networkConfigurationId));
- if (!isFullScreen) {
- global.platform.openExtensionInBrowser(NETWORKS_ROUTE);
- }
- }}
- >
- {isCurrentRpcTarget ? (
-
- );
-};
-
-NetworksListItem.propTypes = {
- network: PropTypes.object.isRequired,
- networkIsSelected: PropTypes.bool,
- selectedNetworkConfigurationId: PropTypes.string,
- setSearchQuery: PropTypes.func,
- setSearchedNetworks: PropTypes.func,
-};
-
-export default NetworksListItem;
diff --git a/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.stories.js b/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.stories.js
deleted file mode 100644
index 34cd0b406bd3..000000000000
--- a/ui/pages/settings/networks-tab/networks-list-item/networks-list-item.stories.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { defaultNetworksData } from '../networks-tab.constants';
-import NetworksListItem from '.';
-
-const defaultNetworks = defaultNetworksData.map((network) => ({
- ...network,
- viewOnly: true,
-}));
-
-const MainnetProps = {
- label: 'Mainnet',
- network: defaultNetworks[0],
- networkIsSelected: false,
- selectedRpcUrl: 'http://localhost:8545',
-};
-
-export default {
- title: 'Pages/Settings/NetworksTab/NetworksListItem',
-
- argTypes: {
- network: {
- control: 'object',
- },
- networkIsSelected: {
- control: 'boolean',
- },
- selectedRpcUrl: {
- control: 'text',
- },
- networkIndex: {
- control: 'number',
- },
- },
- args: {
- network: MainnetProps,
- },
-};
-
-export const DefaultStory = (args) =>
- {label || t(getNetworkLabelKey(labelKey))}
- {currentProviderType !== NETWORK_TYPES.RPC && (
-
-
- {
- setSearchedNetworks(newResults);
- setSearchQuery(newSearchQuery);
- }}
- error={
- searchedNetworksToRender.length === 0
- ? t('settingsSearchMatchingNotFound')
- : null
- }
- networksList={networksToRender}
- searchQueryInput={searchQuery}
- />
- {searchedNetworksToRenderThatAreNotTestNetworks.map((network, _) => (
-
- {t('testNetworks')}
-
- )}
- {searchedNetworksToRenderThatAreTestNetworks.map((network, _) => (
-
- );
-};
-
-NetworksList.propTypes = {
- networkDefaultedToProvider: PropTypes.bool,
- networkIsSelected: PropTypes.bool,
- networksToRender: PropTypes.arrayOf(PropTypes.object).isRequired,
- selectedNetworkConfigurationId: PropTypes.string,
-};
-
-export default NetworksList;
diff --git a/ui/pages/settings/networks-tab/networks-list/networks-list.test.js b/ui/pages/settings/networks-tab/networks-list/networks-list.test.js
deleted file mode 100644
index bac67529ea7d..000000000000
--- a/ui/pages/settings/networks-tab/networks-list/networks-list.test.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import configureMockStore from 'redux-mock-store';
-import { renderWithProvider } from '../../../../../test/jest/rendering';
-import { defaultNetworksData } from '../networks-tab.constants';
-import { CHAIN_IDS } from '../../../../../shared/constants/network';
-import { mockNetworkState } from '../../../../../test/stub/networks';
-import NetworksList from '.';
-
-const mockState = {
- metamask: {
- ...mockNetworkState({ chainId: CHAIN_IDS.GOERLI }),
- },
-};
-
-const renderComponent = (props) => {
- const store = configureMockStore([])(mockState);
- return renderWithProvider(
- {t('networks')}
- {' > '}
-
- ) : (
- {t('addANetwork')}
- {' > '}
-
- {t('addANetworkManually')}
-
-
- {t('networks')}
-
- );
-};
-
-NetworksFormSubheader.propTypes = {
- addNewNetwork: PropTypes.bool.isRequired,
-};
-
-export default NetworksFormSubheader;
diff --git a/ui/pages/settings/networks-tab/networks-tab-subheader/networks-tab-subheader.test.js b/ui/pages/settings/networks-tab/networks-tab-subheader/networks-tab-subheader.test.js
deleted file mode 100644
index b06757ee7e2b..000000000000
--- a/ui/pages/settings/networks-tab/networks-tab-subheader/networks-tab-subheader.test.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import React from 'react';
-import configureMockStore from 'redux-mock-store';
-import { waitFor } from '@testing-library/react';
-import { renderWithProvider } from '../../../../../test/jest/rendering';
-import NetworksTabSubheader from '.';
-
-const mockState = {
- metamask: {},
- appState: {
- networksTabSelectedRpcUrl: 'http://localhost:8545',
- },
-};
-
-const renderComponent = (props) => {
- const store = configureMockStore([])(mockState);
- return renderWithProvider(
-
-
-
- {isFullScreen ? (
-
- );
-};
-
-NetworksTab.propTypes = {
- addNewNetwork: PropTypes.bool,
-};
-export default NetworksTab;
diff --git a/ui/pages/settings/networks-tab/networks-tab.test.js b/ui/pages/settings/networks-tab/networks-tab.test.js
deleted file mode 100644
index 96f7b5c18891..000000000000
--- a/ui/pages/settings/networks-tab/networks-tab.test.js
+++ /dev/null
@@ -1,53 +0,0 @@
-import React from 'react';
-import configureMockStore from 'redux-mock-store';
-import { renderWithProvider } from '../../../../test/jest/rendering';
-import { mockNetworkState } from '../../../../test/stub/networks';
-import { CHAIN_IDS } from '../../../../shared/constants/network';
-import NetworksTab from '.';
-
-const mockState = {
- metamask: {
- ...mockNetworkState({ chainId: CHAIN_IDS.LOCALHOST }),
- orderedNetworkList: {
- chainId: '0x539',
- rpcUrl: 'http://localhost:8545',
- },
- },
- appState: {
- networksTabSelectedRpcUrl: 'http://localhost:8545',
- },
-};
-
-jest.mock('../../../helpers/utils/feature-flags', () => ({
- ...jest.requireActual('../../../helpers/utils/feature-flags'),
- getLocalNetworkMenuRedesignFeatureFlag: () => false,
-}));
-
-const renderComponent = (props) => {
- const store = configureMockStore([])(mockState);
- return renderWithProvider(
- {addNewNetwork ? (
- history.push(DEFAULT_ROUTE)}
- cancelCallback={() => history.push(NETWORKS_ROUTE)}
- />
- ) : (
- <>
-
-
-
-
- ) : null}
-
- )}
-
-
-
-
-
-
-
-
-
- - Linea Mainnet -
- -
-
-
-
- C
-
-
-
-
- - Chain 5 -
-- - Etherscan.io - -
-
-
-
-
-
-
-
-
-
- S
+ G
- Sepolia
+ Goerli
-
-
-
-
@@ -118,7 +118,7 @@ exports[`
-
-
-
-
-
-
- - Linea Sepolia -
- -
diff --git a/ui/pages/settings/security-tab/security-tab.component.js b/ui/pages/settings/security-tab/security-tab.component.js
index 3931f6dae089..6ed158844198 100644
--- a/ui/pages/settings/security-tab/security-tab.component.js
+++ b/ui/pages/settings/security-tab/security-tab.component.js
@@ -71,7 +71,7 @@ export default class SecurityTab extends PureComponent {
participateInMetaMetrics: PropTypes.bool.isRequired,
setParticipateInMetaMetrics: PropTypes.func.isRequired,
incomingTransactionsPreferences: PropTypes.object.isRequired,
- allNetworks: PropTypes.array.isRequired,
+ networkConfigurations: PropTypes.object.isRequired,
setIncomingTransactionsPreferences: PropTypes.func.isRequired,
setUsePhishDetect: PropTypes.func.isRequired,
usePhishDetect: PropTypes.bool.isRequired,
@@ -259,14 +259,14 @@ export default class SecurityTab extends PureComponent {
renderIncomingTransactionsOptIn() {
const {
incomingTransactionsPreferences,
- allNetworks,
+ networkConfigurations,
setIncomingTransactionsPreferences,
} = this.props;
return (
>;
+ networkConfigurationsByChainId: Record;
currentCurrency: string;
currencyRates: Record;
completedOnboarding: boolean;
@@ -59,14 +61,13 @@ type TestState = MultichainState &
};
};
-function getEvmState(): TestState {
+function getEvmState(chainId: Hex = CHAIN_IDS.MAINNET): TestState {
return {
metamask: {
preferences: {
showFiatInTestnets: false,
},
- ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
-
+ ...mockNetworkState({ chainId }),
currentCurrency: 'ETH',
currencyRates: {
ETH: {
@@ -323,9 +324,7 @@ describe('Multichain Selectors', () => {
});
it('returns current chain ID if account is EVM (other)', () => {
- const state = getEvmState();
-
- state.metamask.selectedNetworkClientId = 'sepolia';
+ const state = getEvmState(CHAIN_IDS.SEPOLIA);
expect(getMultichainCurrentChainId(state)).toEqual(CHAIN_IDS.SEPOLIA);
});
@@ -348,9 +347,7 @@ describe('Multichain Selectors', () => {
});
it('returns false if account is EVM (testnet)', () => {
- const state = getEvmState();
-
- state.metamask.selectedNetworkClientId = 'sepolia';
+ const state = getEvmState(CHAIN_IDS.SEPOLIA);
expect(getMultichainIsMainnet(state)).toBe(false);
});
@@ -382,11 +379,10 @@ describe('Multichain Selectors', () => {
});
// @ts-expect-error This is missing from the Mocha type definitions
- it.each([NETWORK_TYPES.SEPOLIA, NETWORK_TYPES.LINEA_SEPOLIA])(
+ it.each([CHAIN_IDS.SEPOLIA, CHAIN_IDS.LINEA_SEPOLIA])(
'returns true if account is EVM (testnet): %s',
- (network: string) => {
- const state = getEvmState();
- state.metamask.selectedNetworkClientId = network;
+ (chainId: Hex) => {
+ const state = getEvmState(chainId);
expect(getMultichainIsTestnet(state)).toBe(true);
},
);
diff --git a/ui/selectors/multichain.ts b/ui/selectors/multichain.ts
index dc71d38563a9..e22883d83a03 100644
--- a/ui/selectors/multichain.ts
+++ b/ui/selectors/multichain.ts
@@ -1,6 +1,5 @@
import PropTypes from 'prop-types';
import { InternalAccount, isEvmAccountType } from '@metamask/keyring-api';
-import { NetworkConfiguration } from '@metamask/network-controller';
import type { RatesControllerState } from '@metamask/assets-controllers';
import { CaipChainId, Hex, KnownCaipNamespace } from '@metamask/utils';
import { createSelector } from '@reduxjs/toolkit';
@@ -21,8 +20,6 @@ import { BalancesControllerState } from '../../app/scripts/lib/accounts/Balances
import { MultichainNativeAssets } from '../../shared/constants/multichain/assets';
import {
CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
- NETWORK_TO_NAME_MAP,
- NETWORK_TYPES,
TEST_NETWORK_IDS,
} from '../../shared/constants/network';
import { AccountsState } from './accounts';
@@ -32,7 +29,7 @@ import {
getIsMainnet,
getMaybeSelectedInternalAccount,
getNativeCurrencyImage,
- getNetworkConfigurations,
+ getNetworkConfigurationsByChainId,
getSelectedAccountCachedBalance,
getSelectedInternalAccount,
getShouldShowFiat,
@@ -61,9 +58,6 @@ export type ProviderConfigWithImageUrlAndExplorerUrl = {
rpcPrefs?: { blockExplorerUrl?: string; imageUrl?: string };
};
-// TODO: Remove after updating to @metamask/network-controller 20.0.0
-export type NetworkConfigurationWithId = NetworkConfiguration & { id: string };
-
export type MultichainNetwork = {
nickname: string;
isEvmNetwork: boolean;
@@ -132,53 +126,25 @@ export function getMultichainNetwork(
if (isEvm) {
// EVM networks
- const evmChainId: string = getCurrentChainId(state);
+ const evmChainId: Hex = getCurrentChainId(state);
// TODO: Update to use network configurations when @metamask/network-controller is updated to 20.0.0
// ProviderConfig will be deprecated to use NetworkConfigurations
// When a user updates a network name its only updated in the NetworkConfigurations.
const evmNetwork: ProviderConfigWithImageUrlAndExplorerUrl =
- getProviderConfig(state);
- // Fallback to a known network image if network configuration does not defined it
+ getProviderConfig(state) as ProviderConfigWithImageUrlAndExplorerUrl;
+
const evmChainIdKey =
evmChainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP;
- if (
- !evmNetwork?.rpcPrefs?.imageUrl &&
- evmChainIdKey in CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
- ) {
- evmNetwork.rpcPrefs = {
- ...evmNetwork.rpcPrefs,
- imageUrl: CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[evmChainIdKey],
- };
- }
-
- let nickname;
- if (evmNetwork.type === NETWORK_TYPES.RPC) {
- // These are custom networks defined by the user.
- // If there aren't any nicknames, the RPC URL is displayed.
-
- // Could be undefined for default configurations.
- const evmNetworkConfigurations = getNetworkConfigurations(state);
- const evmNetworkConfiguration =
- // id will always be defined for custom networks.
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- evmNetworkConfigurations?.[evmNetwork.id!];
- nickname =
- evmNetworkConfiguration?.nickname ??
- evmNetwork.nickname ??
- // rpcUrl will always be defined for custom networks.
- // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- evmNetwork.rpcUrl!;
- } else {
- // These are the default networks, they do not have nicknames
-
- // Nickname is "optional", so it might be undefined here
- nickname = NETWORK_TO_NAME_MAP[evmNetwork.type];
- }
+ evmNetwork.rpcPrefs = {
+ ...evmNetwork.rpcPrefs,
+ imageUrl: CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[evmChainIdKey],
+ };
+
+ const networkConfigurations = getNetworkConfigurationsByChainId(state);
return {
- // Current behavior is to display RPC URL as nickname if its not defined.
- nickname,
+ nickname: networkConfigurations[evmChainId]?.name ?? evmNetwork.rpcUrl,
isEvmNetwork: true,
// We assume the chain ID is `string` or `number`, so we convert it to a
// `Number` to be compliant with EIP155 CAIP chain ID
@@ -332,7 +298,7 @@ export function getMultichainDefaultToken(
) {
const symbol = getMultichainIsEvm(state, account)
? // We fallback to 'ETH' to keep original behavior of `getSwapsDefaultToken`
- getProviderConfig(state).ticker ?? 'ETH'
+ getProviderConfig(state)?.ticker ?? 'ETH'
: getMultichainProviderConfig(state, account).ticker;
return { symbol };
diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js
index 96c956d72223..38caa10dc3ab 100644
--- a/ui/selectors/selectors.js
+++ b/ui/selectors/selectors.js
@@ -11,6 +11,7 @@ import { createSelector } from 'reselect';
import { NameType } from '@metamask/name-controller';
import { TransactionStatus } from '@metamask/transaction-controller';
import { isEvmAccountType } from '@metamask/keyring-api';
+import { RpcEndpointType } from '@metamask/network-controller';
import { addHexPrefix, getEnvironmentType } from '../../app/scripts/lib/util';
import {
TEST_CHAINS,
@@ -24,19 +25,14 @@ import {
NetworkStatus,
SEPOLIA_DISPLAY_NAME,
GOERLI_DISPLAY_NAME,
- ETH_TOKEN_IMAGE_URL,
LINEA_GOERLI_DISPLAY_NAME,
- CURRENCY_SYMBOLS,
- TEST_NETWORK_TICKER_MAP,
LINEA_MAINNET_DISPLAY_NAME,
- LINEA_MAINNET_TOKEN_IMAGE_URL,
CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
ARBITRUM_DISPLAY_NAME,
OPTIMISM_DISPLAY_NAME,
BASE_DISPLAY_NAME,
ZK_SYNC_ERA_DISPLAY_NAME,
CHAIN_ID_TOKEN_IMAGE_MAP,
- LINEA_SEPOLIA_TOKEN_IMAGE_URL,
LINEA_SEPOLIA_DISPLAY_NAME,
CRONOS_DISPLAY_NAME,
CELO_DISPLAY_NAME,
@@ -45,7 +41,6 @@ import {
POLYGON_ZKEVM_DISPLAY_NAME,
MOONBEAM_DISPLAY_NAME,
MOONRIVER_DISPLAY_NAME,
- BUILT_IN_NETWORKS,
TEST_NETWORK_IDS,
} from '../../shared/constants/network';
import {
@@ -656,103 +651,13 @@ export function getNeverShowSwitchedNetworkMessage(state) {
return state.metamask.switchedNetworkNeverShowMessage;
}
-export const getNonTestNetworks = createDeepEqualSelector(
- getNetworkConfigurations,
- (networkConfigurations = {}) => {
- 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,
- id: NETWORK_TYPES.MAINNET,
- removable: false,
- blockExplorerUrl:
- BUILT_IN_NETWORKS[NETWORK_TYPES.MAINNET].blockExplorerUrl,
- },
- {
- 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: CURRENCY_SYMBOLS.ETH,
- id: NETWORK_TYPES.LINEA_MAINNET,
- removable: false,
- blockExplorerUrl:
- BUILT_IN_NETWORKS[NETWORK_TYPES.LINEA_MAINNET].blockExplorerUrl,
- },
- // Custom networks added by the user
- ...Object.values(networkConfigurations)
- .filter(({ chainId }) => ![CHAIN_IDS.LOCALHOST].includes(chainId))
- .map((network) => ({
- ...network,
- blockExplorerUrl: network.rpcPrefs?.blockExplorerUrl,
- rpcPrefs: {
- ...network.rpcPrefs,
- // Provide an image based on chainID if a network
- // has been added without an image
- imageUrl:
- network?.rpcPrefs?.imageUrl ??
- CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[network.chainId],
- },
- removable: true,
- })),
- ];
- },
-);
-
-export const getTestNetworks = createDeepEqualSelector(
- getNetworkConfigurations,
- (networkConfigurations = {}) => {
- return [
- {
- chainId: CHAIN_IDS.SEPOLIA,
- nickname: SEPOLIA_DISPLAY_NAME,
- rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.SEPOLIA],
- providerType: NETWORK_TYPES.SEPOLIA,
- ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.SEPOLIA],
- id: NETWORK_TYPES.SEPOLIA,
- removable: false,
- },
- {
- chainId: CHAIN_IDS.LINEA_SEPOLIA,
- nickname: LINEA_SEPOLIA_DISPLAY_NAME,
- rpcUrl: CHAIN_ID_TO_RPC_URL_MAP[CHAIN_IDS.LINEA_SEPOLIA],
- rpcPrefs: {
- imageUrl: LINEA_SEPOLIA_TOKEN_IMAGE_URL,
- },
- providerType: NETWORK_TYPES.LINEA_SEPOLIA,
- ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.LINEA_SEPOLIA],
- id: NETWORK_TYPES.LINEA_SEPOLIA,
- removable: false,
- },
- // Localhosts
- ...Object.values(networkConfigurations)
- .filter(({ chainId }) => chainId === CHAIN_IDS.LOCALHOST)
- .map((network) => ({ ...network, removable: true })),
- ];
- },
-);
-
-export const getAllNetworks = createDeepEqualSelector(
- getNonTestNetworks,
- getTestNetworks,
- (nonTestNetworks, testNetworks) => {
- return [
- // Mainnet and custom networks
- ...nonTestNetworks,
- // Test networks
- ...testNetworks,
- ];
- },
+export const getNetworkConfigurationsByChainId = createDeepEqualSelector(
+ (state) => state.metamask.networkConfigurationsByChainId,
+ /**
+ * @param networkConfigurationsByChainId
+ * @returns { import('@metamask/network-controller').NetworkState['networkConfigurationsByChainId']}
+ */
+ (networkConfigurationsByChainId) => networkConfigurationsByChainId,
);
export function getRequestingNetworkInfo(state, chainIds) {
@@ -767,12 +672,11 @@ export function getRequestingNetworkInfo(state, chainIds) {
// Ensure chainIds is flattened if it contains nested arrays
const flattenedChainIds = processedChainIds.flat();
- // Get the non-test networks from the state
- const nonTestNetworks = getNonTestNetworks(state);
-
// Filter the non-test networks to include only those with chainId in flattenedChainIds
- return nonTestNetworks.filter((network) =>
- flattenedChainIds.includes(network.chainId),
+ return Object.values(getNetworkConfigurationsByChainId(state)).filter(
+ (network) =>
+ !TEST_CHAINS.includes(network.chainId) &&
+ flattenedChainIds.includes(network.chainId),
);
}
@@ -784,15 +688,20 @@ export function getRequestingNetworkInfo(state, chainIds) {
*/
export function getSwitchedNetworkDetails(state) {
const { switchedNetworkDetails } = state.metamask;
- const allNetworks = getAllNetworks(state);
+ const networkConfigurations = getNetworkConfigurationsByChainId(state);
if (switchedNetworkDetails) {
- const switchedNetwork = allNetworks.find(
- ({ id }) => switchedNetworkDetails.networkClientId === id,
+ const switchedNetwork = Object.values(networkConfigurations).find(
+ (network) =>
+ network.rpcEndpoints.some(
+ (rpcEndpoint) =>
+ rpcEndpoint.networkClientId ===
+ switchedNetworkDetails.networkClientId,
+ ),
);
return {
- nickname: switchedNetwork?.nickname,
- imageUrl: switchedNetwork?.rpcPrefs?.imageUrl,
+ nickname: switchedNetwork?.name,
+ imageUrl: CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[switchedNetwork?.chainId],
origin: switchedNetworkDetails?.origin,
};
}
@@ -800,20 +709,6 @@ export function getSwitchedNetworkDetails(state) {
return null;
}
-export function getNetworkDetails(state, chainId) {
- const allNetworks = getAllNetworks(state);
- if (chainId) {
- const network = allNetworks.find(({ chainId: id }) => chainId === id);
- return {
- nickname: network?.nickname,
- imageUrl: network?.rpcPrefs?.imageUrl,
- origin: network?.origin,
- };
- }
-
- return null;
-}
-
export function getAppIsLoading(state) {
return state.appState.isLoading;
}
@@ -1835,6 +1730,10 @@ export function getSortedAnnouncementsToShow(state) {
return announcementsSortedByDate;
}
+/**
+ * @param state
+ * @returns {{networkId: string}[]}
+ */
export function getOrderedNetworksList(state) {
return state.metamask.orderedNetworkList;
}
@@ -1881,13 +1780,14 @@ export function getNumberOfAllUnapprovedTransactionsAndMessages(state) {
}
export const getCurrentNetwork = createDeepEqualSelector(
- getAllNetworks,
- getProviderConfig,
+ getNetworkConfigurationsByChainId,
+ getCurrentChainId,
+
/**
* Get the current network configuration.
*
- * @param {Record[]} allNetworks - All network configurations.
- * @param {Record} providerConfig - The configuration for the current network's provider.
+ * @param networkConfigurationsByChainId
+ * @param currentChainId
* @returns {{
* chainId: `0x${string}`;
* id?: string;
@@ -1898,40 +1798,53 @@ export const getCurrentNetwork = createDeepEqualSelector(
* ticker: string;
* }} networkConfiguration - Configuration for the current network.
*/
- (allNetworks, providerConfig) => {
- const filter =
- providerConfig.type === 'rpc'
- ? (network) => network.id === providerConfig.id
- : (network) => network.id === providerConfig.type;
- return (
- allNetworks.find(filter) ?? {
- chainId: providerConfig.chainId,
- nickname: providerConfig.nickname,
- rpcPrefs: providerConfig.rpcPrefs,
- rpcUrl: providerConfig.rpcUrl,
- ticker: providerConfig.ticker,
- }
- );
+ (networkConfigurationsByChainId, currentChainId) => {
+ const currentNetwork = networkConfigurationsByChainId[currentChainId];
+
+ const rpcEndpoint =
+ currentNetwork.rpcEndpoints[currentNetwork.defaultRpcEndpointIndex];
+
+ const blockExplorerUrl =
+ currentNetwork.blockExplorerUrls?.[
+ currentNetwork.defaultBlockExplorerUrlIndex
+ ];
+
+ return {
+ chainId: currentNetwork.chainId,
+ id: rpcEndpoint.networkClientId,
+ nickname: currentNetwork.name,
+ rpcUrl: rpcEndpoint.url,
+ ticker: currentNetwork.nativeCurrency,
+ blockExplorerUrl,
+ rpcPrefs: {
+ blockExplorerUrl,
+ imageUrl: CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[currentNetwork.chainId],
+ },
+ ...(rpcEndpoint.type === RpcEndpointType.Infura && {
+ providerType: rpcEndpoint.networkClientId,
+ }),
+ };
},
);
export const getConnectedSitesListWithNetworkInfo = createDeepEqualSelector(
getConnectedSitesList,
getAllDomains,
- getAllNetworks,
+ getNetworkConfigurationsByChainId,
getCurrentNetwork,
(sitesList, domains, networks, currentNetwork) => {
Object.keys(sitesList).forEach((siteKey) => {
- const connectedNetwork = networks.find(
- (network) => network.id === domains[siteKey],
+ const connectedNetwork = Object.values(networks).find((network) =>
+ network.rpcEndpoints.some(
+ (rpcEndpoint) => rpcEndpoint.networkClientId === domains[siteKey],
+ ),
);
+
// For the testnets, if we do not have an image, we will have a fallback string
sitesList[siteKey].networkIconUrl =
- connectedNetwork?.rpcPrefs?.imageUrl ||
- currentNetwork?.rpcPrefs?.imageUrl ||
- '';
+ CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[connectedNetwork?.chainId] || '';
sitesList[siteKey].networkName =
- connectedNetwork?.nickname || currentNetwork?.nickname || '';
+ connectedNetwork?.name || currentNetwork?.nickname || '';
});
return sitesList;
},
@@ -2143,27 +2056,37 @@ export function getNewNetworkAdded(state) {
/**
* @param state
- * @returns {{ networkConfigurationId: string; nickname: string; editCompleted: boolean} | undefined}
+ * @returns {{ chainId: import('@metamask/utils').Hex; nickname: string; editCompleted: boolean} | undefined}
*/
export function getEditedNetwork(state) {
return state.appState.editedNetwork;
}
-export function getNetworksTabSelectedNetworkConfigurationId(state) {
- return state.appState.selectedNetworkConfigurationId;
+export function getIsAddingNewNetwork(state) {
+ return state.appState.isAddingNewNetwork;
+}
+
+export function getIsMultiRpcOnboarding(state) {
+ return state.appState.isMultiRpcOnboarding;
}
-export function getNetworkConfigurations(state) {
- return state.metamask.networkConfigurations;
+export function getNetworksTabSelectedNetworkConfigurationId(state) {
+ return state.appState.selectedNetworkConfigurationId;
}
export const getAllEnabledNetworks = createDeepEqualSelector(
- getNonTestNetworks,
- getAllNetworks,
+ getNetworkConfigurationsByChainId,
getShowTestNetworks,
- (nonTestNetworks, allNetworks, showTestnetNetworks) => {
- return showTestnetNetworks ? allNetworks : nonTestNetworks;
- },
+ (networkConfigurationsByChainId, showTestNetworks) =>
+ Object.entries(networkConfigurationsByChainId).reduce(
+ (acc, [chainId, network]) => {
+ if (showTestNetworks || !TEST_CHAINS.includes(chainId)) {
+ acc[chainId] = network;
+ }
+ return acc;
+ },
+ {},
+ ),
);
/**
diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js
index a46fdcaedb0b..342e7d7187c8 100644
--- a/ui/selectors/selectors.test.js
+++ b/ui/selectors/selectors.test.js
@@ -4,16 +4,12 @@ import { EthAccountType, EthMethod } from '@metamask/keyring-api';
import { TransactionStatus } from '@metamask/transaction-controller';
import mockState from '../../test/data/mock-state.json';
import { KeyringType } from '../../shared/constants/keyring';
-import {
- CHAIN_IDS,
- LOCALHOST_DISPLAY_NAME,
- NETWORK_TYPES,
- OPTIMISM_DISPLAY_NAME,
-} from '../../shared/constants/network';
+import { CHAIN_IDS, NETWORK_TYPES } from '../../shared/constants/network';
import { SURVEY_DATE, SURVEY_GMT } from '../helpers/constants/survey';
import { PRIVACY_POLICY_DATE } from '../helpers/constants/privacy-policy';
import { createMockInternalAccount } from '../../test/jest/mocks';
import { ETH_EOA_METHODS } from '../../shared/constants/eth-methods';
+import { getProviderConfig } from '../ducks/metamask/metamask';
import { mockNetworkState } from '../../test/stub/networks';
import * as selectors from './selectors';
@@ -185,7 +181,10 @@ describe('Selectors', () => {
it('returns no details when switchedNetworkDetails is empty', () => {
expect(
selectors.getSwitchedNetworkDetails({
- metamask: { switchedNetworkDetails: undefined },
+ metamask: {
+ ...mockState.metamask,
+ switchedNetworkDetails: undefined,
+ },
}),
).toStrictEqual(null);
});
@@ -193,47 +192,38 @@ describe('Selectors', () => {
it('returns network information when valid switchedNetworkDetails are present', () => {
const origin = 'portfolio.metamask.io';
- expect(
- selectors.getSwitchedNetworkDetails({
- ...mockState,
- metamask: {
- ...mockState.metamask,
- switchedNetworkDetails: {
- networkClientId:
- mockState.metamask.networkConfigurations
- .testNetworkConfigurationId.id,
- origin,
+ const state = {
+ ...mockState,
+ metamask: {
+ ...mockState.metamask,
+ selectedNetworkClientId: 'testNetworkConfigurationId',
+
+ networkConfigurationsByChainId: {
+ '0x1': {
+ chainId: '0x1',
+ name: 'Custom Mainnet RPC',
+ nativeCurrency: 'ETH',
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: 'https://testrpc.com',
+ networkClientId: 'testNetworkConfigurationId',
+ type: 'custom',
+ },
+ ],
},
},
- }),
- ).toStrictEqual({
- imageUrl: './images/eth_logo.svg',
- nickname:
- mockState.metamask.networkConfigurations.testNetworkConfigurationId
- .nickname,
- origin,
- });
- });
- });
-
- describe('#getNetworkDetails', () => {
- it('returns no details when chainId is undefined', () => {
- expect(selectors.getNetworkDetails(mockState, undefined)).toStrictEqual(
- null,
- );
- });
+ switchedNetworkDetails: {
+ networkClientId: 'testNetworkConfigurationId',
+ origin,
+ },
+ },
+ };
- it('returns network information when valid chainId is present', () => {
- expect(
- selectors.getNetworkDetails(
- mockState,
- mockState.metamask.networkConfigurations.testNetworkConfigurationId
- .chainId,
- ),
- ).toStrictEqual({
+ expect(selectors.getSwitchedNetworkDetails(state)).toStrictEqual({
imageUrl: './images/eth_logo.svg',
- nickname: 'Ethereum Mainnet',
- origin: undefined,
+ nickname: getProviderConfig(state).nickname,
+ origin,
});
});
});
@@ -298,6 +288,12 @@ describe('Selectors', () => {
expect(
selectors.getNumberOfAllUnapprovedTransactionsAndMessages({
metamask: {
+ networkConfigurationsByChainId: {
+ [CHAIN_IDS.MAINNET]: {
+ chainId: CHAIN_IDS.MAINNET,
+ rpcEndpoints: [{}],
+ },
+ },
transactions: [
{
id: 0,
@@ -347,12 +343,23 @@ describe('Selectors', () => {
domains: {
[SELECTED_ORIGIN]: SELECTED_ORIGIN_NETWORK_ID,
},
+ networkConfigurationsByChainId: {
+ [CHAIN_IDS.MAINNET]: {
+ chainId: CHAIN_IDS.MAINNET,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: 'https://testrpc.com',
+ networkClientId: mockState.metamask.selectedNetworkClientId,
+ },
+ ],
+ },
+ },
queuedRequestCount: 0,
transactions: [],
- selectedNetworkClientId:
- mockState.metamask.networkConfigurations.testNetworkConfigurationId
- .id,
- networkConfigurations: mockState.metamask.networkConfigurations,
+ selectedNetworkClientId: mockState.metamask.selectedNetworkClientId,
+ // networkConfigurations:
+ // mockState.metamask.networkConfigurationsByChainId,
},
};
@@ -367,7 +374,20 @@ describe('Selectors', () => {
...state,
metamask: {
...state.metamask,
- selectedNetworkClientId: NETWORK_TYPES.LINEA_SEPOLIA,
+ selectedNetworkClientId: 'linea-sepolia',
+ networkConfigurationsByChainId: {
+ [CHAIN_IDS.LINEA_SEPOLIA]: {
+ chainId: CHAIN_IDS.LINEA_SEPOLIA,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: 'https://testrpc.com',
+ networkClientId: 'linea-sepolia',
+ type: 'custom',
+ },
+ ],
+ },
+ },
},
});
expect(networkToSwitchTo).toBe(null);
@@ -379,6 +399,19 @@ describe('Selectors', () => {
metamask: {
...state.metamask,
selectedNetworkClientId: NETWORK_TYPES.LINEA_SEPOLIA,
+ networkConfigurationsByChainId: {
+ [CHAIN_IDS.LINEA_SEPOLIA]: {
+ chainId: CHAIN_IDS.LINEA_SEPOLIA,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: 'https://testrpc.com',
+ networkClientId: 'linea-sepolia',
+ type: 'custom',
+ },
+ ],
+ },
+ },
transactions: [
{
id: 0,
@@ -646,129 +679,42 @@ describe('Selectors', () => {
});
});
- describe('#getNetworkConfigurations', () => {
- it('returns undefined if state.metamask.networkConfigurations is undefined', () => {
- expect(
- selectors.getNetworkConfigurations({
- metamask: {},
- }),
- ).toBeUndefined();
- });
-
- it('returns networkConfigurations', () => {
- const networkConfigurations = {
- testNetworkConfigurationId1: {
- rpcUrl: 'https://mock-rpc-url-1',
+ describe('#getNetworkConfigurationsByChainId', () => {
+ it('returns networkConfigurationsByChainId', () => {
+ const networkConfigurationsByChainId = {
+ '0xtest': {
chainId: '0xtest',
- ticker: 'TEST',
- id: 'testNetworkConfigurationId1',
+ nativeCurrency: 'TEST',
+ defaultRpcEndpointUrl: 'https://mock-rpc-url-1',
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'testNetworkConfigurationId1',
+ url: 'https://mock-rpc-url-1',
+ },
+ ],
},
- testNetworkConfigurationId2: {
- rpcUrl: 'https://mock-rpc-url-2',
+ '0x1337': {
chainId: '0x1337',
- ticker: 'RPC',
- id: 'testNetworkConfigurationId2',
+ nativeCurrency: 'RPC',
+ defaultRpcEndpointUrl: 'https://mock-rpc-url-2',
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ networkClientId: 'testNetworkConfigurationId2',
+ url: 'https://mock-rpc-url-2',
+ },
+ ],
},
};
+
expect(
- selectors.getNetworkConfigurations({
+ selectors.getNetworkConfigurationsByChainId({
metamask: {
- networkConfigurations,
+ networkConfigurationsByChainId,
},
}),
- ).toStrictEqual(networkConfigurations);
- });
- });
-
- describe('#getNonTestNetworks', () => {
- it('returns nonTestNetworks', () => {
- const nonTestNetworks = selectors.getNonTestNetworks({
- metamask: {},
- });
-
- // Assert that the `nonTestNetworks` array returned by the selector matches a specific structure.
- expect(nonTestNetworks).toStrictEqual(
- expect.arrayContaining([
- expect.objectContaining({
- chainId: expect.any(String),
- nickname: expect.any(String),
- rpcUrl: expect.any(String),
- rpcPrefs: expect.objectContaining({
- imageUrl: expect.any(String),
- }),
- providerType: expect.any(String),
- ticker: expect.any(String),
- id: expect.any(String),
- removable: expect.any(Boolean),
- }),
- ]),
- );
-
- // Verify that each network object has a 'ticker' property that is not undefined
- nonTestNetworks.forEach((network) => {
- expect(network.ticker).toBeDefined();
- });
- });
- });
- describe('#getAllNetworks', () => {
- it('sorts Localhost to the bottom of the test lists', () => {
- const networks = selectors.getAllNetworks({
- metamask: {
- preferences: {
- showTestNetworks: true,
- },
- ...mockNetworkState({
- chainId: CHAIN_IDS.LOCALHOST,
- nickname: LOCALHOST_DISPLAY_NAME,
- }),
- },
- });
- const lastItem = networks.pop();
- expect(lastItem.nickname.toLowerCase()).toContain('localhost');
- });
-
- it('properly assigns a network as removable', () => {
- const networks = selectors.getAllNetworks({
- metamask: {
- preferences: {
- showTestNetworks: true,
- },
- ...mockNetworkState({
- chainId: CHAIN_IDS.LOCALHOST,
- nickname: LOCALHOST_DISPLAY_NAME,
- id: 'some-config-name',
- }),
- },
- });
-
- const mainnet = networks.find(
- (network) => network.id === NETWORK_TYPES.MAINNET,
- );
- expect(mainnet.removable).toBe(false);
-
- const customNetwork = networks.find(
- (network) => network.id === 'some-config-name',
- );
- expect(customNetwork.removable).toBe(true);
- });
-
- it('properly proposes a known network image when not provided by adding function', () => {
- const networks = selectors.getAllNetworks({
- metamask: {
- preferences: {
- showTestNetworks: true,
- },
- ...mockNetworkState({
- chainId: CHAIN_IDS.OPTIMISM,
- nickname: OPTIMISM_DISPLAY_NAME,
- }),
- },
- });
-
- const optimismConfig = networks.find(
- ({ chainId }) => chainId === CHAIN_IDS.OPTIMISM,
- );
- expect(optimismConfig.rpcPrefs.imageUrl).toBe('./images/optimism.svg');
+ ).toStrictEqual(networkConfigurationsByChainId);
});
});
@@ -779,18 +725,23 @@ describe('Selectors', () => {
metamask: {
...mockState.metamask,
selectedNetworkClientId: NETWORK_TYPES.SEPOLIA,
+ blockExplorerUrls: [],
+ ...mockNetworkState({ chainId: CHAIN_IDS.SEPOLIA, id: 'sepolia' }),
},
};
const currentNetwork = selectors.getCurrentNetwork(modifiedMockState);
expect(currentNetwork).toMatchInlineSnapshot(`
{
+ "blockExplorerUrl": "https://localhost/blockExplorer/0xaa36a7",
"chainId": "0xaa36a7",
"id": "sepolia",
"nickname": "Sepolia",
- "providerType": "sepolia",
- "removable": false,
- "rpcUrl": "https://sepolia.infura.io/v3/undefined",
+ "rpcPrefs": {
+ "blockExplorerUrl": "https://localhost/blockExplorer/0xaa36a7",
+ "imageUrl": undefined,
+ },
+ "rpcUrl": "https://localhost/rpc/0xaa36a7",
"ticker": "SepoliaETH",
}
`);
@@ -820,8 +771,8 @@ describe('Selectors', () => {
"chainId": "0x9999",
"id": "mock-network-config-id",
"nickname": undefined,
- "removable": true,
"rpcPrefs": {
+ "blockExplorerUrl": undefined,
"imageUrl": undefined,
},
"rpcUrl": "https://mock-rpc-endpoint.test",
@@ -835,9 +786,22 @@ describe('Selectors', () => {
...mockState,
metamask: {
...mockState.metamask,
- selectedNetworkClientId:
- mockState.metamask.networkConfigurations.testNetworkConfigurationId
- .id,
+ selectedNetworkClientId: 'testNetworkConfigurationId',
+ networkConfigurationsByChainId: {
+ '0x1': {
+ chainId: '0x1',
+ name: 'Custom Mainnet RPC',
+ nativeCurrency: 'ETH',
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [
+ {
+ url: 'https://testrpc.com',
+ networkClientId: 'testNetworkConfigurationId',
+ type: 'custom',
+ },
+ ],
+ },
+ },
},
};
@@ -860,15 +824,37 @@ describe('Selectors', () => {
});
describe('#getAllEnabledNetworks', () => {
+ const networkConfigurationsByChainId = {
+ [CHAIN_IDS.MAINNET]: {
+ chainId: CHAIN_IDS.MAINNET,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [{ networkClientId: 'mainnet' }],
+ },
+ [CHAIN_IDS.LINEA_MAINNET]: {
+ chainId: CHAIN_IDS.LINEA_MAINNET,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [{ networkClientId: 'linea-mainnet' }],
+ },
+ [CHAIN_IDS.SEPOLIA]: {
+ chainId: CHAIN_IDS.SEPOLIA,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [{ networkClientId: 'sepolia' }],
+ },
+ [CHAIN_IDS.LINEA_SEPOLIA]: {
+ chainId: CHAIN_IDS.LINEA_SEPOLIA,
+ defaultRpcEndpointIndex: 0,
+ rpcEndpoints: [{ networkClientId: 'linea-sepolia' }],
+ },
+ };
+
it('returns only Mainnet and Linea with showTestNetworks off', () => {
const networks = selectors.getAllEnabledNetworks({
metamask: {
- preferences: {
- showTestNetworks: false,
- },
+ preferences: { showTestNetworks: false },
+ networkConfigurationsByChainId,
},
});
- expect(networks).toHaveLength(2);
+ expect(Object.values(networks)).toHaveLength(2);
});
it('returns networks with showTestNetworks on', () => {
@@ -877,9 +863,11 @@ describe('Selectors', () => {
preferences: {
showTestNetworks: true,
},
+ networkConfigurationsByChainId,
},
});
- expect(networks.length).toBeGreaterThan(2);
+
+ expect(Object.values(networks).length).toBeGreaterThan(2);
});
});
@@ -1015,6 +1003,10 @@ describe('Selectors', () => {
...mockState,
metamask: {
...mockState.metamask,
+ ...mockNetworkState({
+ chainId: CHAIN_IDS.GOERLI,
+ metadata: { EIPS: { 1559: true } },
+ }),
keyrings: [
{
type: KeyringType.ledger,
@@ -1910,29 +1902,35 @@ describe('#getConnectedSitesListWithNetworkInfo', () => {
const networks = [
{
id: 'network1',
- rpcPrefs: {
- imageUrl: 'network1-icon.png',
- },
- nickname: 'Network 1',
+ chainId: '0x1',
+ name: 'Network 1',
+ rpcEndpoints: [
+ {
+ networkClientId: 'network1',
+ },
+ ],
},
{
id: 'network2',
- rpcPrefs: {
- imageUrl: 'network2-icon.png',
- },
- nickname: 'Network 2',
+ chainId: '0x38',
+ name: 'Network 2',
+ rpcEndpoints: [
+ {
+ networkClientId: 'network2',
+ },
+ ],
},
];
const expectedSitesList = {
site1: {
id: 'site1',
- networkIconUrl: 'network1-icon.png',
+ networkIconUrl: './images/eth_logo.svg',
networkName: 'Network 1',
},
site2: {
id: 'site2',
- networkIconUrl: 'network2-icon.png',
+ networkIconUrl: './images/bnb.svg',
networkName: 'Network 2',
},
};
diff --git a/ui/store/actions.test.js b/ui/store/actions.test.js
index 213fa3fcf6c8..1604f5361eda 100644
--- a/ui/store/actions.test.js
+++ b/ui/store/actions.test.js
@@ -23,6 +23,12 @@ const middleware = [thunk];
const defaultState = {
metamask: {
currentLocale: 'test',
+ networkConfigurationsByChainId: {
+ [CHAIN_IDS.MAINNET]: {
+ chainId: CHAIN_IDS.MAINNET,
+ rpcEndpoints: [{}],
+ },
+ },
accounts: {
'0xFirstAddress': {
balance: '0x0',
@@ -1015,63 +1021,87 @@ describe('Actions', () => {
});
});
- describe('#upsertNetworkConfiguration', () => {
+ describe('updateNetwork', () => {
afterEach(() => {
sinon.restore();
});
- it('calls upsertNetworkConfiguration in the background with the correct arguments', async () => {
+ it('calls updateNetwork in the background with the correct arguments', async () => {
const store = mockStore();
- const upsertNetworkConfigurationStub = sinon
- .stub()
- .callsFake((_, cb) => cb());
+ const updateNetworkStub = sinon.stub().callsFake((_, cb) => cb());
background.getApi.returns({
- upsertNetworkConfiguration: upsertNetworkConfigurationStub,
+ updateNetwork: updateNetworkStub,
});
setBackgroundConnection(background.getApi());
const networkConfiguration = {
- id: 'networkConfigurationId',
rpcUrl: 'newRpc',
chainId: '0x',
- ticker: 'ETH',
- nickname: 'nickname',
- rpcPrefs: { blockExplorerUrl: 'etherscan.io' },
+ nativeCurrency: 'ETH',
+ name: 'nickname',
+ rpcEndpoints: [{ blockExplorerUrl: 'etherscan.io' }],
};
await store.dispatch(
- actions.upsertNetworkConfiguration(networkConfiguration, {
+ actions.updateNetwork(networkConfiguration, {
source: MetaMetricsNetworkEventSource.CustomNetworkForm,
}),
);
expect(
- upsertNetworkConfigurationStub.calledOnceWith(networkConfiguration, {
- referrer: ORIGIN_METAMASK,
- source: MetaMetricsNetworkEventSource.CustomNetworkForm,
- setActive: undefined,
- }),
+ updateNetworkStub.calledOnceWith(
+ '0x',
+ {
+ rpcUrl: 'newRpc',
+ chainId: '0x',
+ nativeCurrency: 'ETH',
+ name: 'nickname',
+ rpcEndpoints: [{ blockExplorerUrl: 'etherscan.io' }],
+ },
+ { source: MetaMetricsNetworkEventSource.CustomNetworkForm },
+ ),
).toBe(true);
});
- it('throws when no options object is passed as a second argument', async () => {
+ it('updateNetwork has empty object for default options', async () => {
const store = mockStore();
- await expect(() =>
- store.dispatch(
- actions.upsertNetworkConfiguration({
+
+ const updateNetworkStub = sinon.stub().callsFake((_, cb) => cb());
+
+ background.getApi.returns({
+ updateNetwork: updateNetworkStub,
+ });
+ setBackgroundConnection(background.getApi());
+
+ const networkConfiguration = {
+ id: 'networkConfigurationId',
+ rpcUrl: 'newRpc',
+ chainId: '0x',
+ ticker: 'ETH',
+ nickname: 'nickname',
+ rpcPrefs: { blockExplorerUrl: 'etherscan.io' },
+ };
+
+ await store.dispatch(
+ actions.updateNetwork(networkConfiguration, undefined),
+ );
+
+ expect(
+ updateNetworkStub.calledOnceWith(
+ '0x',
+ {
id: 'networkConfigurationId',
rpcUrl: 'newRpc',
chainId: '0x',
ticker: 'ETH',
nickname: 'nickname',
rpcPrefs: { blockExplorerUrl: 'etherscan.io' },
- }),
+ },
+ {},
),
- ).toThrow(
- "Cannot destructure property 'setActive' of 'undefined' as it is undefined.",
- );
+ ).toBe(true);
});
});
@@ -1116,31 +1146,25 @@ describe('Actions', () => {
});
});
- describe('#removeNetworkConfiguration', () => {
+ describe('removeNetwork', () => {
afterEach(() => {
sinon.restore();
});
- it('calls removeNetworkConfiguration in the background with the correct arguments', async () => {
+ it('calls removeNetwork in the background with the correct arguments', async () => {
const store = mockStore();
- const removeNetworkConfigurationStub = sinon
- .stub()
- .callsFake((_, cb) => cb());
+ const removeNetworkStub = sinon.stub().callsFake((_, cb) => cb());
background.getApi.returns({
- removeNetworkConfiguration: removeNetworkConfigurationStub,
+ removeNetwork: removeNetworkStub,
});
setBackgroundConnection(background.getApi());
- await store.dispatch(
- actions.removeNetworkConfiguration('testNetworkConfigurationId'),
- );
+ await store.dispatch(actions.removeNetwork('testNetworkConfigurationId'));
expect(
- removeNetworkConfigurationStub.calledOnceWith(
- 'testNetworkConfigurationId',
- ),
+ removeNetworkStub.calledOnceWith('testNetworkConfigurationId'),
).toBe(true);
});
});
diff --git a/ui/store/actions.ts b/ui/store/actions.ts
index c3d234100a1a..a5363411a0e5 100644
--- a/ui/store/actions.ts
+++ b/ui/store/actions.ts
@@ -32,6 +32,7 @@ import {
TransactionType,
} from '@metamask/transaction-controller';
import {
+ AddNetworkFields,
NetworkClientId,
NetworkConfiguration,
} from '@metamask/network-controller';
@@ -105,8 +106,6 @@ import {
} from '../../shared/modules/i18n';
import { decimalToHex } from '../../shared/modules/conversion.utils';
import { TxGasFees, PriorityLevels } from '../../shared/constants/gas';
-import { RPCDefinition } from '../../shared/constants/network';
-import { EtherDenomination } from '../../shared/constants/common';
import {
isErrorWithMessage,
logErrorWithMessage,
@@ -2336,59 +2335,40 @@ export function createRetryTransaction(
};
}
-//
-// config
-//
+export function addNetwork(
+ networkConfiguration: AddNetworkFields | UpdateNetworkFields,
+): ThunkAction, MetaMaskReduxState, unknown, AnyAction> {
+ return async (dispatch: MetaMaskReduxDispatch) => {
+ log.debug(`background.addNetwork`, networkConfiguration);
+ try {
+ return await submitRequestToBackground('addNetwork', [
+ networkConfiguration,
+ ]);
+ } catch (error) {
+ logErrorWithMessage(error);
+ dispatch(displayWarning('Had a problem adding networks!'));
+ }
+ return undefined;
+ };
+}
-export function upsertNetworkConfiguration(
- {
- id,
- rpcUrl,
- chainId,
- nickname,
- rpcPrefs,
- ticker = EtherDenomination.ETH,
- }: {
- id?: string;
- rpcUrl: string;
- chainId: string;
- nickname: string;
- rpcPrefs: RPCDefinition['rpcPrefs'];
- ticker: string;
- },
- {
- setActive,
- source,
- }: {
- setActive: boolean;
- source: string;
- },
-): ThunkAction {
- return async (dispatch) => {
- log.debug(
- `background.upsertNetworkConfiguration: ${id} ${rpcUrl} ${chainId} ${ticker} ${nickname}`,
- );
- let networkConfigurationId;
+export function updateNetwork(
+ networkConfiguration: AddNetworkFields | UpdateNetworkFields,
+ options: { replacementSelectedRpcEndpointIndex?: number } = {},
+): ThunkAction, MetaMaskReduxState, unknown, AnyAction> {
+ return async (dispatch: MetaMaskReduxDispatch) => {
+ log.debug(`background.updateNetwork`, networkConfiguration);
try {
- networkConfigurationId = await submitRequestToBackground(
- 'upsertNetworkConfiguration',
- [
- {
- id,
- rpcUrl,
- chainId,
- ticker,
- nickname: nickname || rpcUrl,
- rpcPrefs,
- },
- { setActive, source, referrer: ORIGIN_METAMASK },
- ],
- );
+ return await submitRequestToBackground('updateNetwork', [
+ networkConfiguration.chainId,
+ networkConfiguration,
+ options,
+ ]);
} catch (error) {
- log.error(error);
- dispatch(displayWarning('Had a problem adding network!'));
+ logErrorWithMessage(error);
+ dispatch(displayWarning('Had a problem updading networks!'));
}
- return networkConfigurationId;
+ return undefined;
};
}
@@ -2435,28 +2415,15 @@ export function rollbackToPreviousProvider(): ThunkAction<
};
}
-export function removeNetworkConfiguration(
- networkConfigurationId: string,
+export function removeNetwork(
+ chainId: Hex,
): ThunkAction, MetaMaskReduxState, unknown, AnyAction> {
- return (dispatch) => {
- log.debug(
- `background.removeNetworkConfiguration: ${networkConfigurationId}`,
- );
- return new Promise((resolve, reject) => {
- callBackgroundMethod(
- 'removeNetworkConfiguration',
- [networkConfigurationId],
- (err) => {
- if (err) {
- logErrorWithMessage(err);
- dispatch(displayWarning('Had a problem removing network!'));
- reject(err);
- return;
- }
- resolve();
- },
- );
- });
+ return async () => {
+ try {
+ await submitRequestToBackground('removeNetwork', [chainId]);
+ } catch (error) {
+ logErrorWithMessage(error);
+ }
};
}
@@ -3877,13 +3844,13 @@ export function removePermissionsFor(
/**
* Updates the order of networks after drag and drop
*
- * @param orderedNetworkList
+ * @param chainIds - An array of hexadecimal chain IDs
*/
export function updateNetworksList(
- orderedNetworkList: [],
+ chainIds: Hex[],
): ThunkAction {
return async () => {
- await submitRequestToBackground('updateNetworksList', [orderedNetworkList]);
+ await submitRequestToBackground('updateNetworksList', [chainIds]);
};
}
@@ -4035,9 +4002,9 @@ export function setEditedNetwork(
payload:
| {
chainId: string;
- networkConfigurationId?: string;
- nickname: string;
+ nickname?: string;
editCompleted?: boolean;
+ newNetwork?: boolean;
}
| undefined = undefined,
): PayloadAction
{
const t = useI18nContext();
+ const { currentConfirmation: transactionMeta } =
+ useConfirmContext();
+
+ const { isNFT } = useIsNFT(transactionMeta);
+
const decodedResponse = useDecodedTransactionData();
const { value, pending } = decodedResponse;
@@ -37,7 +45,9 @@ const Spender = () => {
<>
Date: Fri, 20 Sep 2024 19:21:48 +0800
Subject: [PATCH 5/7] fix: Redesign Signature Message date values (#27249)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
## **Description**
Fix date values:
- Formerly, conversations were converting values as if they were
milliseconds. However, these values come from Solidity where these
timestamps are unix timestamps in seconds.
- Support -1 (no expiration) value
- Display "expiry" as a date instead of a unix timestamp
This PR fixes the conversion.
[](https://codespaces.new/MetaMask/metamask-extension/pull/27249?quickstart=1)
## **Related issues**
Fixes: https://github.com/MetaMask/metamask-extension/issues/27137
## **Manual testing steps**
1. Go to test-dapp
2. Request Permit or another TypedSign request
3. Observe deadlines and dates
## **Screenshots/Recordings**
### **Before**
#### Test-dapp Permit
#### Deadline: -1
### **After**
#### Test-dapp Permit
#### Deadline: -1
## **Pre-merge author checklist**
- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
## **Pre-merge reviewer checklist**
- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
app/_locales/en/messages.json | 3 +
test/data/confirmations/typed_sign.ts | 19 +
.../confirmations/signatures/permit.spec.ts | 2 +-
.../app/confirm/info/row/date.stories.tsx | 4 +-
.../app/confirm/info/row/date.test.tsx | 4 +-
ui/components/app/confirm/info/row/date.tsx | 11 +-
ui/helpers/utils/util.js | 14 +-
ui/helpers/utils/util.test.js | 8 +-
.../personal-sign/siwe-sign/siwe-sign.tsx | 4 +-
.../__snapshots__/typed-sign.test.tsx.snap | 601 +++++++++++++++++-
.../info/typed-sign/typed-sign.test.tsx | 18 +
.../row/__snapshots__/dataTree.test.tsx.snap | 103 +++
.../components/confirm/row/dataTree.test.tsx | 13 +
.../components/confirm/row/dataTree.tsx | 23 +-
.../__snapshots__/confirm.test.tsx.snap | 12 +-
15 files changed, 812 insertions(+), 27 deletions(-)
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 5f7ae9a42121..119719b97090 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -3282,6 +3282,9 @@
"nonceFieldHeading": {
"message": "Custom nonce"
},
+ "none": {
+ "message": "None"
+ },
"notBusy": {
"message": "Not busy"
},
diff --git a/test/data/confirmations/typed_sign.ts b/test/data/confirmations/typed_sign.ts
index 8766fac9184c..f02705a2540b 100644
--- a/test/data/confirmations/typed_sign.ts
+++ b/test/data/confirmations/typed_sign.ts
@@ -183,6 +183,25 @@ export const permitSignatureMsg = {
},
} as SignatureRequestType;
+export const permitSignatureMsgWithNoDeadline = {
+ id: '0b1787a0-1c44-11ef-b70d-e7064bd7b659',
+ securityAlertResponse: {
+ reason: 'loading',
+ result_type: 'validation_in_progress',
+ securityAlertId: 'ab21395f-2190-472f-8cfa-3d224e7529d8',
+ },
+ status: 'unapproved',
+ time: 1716826404122,
+ type: 'eth_signTypedData',
+ msgParams: {
+ data: '{"types":{"EIP712Domain":[{"name":"name","type":"string"},{"name":"version","type":"string"},{"name":"chainId","type":"uint256"},{"name":"verifyingContract","type":"address"}],"Permit":[{"name":"owner","type":"address"},{"name":"spender","type":"address"},{"name":"value","type":"uint256"},{"name":"nonce","type":"uint256"},{"name":"deadline","type":"uint256"}]},"primaryType":"Permit","domain":{"name":"MyToken","version":"1","verifyingContract":"0xCcCCccccCCCCcCCCCCCcCcCccCcCCCcCcccccccC","chainId":1},"message":{"owner":"0x935e73edb9ff52e23bac7f7e043a1ecd06d05477","spender":"0x5B38Da6a701c568545dCfcB03FcB875f56beddC4","value":3000,"nonce":0,"deadline":-1}}',
+ from: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+ version: 'V4',
+ signatureMethod: 'eth_signTypedData_v4',
+ origin: 'https://metamask.github.io',
+ },
+} as SignatureRequestType;
+
export const permitBatchSignatureMsg = {
id: '0b1787a0-1c44-11ef-b70d-e7064bd7b659',
securityAlertResponse: {
diff --git a/test/e2e/tests/confirmations/signatures/permit.spec.ts b/test/e2e/tests/confirmations/signatures/permit.spec.ts
index f6d2a6866adb..8455a9fa8254 100644
--- a/test/e2e/tests/confirmations/signatures/permit.spec.ts
+++ b/test/e2e/tests/confirmations/signatures/permit.spec.ts
@@ -125,7 +125,7 @@ async function assertInfoValues(driver: Driver) {
});
const value = driver.findElement({ text: '3,000' });
const nonce = driver.findElement({ text: '0' });
- const deadline = driver.findElement({ text: '02 August 1971, 16:53' });
+ const deadline = driver.findElement({ text: '09 June 3554, 16:53' });
assert.ok(await origin, 'origin');
assert.ok(await contractPetName, 'contractPetName');
diff --git a/ui/components/app/confirm/info/row/date.stories.tsx b/ui/components/app/confirm/info/row/date.stories.tsx
index 971ba7624f3e..e0e6a9a07dec 100644
--- a/ui/components/app/confirm/info/row/date.stories.tsx
+++ b/ui/components/app/confirm/info/row/date.stories.tsx
@@ -18,9 +18,9 @@ const ConfirmInfoRowDateStory = {
},
};
-export const DefaultStory = ({ date }) => (
gap={2}
>
- {formatUTCDate(date)}
+ {formatUTCDateFromUnixTimestamp(unixTimestamp)}
);
diff --git a/ui/helpers/utils/util.js b/ui/helpers/utils/util.js
index 051dec05d1f9..2b021e89c399 100644
--- a/ui/helpers/utils/util.js
+++ b/ui/helpers/utils/util.js
@@ -39,13 +39,17 @@ export function formatDate(date, format = "M/d/y 'at' T") {
return DateTime.fromMillis(date).toFormat(format);
}
-export const formatUTCDate = (dateInMillis) => {
- if (!dateInMillis) {
- return dateInMillis;
+/**
+ * @param {number} unixTimestamp - timestamp as seconds since unix epoch
+ * @returns {string} formatted date string e.g. "14 July 2034, 22:22"
+ */
+export const formatUTCDateFromUnixTimestamp = (unixTimestamp) => {
+ if (!unixTimestamp) {
+ return unixTimestamp;
}
- return DateTime.fromMillis(dateInMillis)
- .setZone('utc')
+ return DateTime.fromSeconds(unixTimestamp)
+ .toUTC()
.toFormat('dd LLLL yyyy, HH:mm');
};
diff --git a/ui/helpers/utils/util.test.js b/ui/helpers/utils/util.test.js
index e9485a262197..e10c70630dba 100644
--- a/ui/helpers/utils/util.test.js
+++ b/ui/helpers/utils/util.test.js
@@ -1044,15 +1044,15 @@ describe('util', () => {
});
});
- describe('formatUTCDate', () => {
+ describe('formatUTCDateFromUnixTimestamp', () => {
it('formats passed date string', () => {
- expect(util.formatUTCDate(1633019124000)).toStrictEqual(
- '30 September 2021, 16:25',
+ expect(util.formatUTCDateFromUnixTimestamp(2036528542)).toStrictEqual(
+ '14 July 2034, 22:22',
);
});
it('returns empty string if empty string is passed', () => {
- expect(util.formatUTCDate('')).toStrictEqual('');
+ expect(util.formatUTCDateFromUnixTimestamp('')).toStrictEqual('');
});
});
diff --git a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx
index c5518a4fbe6f..404390a03754 100644
--- a/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx
+++ b/ui/pages/confirmations/components/confirm/info/personal-sign/siwe-sign/siwe-sign.tsx
@@ -63,7 +63,9 @@ const SIWESignInfo: React.FC = () => {
{requestId && (
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
index 7b20ba3e9ddc..2f72ee8069de 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/__snapshots__/typed-sign.test.tsx.snap
@@ -587,7 +587,606 @@ exports[`TypedSignInfo correctly renders permit sign type 1`] = `
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 02 August 1971, 16:53
+ 09 June 3554, 16:53
+
+
+
+
+
+
+
+
+
+`;
+
+exports[`TypedSignInfo correctly renders permit sign type with no deadline 1`] = `
+
+
@@ -1210,7 +1210,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 20 January 1970, 21:51
+ 06 July 2024, 20:22
@@ -1884,7 +1884,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 20 January 1970, 22:34
+ 05 August 2024, 19:52
@@ -2008,7 +2008,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitS
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 20 January 1970, 21:51
+ 06 July 2024, 20:22
@@ -3405,7 +3405,7 @@ exports[`Confirm should match snapshot for signature - typed sign - permit 1`] =
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 02 August 1971, 16:53
+ 09 June 3554, 16:53
From 27d8a54fef58d7f39727b6c4fdd242d711558b1d Mon Sep 17 00:00:00 2001
From: Maarten Zuidhoorn
+
+
+
+
+
+ + Estimated changes +
+
+
+
+
+
+
+
+ + You're giving the spender permission to spend this many tokens from your account. +
+
+
+
+
+ + Spending cap +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + 3,000 +
+
+
+
+
+
+ + 0xCcCCc...ccccC +
+
+
+
+
+
+
+
+ + Spender +
+
+
+
+
+
+
+
+
+
+ + 0x5B38D...eddC4 +
+
+
+
+
+ + Request from +
+
+
+
+
+
+
+
+ + metamask.github.io +
+
+
+
+
+ + Interacting with +
+
+
+
+
+
+
+
+
+
+ + 0xCcCCc...ccccC +
+
+
+
@@ -1084,7 +1084,7 @@ exports[`Confirm should match snapshot for signature - typed sign - V4 - PermitB
class="mm-box mm-text mm-text--body-md mm-box--color-inherit"
style="white-space: pre-wrap;"
>
- 20 January 1970, 22:34
+ 05 August 2024, 19:54
+
+ + Message +
+
+ = {
[Field.Deadline]: [...PRIMARY_TYPES_PERMIT],
[Field.EndTime]: [...PRIMARY_TYPES_ORDER],
[Field.Expiration]: [PrimaryType.PermitBatch, PrimaryType.PermitSingle],
+ [Field.Expiry]: [...PRIMARY_TYPES_PERMIT],
[Field.SigDeadline]: [...PRIMARY_TYPES_PERMIT],
[Field.StartTime]: [...PRIMARY_TYPES_ORDER],
[Field.ValidTo]: [...PRIMARY_TYPES_ORDER],
};
+/**
+ * Date values may include -1 to represent a null value
+ * e.g.
+ * {@see {@link https://eips.ethereum.org/EIPS/eip-2612}}
+ * "The deadline argument can be set to uint(-1) to create Permits that effectively never expire."
+ */
+const NONE_DATE_VALUE = -1;
+
const getTokenDecimalsOfDataTree = async (
dataTreeData: Record | TreeData[],
): Promise => {
@@ -144,6 +155,8 @@ const DataField = memo(
value: ValueType;
tokenDecimals: number;
}) => {
+ const t = useI18nContext();
+
if (typeof value === 'object' && value !== null) {
return (
+
+
+
+ + Primary type: +
+
+
+ + Permit +
+
+
`;
+
+exports[`DataTree should match snapshot for permit signature type and deadline is -1 (None) 1`] = `
+
+
+
+
+
+ + Owner: +
+
+
+
+
+
+
+
+
+
+ + 0x935E7...05477 +
+
+
+
+
+ + Spender: +
+
+
+
+
+
+
+
+
+
+ + 0x5B38D...eddC4 +
+
+
+
+
+ + Value: +
+
+
+
+
+
+
+ + 3,000 +
+
+
+
+
+ + Nonce: +
+
+
+ + 0 +
+
+
diff --git a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
index ce6ed43c07c3..86826c5a60b0 100644
--- a/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
+++ b/ui/pages/confirmations/components/confirm/info/typed-sign/typed-sign.test.tsx
@@ -12,6 +12,7 @@ import {
} from '../../../../../../../test/data/confirmations/helper';
import {
permitSignatureMsg,
+ permitSignatureMsgWithNoDeadline,
unapprovedTypedSignMsgV3,
} from '../../../../../../../test/data/confirmations/typed_sign';
import { renderWithConfirmContextProvider } from '../../../../../../../test/lib/confirmations/render-helpers';
@@ -109,4 +110,21 @@ describe('TypedSignInfo', () => {
);
expect(container).toMatchSnapshot();
});
+
+ it('correctly renders permit sign type with no deadline', () => {
+ const state = getMockTypedSignConfirmStateForRequest(
+ permitSignatureMsgWithNoDeadline,
+ {
+ metamask: {
+ useTransactionSimulations: true,
+ },
+ },
+ );
+ const mockStore = configureMockStore([])(state);
+ const { container } = renderWithConfirmContextProvider(
+
+
+ + Deadline: +
+
+
+ None
+
+`;
diff --git a/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx b/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx
index 699539d21a71..b427b6a8ee97 100644
--- a/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx
+++ b/ui/pages/confirmations/components/confirm/row/dataTree.test.tsx
@@ -83,6 +83,19 @@ describe('DataTree', () => {
expect(container).toMatchSnapshot();
});
+ it('should match snapshot for permit signature type and deadline is -1 (None)', () => {
+ const mockPermitData = JSON.parse(
+ permitSignatureMsg.msgParams?.data as string,
+ );
+ mockPermitData.message.deadline = '-1';
+
+ const { container } = renderWithProvider(
+
+
+
+
+
+
+ + Types: +
+
+
+
+
+
+
+
+ + PrimaryType: +
+
+
+
+
+
+
+
+ + Domain: +
+
+
+
+
+
+
+
+ + Message: +
+
+
+ + 3000 +
+