refactor: use const for navigate(-1) and navigate('/'); also migrate the remaining files to v5-compat (#37819)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/37819?quickstart=1)

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: partial is for
MetaMask/MetaMask-planning#6231

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **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/main/.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/main/.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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Replace history-based navigation with v5-compat navigate and
PREVIOUS_ROUTE/DEFAULT_ROUTE across the app, updating routing
scaffolding, components, hooks, tests, and stories.
> 
> - **Router/Navigation**:
> - Add v5-to-v5-compat `navigate` bridge in `routes.component.tsx`;
pass `navigate`, `location`, and `params` to v5-compat components via
helpers.
> - Replace `navigate(-1)` with `navigate(PREVIOUS_ROUTE)`; standardize
uses of `DEFAULT_ROUTE` and other route constants.
> - Switch to `react-router-dom-v5-compat` APIs (`useNavigate`,
`useLocation`, `useMatch`, `matchPath`) across files.
> - **Components**:
> - Update many components to accept/use `navigate` instead of `history`
(e.g., `Alerts`, `InvalidCustomNetworkAlert`,
`HideTokenConfirmationModal`, `NicknamePopover`, SRP-related components,
NFT image view, transaction details, permissions page, snaps list/view,
home, connected accounts/sites, asset options/token asset, notifications
settings, wallet/account details).
> - Use `PREVIOUS_ROUTE` for back actions (e.g., SRP flows, bridge tx
details, send hooks, confirm flows).
> - **Hooks/Utils**:
> - Migrate hooks to v5-compat (`useClaimState`, `useCurrentAsset`,
`useSegmentContext`).
> - Update `utils.js` route matching to v5-compat `matchPath` signature.
> - **Tests/Stories**:
> - Update tests to use navigate-aware render helpers and constants
(`DEFAULT_ROUTE`, `PREVIOUS_ROUTE`); adjust mocks accordingly.
> - Storybook: replace MemoryRouter usage where needed; pass `navigate`
args.
> - **Misc**:
>   - Minor cleanup in `rewards` slice (remove extraneous whitespace).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
dc9beda. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: DDDDDanica

ui/components/app/alerts/alerts.js

@@ -5,20 +5,20 @@ import PropTypes from 'prop-types';
 import { alertIsOpen as invalidCustomNetworkAlertIsOpen } from '../../../ducks/alerts/invalid-custom-network';
 import InvalidCustomNetworkAlert from './invalid-custom-network-alert';
 
-const Alerts = ({ history }) => {
+const Alerts = ({ navigate }) => {
   const _invalidCustomNetworkAlertIsOpen = useSelector(
     invalidCustomNetworkAlertIsOpen,
   );
 
   if (_invalidCustomNetworkAlertIsOpen) {
-    return <InvalidCustomNetworkAlert history={history} />;
+    return <InvalidCustomNetworkAlert navigate={navigate} />;
   }
 
   return null;
 };
 
 Alerts.propTypes = {
-  history: PropTypes.object.isRequired,
+  navigate: PropTypes.func.isRequired,
 };
 
 export default Alerts;

ui/components/app/alerts/invalid-custom-network-alert/invalid-custom-network-alert.js

@@ -15,7 +15,7 @@ import { NETWORKS_ROUTE } from '../../../../helpers/constants/routes';
 
 const { ERROR, LOADING } = ALERT_STATE;
 
-const InvalidCustomNetworkAlert = ({ history }) => {
+const InvalidCustomNetworkAlert = ({ navigate }) => {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const alertState = useSelector(getAlertState);
@@ -43,7 +43,7 @@ const InvalidCustomNetworkAlert = ({ history }) => {
           disabled={alertState === LOADING}
           onClick={async () => {
             await onClose();
-            history.push(NETWORKS_ROUTE);
+            navigate(NETWORKS_ROUTE);
           }}
           variant={ButtonVariant.Primary}
           className="invalid-custom-network-alert__footer-row-button"
@@ -82,7 +82,7 @@ const InvalidCustomNetworkAlert = ({ history }) => {
 };
 
 InvalidCustomNetworkAlert.propTypes = {
-  history: PropTypes.object.isRequired,
+  navigate: PropTypes.func.isRequired,
 };
 
 export default InvalidCustomNetworkAlert;

ui/components/app/alerts/invalid-custom-network-alert/invalid-custom-network-alert.stories.tsx

@@ -25,14 +25,12 @@ const meta: Meta<typeof InvalidCustomNetworkAlert> = {
     ),
   ],
   argTypes: {
-    history: {
-      control: 'object',
+    navigate: {
+      control: 'function',
     },
   },
   args: {
-    history: {
-      push: () => {},
-    },
+    navigate: () => {},
   },
 };
 

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

@@ -30,7 +30,10 @@ import useFetchNftDetailsFromTokenURI from '../../../../../hooks/useFetchNftDeta
 import { isWebUrl } from '../../../../../../app/scripts/lib/util';
 import { getNetworkConfigurationsByChainId } from '../../../../../../shared/modules/selectors/networks';
 import { getImageForChainId } from '../../../../../selectors/multichain';
-import { ASSET_ROUTE } from '../../../../../helpers/constants/routes';
+import {
+  ASSET_ROUTE,
+  PREVIOUS_ROUTE,
+} from '../../../../../helpers/constants/routes';
 
 type NftFullImageProps = {
   params?: {
@@ -102,7 +105,7 @@ export default function NftFullImage({ params }: NftFullImageProps) {
   const onClose = useCallback(() => {
     if (navigationType === 'PUSH') {
       // Previous navigation was a PUSH, so safe to go back
-      navigate(-1);
+      navigate(PREVIOUS_ROUTE);
     } else {
       // Fallback: go to the asset details route explicitly
       navigate(`${ASSET_ROUTE}/${hexChainId}/${asset}/${id}`, {

ui/components/app/modals/hide-token-confirmation-modal/hide-token-confirmation-modal.js

@@ -22,7 +22,7 @@ function mapStateToProps(state) {
   return {
     chainId: getCurrentChainId(state),
     token: state.appState.modal.modalState.props.token,
-    history: state.appState.modal.modalState.props.history,
+    navigate: state.appState.modal.modalState.props.navigate,
     networkConfigurationsByChainId: getNetworkConfigurationsByChainId(state),
     getAccountForChain: (caipChainId) =>
       getInternalAccountBySelectedAccountGroupAndCaip(state, caipChainId),
@@ -85,7 +85,7 @@ class HideTokenConfirmationModal extends Component {
       image: PropTypes.string,
       chainId: PropTypes.string,
     }),
-    history: PropTypes.object,
+    navigate: PropTypes.func,
   };
 
   state = {};
@@ -96,7 +96,7 @@ class HideTokenConfirmationModal extends Component {
       token,
       hideToken,
       hideModal,
-      history,
+      navigate,
       networkConfigurationsByChainId,
       getAccountForChain,
     } = this.props;
@@ -154,7 +154,7 @@ class HideTokenConfirmationModal extends Component {
                   getAccountForChain,
                 );
               }
-              history.push(DEFAULT_ROUTE);
+              navigate(DEFAULT_ROUTE);
             }}
           >
             {this.context.t('hide')}

ui/components/app/modals/hide-token-confirmation-modal/hide-token-confirmation-modal.test.js

@@ -3,12 +3,12 @@ import configureMockStore from 'redux-mock-store';
 import { fireEvent } from '@testing-library/react';
 import thunk from 'redux-thunk';
 import * as actions from '../../../../store/actions';
-import { renderWithProvider } from '../../../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers-navigate';
 import mockState from '../../../../../test/data/mock-state.json';
 import { mockNetworkState } from '../../../../../test/stub/networks';
 import HideTokenConfirmationModal from '.';
 
-const mockHistoryPush = jest.fn();
+const mockUseNavigate = jest.fn();
 const mockHideModal = jest.fn();
 const mockHideToken = jest.fn().mockResolvedValue();
 
@@ -40,9 +40,7 @@ describe('Hide Token Confirmation Modal', () => {
       modal: {
         modalState: {
           props: {
-            history: {
-              push: mockHistoryPush,
-            },
+            navigate: mockUseNavigate,
             token: tokenState,
           },
         },
@@ -105,9 +103,7 @@ describe('Hide Token Confirmation Modal', () => {
         modal: {
           modalState: {
             props: {
-              history: {
-                push: mockHistoryPush,
-              },
+              navigate: mockUseNavigate,
               token: tokenState2,
             },
           },

ui/components/app/modals/nickname-popovers/nickname-popovers.component.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react';
 import { BtcAccountType } from '@metamask/keyring-api';
-import { renderWithProvider } from '../../../../../test/jest';
+import { renderWithProvider } from '../../../../../test/lib/render-helpers-navigate';
 import configureStore from '../../../../store/store';
 import mockState from '../../../../../test/data/mock-state.json';
 import {

ui/components/app/srp-quiz-modal/SRPQuiz/SRPQuiz.stories.tsx

@@ -26,6 +26,7 @@ export const DefaultStory: StoryFn<typeof SRPQuiz> = () => {
         <SRPQuiz
           isOpen={isShowingModal}
           onClose={() => updateArgs({ isShowingModal: false })}
+          navigate={() => {}}
         />
       )}
     </>

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

@@ -32,7 +32,8 @@ describe('srp-reveal-quiz', () => {
   });
 
   it('should go through the full sequence of steps', async () => {
-    renderWithProvider(<SRPQuiz isOpen />, store);
+    const mockNavigate = jest.fn();
+    renderWithProvider(<SRPQuiz isOpen navigate={mockNavigate} />, store);
 
     expect(screen.queryByTestId('srp-quiz-get-started')).toBeInTheDocument();
 

ui/components/app/srp-quiz-modal/SRPQuiz/SRPQuiz.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports, import/no-commonjs */
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
+import type { To } from 'react-router-dom-v5-compat';
 import {
   MetaMetricsEventCategory,
   MetaMetricsEventKeyType,
@@ -64,6 +64,13 @@ export type SRPQuizProps = {
   isOpen: boolean;
   onClose: () => void;
   closeAfterCompleting?: boolean;
+  navigate: {
+    (
+      to: To,
+      options?: { replace?: boolean; state?: Record<string, unknown> },
+    ): void;
+    (delta: number): void;
+  };
 };
 
 // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
@@ -72,7 +79,6 @@ export default function SRPQuiz(props: SRPQuizProps): JSX.Element {
   const [stage, setStage] = useState<QuizStage>(QuizStage.introduction);
 
   const trackEvent = useContext(MetaMetricsContext);
-  const history = useHistory();
   const t = useI18nContext();
   const hdEntropyIndex = useSelector(getHDEntropyIndex);
 
@@ -237,7 +243,7 @@ export default function SRPQuiz(props: SRPQuizProps): JSX.Element {
                 route = `${REVEAL_SEED_ROUTE}/${props.keyringId}`;
               }
 
-              history.push(route);
+              props.navigate(route);
               if (props.closeAfterCompleting) {
                 props.onClose();
               }