refactor: migrate components/app files to v5-compat

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { fireEvent, waitFor } from '@testing-library/react';
-import { useLocation } from 'react-router-dom';
 import configureStore from '../../../store/store';
-import { renderWithProvider } from '../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
 import * as Actions from '../../../store/actions';
 import {
   hideBasicFunctionalityModal,
@@ -32,9 +31,10 @@ jest.mock('react-redux', () => {
   };
 });
 
-jest.mock('react-router-dom', () => ({
-  ...jest.requireActual('react-router-dom'),
-  useLocation: jest.fn(),
+const mockUseLocation = jest.fn();
+jest.mock('react-router-dom-v5-compat', () => ({
+  ...jest.requireActual('react-router-dom-v5-compat'),
+  useLocation: () => mockUseLocation(),
 }));
 
 // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
@@ -68,7 +68,7 @@ const arrangeMocks = <T extends boolean>({
 }: ArrangeMocksParams<T> = {}): ArrangeMocksReturn<T> => {
   jest.clearAllMocks();
 
-  (useLocation as jest.Mock).mockReturnValue({
+  (mockUseLocation as jest.Mock).mockReturnValue({
     pathname: isOnboarding
       ? ONBOARDING_PRIVACY_SETTINGS_ROUTE
       : '/any-other-path',

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';
+import { useLocation } from 'react-router-dom-v5-compat';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   Display,

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useDispatch, useSelector } from 'react-redux';
 import { Box, IconName, IconSize, Text } from '../../component-library';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -22,7 +22,7 @@ import { SnapIcon } from '../snaps/snap-icon';
 export default function ConnectedSnaps({ connectedSubjects }) {
   const [showOptions, setShowOptions] = useState();
   const t = useI18nContext();
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const connectedOrigin = useSelector(getOriginOfCurrentTab);
 
@@ -48,7 +48,7 @@ export default function ConnectedSnaps({ connectedSubjects }) {
         </MenuItem>
         <MenuItem
           iconName={IconName.Setting}
-          onClick={() => history.push(getSnapRoute(snapId))}
+          onClick={() => navigate(getSnapRoute(snapId))}
         >
           {t('snapsSettings')}
         </MenuItem>

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 { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useDispatch, useSelector } from 'react-redux';
 import Modal from '../../modal';
 import { Text } from '../../../component-library/text';
@@ -13,7 +13,7 @@ import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-uti
 import { getSelectedNetworkClientId } from '../../../../../shared/modules/selectors/networks';
 
 const ConvertTokenToNFTModal = ({ hideModal, tokenAddress }) => {
-  const history = useHistory();
+  const navigate = useNavigate();
   const t = useI18nContext();
   const dispatch = useDispatch();
   const allNfts = useSelector(getNfts);
@@ -34,9 +34,7 @@ const ConvertTokenToNFTModal = ({ hideModal, tokenAddress }) => {
             }),
           );
           const { tokenId } = tokenAddedAsNFT;
-          history.push({
-            pathname: `${ASSET_ROUTE}/${tokenAddress}/${tokenId}`,
-          });
+          navigate(`${ASSET_ROUTE}/${tokenAddress}/${tokenId}`);
         } else {
           dispatch(
             showImportNftsModal({ tokenAddress, ignoreErc20Token: true }),

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

@@ -26,12 +26,13 @@ jest.mock('react-redux', () => ({
   useDispatch: () => mockDispatch,
 }));
 
-const mockHistoryPush = jest.fn();
-jest.mock('react-router-dom', () => ({
-  useHistory: () => ({
-    push: mockHistoryPush,
-  }),
-}));
+const mockUseNavigate = jest.fn();
+jest.mock('react-router-dom-v5-compat', () => {
+  return {
+    ...jest.requireActual('react-router-dom-v5-compat'),
+    useNavigate: () => mockUseNavigate,
+  };
+});
 
 const mockSetIsBackupAndSyncFeatureEnabled = jest.fn();
 jest.mock('../../../../../hooks/identity/useBackupAndSync', () => ({
@@ -151,7 +152,7 @@ describe('TurnOnBackupAndSyncModal', () => {
     fireEvent.click(button);
 
     await waitFor(() => {
-      expect(mockHistoryPush).toHaveBeenCalledWith(BACKUPANDSYNC_ROUTE);
+      expect(mockUseNavigate).toHaveBeenCalledWith(BACKUPANDSYNC_ROUTE);
       expect(mockSetIsBackupAndSyncFeatureEnabled).toHaveBeenCalledWith(
         BACKUPANDSYNC_FEATURES.main,
         true,

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 { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { BACKUPANDSYNC_FEATURES } from '@metamask/profile-sync-controller/user-storage';
 import { useModalProps } from '../../../../../hooks/useModalProps';
 import {
@@ -47,7 +47,7 @@ export const turnOnBackupAndSyncModalTestIds = {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export function TurnOnBackupAndSyncModal() {
   const { hideModal } = useModalProps();
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
@@ -89,7 +89,7 @@ export function TurnOnBackupAndSyncModal() {
         showModal({
           name: CONFIRM_TURN_ON_BACKUP_AND_SYNC_MODAL_NAME,
           enableBackupAndSync: async () => {
-            history.push(BACKUPANDSYNC_ROUTE);
+            navigate(BACKUPANDSYNC_ROUTE);
             await setIsBackupAndSyncFeatureEnabled(
               BACKUPANDSYNC_FEATURES.main,
               true,
@@ -102,7 +102,7 @@ export function TurnOnBackupAndSyncModal() {
     if (!isBackupAndSyncEnabled) {
       await setIsBackupAndSyncFeatureEnabled(BACKUPANDSYNC_FEATURES.main, true);
     }
-    history.push(BACKUPANDSYNC_ROUTE);
+    navigate(BACKUPANDSYNC_ROUTE);
     hideModal();
   };
 

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 { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 
 import { captureException } from '../../../../../../shared/lib/sentry';
 
@@ -28,7 +28,7 @@ export const MultichainAccountIntroModalContainer: React.FC<ContainerProps> = ({
   onClose,
 }) => {
   const dispatch = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate();
   const [isLoading, setIsLoading] = useState(false);
   const isClosingRef = useRef(false);
 
@@ -78,8 +78,8 @@ export const MultichainAccountIntroModalContainer: React.FC<ContainerProps> = ({
     onClose();
 
     // Navigate to account list
-    history.push(ACCOUNT_LIST_PAGE_ROUTE);
-  }, [alignmentPromise, dispatch, history, onClose]);
+    navigate(ACCOUNT_LIST_PAGE_ROUTE);
+  }, [alignmentPromise, dispatch, navigate, onClose]);
 
   const handleLearnMore = useCallback(() => {
     // Open multichain accounts support page

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
 import mockStore from '../../../../../test/data/mock-state.json';
-import { renderWithProvider } from '../../../../../test/jest';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers-navigate';
 import { MetamaskNotificationsProvider } from '../../../../contexts/metamask-notifications/metamask-notifications';
 import TurnOnMetamaskNotifications from './turn-on-metamask-notifications';
 

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 { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { I18nContext } from '../../../../contexts/i18n';
 import { useModalProps } from '../../../../hooks/useModalProps';
 import { useMetamaskNotificationsContext } from '../../../../contexts/metamask-notifications/metamask-notifications';
@@ -40,7 +40,7 @@ import {
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export default function TurnOnMetamaskNotifications() {
   const { hideModal } = useModalProps();
-  const history = useHistory();
+  const navigate = useNavigate();
   const t = useContext(I18nContext);
   const trackEvent = useContext(MetaMetricsContext);
   const { listNotifications } = useMetamaskNotificationsContext();
@@ -99,11 +99,11 @@ export default function TurnOnMetamaskNotifications() {
 
   useEffect(() => {
     if (isNotificationEnabled && !error) {
-      history.push(NOTIFICATIONS_ROUTE);
+      navigate(NOTIFICATIONS_ROUTE);
       hideModal();
       listNotifications();
     }
-  }, [isNotificationEnabled, error, history, hideModal, listNotifications]);
+  }, [isNotificationEnabled, error, navigate, hideModal, listNotifications]);
 
   const privacyLink = (
     <Text

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import {
   AlignItems,
@@ -32,7 +32,7 @@ import { setShowPasswordChangeToast } from '../toast-master/utils';
 export default function PasswordOutdatedModal() {
   const t = useI18nContext();
   const dispatch = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   return (
     <Modal
@@ -73,7 +73,7 @@ export default function PasswordOutdatedModal() {
                 // remove the password change toast from the app state
                 await dispatch(setShowPasswordChangeToast(null));
                 await dispatch(lockMetamask());
-                history.push(DEFAULT_ROUTE);
+                navigate(DEFAULT_ROUTE);
               }}
             >
               {t('continue')}

ui/components/app/recovery-phrase-reminder/recovery-phrase-reminder.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 // Helpers
 import {
@@ -33,11 +33,11 @@ import {
 
 export default function RecoveryPhraseReminder({ onConfirm }) {
   const t = useI18nContext();
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const handleBackUp = () => {
     const backUpSRPRoute = `${ONBOARDING_REVEAL_SRP_ROUTE}/?isFromReminder=true`;
-    history.push(backUpSRPRoute);
+    navigate(backUpSRPRoute);
   };
 
   return (

ui/components/app/srp-quiz-modal/SRPQuiz/SRPQuiz.test.js

@@ -1,7 +1,7 @@
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import React from 'react';
 import mockState from '../../../../../test/data/mock-state.json';
-import { renderWithProvider } from '../../../../../test/jest';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers-navigate';
 import ZENDESK_URLS from '../../../../helpers/constants/zendesk-url';
 import configureStore from '../../../../store/store';
 import { QuizStage } from '../types';

ui/components/app/toast-master/toast-master.js

@@ -2,12 +2,11 @@
 
 import React, { useEffect, useMemo, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import classnames from 'classnames';
 import { getAllScopesFromCaip25CaveatValue } from '@metamask/chain-agnostic-permission';
 import { AvatarAccountSize } from '@metamask/design-system-react';
 import { PRODUCT_TYPES } from '@metamask/subscription-controller';
-import { useNavigate } from 'react-router-dom-v5-compat';
 import { MILLISECOND, SECOND } from '../../../../shared/constants/time';
 import {
   PRIVACY_POLICY_LINK,
@@ -98,14 +97,15 @@ import {
   setShieldEndingToastLastClickedOrClosed,
 } from './utils';
 
-export function ToastMaster() {
-  const location = useLocation();
+export function ToastMaster({ location } = {}) {
   const isMultichainAccountsFeatureState2Enabled = useSelector(
     getIsMultichainAccountsState2Enabled,
   );
 
-  const onHomeScreen = location.pathname === DEFAULT_ROUTE;
-  const onSettingsScreen = location.pathname.startsWith(SETTINGS_ROUTE);
+  // Use passed location or fallback to DEFAULT_ROUTE
+  const currentPathname = location?.pathname ?? DEFAULT_ROUTE;
+  const onHomeScreen = currentPathname === DEFAULT_ROUTE;
+  const onSettingsScreen = currentPathname.startsWith(SETTINGS_ROUTE);
 
   if (onHomeScreen) {
     return (
@@ -391,7 +391,7 @@ function PermittedNetworkToast() {
   const activeTabOrigin = useSelector(getOriginOfCurrentTab);
   const dappActiveNetwork = useSelector(getDappActiveNetwork);
   const safeEncodedHost = encodeURIComponent(activeTabOrigin);
-  const history = useHistory();
+  const navigate = useNavigate();
 
   // Use dapp's active network if available, otherwise fall back to global network
   const displayNetwork = dappActiveNetwork || currentNetwork;
@@ -429,7 +429,7 @@ function PermittedNetworkToast() {
         actionText={t('editPermissions')}
         onActionClick={() => {
           dispatch(hidePermittedNetworkToast());
-          history.push(`${REVIEW_PERMISSIONS}/${safeEncodedHost}`);
+          navigate(`${REVIEW_PERMISSIONS}/${safeEncodedHost}`);
         }}
         onClose={() => dispatch(hidePermittedNetworkToast())}
       />

ui/components/app/transaction-list-item-details/transaction-list-item-details.container.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
-import { withRouter } from 'react-router-dom';
 import { compose } from 'redux';
+import withRouterHooks from '../../../helpers/higher-order-components/with-router-hooks/with-router-hooks';
 import { getNetworkConfigurationsByChainId } from '../../../../shared/modules/selectors/networks';
 import {
   getAccountName,
@@ -49,6 +49,6 @@ const mapDispatchToProps = (dispatch) => {
 };
 
 export default compose(
-  withRouter,
+  withRouterHooks,
   connect(mapStateToProps, mapDispatchToProps),
 )(TransactionListItemDetails);

ui/components/app/transaction-list-item/transaction-list-item.component.js

@@ -2,7 +2,7 @@
 import React, { useMemo, useState, useCallback, useContext } from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { useDispatch, useSelector } from 'react-redux';
 
 import {
@@ -78,7 +78,7 @@ function TransactionListItemInner({
   chainId,
 }) {
   const t = useI18nContext();
-  const history = useHistory();
+  const navigate = useNavigate();
   const { hasCancelled } = transactionGroup;
   const [showDetails, setShowDetails] = useState(false);
   const [showCancelEditGasPopover, setShowCancelEditGasPopover] =
@@ -232,7 +232,7 @@ function TransactionListItemInner({
 
   const toggleShowDetails = useCallback(() => {
     if (isUnapproved) {
-      history.push(`${CONFIRM_TRANSACTION_ROUTE}/${id}`);
+      navigate(`${CONFIRM_TRANSACTION_ROUTE}/${id}`);
       return;
     }
     setShowDetails((prev) => {
@@ -247,7 +247,7 @@ function TransactionListItemInner({
       });
       return !prev;
     });
-  }, [isUnapproved, history, id, trackEvent, category]);
+  }, [isUnapproved, navigate, id, trackEvent, category]);
 
   const isSpeedUpButtonVisible = useMemo(() => {
     if (