Merge branch 'main' into sidepanel-icon

Author: NidhiKJha

app/_locales/en/messages.json

@@ -19,7 +19,7 @@ import {
 } from '../../../../../../test/data/confirmations/personal_sign';
 import { permitSignatureMsg } from '../../../../../../test/data/confirmations/typed_sign';
 import mockState from '../../../../../../test/data/mock-state.json';
-import { fireEvent, waitFor } from '../../../../../../test/jest';
+import { fireEvent } from '../../../../../../test/jest';
 import { renderWithConfirmContextProvider } from '../../../../../../test/lib/confirmations/render-helpers';
 import { Alert } from '../../../../../ducks/confirm-alerts/confirm-alerts';
 import { Severity } from '../../../../../helpers/constants/design-system';
@@ -37,23 +37,9 @@ import Footer from './footer';
 jest.mock('../../../hooks/gas/useIsGaslessLoading');
 jest.mock('../../../hooks/alerts/transactions/useInsufficientBalanceAlerts');
 jest.mock('../../../hooks/gas/useIsGaslessSupported');
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-let mockStore: any = null;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const mockDispatch: any = jest.fn((action: unknown) => {
-  if (typeof action === 'function') {
-    // Thunk actions need both dispatch and getState
-    const mockGetState = mockStore ? mockStore.getState : jest.fn(() => ({}));
-    return action(mockDispatch, mockGetState);
-  }
-  return action;
-});
-
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
-  useDispatch: () => mockDispatch,
+  useDispatch: () => jest.fn(),
 }));
 jest.mock('../../../hooks/useConfirmationNavigation', () => ({
   useConfirmationNavigation: jest.fn(() => ({
@@ -73,32 +59,13 @@ jest.mock(
 );
 
 jest.mock('../../../hooks/useOriginThrottling');
-jest.mock('../../../hooks/useAddEthereumChain', () => ({
-  useAddEthereumChain: jest.fn(() => ({
-    onSubmit: jest.fn().mockResolvedValue(undefined),
-  })),
-  isAddEthereumChainType: jest.fn(
-    (confirmation) => confirmation?.type === 'wallet_addEthereumChain',
-  ),
-}));
-jest.mock('../../../hooks/transactions/useTransactionConfirm', () => ({
-  useTransactionConfirm: jest.fn(() => ({
-    onTransactionConfirm: jest.fn().mockResolvedValue(undefined),
-  })),
-}));
-jest.mock('../../../hooks/useConfirmSendNavigation', () => ({
-  useConfirmSendNavigation: jest.fn(() => ({
-    navigateBackIfSend: jest.fn(),
-  })),
-}));
 
 jest.mock('react-router-dom-v5-compat', () => ({
   useNavigate: jest.fn(),
 }));
 
 const render = (args?: Record<string, unknown>) => {
   const store = configureStore(args ?? getMockPersonalSignConfirmState());
-  mockStore = store;
 
   return renderWithConfirmContextProvider(<Footer />, store);
 };
@@ -121,10 +88,6 @@ describe('ConfirmFooter', () => {
   const useConfirmationNavigationMock = jest.mocked(useConfirmationNavigation);
 
   beforeEach(() => {
-    jest.clearAllMocks();
-    mockDispatch.mockClear();
-    mockStore = null;
-
     mockUseOriginThrottling.mockReturnValue({
       shouldThrottleOrigin: false,
     });
@@ -271,62 +234,50 @@ describe('ConfirmFooter', () => {
     });
   });
 
-  it('invoke required actions when cancel button is clicked', async () => {
+  it('invoke required actions when cancel button is clicked', () => {
     const { getAllByRole } = render();
     const cancelButton = getAllByRole('button')[0];
     const rejectSpy = jest
       .spyOn(Actions, 'rejectPendingApproval')
       // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31973
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .mockImplementation(() => Promise.resolve() as any);
+      .mockImplementation(() => ({}) as any);
     const updateCustomNonceSpy = jest
       .spyOn(Actions, 'updateCustomNonce')
       // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31973
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .mockReturnValue({} as any);
+      .mockImplementation(() => ({}) as any);
     const setNextNonceSpy = jest
       .spyOn(Actions, 'setNextNonce')
       // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31973
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .mockReturnValue({} as any);
-
+      .mockImplementation(() => ({}) as any);
     fireEvent.click(cancelButton);
-
-    // Wait for async onCancel to complete
-    await waitFor(() => {
-      expect(rejectSpy).toHaveBeenCalled();
-    });
-
+    expect(rejectSpy).toHaveBeenCalled();
     expect(updateCustomNonceSpy).toHaveBeenCalledWith('');
     expect(setNextNonceSpy).toHaveBeenCalledWith('');
   });
 
-  it('invoke required actions when submit button is clicked', async () => {
+  it('invoke required actions when submit button is clicked', () => {
     const { getAllByRole } = render();
     const submitButton = getAllByRole('button')[1];
     const resolveSpy = jest
       .spyOn(Actions, 'resolvePendingApproval')
       // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31973
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .mockImplementation(() => Promise.resolve() as any);
+      .mockImplementation(() => ({}) as any);
     const updateCustomNonceSpy = jest
       .spyOn(Actions, 'updateCustomNonce')
       // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31973
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .mockReturnValue({} as any);
+      .mockImplementation(() => ({}) as any);
     const setNextNonceSpy = jest
       .spyOn(Actions, 'setNextNonce')
       // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31973
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      .mockReturnValue({} as any);
-
+      .mockImplementation(() => ({}) as any);
     fireEvent.click(submitButton);
-
-    // Wait for async onSubmit to complete
-    await waitFor(() => {
-      expect(resolveSpy).toHaveBeenCalled();
-    });
-
+    expect(resolveSpy).toHaveBeenCalled();
     expect(updateCustomNonceSpy).toHaveBeenCalledWith('');
     expect(setNextNonceSpy).toHaveBeenCalledWith('');
   });
@@ -527,7 +478,7 @@ describe('ConfirmFooter', () => {
       // @ts-expect-error This is missing from the Mocha type definitions
       it.each(['Confirm', 'Cancel'])(
         'on %s button click',
-        async (buttonText: string) => {
+        (buttonText: string) => {
           const navigateNextMock = jest.fn();
           useConfirmationNavigationMock.mockReturnValue({
             navigateNext: navigateNextMock,
@@ -537,21 +488,17 @@ describe('ConfirmFooter', () => {
           const mockStateWithContractInteractionConfirmation =
             getMockContractInteractionConfirmState();
 
-          // Get the actual transaction from the transactions array
-          const contractInteractionConfirmation =
-            mockStateWithContractInteractionConfirmation.metamask
-              .transactions[0];
-
           mockStateWithContractInteractionConfirmation.metamask.pendingApprovals =
             {
+              [addEthereumChainApproval.id]: addEthereumChainApproval,
               ...mockStateWithContractInteractionConfirmation.metamask
                 .pendingApprovals,
-              [addEthereumChainApproval.id]: addEthereumChainApproval,
             };
           mockStateWithContractInteractionConfirmation.metamask.pendingApprovalCount = 2;
 
+          // Current confirmation is add ethereum chain
           jest.spyOn(confirmContext, 'useConfirmContext').mockReturnValue({
-            currentConfirmation: contractInteractionConfirmation,
+            currentConfirmation: addEthereumChainApproval,
             isScrollToBottomCompleted: true,
             setIsScrollToBottomCompleted: () => undefined,
           });
@@ -562,13 +509,10 @@ describe('ConfirmFooter', () => {
           const button = getByText(buttonText);
           fireEvent.click(button);
 
-          // Wait for async operations to complete
-          await waitFor(() => {
-            expect(navigateNextMock).toHaveBeenCalledTimes(1);
-          });
-
+          // It will navigate to transaction confirmation
+          expect(navigateNextMock).toHaveBeenCalledTimes(1);
           expect(navigateNextMock).toHaveBeenCalledWith(
-            contractInteractionConfirmation.id,
+            addEthereumChainApproval.id,
           );
         },
       );

app/_locales/en_GB/messages.json

@@ -4,7 +4,6 @@ import {
 } from '@metamask/transaction-controller';
 import React, { useCallback, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
 import { MetaMetricsEventLocation } from '../../../../../../shared/constants/metametrics';
 import { isCorrectDeveloperTransactionType } from '../../../../../../shared/lib/confirmation.utils';
 import { ConfirmAlertModal } from '../../../../../components/app/alert-system/confirm-alert-modal';
@@ -22,7 +21,6 @@ import {
   FlexDirection,
   Severity,
 } from '../../../../../helpers/constants/design-system';
-import { DEFAULT_ROUTE } from '../../../../../helpers/constants/routes';
 import useAlerts from '../../../../../hooks/useAlerts';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { doesAddressRequireLedgerHidConnection } from '../../../../../selectors';
@@ -194,7 +192,6 @@ const CancelButton = ({
 
 const Footer = () => {
   const dispatch = useDispatch();
-  const history = useHistory();
   const { onTransactionConfirm } = useTransactionConfirm();
   const { navigateNext } = useConfirmationNavigation();
   const { onSubmit: onAddEthereumChain } = useAddEthereumChain();
@@ -229,56 +226,41 @@ const Footer = () => {
     hardwareWalletRequiresConnection ||
     isGaslessLoading;
 
-  const onSubmit = useCallback(async () => {
+  const onSubmit = useCallback(() => {
     if (!currentConfirmation) {
       return;
     }
 
     if (isAddEthereumChain) {
-      await onAddEthereumChain();
-      history.push(DEFAULT_ROUTE);
+      onAddEthereumChain();
     } else if (isTransactionConfirmation) {
-      await onTransactionConfirm();
-      navigateNext(currentConfirmation.id);
+      onTransactionConfirm();
     } else {
-      await dispatch(resolvePendingApproval(currentConfirmation.id, undefined));
-      navigateNext(currentConfirmation.id);
+      dispatch(resolvePendingApproval(currentConfirmation.id, undefined));
     }
 
+    navigateNext(currentConfirmation.id);
     resetTransactionState();
   }, [
     currentConfirmation,
     dispatch,
-    history,
     isTransactionConfirmation,
-    isAddEthereumChain,
     navigateNext,
     onTransactionConfirm,
     resetTransactionState,
+    isAddEthereumChain,
     onAddEthereumChain,
   ]);
 
-  const handleFooterCancel = useCallback(async () => {
+  const handleFooterCancel = useCallback(() => {
     if (shouldThrottleOrigin) {
       setShowOriginThrottleModal(true);
       return;
     }
+    onCancel({ location: MetaMetricsEventLocation.Confirmation });
 
-    await onCancel({ location: MetaMetricsEventLocation.Confirmation });
-
-    if (isAddEthereumChain) {
-      history.push(DEFAULT_ROUTE);
-    } else {
-      navigateNext(currentConfirmation.id);
-    }
-  }, [
-    navigateNext,
-    onCancel,
-    shouldThrottleOrigin,
-    currentConfirmation,
-    isAddEthereumChain,
-    history,
-  ]);
+    navigateNext(currentConfirmation.id);
+  }, [navigateNext, onCancel, shouldThrottleOrigin, currentConfirmation]);
 
   const { isEnabled, isPaused } = useEnableShieldCoverageChecks();
   const isShowShieldFooterCoverageIndicator = isEnabled || isPaused;

ui/pages/confirmations/components/confirm/footer/footer.test.tsx

@@ -37,6 +37,8 @@ import {
 } from '../../../store/actions';
 import ConfirmDecryptMessage from '../../confirm-decrypt-message';
 import ConfirmEncryptionPublicKey from '../../confirm-encryption-public-key';
+import { useSidePanelEnabled } from '../../../hooks/useSidePanelEnabled';
+import { getUnapprovedConfirmations } from '../../../selectors/selectors';
 import ConfirmTransactionSwitch from '../confirm-transaction-switch';
 import Confirm from '../confirm/confirm';
 import useCurrentConfirmation from '../hooks/useCurrentConfirmation';
@@ -51,6 +53,9 @@ const ConfirmTransaction = () => {
   const dispatch = useDispatch();
   const history = useHistory();
   const { id: paramsTransactionId } = useParams();
+  const isSidePanelEnabled = useSidePanelEnabled();
+  const hasPendingApprovals =
+    useSelector(getUnapprovedConfirmations).length > 0;
 
   const mostRecentOverviewPage = useSelector(getMostRecentOverviewPage);
   const sendTo = useSelector(getSendTo);
@@ -165,6 +170,8 @@ const ConfirmTransaction = () => {
       paramsTransactionId !== transactionId
     ) {
       history.replace(mostRecentOverviewPage);
+    } else if (isSidePanelEnabled && !hasPendingApprovals) {
+      history.replace(DEFAULT_ROUTE);
     }
   }, [
     dispatch,
@@ -174,6 +181,9 @@ const ConfirmTransaction = () => {
     prevParamsTransactionId,
     prevTransactionId,
     totalUnapproved,
+    hasPendingApprovals,
+    isSidePanelEnabled,
+    isValidTransactionId,
     transaction,
     transactionId,
     use4ByteResolution,