refactor(5566): migrate from v5 &v5-compat to react-router-dom-v6

package.json

@@ -442,8 +442,7 @@
     "react-popper": "^2.2.3",
     "react-redux": "^7.2.9",
     "react-responsive-carousel": "^3.2.21",
-    "react-router-dom": "^5.3.4",
-    "react-router-dom-v5-compat": "^6.26.2",
+    "react-router-dom": "^6.28.0",
     "react-simple-file-input": "^2.0.0",
     "react-tippy": "^1.2.2",
     "react-toggle-button": "^2.2.0",

test/jest/rendering.js

@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import { Provider } from 'react-redux';
 import { render } from '@testing-library/react';
 import { MemoryRouter, Router } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
 import PropTypes from 'prop-types';
 
 import { I18nContext, LegacyI18nProvider } from '../../ui/contexts/i18n';
@@ -66,10 +65,10 @@ export function renderWithProvider(component, store, initialEntries) {
     );
     return store ? (
       <Provider store={store}>
-        <WithoutStore></WithoutStore>
+        <WithoutStore />
       </Provider>
     ) : (
-      <WithoutStore></WithoutStore>
+      <WithoutStore />
     );
   };
 
@@ -91,17 +90,13 @@ export function renderWithProviderAndHistory(
   const Wrapper = ({ children }) => {
     const WithoutStore = () => (
       <Router history={history}>
-        <CompatRouter>
-          <I18nProvider currentLocale="en" current={en} en={en}>
-            <LegacyI18nProvider>
-              <MetaMetricsContext.Provider value={mockTrackEvent}>
-                <LegacyMetaMetricsProvider>
-                  {children}
-                </LegacyMetaMetricsProvider>
-              </MetaMetricsContext.Provider>
-            </LegacyI18nProvider>
-          </I18nProvider>
-        </CompatRouter>
+        <I18nProvider currentLocale="en" current={en} en={en}>
+          <LegacyI18nProvider>
+            <MetaMetricsContext.Provider value={mockTrackEvent}>
+              <LegacyMetaMetricsProvider>{children}</LegacyMetaMetricsProvider>
+            </MetaMetricsContext.Provider>
+          </LegacyI18nProvider>
+        </I18nProvider>
       </Router>
     );
     return store ? (

test/lib/render-helpers-navigate.js

@@ -5,7 +5,6 @@ import { render } from '@testing-library/react';
 import { renderHook } from '@testing-library/react-hooks';
 import { userEvent } from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
-import { CompatRouter } from 'react-router-dom-v5-compat';
 import PropTypes from 'prop-types';
 import configureStore from '../../ui/store/store';
 import { I18nContext, LegacyI18nProvider } from '../../ui/contexts/i18n';
@@ -44,13 +43,11 @@ function createProviderWrapper(store, pathname = '/') {
   const Wrapper = ({ children }) => {
     const container = (
       <MemoryRouter initialEntries={[pathname]}>
-        <CompatRouter>
-          <I18nProvider currentLocale="en" current={en} en={en}>
-            <LegacyI18nProvider>
-              <LegacyMetaMetricsProvider>{children}</LegacyMetaMetricsProvider>
-            </LegacyI18nProvider>
-          </I18nProvider>
-        </CompatRouter>
+        <I18nProvider currentLocale="en" current={en} en={en}>
+          <LegacyI18nProvider>
+            <LegacyMetaMetricsProvider>{children}</LegacyMetaMetricsProvider>
+          </LegacyI18nProvider>
+        </I18nProvider>
       </MemoryRouter>
     );
 

ui/components/app/alerts/alerts.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import PropTypes from 'prop-types';
+import { useNavigate } from 'react-router-dom';
 
 import { alertIsOpen as invalidCustomNetworkAlertIsOpen } from '../../../ducks/alerts/invalid-custom-network';
 import InvalidCustomNetworkAlert from './invalid-custom-network-alert';
 
-const Alerts = ({ navigate }) => {
+const Alerts = () => {
+  const navigate = useNavigate();
   const _invalidCustomNetworkAlertIsOpen = useSelector(
     invalidCustomNetworkAlertIsOpen,
   );
@@ -17,8 +18,4 @@ const Alerts = ({ navigate }) => {
   return null;
 };
 
-Alerts.propTypes = {
-  navigate: PropTypes.func.isRequired,
-};
-
 export default Alerts;

ui/components/app/alerts/unconnected-account-alert/unconnected-account-alert.test.js

@@ -7,7 +7,7 @@ import { fireEvent } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 
 import { tick } from '../../../../../test/lib/timer-helpers';
-import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers-navigate';
 
 import * as actions from '../../../../store/actions';
 import { CHAIN_IDS } from '../../../../../shared/constants/network';

ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.test.tsx

@@ -12,9 +12,9 @@ import { createMockInternalAccount } from '../../../../../../test/jest/mocks';
 import AssetListControlBar from './asset-list-control-bar';
 
 const mockUseNavigate = jest.fn();
-jest.mock('react-router-dom-v5-compat', () => {
+jest.mock('react-router-dom', () => {
   return {
-    ...jest.requireActual('react-router-dom-v5-compat'),
+    ...jest.requireActual('react-router-dom'),
     useNavigate: () => mockUseNavigate,
   };
 });

ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx

@@ -7,7 +7,7 @@ import React, {
   useCallback,
 } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import {
   Hex,
   isStrictHexString,

ui/components/app/assets/nfts/nft-details/nft-details.test.js

@@ -30,9 +30,9 @@ jest.mock('../../../../../helpers/utils/util', () => ({
 jest.mock('copy-to-clipboard');
 
 const mockUseNavigate = jest.fn();
-jest.mock('react-router-dom-v5-compat', () => {
+jest.mock('react-router-dom', () => {
   return {
-    ...jest.requireActual('react-router-dom-v5-compat'),
+    ...jest.requireActual('react-router-dom'),
     useNavigate: () => mockUseNavigate,
   };
 });

ui/components/app/assets/nfts/nft-details/nft-details.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { isEqual } from 'lodash';
 import { getTokenTrackerLink, getAccountLink } from '@metamask/etherscan-link';
 import { Nft } from '@metamask/assets-controllers';

ui/components/app/assets/nfts/nft-details/nft-full-image.test.js

@@ -23,9 +23,9 @@ const mockAsset = nfts[0].address;
 const mockId = nfts[0].tokenId;
 
 const mockUseNavigate = jest.fn();
-jest.mock('react-router-dom-v5-compat', () => {
+jest.mock('react-router-dom', () => {
   return {
-    ...jest.requireActual('react-router-dom-v5-compat'),
+    ...jest.requireActual('react-router-dom'),
     useNavigate: () => mockUseNavigate,
     useNavigationType: () => 'PUSH',
   };

ui/components/app/assets/nfts/nft-details/nft-full-image.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useNavigate, useNavigationType } from 'react-router-dom-v5-compat';
+import { useNavigate, useNavigationType, useParams } from 'react-router-dom';
 import { Nft } from '@metamask/assets-controllers';
 import { toHex } from '@metamask/controller-utils';
 import { getNftImage, getNftImageAlt } from '../../../../../helpers/utils/nfts';
@@ -35,24 +35,11 @@ import {
   PREVIOUS_ROUTE,
 } from '../../../../../helpers/constants/routes';
 
-type NftFullImageProps = {
-  params?: {
-    asset?: string;
-    id?: string;
-  };
-};
-
-/**
- * Component displaying full NFT image
- *
- * @param options0 - Component props
- * @param options0.params - Route parameters including asset and id
- */
 // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export default function NftFullImage({ params }: NftFullImageProps) {
+export default function NftFullImage() {
   const t = useI18nContext();
-  const { asset, id } = params ?? {};
+  const { asset, id } = useParams<{ asset: string; id: string }>();
   const allNfts = useSelector(getAllNfts);
   const nfts = Object.values(allNfts).flat() as Nft[];
   const nft = nfts.find(

ui/components/app/assets/nfts/nfts-detection-notice-import-nfts/nfts-detection-notice-import-nfts.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { BannerAlert } from '../../../../component-library';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { SECURITY_ROUTE } from '../../../../../helpers/constants/routes';

ui/components/app/assets/nfts/nfts-tab/nfts-tab.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { toHex } from '@metamask/controller-utils';
 import {
   AlignItems,

ui/components/app/assets/token-cell/token-cell.test.tsx

@@ -49,9 +49,9 @@ jest.mock('../../../../hooks/useIsOriginalTokenSymbol', () => {
 });
 
 const mockUseNavigate = jest.fn();
-jest.mock('react-router-dom-v5-compat', () => {
+jest.mock('react-router-dom', () => {
   return {
-    ...jest.requireActual('react-router-dom-v5-compat'),
+    ...jest.requireActual('react-router-dom'),
     useNavigate: () => mockUseNavigate,
   };
 });

ui/components/app/assets/token-cell/token-cell.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { useTokenDisplayInfo } from '../hooks';
 import {
   ButtonSecondary,

ui/components/app/basic-configuration-modal/basic-configuration-modal.test.tsx

@@ -32,8 +32,8 @@ jest.mock('react-redux', () => {
 });
 
 const mockUseLocation = jest.fn();
-jest.mock('react-router-dom-v5-compat', () => ({
-  ...jest.requireActual('react-router-dom-v5-compat'),
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
   useLocation: () => mockUseLocation(),
 }));
 

ui/components/app/basic-configuration-modal/basic-configuration-modal.tsx

@@ -1,5 +1,5 @@
 import React, { useContext, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom-v5-compat';
+import { useLocation } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   Display,

ui/components/app/cancel-speedup-popover/cancel-speedup-popover.test.js

@@ -6,7 +6,7 @@ import {
   EditGasModes,
   GasEstimateTypes,
 } from '../../../../shared/constants/gas';
-import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
 import mockEstimates from '../../../../test/data/mock-estimates.json';
 import mockState from '../../../../test/data/mock-state.json';
 import { GasFeeContextProvider } from '../../../contexts/gasFee';

ui/components/app/connected-sites-list/connected-snaps.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { Box, IconName, IconSize, Text } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';

ui/components/app/flask/experimental-area/experimental-area.js

@@ -1,5 +1,5 @@
 import React, { Fragment, useContext } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { I18nContext } from '../../../../contexts/i18n';
 import { Button, ButtonVariant } from '../../../component-library';

ui/components/app/modals/convert-token-to-nft-modal/convert-token-to-nft-modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import Modal from '../../modal';
 import { Text } from '../../../component-library/text';

ui/components/app/modals/customize-nonce/customize-nonce.test.js

@@ -2,7 +2,7 @@ import React from 'react';
 import { fireEvent } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers-navigate';
 import CustomizeNonce from '.';
 
 const mockHideModal = jest.fn();

ui/components/app/modals/identity/turn-on-backup-and-sync-modal/turn-on-backup-and-sync-modal.test.tsx

@@ -27,9 +27,9 @@ jest.mock('react-redux', () => ({
 }));
 
 const mockUseNavigate = jest.fn();
-jest.mock('react-router-dom-v5-compat', () => {
+jest.mock('react-router-dom', () => {
   return {
-    ...jest.requireActual('react-router-dom-v5-compat'),
+    ...jest.requireActual('react-router-dom'),
     useNavigate: () => mockUseNavigate,
   };
 });

ui/components/app/modals/identity/turn-on-backup-and-sync-modal/turn-on-backup-and-sync-modal.tsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { BACKUPANDSYNC_FEATURES } from '@metamask/profile-sync-controller/user-storage';
 import { useModalProps } from '../../../../../hooks/useModalProps';
 import {

ui/components/app/modals/multichain-accounts/intro-modal/multichain-account-intro-modal.container.tsx

@@ -6,7 +6,7 @@ import React, {
   useMemo,
 } from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 
 import { captureException } from '../../../../../../shared/lib/sentry';
 

ui/components/app/modals/turn-on-metamask-notifications/turn-on-metamask-notifications.tsx

@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { I18nContext } from '../../../../contexts/i18n';
 import { useModalProps } from '../../../../hooks/useModalProps';
 import { useMetamaskNotificationsContext } from '../../../../contexts/metamask-notifications/metamask-notifications';

ui/components/app/name/name.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { NameType } from '@metamask/name-controller';
 import { fireEvent } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
-import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
   MetaMetricsEventCategory,

ui/components/app/network-connection-banner/network-connection-banner.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 
 import { useNetworkConnectionBanner } from '../../../hooks/useNetworkConnectionBanner';
@@ -22,22 +22,21 @@
   useNetworkConnectionBanner: jest.fn(),
 }));
 
-jest.mock('react-router-dom-v5-compat', () => ({
-  useNavigate: jest.fn(),
+const mockUseNavigate = jest.fn();
+jest.mock('react-router-dom', () => ({
+  useNavigate: mockUseNavigate,
 }));
 
 jest.mock('../../../hooks/useTheme', () => ({
   useTheme: () => 'light',
 }));
 
 const mockUseNetworkConnectionBanner = jest.mocked(useNetworkConnectionBanner);
-const mockUseNavigate = jest.mocked(useNavigate);
 const mockSetEditedNetwork = jest.mocked(setEditedNetwork);
 
 describe('NetworkConnectionBanner', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    mockUseNavigate.mockReturnValue(jest.fn());
   });
 
   describe('when the status of the banner is "degraded"', () => {

ui/components/app/network-connection-banner/network-connection-banner.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {

ui/components/app/password-outdated-modal/password-outdated-modal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useNavigate } from 'react-router-dom';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   AlignItems,