refactor(556x): migrate unlock, deeplink, defi page to react-router-dom-v5-compat

ui/contexts/metametrics.js

@@ -12,7 +12,12 @@
   useContext,
 } from 'react';
 import PropTypes from 'prop-types';
-import { matchPath, useLocation } from 'react-router-dom';
+// NOTE: Mixed v5/v5-compat imports during router migration
+// - useLocation from v5: Works with the v5 HashRouter to detect navigation changes
+// - matchPath from v5-compat: Provides v6 API (reversed args, pattern.path structure)
+// When v6 migration is complete, change both imports to: import { useLocation, matchPath } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
+import { matchPath } from 'react-router-dom-v5-compat';
 import { useSelector } from 'react-redux';
 
 import { omit } from 'lodash';
@@ -148,6 +153,7 @@
 
   // Used to prevent double tracking page calls
   const previousMatch = useRef();
+  const previousPathname = useRef();
 
   /**
    * Anytime the location changes, track a page change with segment.
@@ -156,12 +162,33 @@
    * which page the user is on and their navigation path.
    */
   useEffect(() => {
+    // Only run if pathname actually changed
+    if (previousPathname.current === location.pathname) {
+      return;
+    }
+    previousPathname.current = location.pathname;
+
     const environmentType = getEnvironmentType();
-    const match = matchPath(location.pathname, {
-      path: getPaths(),
-      exact: true,
-      strict: true,
-    });
+    // v6 matchPath doesn't support array of paths, so we loop to find first match
+    const paths = getPaths();
+    let match = null;
+    for (const path of paths) {
+      // Skip empty string paths - they don't work correctly with v6 matchPath
+      if (path === '') {
+        continue;
+      }
+      match = matchPath(
+        {
+          path,
+          end: true,
+          caseSensitive: true,
+        },
+        location.pathname,
+      );
+      if (match) {
+        break;
+      }
+    }
     // Start by checking for a missing match route. If this falls through to
     // the else if, then we know we have a matched route for tracking.
     if (!match) {
@@ -172,10 +199,10 @@
         },
       });
     } else if (
-      previousMatch.current !== match.path &&
+      previousMatch.current !== match.pattern.path &&
       !(
         environmentType === 'notification' &&
-        match.path === '/' &&
+        match.pattern.path === '/' &&
         previousMatch.current === undefined
       )
     ) {
@@ -184,7 +211,8 @@
       // this we keep track of the previousMatch, and we skip the event track
       // in the event that we are dealing with the initial load of the
       // homepage
-      const { path, params } = match;
+      const { pattern, params } = match;
+      const path = pattern.path;
       const name = PATH_NAME_MAP.get(path);
       trackMetaMetricsPage(
         {
@@ -201,8 +229,9 @@
         },
       );
     }
-    previousMatch.current = match?.path;
-  }, [location, context]);
+    previousMatch.current = match?.pattern?.path;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [location.pathname, location.search, location.hash]);
 
   // For backwards compatibility, attach the new methods as properties to trackEvent
   const trackEventWithMethods = trackEvent;

ui/helpers/higher-order-components/initialized/initialized-v5-compat.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import { Navigate } from 'react-router-dom-v5-compat';
+import { ONBOARDING_ROUTE } from '../../constants/routes';
+
+type InitializedV5CompatProps = {
+  children: React.ReactNode;
+};
+
+/**
+ * InitializedV5Compat - A wrapper component for v5-compat routes that require initialization
+ *
+ * This component checks if the user has completed onboarding.
+ * If not, it redirects to the onboarding route using v5-compat Navigate.
+ *
+ * Unlike the v5 Initialized HOC, this returns the element directly (not wrapped in Route)
+ * because v5-compat Routes handle their children differently.
+ *
+ * @param props - Component props
+ * @param props.children - Child components to render when initialized
+ * @returns Navigate component or children
+ */
+const InitializedV5Compat = ({ children }: InitializedV5CompatProps) => {
+  const completedOnboarding = useSelector(
+    (state: { metamask: { completedOnboarding: boolean } }) =>
+      state.metamask.completedOnboarding,
+  );
+
+  if (!completedOnboarding) {
+    return <Navigate to={ONBOARDING_ROUTE} replace />;
+  }
+
+  return <>{children}</>;
+};
+
+export default InitializedV5Compat;

ui/pages/deep-link/deep-link.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { useLocation } from 'react-router-dom';
+import type { Location as RouterLocation } from 'react-router-dom-v5-compat';
 import log from 'loglevel';
 import { useDispatch, useSelector } from 'react-redux';
 import {
@@ -154,8 +154,11 @@ async function updateStateFromUrl(
   }
 }
 
