refactor: fix lint and remove migration for home page since it is blocked by navigateToConfirmation

Author: DDDDDanica

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';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
 import mockState from '../../../../test/data/mock-state.json';
 import configureStore from '../../../store/store';
 import { ONBOARDING_REVIEW_SRP_ROUTE } from '../../../helpers/constants/routes';
@@ -9,6 +9,14 @@ 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({
@@ -50,30 +58,28 @@ describe('MultichainSrpBackup', () => {
   });
 
   it('navigates to SRP review route when shouldShowBackupReminder is true', () => {
-    const { history } = renderComponent({ shouldShowBackupReminder: true });
-    const mockHistoryPush = jest.spyOn(history, 'push');
+    renderComponent({ shouldShowBackupReminder: true });
 
     fireEvent.click(screen.getByTestId(srpBackupRowTestId));
 
-    expect(mockHistoryPush).toHaveBeenCalledWith(
+    expect(mockUseNavigate).toHaveBeenCalledWith(
       `${ONBOARDING_REVIEW_SRP_ROUTE}/?isFromReminder=true`,
     );
   });
 
   it('opens SRP quiz modal when shouldShowBackupReminder is false', async () => {
-    const { history } = renderComponent({
+    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(mockHistoryPush).not.toHaveBeenCalled();
+    expect(mockUseNavigate).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 { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 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 history = useHistory();
+  const navigate = useNavigate();
   const [srpQuizModalVisible, setSrpQuizModalVisible] = useState(false);
 
   const handleSrpBackupClick = useCallback(() => {
     if (shouldShowBackupReminder) {
       const backUpSRPRoute = `${ONBOARDING_REVIEW_SRP_ROUTE}/?isFromReminder=true`;
-      history.push(backUpSRPRoute);
+      navigate(backUpSRPRoute);
     } else {
       setSrpQuizModalVisible(true);
     }
-  }, [shouldShowBackupReminder, history, setSrpQuizModalVisible]);
+  }, [shouldShowBackupReminder, navigate, setSrpQuizModalVisible]);
 
   const handleQuizModalClose = useCallback(() => {
     setSrpQuizModalVisible(false);

ui/pages/home/home.component.js

@@ -1,7 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Route } from 'react-router-dom';
-import { Navigate } from 'react-router-dom-v5-compat';
+import { Redirect, Route } from 'react-router-dom';
 import { Text, TextVariant, TextColor } from '@metamask/design-system-react';
 import { COHORT_NAMES } from '@metamask/subscription-controller';
 import {
@@ -65,11 +64,10 @@ import {
   SUPPORT_LINK,
   ///: END:ONLY_INCLUDE_IF
 } from '../../../shared/lib/ui-utils';
-import { AccountOverview } from '../../components/multichain';
+import { AccountOverview } from '../../components/multichain/account-overview';
 import { setEditedNetwork } from '../../store/actions';
 import { navigateToConfirmation } from '../confirmations/hooks/useConfirmationNavigation';
 import PasswordOutdatedModal from '../../components/app/password-outdated-modal';
-import ConnectionsRemovedModal from '../../components/app/connections-removed-modal';
 import ShieldEntryModal from '../../components/app/shield-entry-modal';
 ///: BEGIN:ONLY_INCLUDE_IF(build-beta)
 import BetaHomeFooter from './beta/beta-home-footer.component';
@@ -100,7 +98,7 @@ export default class Home extends PureComponent {
   };
 
   static propTypes = {
-    navigate: PropTypes.func,
+    history: PropTypes.object,
     forgottenPassword: PropTypes.bool,
     setConnectedStatusPopoverHasBeenShown: PropTypes.func,
     shouldShowSeedPhraseReminder: PropTypes.bool.isRequired,
@@ -170,7 +168,6 @@ export default class Home extends PureComponent {
     setAccountDetailsAddress: PropTypes.func,
     isSeedlessPasswordOutdated: PropTypes.bool,
     isPrimarySeedPhraseBackedUp: PropTypes.bool,
-    showConnectionsRemovedModal: PropTypes.bool,
     showShieldEntryModal: PropTypes.bool,
     isSocialLoginFlow: PropTypes.bool,
     lookupSelectedNetworks: PropTypes.func.isRequired,
@@ -224,7 +221,7 @@ export default class Home extends PureComponent {
 
   checkStatusAndNavigate() {
     const {
-      navigate,
+      history,
       isNotification,
       haveSwapsQuotes,
       haveBridgeQuotes,
@@ -242,25 +239,25 @@ export default class Home extends PureComponent {
 
     const canRedirect = !isNotification && !stayOnHomePage;
     if (canRedirect && showAwaitingSwapScreen) {
-      navigate(AWAITING_SWAP_ROUTE);
+      history.push(AWAITING_SWAP_ROUTE);
     } else if (canRedirect && (haveSwapsQuotes || swapsFetchParams)) {
-      navigate(PREPARE_SWAP_ROUTE);
+      history.push(PREPARE_SWAP_ROUTE);
     } else if (canRedirect && haveBridgeQuotes) {
-      navigate(CROSS_CHAIN_SWAP_ROUTE + PREPARE_SWAP_ROUTE);
+      history.push(CROSS_CHAIN_SWAP_ROUTE + PREPARE_SWAP_ROUTE);
     } else if (pendingApprovals.length || hasApprovalFlows) {
       navigateToConfirmation(
         pendingApprovals?.[0]?.id,
         pendingApprovals,
         hasApprovalFlows,
-        navigate,
+        history,
       );
     }
   }
 
   checkRedirectAfterDefaultPage() {
     const {
       redirectAfterDefaultPage,
-      navigate,
+      history,
       clearRedirectAfterDefaultPage,
       setAccountDetailsAddress,
     } = this.props;
@@ -274,7 +271,7 @@ export default class Home extends PureComponent {
         setAccountDetailsAddress(redirectAfterDefaultPage.address);
       }
 
-      navigate(redirectAfterDefaultPage.path);
+      history.push(redirectAfterDefaultPage.path);
       clearRedirectAfterDefaultPage();
     }
   }
@@ -398,7 +395,7 @@ export default class Home extends PureComponent {
     const { t } = this.context;
 
     const {
-      navigate,
+      history,
       shouldShowSeedPhraseReminder,
       isPopup,
       shouldShowWeb3ShimUsageNotification,
@@ -661,7 +658,7 @@ export default class Home extends PureComponent {
             if (isPopup) {
               global.platform.openExtensionInBrowser(backUpSRPRoute);
             } else {
-              navigate(backUpSRPRoute);
+              history.push(backUpSRPRoute);
             }
           }}
           infoText={t('backupApprovalInfo')}
@@ -867,13 +864,12 @@ export default class Home extends PureComponent {
       showUpdateModal,
       isSeedlessPasswordOutdated,
       isPrimarySeedPhraseBackedUp,
-      showConnectionsRemovedModal,
       showShieldEntryModal,
       isSocialLoginFlow,
     } = this.props;
 
     if (forgottenPassword) {
-      return <Navigate to={RESTORE_VAULT_ROUTE} replace />;
+      return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />;
     } else if (this.state.notificationClosing || this.state.redirecting) {
       return null;
     }
@@ -935,7 +931,6 @@ export default class Home extends PureComponent {
           {showTermsOfUse ? (
             <TermsOfUsePopup onAccept={this.onAcceptTermsOfUse} />
           ) : null}
-          {showConnectionsRemovedModal && <ConnectionsRemovedModal />}
           {showShieldEntryModal && <ShieldEntryModal />}
           {isPopup && !connectedStatusPopoverHasBeenShown
             ? this.renderPopover()

ui/pages/home/home.container.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import { useNavState } from '../../contexts/navigation-state';
 import { useShieldSubscriptionContext } from '../../contexts/shield/shield-subscription';
 import {
@@ -27,7 +28,6 @@ import {
   getEditedNetwork,
   selectPendingApprovalsForNavigation,
   getShowUpdateModal,
-  getShowConnectionsRemovedModal,
   getIsSocialLoginFlow,
   getShowShieldEntryModal,
   getPendingShieldCohort,
@@ -88,7 +88,6 @@ import {
   clearRedirectAfterDefaultPage,
 } from '../../ducks/history/history';
 
-import withRouterHooks from '../../helpers/higher-order-components/with-router-hooks/with-router-hooks';
 import Home from './home.component';
 
 const mapStateToProps = (state) => {
@@ -192,7 +191,6 @@ const mapStateToProps = (state) => {
     redirectAfterDefaultPage,
     isSeedlessPasswordOutdated: getIsSeedlessPasswordOutdated(state),
     isPrimarySeedPhraseBackedUp: getIsPrimarySeedPhraseBackedUp(state),
-    showConnectionsRemovedModal: getShowConnectionsRemovedModal(state),
     showShieldEntryModal: getShowShieldEntryModal(state),
     isSocialLoginFlow: getIsSocialLoginFlow(state),
     pendingShieldCohort: getPendingShieldCohort(state),
@@ -277,6 +275,6 @@ const HomeWithRouter = ({ match: _match, ...props }) => {
 };
 
 export default compose(
-  withRouterHooks,
+  withRouter,
   connect(mapStateToProps, mapDispatchToProps),
 )(HomeWithRouter);

ui/pages/routes/routes.component.tsx

@@ -1051,14 +1051,9 @@ export default function Routes() {
           <RouteWithLayout
             authenticated
             path={DEFAULT_ROUTE}
+            component={Home}
             layout={RootLayout}
-          >
-            {createV5CompatRoute(Home, {
-              wrapper: AuthenticatedV5Compat,
-              includeNavigate: true,
-              includeLocation: true,
-            })}
-          </RouteWithLayout>
+          />
         </Switch>
       </Suspense>
     );