refactor(5564): migrate confirmation and settings page to v5-compat

test/lib/confirmations/render-helpers.tsx

@@ -1,15 +1,21 @@
 import React, { ReactChildren, ReactElement } from 'react';
 
 import { ConfirmContextProvider } from '../../../ui/pages/confirmations/context/confirm';
-import { renderHookWithProvider, renderWithProvider } from '../render-helpers';
+import {
+  renderHookWithProvider,
+  renderWithProvider,
+} from '../render-helpers-navigate';
 
 export function renderWithConfirmContextProvider(
   component: ReactElement,
   store: unknown,
   pathname = '/',
+  confirmationId?: string,
 ) {
   return renderWithProvider(
-    <ConfirmContextProvider>{component}</ConfirmContextProvider>,
+    <ConfirmContextProvider confirmationId={confirmationId}>
+      {component}
+    </ConfirmContextProvider>,
     store,
     pathname,
   );
@@ -23,14 +29,19 @@ export function renderHookWithConfirmContextProvider(
   // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31973
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   Container?: any,
+  confirmationId?: string,
 ) {
   const contextContainer = Container
     ? ({ children }: { children: ReactChildren }) => (
-        <ConfirmContextProvider>
+        <ConfirmContextProvider confirmationId={confirmationId}>
           <Container>{children}</Container>
         </ConfirmContextProvider>
       )
-    : ConfirmContextProvider;
+    : ({ children }: { children: ReactChildren }) => (
+        <ConfirmContextProvider confirmationId={confirmationId}>
+          {children}
+        </ConfirmContextProvider>
+      );
 
   return renderHookWithProvider(hook, state, pathname, contextContainer);
 }

test/lib/render-helpers-navigate.js

@@ -87,7 +87,12 @@ export function renderHookWithProvider(hook, state, pathname = '/', Container) {
       )
     : ProviderWrapper;
 
-  return renderHook(hook, { wrapper });
+  const hookResult = renderHook(hook, { wrapper });
+
+  return {
+    ...hookResult,
+    store,
+  };
 }
 
 /**

ui/components/app/permission-connect-header/permission-connect-header.test.js

@@ -6,6 +6,16 @@ import PermissionConnectHeader from './permission-connect-header';
 
 const STORE_MOCK = configureMockStore()({ metamask: { pendingApprovals: {} } });
 
+const mockUseNavigate = jest.fn();
+const mockUseLocation = jest.fn();
+jest.mock('react-router-dom-v5-compat', () => {
+  return {
+    ...jest.requireActual('react-router-dom-v5-compat'),
+    useNavigate: () => mockUseNavigate,
+    useLocation: () => mockUseLocation(),
+  };
+});
+
 describe('Permission Connect Header', () => {
   const mockOriginData = {
     origin: 'https://metamask.github.io',
@@ -14,6 +24,17 @@ describe('Permission Connect Header', () => {
   const expectedTitle = 'metamask.github.io';
   const expectedAltImageText = 'metamask.github.io logo';
 
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseLocation.mockReturnValue({
+      pathname: '/',
+      search: '',
+      hash: '',
+      state: null,
+      key: 'test',
+    });
+  });
+
   it('renders permission connect header', () => {
     const { getByAltText } = renderWithProvider(
       <PermissionConnectHeader

ui/helpers/higher-order-components/authenticated/authenticated-v5-compat.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { Navigate } from 'react-router-dom-v5-compat';
-import { useLocation } from 'react-router-dom';
+import { Navigate, useLocation } from 'react-router-dom-v5-compat';
 import { UNLOCK_ROUTE, ONBOARDING_ROUTE } from '../../constants/routes';
 
 type AuthenticatedV5CompatProps = {

ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useContext, useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom-v5-compat';
 import { providerErrors, serializeError } from '@metamask/rpc-errors';
 import { getTokenTrackerLink } from '@metamask/etherscan-link';
 import classnames from 'classnames';
@@ -63,12 +64,18 @@ import { isEqualCaseInsensitive } from '../../../shared/modules/string-utils';
 import { Nav } from '../confirmations/components/confirm/nav';
 import { hideAppHeader } from '../routes/utils';
 
-const ConfirmAddSuggestedNFT = () => {
+const ConfirmAddSuggestedNFT = ({
+  navigate: routeNavigate,
+  location: routeLocation,
+} = {}) => {
   const t = useContext(I18nContext);
   const dispatch = useDispatch();
-  const history = useHistory();
+  const hookNavigate = useNavigate();
+  const hookLocation = useLocation();
+  // Use navigate/location from props (v5 route) if available, otherwise fall back to hooks (v6)
+  const navigate = routeNavigate || hookNavigate;
+  const location = routeLocation || hookLocation;
 
-  const location = useLocation();
   const hasAppHeader = location?.pathname ? !hideAppHeader({ location }) : true;
 
   const classNames = classnames('confirm-add-suggested-nft page-container', {
@@ -126,8 +133,8 @@ const ConfirmAddSuggestedNFT = () => {
         });
       }),
     );
-    history.push(mostRecentOverviewPage);
-  }, [dispatch, history, trackEvent, mostRecentOverviewPage, suggestedNfts]);
+    navigate(mostRecentOverviewPage);
+  }, [dispatch, navigate, trackEvent, mostRecentOverviewPage, suggestedNfts]);
 
   const handleCancelNftClick = useCallback(async () => {
     await Promise.all(
@@ -140,17 +147,17 @@ const ConfirmAddSuggestedNFT = () => {
         );
       }),
     );
-    history.push(mostRecentOverviewPage);
-  }, [dispatch, history, mostRecentOverviewPage, suggestedNfts]);
+    navigate(mostRecentOverviewPage);
+  }, [dispatch, navigate, mostRecentOverviewPage, suggestedNfts]);
 
   useEffect(() => {
     const goBackIfNoSuggestedNftsOnFirstRender = () => {
       if (!suggestedNfts.length) {
-        history.push(mostRecentOverviewPage);
+        navigate(mostRecentOverviewPage);
       }
     };
     goBackIfNoSuggestedNftsOnFirstRender();
-  }, [history, mostRecentOverviewPage, suggestedNfts]);
+  }, [navigate, mostRecentOverviewPage, suggestedNfts]);
 
   let origin;
   let link;
@@ -455,4 +462,15 @@ const ConfirmAddSuggestedNFT = () => {
   );
 };
 
+ConfirmAddSuggestedNFT.propTypes = {
+  navigate: PropTypes.func,
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+    search: PropTypes.string,
+    hash: PropTypes.string,
+    state: PropTypes.object,
+    key: PropTypes.string,
+  }),
+};
+
 export default ConfirmAddSuggestedNFT;

ui/pages/confirm-add-suggested-nft/confirm-add-suggested-nft.test.js

@@ -8,12 +8,20 @@ import {
 } from '../../store/actions';
 import configureStore from '../../store/store';
 import mockState from '../../../test/data/mock-state.json';
-import { renderWithProvider } from '../../../test/jest/rendering';
+import { renderWithProvider } from '../../../test/lib/render-helpers-navigate';
 import { CHAIN_IDS } from '../../../shared/constants/network';
 import { mockNetworkState } from '../../../test/stub/networks';
 import * as util from '../../helpers/utils/util';
 import ConfirmAddSuggestedNFT from '.';
 
+const mockNavigate = jest.fn();
+const mockUseLocation = jest.fn();
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
+  useNavigate: () => mockNavigate,
+  useLocation: mockUseLocation,
+}));
+
 const PENDING_NFT_APPROVALS = {
   1: {
     id: '1',
@@ -70,6 +78,15 @@ jest.mock('../../store/actions', () => ({
 }));
 
 const renderComponent = (pendingNfts = {}) => {
+  mockNavigate.mockClear();
+  mockUseLocation.mockReturnValue({
+    pathname: '/',
+    search: '',
+    hash: '',
+    key: 'test-key',
+    state: undefined,
+  });
+
   const store = configureStore({
     metamask: {
       ...mockState.metamask,

ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.js

@@ -1,6 +1,7 @@
 import React, { useCallback, useContext, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom-v5-compat';
 import classnames from 'classnames';
 import { providerErrors, serializeError } from '@metamask/rpc-errors';
 import {
@@ -83,12 +84,17 @@ function hasDuplicateSymbolAndDiffAddress(suggestedTokens, tokens) {
   return Boolean(duplicate);
 }
 
-const ConfirmAddSuggestedToken = () => {
+const ConfirmAddSuggestedToken = ({
+  navigate: routeNavigate,
+  location: routeLocation,
+} = {}) => {
   const t = useContext(I18nContext);
   const dispatch = useDispatch();
-  const history = useHistory();
+  const hookNavigate = useNavigate();
+  const hookLocation = useLocation();
+  const navigate = routeNavigate || hookNavigate;
+  const location = routeLocation || hookLocation;
 
-  const location = useLocation();
   const hasAppHeader = location?.pathname ? !hideAppHeader({ location }) : true;
 
   const classNames = classnames('confirm-add-suggested-token page-container', {
@@ -154,8 +160,8 @@ const ConfirmAddSuggestedToken = () => {
         });
       }),
     );
-    history.push(mostRecentOverviewPage);
-  }, [dispatch, history, trackEvent, mostRecentOverviewPage, suggestedTokens]);
+    navigate(mostRecentOverviewPage);
+  }, [dispatch, navigate, trackEvent, mostRecentOverviewPage, suggestedTokens]);
 
   const handleCancelTokenClick = useCallback(async () => {
     await Promise.all(
@@ -168,12 +174,12 @@ const ConfirmAddSuggestedToken = () => {
         ),
       ),
     );
-    history.push(mostRecentOverviewPage);
-  }, [dispatch, history, mostRecentOverviewPage, suggestedTokens]);
+    navigate(mostRecentOverviewPage);
+  }, [dispatch, navigate, mostRecentOverviewPage, suggestedTokens]);
 
   const goBackIfNoSuggestedTokensOnFirstRender = () => {
     if (!suggestedTokens.length) {
-      history.push(mostRecentOverviewPage);
+      navigate(mostRecentOverviewPage);
     }
   };
 
@@ -237,4 +243,15 @@ const ConfirmAddSuggestedToken = () => {
   );
 };
 
+ConfirmAddSuggestedToken.propTypes = {
+  navigate: PropTypes.func,
+  location: PropTypes.shape({
+    pathname: PropTypes.string,
+    search: PropTypes.string,
+    hash: PropTypes.string,
+    state: PropTypes.object,
+    key: PropTypes.string,
+  }),
+};
+
 export default ConfirmAddSuggestedToken;

ui/pages/confirm-add-suggested-token/confirm-add-suggested-token.test.js

@@ -8,12 +8,20 @@ import {
   rejectPendingApproval,
 } from '../../store/actions';
 import configureStore from '../../store/store';
-import { renderWithProvider } from '../../../test/jest/rendering';
+import { renderWithProvider } from '../../../test/lib/render-helpers-navigate';
 import { ETH_EOA_METHODS } from '../../../shared/constants/eth-methods';
 import { mockNetworkState } from '../../../test/stub/networks';
 import { CHAIN_IDS } from '../../../shared/constants/network';
 import ConfirmAddSuggestedToken from '.';
 
+const mockNavigate = jest.fn();
+const mockUseLocation = jest.fn();
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
+  useNavigate: () => mockNavigate,
+  useLocation: mockUseLocation,
+}));
+
 const PENDING_APPROVALS = {
   1: {
     id: '1',
@@ -67,6 +75,15 @@ jest.mock('../../hooks/useIsOriginalTokenSymbol', () => {
 });
 
 const renderComponent = (tokens = []) => {
+  mockNavigate.mockClear();
+  mockUseLocation.mockReturnValue({
+    pathname: '/',
+    search: '',
+    hash: '',
+    key: 'test-key',
+    state: undefined,
+  });
+
   const store = configureStore({
     metamask: {
       pendingApprovals: PENDING_APPROVALS,

ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js

@@ -5,7 +5,7 @@ import copyToClipboard from 'copy-to-clipboard';
 import classnames from 'classnames';
 import log from 'loglevel';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom-v5-compat';
 import { cloneDeep } from 'lodash';
 
 import AccountListItem from '../../components/app/account-list-item';
@@ -327,7 +327,7 @@ const Footer = ({
   messageData,
 }) => {
   const dispatch = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate();
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
 
@@ -344,7 +344,7 @@ const Footer = ({
       },
     });
     dispatch(clearConfirmTransaction());
-    history.push(mostRecentOverviewPage);
+    navigate(mostRecentOverviewPage);
   };
 
   const onSubmitClick = async (event) => {
@@ -362,7 +362,7 @@ const Footer = ({
       },
     });
     dispatch(clearConfirmTransaction());
-    history.push(mostRecentOverviewPage);
+    navigate(mostRecentOverviewPage);
   };
 
   return (

ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.test.js

@@ -3,7 +3,7 @@ import configureMockStore from 'redux-mock-store';
 import { merge } from 'lodash';
 import copyToClipboard from 'copy-to-clipboard';
 import mockState from '../../../test/data/mock-state.json';
-import { renderWithProvider } from '../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../test/lib/render-helpers-navigate';
 import { flushPromises } from '../../../test/lib/timer-helpers';
 import {
   decryptMsg,
@@ -16,12 +16,14 @@ import ConfirmDecryptMessage from './confirm-decrypt-message.component';
 
 const messageIdMock = '12345';
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useParams: () => ({
-    id: messageIdMock,
-  }),
-}));
+jest.mock('react-router-dom-v5-compat', () => {
+  return {
+    ...jest.requireActual('react-router-dom-v5-compat'),
+    useParams: () => ({
+      id: messageIdMock,
+    }),
+  };
+});
 
 const messageData = {
   domain: {