refactor: resolve race condition in Home navigation with v5-compat

Author: DDDDDanica

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

@@ -1,7 +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 { useSelector } from 'react-redux';
-import type { NavigateFunction } from 'react-router-dom-v5-compat';
 import {
   MetaMetricsEventCategory,
   MetaMetricsEventKeyType,
@@ -64,7 +63,14 @@ export type SRPQuizProps = {
   isOpen: boolean;
   onClose: () => void;
   closeAfterCompleting?: boolean;
-  navigate: NavigateFunction;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  navigate: (
+    to: any,
+    options?: {
+      replace?: boolean;
+      state?: Record<string, unknown>;
+    },
+  ) => void;
 };
 
 // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860

ui/components/multichain/account-details/account-details.tsx

@@ -51,9 +51,13 @@ import { AccountDetailsKey } from './account-details-key';
 
 type AccountDetailsProps = {
   address: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   navigate?: (
-    to: string | number,
-    options?: { replace?: boolean; state?: Record<string, unknown> },
+    to: any,
+    options?: {
+      replace?: boolean;
+      state?: Record<string, unknown>;
+    },
   ) => void;
 };
 

ui/pages/confirmations/confirm-transaction/confirm-transaction.component.js

@@ -174,9 +174,8 @@ const ConfirmTransaction = ({
         dispatch(getContractMethodData(data, use4ByteResolution));
       }
     } else if (prevTransactionId && !transactionId && !totalUnapproved) {
-      dispatch(setDefaultHomeActiveTabName('activity')).then(() => {
-        navigate(DEFAULT_ROUTE, { replace: true });
-      });
+      dispatch(setDefaultHomeActiveTabName('activity'));
+      navigate(DEFAULT_ROUTE, { replace: true });
     } else if (
       prevTransactionId &&
       transactionId &&

ui/pages/routes/routes.component.tsx

@@ -863,11 +863,17 @@ export default function Routes() {
             })}
           </Route>
           <Route path={`${CONFIRMATION_V_NEXT_ROUTE}/:id?`}>
-            {createV5CompatRoute<{ id?: string }>(ConfirmationPage, {
-              wrapper: AuthenticatedV5Compat,
-              includeParams: true,
-              paramsAsProps: false,
-            })}
+            {(props: RouteComponentProps<{ id?: string }>) => {
+              const renderFn = createV5CompatRoute<{ id?: string }>(
+                ConfirmationPage,
+                {
+                  wrapper: AuthenticatedV5Compat,
+                  includeParams: true,
+                  paramsAsProps: false,
+                },
+              );
+              return renderFn(props);
+            }}
           </Route>
           <RouteWithLayout
             authenticated