refactor: revert ui/components/app/srp-quiz-modal/SRPQuiz/SRPQuiz.tsx to not touch multichain

Author: DDDDDanica

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports, import/no-commonjs */
 import React, { useCallback, useContext, useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useHistory } from 'react-router-dom';
 import { useSelector } from 'react-redux';
 import {
   MetaMetricsEventCategory,
@@ -72,7 +72,7 @@ export default function SRPQuiz(props: SRPQuizProps): JSX.Element {
   const [stage, setStage] = useState<QuizStage>(QuizStage.introduction);
 
   const trackEvent = useContext(MetaMetricsContext);
-  const navigate = useNavigate();
+  const history = useHistory();
   const t = useI18nContext();
   const hdEntropyIndex = useSelector(getHDEntropyIndex);
 
@@ -237,7 +237,7 @@ export default function SRPQuiz(props: SRPQuizProps): JSX.Element {
                 route = `${REVEAL_SEED_ROUTE}/${props.keyringId}`;
               }
 
-              navigate(route);
+              history.push(route);
               if (props.closeAfterCompleting) {
                 props.onClose();
               }

ui/components/multichain-accounts/multichain-srp-backup/multichain-srp-backup.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { screen, fireEvent, waitFor } from '@testing-library/react';
-import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
+import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import mockState from '../../../../test/data/mock-state.json';
 import configureStore from '../../../store/store';
 import { ONBOARDING_REVIEW_SRP_ROUTE } from '../../../helpers/constants/routes';
@@ -9,14 +9,6 @@ import { MultichainSrpBackup } from './multichain-srp-backup';
 const srpBackupRowTestId = 'multichain-srp-backup';
 const srpQuizHeaderTestId = 'srp-quiz-header';
 
-const mockUseNavigate = jest.fn();
-jest.mock('react-router-dom-v5-compat', () => {
-  return {
-    ...jest.requireActual('react-router-dom-v5-compat'),
-    useNavigate: () => mockUseNavigate,
-  };
-});
-
 describe('MultichainSrpBackup', () => {
   const renderComponent = (props = {}) => {
     const store = configureStore({
@@ -58,28 +50,30 @@ describe('MultichainSrpBackup', () => {
   });
 
   it('navigates to SRP review route when shouldShowBackupReminder is true', () => {
-    renderComponent({ shouldShowBackupReminder: true });
+    const { history } = renderComponent({ shouldShowBackupReminder: true });
+    const mockHistoryPush = jest.spyOn(history, 'push');
 
     fireEvent.click(screen.getByTestId(srpBackupRowTestId));
 
-    expect(mockUseNavigate).toHaveBeenCalledWith(
+    expect(mockHistoryPush).toHaveBeenCalledWith(
       `${ONBOARDING_REVIEW_SRP_ROUTE}/?isFromReminder=true`,
     );
   });
 
   it('opens SRP quiz modal when shouldShowBackupReminder is false', async () => {
-    renderComponent({
+    const { history } = renderComponent({
       shouldShowBackupReminder: false,
       keyringId: 'test-keyring-id',
     });
+    const mockHistoryPush = jest.spyOn(history, 'push');
 
     fireEvent.click(screen.getByTestId(srpBackupRowTestId));
 
     await waitFor(() => {
       expect(screen.getByText('Security quiz')).toBeInTheDocument();
     });
 
-    expect(mockUseNavigate).not.toHaveBeenCalled();
+    expect(mockHistoryPush).not.toHaveBeenCalled();
   });
 
   it('closes SRP quiz modal when close button is clicked', async () => {

ui/components/multichain-accounts/multichain-srp-backup/multichain-srp-backup.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom-v5-compat';
+import { useHistory } from 'react-router-dom';
 import classnames from 'classnames';
 import { IconSize } from '@metamask/design-system-react';
 import { Box, Icon, IconName, Text } from '../../component-library';
@@ -30,17 +30,17 @@ export const MultichainSrpBackup: React.FC<MultichainSrpBackupProps> = ({
   keyringId,
 }) => {
   const t = useI18nContext();
-  const navigate = useNavigate();
+  const history = useHistory();
   const [srpQuizModalVisible, setSrpQuizModalVisible] = useState(false);
 
   const handleSrpBackupClick = useCallback(() => {
     if (shouldShowBackupReminder) {
       const backUpSRPRoute = `${ONBOARDING_REVIEW_SRP_ROUTE}/?isFromReminder=true`;
-      navigate(backUpSRPRoute);
+      history.push(backUpSRPRoute);
     } else {
       setSrpQuizModalVisible(true);
     }
-  }, [shouldShowBackupReminder, navigate, setSrpQuizModalVisible]);
+  }, [shouldShowBackupReminder, history, setSrpQuizModalVisible]);
 
   const handleQuizModalClose = useCallback(() => {
     setSrpQuizModalVisible(false);