-export const DeepLink = () => {
-  const location = useLocation();
+type DeepLinkProps = {
+  location: RouterLocation;
+};
+
+export const DeepLink = ({ location }: DeepLinkProps) => {
   const t = useI18nContext() as TranslateFunction;
   const dispatch = useDispatch();
   // it's technically not possible for a natural flow to reach this page

ui/pages/defi/components/defi-details-list.test.tsx

@@ -22,7 +22,7 @@ jest.mock('react-router-dom-v5-compat', () => {
 describe('DeFiDetailsPage', () => {
   const store = configureMockStore([thunk])(mockState);
 
-  beforeAll(() => {
+  beforeEach(() => {
     jest.clearAllMocks();
   });
 

ui/pages/defi/components/defi-details-page.test.tsx

@@ -6,16 +6,7 @@ import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate
 import mockState from '../../../../test/data/mock-state.json';
 import DeFiPage from './defi-details-page';
 
-const mockUseParams = jest
-  .fn()
-  .mockReturnValue({ chainId: CHAIN_IDS.MAINNET, protocolId: 'aave' });
-
-jest.mock('react-router-dom', () => {
-  return {
-    ...jest.requireActual('react-router-dom'),
-    useParams: () => mockUseParams(),
-  };
-});
+const mockNavigate = jest.fn();
 
 describe('DeFiDetailsPage', () => {
   const mockStore = {
@@ -79,7 +70,7 @@ describe('DeFiDetailsPage', () => {
 
   const store = configureMockStore([thunk])(mockStore);
 
-  beforeAll(() => {
+  beforeEach(() => {
     jest.clearAllMocks();
   });
 
@@ -89,7 +80,13 @@ describe('DeFiDetailsPage', () => {
   });
 
   it('renders defi asset page', () => {
-    const { container } = renderWithProvider(<DeFiPage />, store);
+    const { container } = renderWithProvider(
+      <DeFiPage
+        navigate={mockNavigate}
+        params={{ chainId: CHAIN_IDS.MAINNET, protocolId: 'aave' }}
+      />,
+      store,
+    );
 
     expect(container).toMatchSnapshot();
   });

ui/pages/defi/components/defi-details-page.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { useHistory, useParams, Redirect } from 'react-router-dom';
+import { Navigate } from 'react-router-dom-v5-compat';
 import { useSelector } from 'react-redux';
 import {
   Display,
@@ -45,22 +45,25 @@
     );
   }, [positions]);
 
-const DeFiPage = () => {
-  const { chainId, protocolId } = useParams<{
-    chainId: '0x' & string;
-    protocolId: string;
-  }>() as { chainId: '0x' & string; protocolId: string };
+type DeFiPageProps = {
+  navigate: (to: string | number) => void;
+  params: { chainId: string; protocolId: string };
+};
+
+const DeFiPage = ({ navigate, params }: DeFiPageProps) => {
   const { formatCurrencyWithMinThreshold } = useFormatters();
+  const { chainId, protocolId } = params;
   const defiPositions = useSelector(getDefiPositions);
   const selectedAccount = useSelector(getSelectedAccount);
 
-  const history = useHistory();
   const t = useI18nContext();
   const { privacyMode } = useSelector(getPreferences);
 
   // TODO: Get value in user's preferred currency
   const protocolPosition =
-    defiPositions[selectedAccount.address]?.[chainId]?.protocols[protocolId];
+    defiPositions[selectedAccount.address]?.[
+      chainId as keyof typeof defiPositions[string]
+    ]?.protocols[protocolId];
 
   const extractedTokens = useMemo(() => {
     return Object.keys(protocolPosition?.positionTypes || {}).reduce(
@@ -82,7 +85,7 @@
   };
 
   if (!protocolPosition) {
-    return <Redirect to={{ pathname: DEFAULT_ROUTE }} />;
+    return <Navigate to={DEFAULT_ROUTE} replace />;
   }
 
   return (
@@ -100,7 +103,7 @@
           size={ButtonIconSize.Sm}
           ariaLabel={t('back')}
           iconName={IconName.ArrowLeft}
-          onClick={() => history.push(DEFAULT_ROUTE)}
+          onClick={() => navigate(DEFAULT_ROUTE)}
         />
       </Box>
 
@@ -119,7 +122,7 @@
           {protocolPosition.protocolDetails.name}
         </Text>
         <AssetCellBadge
-          chainId={chainId}
+          chainId={chainId as (typeof CHAIN_IDS)[keyof typeof CHAIN_IDS]}
           tokenImage={protocolPosition.protocolDetails.iconUrl}
           symbol={protocolPosition.protocolDetails.name}
           data-testid="defi-details-page-protocol-badge"

ui/pages/keychains/reveal-seed.js

@@ -1,7 +1,7 @@
 import qrCode from 'qrcode-generator';
 import React, { useContext, useEffect, useState, useCallback } from 'react';
+import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory, useParams } from 'react-router-dom';
 import { getErrorMessage } from '../../../shared/modules/error';
 import {
   MetaMetricsEventCategory,
@@ -44,9 +44,7 @@ import { endTrace, trace, TraceName } from '../../../shared/lib/trace';
 const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN';
 const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN';
 
-export default function RevealSeedPage() {
-  const history = useHistory();
-  const { keyringId } = useParams();
+function RevealSeedPage({ navigate, keyringId }) {
   const dispatch = useDispatch();
   const t = useI18nContext();
   const trackEvent = useContext(MetaMetricsContext);
@@ -267,7 +265,7 @@ export default function RevealSeedPage() {
                 hd_entropy_index: hdEntropyIndex,
               },
             });
-            history.goBack();
+            navigate(-1);
           }}
         >
           {t('cancel')}
@@ -316,7 +314,7 @@ export default function RevealSeedPage() {
                 key_type: MetaMetricsEventKeyType.Srp,
               },
             });
-            history.goBack();
+            navigate(-1);
           }}
         >
           {t('close')}
@@ -409,3 +407,10 @@ export default function RevealSeedPage() {
     </Box>
   );
 }
+
+RevealSeedPage.propTypes = {
+  navigate: PropTypes.func.isRequired,
+  keyringId: PropTypes.string,
+};
+
+export default RevealSeedPage;