+
+
+
+
+
+
+
+
+
+`;
diff --git a/ui/components/multichain/network-list-menu/add-rpc-url-modal/add-rpc-url-modal.test.tsx b/ui/components/multichain/network-list-menu/add-rpc-url-modal/add-rpc-url-modal.test.tsx
new file mode 100644
index 000000000000..65b8e889e94b
--- /dev/null
+++ b/ui/components/multichain/network-list-menu/add-rpc-url-modal/add-rpc-url-modal.test.tsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useI18nContext } from '../../../../hooks/useI18nContext';
+import AddRpcUrlModal from './add-rpc-url-modal';
+
+jest.mock('../../../../hooks/useI18nContext', () => ({
+ useI18nContext: jest.fn(),
+}));
+
+describe('AddRpcUrlModal', () => {
+ const useI18nContextMock = useI18nContext as jest.Mock;
+
+ beforeEach(() => {
+ useI18nContextMock.mockReturnValue((key: string) => key);
+ jest.clearAllMocks();
+ });
+
+ it('should render correctly', () => {
+ const { container } = render(
);
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should render the input field with the correct label', () => {
+ render(
);
+ const inputLabel = screen.getByLabelText('additionalRpcUrl');
+ expect(inputLabel).toBeInTheDocument();
+ });
+
+ it('should render the "Add URL" button with correct text', () => {
+ render(
);
+ const addButton = screen.getByRole('button', { name: 'addUrl' });
+ expect(addButton).toBeInTheDocument();
+ });
+
+ it('should call the appropriate function when "Add URL" button is clicked', () => {
+ const mockAddUrl = jest.fn();
+ render(
);
+ const addButton = screen.getByRole('button', { name: 'addUrl' });
+ userEvent.click(addButton);
+ expect(mockAddUrl).not.toHaveBeenCalled();
+ });
+});
diff --git a/ui/components/multichain/network-list-menu/add-rpc-url-modal/add-rpc-url-modal.tsx b/ui/components/multichain/network-list-menu/add-rpc-url-modal/add-rpc-url-modal.tsx
index 8e4269928bc8..8a9ff53a74b5 100644
--- a/ui/components/multichain/network-list-menu/add-rpc-url-modal/add-rpc-url-modal.tsx
+++ b/ui/components/multichain/network-list-menu/add-rpc-url-modal/add-rpc-url-modal.tsx
@@ -33,6 +33,7 @@ const AddRpcUrlModal = () => {
marginTop={8}
marginLeft={'auto'}
marginRight={'auto'}
+ onClick={() => ({})}
>
{t('addUrl')}
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.js b/ui/components/multichain/network-list-menu/network-list-menu.js
index 6f511b6a8bcd..8c44bf368132 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.js
@@ -55,6 +55,7 @@ import {
IconName,
ModalContent,
ModalHeader,
+ AvatarNetworkSize,
} from '../../component-library';
import { ADD_POPULAR_CUSTOM_NETWORK } from '../../../helpers/constants/routes';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
@@ -74,7 +75,7 @@ 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';
-const ACTION_MODES = {
+export const ACTION_MODES = {
// Displays the search box and network list
LIST: 'list',
// Displays the Add form
@@ -121,6 +122,13 @@ export const NetworkListMenu = ({ onClose }) => {
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(
@@ -167,6 +175,7 @@ export const NetworkListMenu = ({ onClose }) => {
useEffect(() => {
setActionMode(ACTION_MODES.LIST);
+ setPrevActionMode(null);
if (currentlyOnTestNetwork) {
dispatch(setShowTestNetworks(currentlyOnTestNetwork));
}
@@ -268,6 +277,7 @@ export const NetworkListMenu = ({ onClose }) => {
}),
);
setActionMode(ACTION_MODES.EDIT);
+ setPrevActionMode(ACTION_MODES.LIST);
};
const getOnEdit = (network) => {
@@ -283,6 +293,9 @@ export const NetworkListMenu = ({ onClose }) => {
{
}
};
+ 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 (
@@ -376,6 +398,7 @@ export const NetworkListMenu = ({ onClose }) => {
marginLeft={4}
marginRight={4}
marginBottom={4}
+ marginTop={2}
backgroundColor={BackgroundColor.backgroundAlternative}
startAccessory={
{
/>
) : null}
-
- {t('enabledNetworks')}
-
- {searchResults.length === 0 && focusSearch ? (
+ {searchResults.length > 0 ? (
+
+
+ {t('enabledNetworks')}
+
+
+ ) : null}
+
+ {searchResults.length === 0 &&
+ searchAddNetworkResults.length === 0 &&
+ searchTestNetworkResults.length === 0 &&
+ focusSearch ? (
{
data-testid="add-popular-network-view"
/>
) : null}
-
- {t('showTestnetNetworks')}
-
-
+
+ {searchTestNetworkResults.length > 0 ? (
+
+
+ {t('showTestnetNetworks')}
+
+
+
+ ) : null}
+
{showTestNetworks || currentlyOnTestNetwork ? (
{generateMenuItems(searchTestNetworkResults)}
@@ -512,9 +549,10 @@ export const NetworkListMenu = ({ onClose }) => {
category: MetaMetricsEventCategory.Network,
});
setActionMode(ACTION_MODES.ADD);
+ setPrevActionMode(ACTION_MODES.LIST);
}}
>
- {t('addNetwork')}
+ {networkMenuRedesign ? t('addCustomNetwork') : t('addNetwork')}
@@ -525,6 +563,10 @@ export const NetworkListMenu = ({ onClose }) => {
isNewNetworkFlow
addNewNetwork
getOnEditCallback={getOnEdit}
+ onRpcUrlAdd={goToRpcFormAdd}
+ prevActionMode={prevActionMode}
+ networkFormInformation={networkFormInformation}
+ setNetworkFormInformation={setNetworkFormInformation}
/>
);
} else if (actionMode === ACTION_MODES.EDIT) {
@@ -533,7 +575,7 @@ export const NetworkListMenu = ({ onClose }) => {
isNewNetworkFlow
addNewNetwork={false}
networkToEdit={networkToEdit}
- onRpcUrlAdd={() => setActionMode(ACTION_MODES.ADD_RPC)}
+ onRpcUrlAdd={goToRpcFormEdit}
/>
);
} else if (actionMode === ACTION_MODES.ADD_RPC) {
@@ -546,8 +588,16 @@ export const NetworkListMenu = ({ onClose }) => {
let onBack;
if (actionMode === ACTION_MODES.EDIT || actionMode === ACTION_MODES.ADD) {
onBack = () => setActionMode(ACTION_MODES.LIST);
- } else if (actionMode === ACTION_MODES.ADD_RPC) {
+ } else if (
+ actionMode === ACTION_MODES.ADD_RPC &&
+ prevActionMode === ACTION_MODES.EDIT
+ ) {
onBack = () => setActionMode(ACTION_MODES.EDIT);
+ } else if (
+ actionMode === ACTION_MODES.ADD_RPC &&
+ prevActionMode === ACTION_MODES.ADD
+ ) {
+ onBack = () => setActionMode(ACTION_MODES.ADD);
}
// Modal title
@@ -556,8 +606,10 @@ export const NetworkListMenu = ({ onClose }) => {
title = t('networkMenuHeading');
} else if (actionMode === ACTION_MODES.ADD) {
title = t('addCustomNetwork');
+ } else if (actionMode === ACTION_MODES.ADD_RPC) {
+ title = t('addRpcUrl');
} else {
- title = editedNetwork.nickname;
+ title = editedNetwork?.nickname ?? '';
}
return (
@@ -575,7 +627,6 @@ export const NetworkListMenu = ({ onClose }) => {
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 678745defa25..544b0880048e 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
@@ -14,7 +14,6 @@ import { NetworkListMenu } from '.';
const mockSetShowTestNetworks = jest.fn();
const mockSetProviderType = jest.fn();
const mockToggleNetworkMenu = jest.fn();
-const mockNetworkMenuRedesignToggle = jest.fn();
const mockSetNetworkClientIdForDomain = jest.fn();
const mockSetActiveNetwork = jest.fn();
@@ -27,11 +26,6 @@ jest.mock('../../../store/actions.ts', () => ({
mockSetNetworkClientIdForDomain(network, id),
}));
-jest.mock('../../../helpers/utils/feature-flags', () => ({
- ...jest.requireActual('../../../helpers/utils/feature-flags'),
- getLocalNetworkMenuRedesignFeatureFlag: () => mockNetworkMenuRedesignToggle,
-}));
-
const MOCK_ORIGIN = 'https://portfolio.metamask.io';
const render = ({
@@ -66,7 +60,7 @@ const render = ({
describe('NetworkListMenu', () => {
beforeEach(() => {
- mockNetworkMenuRedesignToggle.mockReturnValue(false);
+ process.env.ENABLE_NETWORK_UI_REDESIGN = 'false';
});
it('renders properly', () => {
@@ -185,12 +179,16 @@ describe('NetworkListMenu', () => {
describe('NetworkListMenu with ENABLE_NETWORK_UI_REDESIGN', () => {
// Set the environment variable before tests run
beforeEach(() => {
- process.env.ENABLE_NETWORK_UI_REDESIGN = 'true';
+ window.metamaskFeatureFlags = {
+ networkMenuRedesign: true,
+ };
});
// Reset the environment variable after tests complete
afterEach(() => {
- delete process.env.ENABLE_NETWORK_UI_REDESIGN;
+ window.metamaskFeatureFlags = {
+ networkMenuRedesign: false,
+ };
});
it('should display "Arbitrum" when ENABLE_NETWORK_UI_REDESIGN is true', async () => {
diff --git a/ui/components/multichain/network-list-menu/network-list-search/__snapshots__/network-list-search.test.tsx.snap b/ui/components/multichain/network-list-menu/network-list-search/__snapshots__/network-list-search.test.tsx.snap
index 6b2597430661..ca09bf0c145a 100644
--- a/ui/components/multichain/network-list-menu/network-list-search/__snapshots__/network-list-search.test.tsx.snap
+++ b/ui/components/multichain/network-list-menu/network-list-search/__snapshots__/network-list-search.test.tsx.snap
@@ -3,10 +3,10 @@
exports[`NetworkListSearch renders search list component 1`] = `
+
diff --git a/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.tsx b/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.tsx
index cbe1a99fd69f..62560c1866bd 100644
--- a/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.tsx
+++ b/ui/components/multichain/network-list-menu/popular-network-list/popular-network-list.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
import { ApprovalType } from '@metamask/controller-utils';
import { useDispatch } from 'react-redux';
import { useI18nContext } from '../../../../hooks/useI18nContext';
@@ -14,6 +14,8 @@ import {
IconSize,
ButtonLinkSize,
ButtonLink,
+ Popover,
+ PopoverPosition,
} from '../../../component-library';
import { MetaMetricsNetworkEventSource } from '../../../../../shared/constants/metametrics';
import {
@@ -32,9 +34,9 @@ import {
JustifyContent,
TextColor,
IconColor,
+ TextVariant,
} from '../../../../helpers/constants/design-system';
import { RPCDefinition } from '../../../../../shared/constants/network';
-import Tooltip from '../../../ui/tooltip';
import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
const PopularNetworkList = ({
@@ -45,6 +47,22 @@ const PopularNetworkList = ({
const t = useI18nContext();
const isPopUp = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
const dispatch = useDispatch();
+ const [isOpen, setIsOpen] = useState(false);
+
+ const handleMouseEnter = () => {
+ setIsOpen(true);
+ };
+
+ const handleMouseLeave = () => {
+ setIsOpen(false);
+ };
+
+ const [referenceElement, setReferenceElement] = useState();
+
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
+ const setBoxRef = (ref: any) => {
+ setReferenceElement(ref);
+ };
return (
@@ -53,72 +71,78 @@ const PopularNetworkList = ({
marginBottom={1}
paddingLeft={4}
paddingRight={4}
+ ref={setBoxRef}
>
{Object.keys(searchAddNetworkResults).length === 0 ? null : (
-
+
{t('additionalNetworks')}
-
- {t('popularNetworkAddToolTip', [
-
- {
- global.platform.openTab({
- url: ZENDESK_URLS.UNKNOWN_NETWORK,
- });
- }}
- >
- {t('learnMoreUpperCase')}
-
- ,
- ,
- ])}
-
- }
- trigger="mouseenter"
- >
-
-
-
-
+
+
+
+ {t('popularNetworkAddToolTip', [
+
+ {
+ global.platform.openTab({
+ url: ZENDESK_URLS.UNKNOWN_NETWORK,
+ });
+ }}
+ >
+ {t('learnMoreUpperCase')}
+
+ ,
+ ])}
+
+
)}
-
{searchAddNetworkResults.map((item: RPCDefinition, index: number) => (
-
+
) : null}
- {newNetworkAddedConfigurationId && (
+ {newNetworkAddedConfigurationId && !networkMenuRedesign && (
clearNewNetworkAdded()}
diff --git a/ui/pages/home/home.container.js b/ui/pages/home/home.container.js
index 07cfcbdff912..649d9f0577fe 100644
--- a/ui/pages/home/home.container.js
+++ b/ui/pages/home/home.container.js
@@ -100,6 +100,7 @@ import {
Web3ShimUsageAlertStates,
} from '../../../shared/constants/alerts';
import { hasTransactionPendingApprovals } from '../../selectors/transactions';
+import { getLocalNetworkMenuRedesignFeatureFlag } from '../../helpers/utils/feature-flags';
import Home from './home.component';
const mapStateToProps = (state) => {
@@ -124,6 +125,8 @@ 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);
///: END:ONLY_INCLUDE_IF
@@ -196,6 +199,7 @@ const mapStateToProps = (state) => {
shouldShowWeb3ShimUsageNotification,
pendingConfirmations,
pendingConfirmationsPrioritized,
+ networkMenuRedesign,
infuraBlocked: getInfuraBlocked(state),
announcementsToShow: getSortedAnnouncementsToShow(state).length > 0,
showWhatsNewPopup,
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
index 05128f7c75ca..005027028e4a 100644
--- 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
@@ -12,204 +12,161 @@ exports[`Add Network Modal should render 1`] = `
-
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
index 16909bc8010b..615c1790530e 100644
--- 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
@@ -23,7 +23,7 @@ describe('Add Network Modal', () => {
mockNetworkMenuRedesignToggle.mockImplementation(() => false);
const mockStore = configureMockStore([])({
- metamask: { useSafeChainsListValidation: true },
+ metamask: { useSafeChainsListValidation: true, orderedNetworkList: {} },
});
const { container } = renderWithProvider(
@@ -40,7 +40,7 @@ describe('Add Network Modal', () => {
mockNetworkMenuRedesignToggle.mockReturnValue(true);
const mockStore = configureMockStore([thunk])({
- metamask: { useSafeChainsListValidation: true },
+ metamask: { useSafeChainsListValidation: true, orderedNetworkList: {} },
});
const { queryByText } = renderWithProvider(
@@ -50,7 +50,7 @@ describe('Add Network Modal', () => {
await waitFor(() => {
expect(queryByText('Cancel')).not.toBeInTheDocument();
- expect(queryByText('Save')).toBeInTheDocument();
+ expect(queryByText('Next')).toBeInTheDocument();
});
});
});
diff --git a/ui/pages/onboarding-flow/add-network-modal/index.js b/ui/pages/onboarding-flow/add-network-modal/index.js
index b35785e4f2ac..911bb89eee04 100644
--- a/ui/pages/onboarding-flow/add-network-modal/index.js
+++ b/ui/pages/onboarding-flow/add-network-modal/index.js
@@ -16,10 +16,13 @@ import NetworksForm from '../../settings/networks-tab/networks-form/networks-for
export default function AddNetworkModal({
showHeader = false,
- isNewNetworkFlow = false,
+ onEditNetwork = null,
addNewNetwork = true,
networkToEdit = null,
onRpcUrlAdd,
+ prevActionMode = null,
+ networkFormInformation = {},
+ setNetworkFormInformation = () => null,
}) {
const dispatch = useDispatch();
const t = useI18nContext();
@@ -52,7 +55,10 @@ export default function AddNetworkModal({
cancelCallback={closeCallback}
submitCallback={closeCallback}
onRpcUrlAdd={onRpcUrlAdd}
- isNewNetworkFlow={isNewNetworkFlow}
+ onEditNetwork={onEditNetwork}
+ prevActionMode={prevActionMode}
+ networkFormInformation={networkFormInformation}
+ setNetworkFormInformation={setNetworkFormInformation}
{...additionalProps}
/>
@@ -63,13 +69,21 @@ AddNetworkModal.propTypes = {
showHeader: PropTypes.bool,
isNewNetworkFlow: PropTypes.bool,
addNewNetwork: PropTypes.bool,
+ onEditNetwork: PropTypes.func,
networkToEdit: PropTypes.object,
onRpcUrlAdd: PropTypes.func,
+ prevActionMode: PropTypes.string,
+ networkFormInformation: PropTypes.object,
+ setNetworkFormInformation: PropTypes.func,
};
AddNetworkModal.defaultProps = {
showHeader: false,
isNewNetworkFlow: false,
addNewNetwork: true,
+ onEditNetwork: null,
networkToEdit: null,
+ prevActionMode: null,
+ networkFormInformation: {},
+ setNetworkFormInformation: () => null,
};
diff --git a/ui/pages/settings/networks-tab/index.scss b/ui/pages/settings/networks-tab/index.scss
index 86e792d988c4..69f1cbb9d073 100644
--- a/ui/pages/settings/networks-tab/index.scss
+++ b/ui/pages/settings/networks-tab/index.scss
@@ -113,8 +113,13 @@
color: var(--color-text-muted);
}
+ &__scrollable {
+ overflow-y: auto;
+ }
+
&__network-form {
- padding: 16px 24px;
+ padding: 16px 16px;
+ width: 100%;
@include design-system.screen-sm-min {
padding: 16px;
@@ -262,23 +267,25 @@
}
&__add-network-form {
- margin-left: 16px;
- margin-right: 16px;
grid-column: span 2; // spread both columns of grid layout
@include design-system.screen-sm-min {
max-width: 400px; // but only expand to 400px
- padding: 16px;
+ padding-left: 16px;
+ padding-right: 16px;
+ padding-bottom: 16px;
}
&__alert {
- margin-top: 0;
+ margin-top: 4;
+ padding: 4;
}
}
&__restrict-height {
max-height: 578px;
overflow-y: auto;
+ width: 100%;
}
&__add-network-form-footer {
diff --git a/ui/pages/settings/networks-tab/networks-form/__snapshots__/rpc-url-editor.test.tsx.snap b/ui/pages/settings/networks-tab/networks-form/__snapshots__/rpc-url-editor.test.tsx.snap
new file mode 100644
index 000000000000..d79e1349e4a4
--- /dev/null
+++ b/ui/pages/settings/networks-tab/networks-form/__snapshots__/rpc-url-editor.test.tsx.snap
@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RpcUrlEditor should render correctly 1`] = `
+