feat: Do not require scroll-to-bottom for SIWE or Signatures with simulations before enabling Confirm footer

test/data/confirmations/helper.ts

@@ -1,4 +1,5 @@
 import { ApprovalType } from '@metamask/controller-utils';
+import { merge } from 'lodash';
 
 import {
   Confirmation,
@@ -142,28 +143,34 @@ export const getMockConfirmStateForTransaction = (
   transaction: Confirmation,
   args: RootState = { metamask: {} },
 ) =>
-  getMockConfirmState({
-    ...args,
-    metamask: {
-      ...args.metamask,
-      pendingApprovals: {
-        [transaction.id]: {
-          id: transaction.id,
-          type: ApprovalType.Transaction,
+  getMockConfirmState(
+    merge(
+      {
+        metamask: {
+          ...args.metamask,
+          pendingApprovals: {
+            [transaction.id]: {
+              id: transaction.id,
+              type: ApprovalType.Transaction,
+            },
+          },
+          transactions: [transaction],
+        },
+        confirm: {
+          currentConfirmation: transaction,
         },
       },
-      transactions: [transaction],
-    },
-    confirm: {
-      currentConfirmation: transaction,
-    },
-  });
+      args,
+    ),
+  );
 
-export const getMockContractInteractionConfirmState = () => {
+export const getMockContractInteractionConfirmState = (
+  args: RootState = { metamask: {} },
+) => {
   const contractInteraction = genUnapprovedContractInteractionConfirmation({
     chainId: mockState.metamask.networkConfigurations.goerli.chainId,
   });
-  return getMockConfirmStateForTransaction(contractInteraction);
+  return getMockConfirmStateForTransaction(contractInteraction, args);
 };
 
 export const getMockApproveConfirmState = () => {

test/data/mock-state.json

@@ -29,7 +29,9 @@
     "warning": null,
     "customTokenAmount": "10"
   },
-  "confirm": {},
+  "confirm": {
+    "isScrollToBottomCompleted": true
+  },
   "confirmAlerts": {
     "alerts": [],
     "confirmed": []

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

@@ -4,15 +4,21 @@ import {
   WebHIDConnectedStatuses,
 } from '../../../../../../shared/constants/hardware-wallets';
 import { BlockaidResultType } from '../../../../../../shared/constants/security-provider';
+import {
+  signatureRequestSIWE,
+  unapprovedPersonalSignMsg,
+} from '../../../../../../test/data/confirmations/personal_sign';
+import { permitSignatureMsg } from '../../../../../../test/data/confirmations/typed_sign';
 import {
   getMockContractInteractionConfirmState,
   getMockPersonalSignConfirmState,
   getMockPersonalSignConfirmStateForRequest,
+  getMockTypedSignConfirmState,
+  getMockTypedSignConfirmStateForRequest,
 } from '../../../../../../test/data/confirmations/helper';
 import mockState from '../../../../../../test/data/mock-state.json';
 import { fireEvent } from '../../../../../../test/jest';
 import { renderWithConfirmContextProvider } from '../../../../../../test/lib/confirmations/render-helpers';
-import { unapprovedPersonalSignMsg } from '../../../../../../test/data/confirmations/personal_sign';
 import * as MMIConfirmations from '../../../../../hooks/useMMIConfirmations';
 import * as Actions from '../../../../../store/actions';
 import configureStore from '../../../../../store/store';
@@ -49,7 +55,14 @@ describe('ConfirmFooter', () => {
   });
 
   it('should match snapshot with transaction confirmation', () => {
-    const { container } = render(getMockContractInteractionConfirmState());
+    const { container } = render(
+      getMockContractInteractionConfirmState({
+        confirm: {
+          isScrollToBottomCompleted: true,
+        },
+        metamask: {},
+      }),
+    );
     expect(container).toMatchSnapshot();
   });
 
@@ -61,6 +74,88 @@ describe('ConfirmFooter', () => {
     expect(getByText('Cancel')).toBeInTheDocument();
   });
 
+  describe('renders enabled "Confirm" Button', () => {
+    it('when isScrollToBottomCompleted is true', () => {
+      const mockStateTypedSign = getMockTypedSignConfirmState({
+        confirm: {
+          isScrollToBottomCompleted: true,
+        },
+        metamask: {},
+      });
+      const { getByText } = render(mockStateTypedSign);
+
+      const confirmButton = getByText('Confirm');
+      expect(confirmButton).not.toBeDisabled();
+    });
+
+    it('when the confirmation is a Sign-in With Ethereum (SIWE) request', () => {
+      const mockStateSIWE = getMockPersonalSignConfirmStateForRequest(
+        signatureRequestSIWE,
+        {
+          confirm: {
+            isScrollToBottomCompleted: false,
+          },
+          metamask: {},
+        },
+      );
+      const { getByText } = render(mockStateSIWE);
+
+      const confirmButton = getByText('Confirm');
+      expect(confirmButton).not.toBeDisabled();
+    });
+
+    it('when the confirmation is a Permit with the transaction simulation setting enabled', () => {
+      const mockStatePermit = getMockTypedSignConfirmStateForRequest(
+        permitSignatureMsg,
+        {
+          confirm: {
+            isScrollToBottomCompleted: false,
+          },
+          metamask: {
+            useTransactionSimulations: true,
+          },
+        },
+      );
+      const { getByText } = render(mockStatePermit);
+
+      const confirmButton = getByText('Confirm');
+      expect(confirmButton).not.toBeDisabled();
+    });
+  });
+
+  describe('renders disabled "Confirm" Button', () => {
+    it('when isScrollToBottomCompleted is false', () => {
+      const mockStateTypedSign = getMockTypedSignConfirmState({
+        confirm: {
+          isScrollToBottomCompleted: false,
+        },
+        metamask: {},
+      });
+      const { getByText } = render(mockStateTypedSign);
+
+      const confirmButton = getByText('Confirm');
+      expect(confirmButton).toBeDisabled();
+    });
+
+    it('when the confirmation is a Permit with the transaction simulation setting disabled', () => {
+      const mockStatePermit = getMockTypedSignConfirmStateForRequest(
+        permitSignatureMsg,
+        {
+          confirm: {
+            isScrollToBottomCompleted: false,
+          },
+          metamask: {
+            useTransactionSimulations: false,
+          },
+        },
+      );
+      const { getByText } = render(mockStatePermit);
+
+      const confirmButton = getByText('Confirm');
+      expect(confirmButton).toBeDisabled();
+    });
+  });
+
   it('invoke action rejectPendingApproval when cancel button is clicked', () => {
     const { getAllByRole } = render();
     const cancelButton = getAllByRole('button')[0];

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

@@ -29,7 +29,13 @@ import {
   ///: END:ONLY_INCLUDE_IF
 } from '../../../../../store/actions';
 import { confirmSelector } from '../../../selectors';
-import { REDESIGN_DEV_TRANSACTION_TYPES } from '../../../utils';
+import { selectUseTransactionSimulations } from '../../../selectors/preferences';
+
+import {
+  isPermitSignatureRequest,
+  isSIWESignatureRequest,
+  REDESIGN_DEV_TRANSACTION_TYPES,
+} from '../../../utils';
 import { useConfirmContext } from '../../../context/confirm';
 import { getConfirmationSender } from '../utils';
 import { MetaMetricsEventLocation } from '../../../../../../shared/constants/metametrics';
@@ -109,9 +115,12 @@ const Footer = () => {
   const t = useI18nContext();
   const confirm = useSelector(confirmSelector);
   const customNonceValue = useSelector(getCustomNonceValue);
+  const useTransactionSimulations = useSelector(
+    selectUseTransactionSimulations,
+  );
 
   const { currentConfirmation } = useConfirmContext();
-  const { isScrollToBottomNeeded } = confirm;
+  const { isScrollToBottomCompleted } = confirm;
   const { from } = getConfirmationSender(currentConfirmation);
 
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
@@ -126,6 +135,17 @@ const Footer = () => {
     return false;
   });
 
+  const isSIWE = isSIWESignatureRequest(currentConfirmation);
+  const isPermit = isPermitSignatureRequest(currentConfirmation);
+  const isPermitSimulationShown = isPermit && useTransactionSimulations;
+
+  const isConfirmDisabled =
+    (!isScrollToBottomCompleted && !isSIWE && !isPermitSimulationShown) ||
+    ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
+    mmiSubmitDisabled ||
+    ///: END:ONLY_INCLUDE_IF
+    hardwareWalletRequiresConnection;
+
   const onCancel = useCallback(
     ({ location }: { location?: MetaMetricsEventLocation }) => {
       if (!currentConfirmation) {
@@ -196,13 +216,7 @@ const Footer = () => {
       <ConfirmButton
         alertOwnerId={currentConfirmation?.id}
         onSubmit={() => onSubmit()}
-        disabled={
-          ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
-          mmiSubmitDisabled ||
-          ///: END:ONLY_INCLUDE_IF
-          isScrollToBottomNeeded ||
-          hardwareWalletRequiresConnection
-        }
+        disabled={isConfirmDisabled}
         onCancel={onCancel}
       />
     </PageFooter>

ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx

@@ -52,15 +52,15 @@ describe('ScrollToBottom', () => {
       expect(container.querySelector(buttonSelector)).not.toBeInTheDocument();
     });
 
-    it('sets isScrollToBottomNeeded to false', () => {
+    it('sets isScrollToBottomCompleted to true', () => {
       const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm');
       renderWithConfirmContextProvider(
         <ScrollToBottom>foobar</ScrollToBottom>,
         configureMockStore([])(mockState),
       );
 
       expect(updateSpy).toHaveBeenCalledWith({
-        isScrollToBottomNeeded: false,
+        isScrollToBottomCompleted: true,
       });
     });
   });
@@ -86,15 +86,15 @@ describe('ScrollToBottom', () => {
       expect(container.querySelector(buttonSelector)).toBeInTheDocument();
     });
 
-    it('sets isScrollToBottomNeeded to true', () => {
+    it('sets isScrollToBottomCompleted to false', () => {
       const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm');
       renderWithConfirmContextProvider(
         <ScrollToBottom>foobar</ScrollToBottom>,
         configureMockStore([])(mockState),
       );
 
       expect(updateSpy).toHaveBeenCalledWith({
-        isScrollToBottomNeeded: true,
+        isScrollToBottomCompleted: false,
       });
     });
 
@@ -144,6 +144,7 @@ describe('ScrollToBottom', () => {
     describe('when user has scrolled to the bottom', () => {
       beforeEach(() => {
         mockedUseScrollRequiredResult.isScrolledToBottom = true;
+        mockedUseScrollRequiredResult.hasScrolledToBottom = true;
       });
 
       it('hides the button', () => {
@@ -155,16 +156,15 @@ describe('ScrollToBottom', () => {
         expect(container.querySelector(buttonSelector)).not.toBeInTheDocument();
       });
 
-      it('sets isScrollToBottomNeeded to false', () => {
+      it('sets isScrollToBottomCompleted to true', () => {
         const updateSpy = jest.spyOn(ConfirmDucks, 'updateConfirm');
-        const { container } = renderWithConfirmContextProvider(
+        renderWithConfirmContextProvider(
           <ScrollToBottom>foobar</ScrollToBottom>,
           configureMockStore([])(mockState),
         );
 
-        expect(container.querySelector(buttonSelector)).not.toBeInTheDocument();
         expect(updateSpy).toHaveBeenCalledWith({
-          isScrollToBottomNeeded: true,
+          isScrollToBottomCompleted: true,
         });
       });
     });

ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx

@@ -74,7 +74,7 @@ const ScrollToBottom = ({ children }: ContentProps) => {
   useEffect(() => {
     dispatch(
       updateConfirm({
-        isScrollToBottomNeeded: isScrollable && !hasScrolledToBottom,
+        isScrollToBottomCompleted: !isScrollable || hasScrolledToBottom,
       }),
     );
   }, [isScrollable, hasScrolledToBottom]);

ui/pages/confirmations/types/confirm.ts

@@ -44,7 +44,7 @@ export type Confirmation = SignatureRequestType | TransactionMeta;
 export type ConfirmMetamaskState = {
   confirm: {
     currentConfirmation?: Confirmation;
-    isScrollToBottomNeeded?: boolean;
+    isScrollToBottomCompleted?: boolean;
   };
   metamask: {
     pendingApprovals: ApprovalControllerState['pendingApprovals'];

ui/pages/confirmations/utils/confirm.ts

@@ -8,7 +8,7 @@ import {
 } from '../../../../shared/constants/signatures';
 import { parseTypedDataMessage } from '../../../../shared/modules/transaction.utils';
 import { sanitizeMessage } from '../../../helpers/utils/util';
-import { SignatureRequestType } from '../types/confirm';
+import { Confirmation, SignatureRequestType } from '../types/confirm';
 import { TYPED_SIGNATURE_VERSIONS } from '../constants';
 
 export const REDESIGN_APPROVAL_TYPES = [
@@ -50,8 +50,13 @@ export const parseSanitizeTypedDataMessage = (dataToParse: string) => {
   return { sanitizedMessage, primaryType };
 };
 
-export const isSIWESignatureRequest = (request: SignatureRequestType) =>
-  Boolean(request?.msgParams?.siwe?.isSIWEMessage);
+/**
+ * Returns true if the request is a SIWE signature request
+ *
+ * @param request - The confirmation request to check
+ */
+export const isSIWESignatureRequest = (request?: Confirmation) =>
+  Boolean((request as SignatureRequestType)?.msgParams?.siwe?.isSIWEMessage);
 
 export const isOrderSignatureRequest = (request: SignatureRequestType) => {
   if (
@@ -69,17 +74,23 @@ export const isOrderSignatureRequest = (request: SignatureRequestType) => {
   return PRIMARY_TYPES_ORDER.includes(primaryType);
 };
 
-export const isPermitSignatureRequest = (request: SignatureRequestType) => {
+/**
+ * Returns true if the request is a Permit Typed Sign signature request
+ *
+ * @param request - The confirmation request to check
+ */
+export const isPermitSignatureRequest = (request?: Confirmation) => {
   if (
     !request ||
     !isSignatureTransactionType(request) ||
     request.type !== 'eth_signTypedData' ||
-    request.msgParams?.version?.toUpperCase() === TYPED_SIGNATURE_VERSIONS.V1
+    (request as SignatureRequestType).msgParams?.version?.toUpperCase() ===
+      TYPED_SIGNATURE_VERSIONS.V1
   ) {
     return false;
   }
   const { primaryType } = parseTypedDataMessage(
-    request.msgParams?.data as string,
+    (request as SignatureRequestType).msgParams?.data as string,
   );
 
   return PRIMARY_TYPES_PERMIT.includes(primaryType);