refactor(556x): migrate pages/swaps to react-router-dom-v5-compat

Author: DDDDDanica

ui/ducks/swaps/swaps.js

@@ -525,12 +525,12 @@ export {
   slice as swapsSlice,
 };
 
-export const navigateBackToPrepareSwap = (history) => {
+export const navigateBackToPrepareSwap = (navigate) => {
   return async (dispatch) => {
     // TODO: Ensure any fetch in progress is cancelled
     await dispatch(setBackgroundSwapRouteState(''));
     dispatch(navigatedBackToBuildQuote());
-    history.push(PREPARE_SWAP_ROUTE);
+    navigate(PREPARE_SWAP_ROUTE);
   };
 };
 
@@ -632,7 +632,7 @@ const isTokenAlreadyAdded = (tokenAddress, tokens) => {
 };
 
 export const fetchQuotesAndSetQuoteState = (
-  history,
+  navigate,
   inputValue,
   maxSlippage,
   trackEvent,
@@ -658,7 +658,7 @@ export const fetchQuotesAndSetQuoteState = (
     await dispatch(setSwapsLiveness(swapsLivenessForNetwork));
 
     if (!swapsLivenessForNetwork.swapsFeatureIsLive) {
-      await history.push(SWAPS_MAINTENANCE_ROUTE);
+      await navigate(SWAPS_MAINTENANCE_ROUTE);
       return;
     }
 
@@ -691,7 +691,7 @@ export const fetchQuotesAndSetQuoteState = (
     // In that case we just want to silently prefetch quotes without redirecting to the quotes loading page.
     if (!pageRedirectionDisabled) {
       await dispatch(setBackgroundSwapRouteState('loading'));
-      history.push(LOADING_QUOTES_ROUTE);
+      navigate(LOADING_QUOTES_ROUTE);
     }
     dispatch(setFetchingQuotes(true));
 

ui/helpers/higher-order-components/feature-toggled-route.js

@@ -1,19 +1,16 @@
-import React, { useMemo } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { Redirect, Route } from 'react-router-dom';
+import { Navigate } from 'react-router-dom-v5-compat';
 
-export default function FeatureToggledRoute({ flag, redirectRoute, ...props }) {
-  const redirect = useMemo(
-    () => ({ pathname: redirectRoute }),
-    [redirectRoute],
-  );
+export default function FeatureToggledRoute({ flag, redirectRoute, element }) {
   if (flag) {
-    return <Route {...props} />;
+    return element;
   }
-  return <Redirect to={redirect} />;
+  return <Navigate to={redirectRoute} replace />;
 }
 
 FeatureToggledRoute.propTypes = {
   flag: PropTypes.bool.isRequired,
   redirectRoute: PropTypes.string.isRequired,
+  element: PropTypes.node.isRequired,
 };

ui/pages/routes/routes.component.tsx

@@ -624,7 +624,18 @@ export default function Routes() {
             component={ConfirmTransaction}
           />
           <Authenticated path={`${SEND_ROUTE}/:page?`} component={SendPage} />
-          <Authenticated path={SWAPS_ROUTE} component={Swaps} />
+          <Route path={SWAPS_ROUTE}>
+            {(props: RouteComponentProps) => {
+              const { location: v5Location } = props;
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              const SwapsComponent = Swaps as any;
+              return (
+                <AuthenticatedV5Compat>
+                  <SwapsComponent location={v5Location} />
+                </AuthenticatedV5Compat>
+              );
+            }}
+          </Route>
           <Route
             path={`${CROSS_CHAIN_SWAP_TX_DETAILS_ROUTE}/:srcTxMetaId`}
             // v5 Route supports exact with render props, but TS types don't recognize it
@@ -1024,6 +1035,7 @@ export default function Routes() {
         {renderRoutes()}
       </Box>
       {isUnlocked ? <Alerts history={history} /> : null}
+      {/* @ts-expect-error - ToastMaster is a JS component */}
       <ToastMaster location={location} />
     </div>
   );

ui/pages/swaps/awaiting-signatures/awaiting-signatures.js

@@ -1,8 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import isEqual from 'lodash/isEqual';
-
 import { I18nContext } from '../../../contexts/i18n';
 import {
   getFetchParams,
@@ -39,7 +38,7 @@ import SwapStepIcon from './swap-step-icon';
 
 export default function AwaitingSignatures() {
   const t = useContext(I18nContext);
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const fetchParams = useSelector(getFetchParams, isEqual);
   const { destinationTokenInfo, sourceTokenInfo } = fetchParams?.metaData || {};
@@ -149,8 +148,8 @@ export default function AwaitingSignatures() {
           await dispatch(prepareToLeaveSwaps());
           // Go to the default route and then to the build quote route in order to clean up
           // the `inputValue` local state in `pages/swaps/index.js`
-          history.push(DEFAULT_ROUTE);
-          history.push(PREPARE_SWAP_ROUTE);
+          navigate(DEFAULT_ROUTE);
+          navigate(PREPARE_SWAP_ROUTE);
         }}
         submitText={t('cancel')}
         hideCancel

ui/pages/swaps/awaiting-signatures/awaiting-signatures.test.js

@@ -1,10 +1,7 @@
 import React from 'react';
 import configureMockStore from 'redux-mock-store';
-
-import {
-  renderWithProvider,
-  createSwapsMockStore,
-} from '../../../../test/jest';
+import { createSwapsMockStore } from '../../../../test/jest';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
 import AwaitingSignatures from '.';
 
 describe('AwaitingSignatures', () => {

ui/pages/swaps/awaiting-swap/awaiting-swap.js

@@ -2,7 +2,7 @@ import EventEmitter from 'events';
 import React, { useContext, useRef, useState, useEffect } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import isEqual from 'lodash/isEqual';
 import { getBlockExplorerLink } from '@metamask/etherscan-link';
 import { I18nContext } from '../../../contexts/i18n';
@@ -80,7 +80,7 @@ export default function AwaitingSwap({
 }) {
   const t = useContext(I18nContext);
   const trackEvent = useContext(MetaMetricsContext);
-  const history = useHistory();
+  const navigate = useNavigate();
   const dispatch = useDispatch();
   const hdEntropyIndex = useSelector(getHDEntropyIndex);
   const animationEventEmitter = useRef(new EventEmitter());
@@ -329,31 +329,31 @@ export default function AwaitingSwap({
           /* istanbul ignore next */
           if (errorKey === OFFLINE_FOR_MAINTENANCE) {
             await dispatch(prepareToLeaveSwaps());
-            history.push(DEFAULT_ROUTE);
+            navigate(DEFAULT_ROUTE);
           } else if (errorKey === QUOTES_EXPIRED_ERROR) {
             dispatch(prepareForRetryGetQuotes());
             await dispatch(
               fetchQuotesAndSetQuoteState(
-                history,
+                navigate,
                 fromTokenInputValue,
                 maxSlippage,
                 trackEvent,
               ),
             );
           } else if (errorKey) {
-            await dispatch(navigateBackToPrepareSwap(history));
+            await dispatch(navigateBackToPrepareSwap(navigate));
           } else if (
             isSwapsDefaultTokenSymbol(destinationTokenSymbol, chainId) ||
             swapComplete
           ) {
-            history.push(DEFAULT_ROUTE);
+            navigate(DEFAULT_ROUTE);
           } else {
             await dispatch(setDefaultHomeActiveTabName('activity'));
-            history.push(DEFAULT_ROUTE);
+            navigate(DEFAULT_ROUTE);
           }
         }}
         onCancel={async () =>
-          await dispatch(navigateBackToPrepareSwap(history))
+          await dispatch(navigateBackToPrepareSwap(navigate))
         }
         submitText={submitText}
         disabled={submittingSwap}

ui/pages/swaps/awaiting-swap/awaiting-swap.test.js

@@ -3,11 +3,8 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
 import { setBackgroundConnection } from '../../../store/background-connection';
-import {
-  renderWithProvider,
-  createSwapsMockStore,
-  fireEvent,
-} from '../../../../test/jest';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
+import { createSwapsMockStore, fireEvent } from '../../../../test/jest';
 import {
   Slippage,
   QUOTES_EXPIRED_ERROR,

ui/pages/swaps/create-new-swap/create-new-swap.js

@@ -1,9 +1,8 @@
 import React, { useContext } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import isEqual from 'lodash/isEqual';
-
 import Box from '../../../components/ui/box';
 import { I18nContext } from '../../../contexts/i18n';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
@@ -24,7 +23,7 @@ export default function CreateNewSwap({ sensitiveTrackingProperties }) {
   const trackEvent = useContext(MetaMetricsContext);
   const hdEntropyIndex = useSelector(getHDEntropyIndex);
   const dispatch = useDispatch();
-  const history = useHistory();
+  const navigate = useNavigate();
   const defaultSwapsToken = useSelector(getSwapsDefaultToken, isEqual);
 
   return (
@@ -39,8 +38,8 @@ export default function CreateNewSwap({ sensitiveTrackingProperties }) {
               hd_entropy_index: hdEntropyIndex,
             },
           });
-          history.push(DEFAULT_ROUTE); // It cleans up Swaps state.
-          await dispatch(navigateBackToPrepareSwap(history));
+          navigate(DEFAULT_ROUTE); // It cleans up Swaps state.
+          await dispatch(navigateBackToPrepareSwap(navigate));
           dispatch(setSwapsFromToken(defaultSwapsToken));
         }}
       >

ui/pages/swaps/create-new-swap/create-new-swap.test.js

@@ -3,11 +3,8 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
 import { setBackgroundConnection } from '../../../store/background-connection';
-import {
-  renderWithProvider,
-  createSwapsMockStore,
-  fireEvent,
-} from '../../../../test/jest';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
+import { createSwapsMockStore, fireEvent } from '../../../../test/jest';
 import {
   setSwapsFromToken,
   navigateBackToPrepareSwap,