fix: remove scroll-to-bottom requirement in redesigned transaction confirmations

test/e2e/tests/confirmations/helpers.ts

@@ -14,6 +14,10 @@ export async function scrollAndConfirmAndAssertConfirm(driver: Driver) {
   await driver.clickElement('[data-testid="confirm-footer-button"]');
 }
 
+export async function confirmAndAssertConfirm(driver: Driver) {
+  await driver.clickElement('[data-testid="confirm-footer-button"]');
+}
+
 export function withRedesignConfirmationFixtures(
   // Default params first is discouraged because it makes it hard to call the function without the
   // optional parameters. But it doesn't apply here because we're always passing in a variable for

test/e2e/tests/confirmations/transactions/erc721-approve-redesign.spec.ts

@@ -2,7 +2,7 @@
 import { MockttpServer } from 'mockttp';
 import { WINDOW_TITLES } from '../../../helpers';
 import { Driver } from '../../../webdriver/driver';
-import { scrollAndConfirmAndAssertConfirm } from '../helpers';
+import { confirmAndAssertConfirm } from '../helpers';
 import {
   openDAppWithContract,
   TestSuiteArguments,
@@ -126,7 +126,7 @@ export async function confirmMintTransaction(driver: Driver) {
     text: 'Transaction request',
   });
 
-  await scrollAndConfirmAndAssertConfirm(driver);
+  await confirmAndAssertConfirm(driver);
 
   // Verify Mint Transaction is Confirmed before proceeding
   await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);
@@ -192,7 +192,7 @@ async function assertApproveDetails(driver: Driver) {
 }
 
 async function confirmApproveTransaction(driver: Driver) {
-  await scrollAndConfirmAndAssertConfirm(driver);
+  await confirmAndAssertConfirm(driver);
   await driver.waitUntilXWindowHandles(2);
   await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);
 

test/e2e/tests/confirmations/transactions/increase-token-allowance-redesign.spec.ts

@@ -11,7 +11,7 @@ import { Mockttp } from '../../../mock-e2e';
 import GanacheContractAddressRegistry from '../../../seeder/ganache-contract-address-registry';
 import { SMART_CONTRACTS } from '../../../seeder/smart-contracts';
 import { Driver } from '../../../webdriver/driver';
-import { scrollAndConfirmAndAssertConfirm } from '../helpers';
+import { confirmAndAssertConfirm } from '../helpers';
 import { openDAppWithContract, TestSuiteArguments } from './shared';
 
 describe('Confirmation Redesign ERC20 Increase Allowance', function () {
@@ -119,7 +119,7 @@ async function createAndAssertIncreaseAllowanceSubmission(
 
   await editSpendingCap(driver, newSpendingCap);
 
-  await scrollAndConfirmAndAssertConfirm(driver);
+  await confirmAndAssertConfirm(driver);
 
   await assertChangedSpendingCap(driver, newSpendingCap);
 }

test/e2e/tests/confirmations/transactions/revoke-allowance-redesign.spec.ts

@@ -2,7 +2,7 @@
 import { MockttpServer } from 'mockttp';
 import { WINDOW_TITLES } from '../../../helpers';
 import { Driver } from '../../../webdriver/driver';
-import { scrollAndConfirmAndAssertConfirm } from '../helpers';
+import { confirmAndAssertConfirm } from '../helpers';
 import { mocked4BytesApprove } from './erc20-approve-redesign.spec';
 import {
   assertChangedSpendingCap,
@@ -53,7 +53,7 @@ describe('Confirmation Redesign ERC20 Revoke Allowance', function () {
             text: 'Remove permission',
           });
 
-          await scrollAndConfirmAndAssertConfirm(driver);
+          await confirmAndAssertConfirm(driver);
 
           await assertChangedSpendingCap(driver, NEW_SPENDING_CAP);
         },
@@ -91,7 +91,7 @@ describe('Confirmation Redesign ERC20 Revoke Allowance', function () {
             text: 'Remove permission',
           });
 
-          await scrollAndConfirmAndAssertConfirm(driver);
+          await confirmAndAssertConfirm(driver);
 
           await assertChangedSpendingCap(driver, NEW_SPENDING_CAP);
         },

test/e2e/tests/confirmations/transactions/shared.ts

@@ -10,7 +10,10 @@ const {
   openDapp,
   WINDOW_TITLES,
 } = require('../../../helpers');
-const { scrollAndConfirmAndAssertConfirm } = require('../helpers');
+const {
+  scrollAndConfirmAndAssertConfirm,
+  confirmAndAssertConfirm,
+} = require('../helpers');
 
 export type TestSuiteArguments = {
   driver: Driver;
@@ -111,7 +114,7 @@ export async function confirmDepositTransaction(driver: Driver) {
   });
 
   await driver.delay(veryLargeDelayMs);
-  await scrollAndConfirmAndAssertConfirm(driver);
+  await confirmAndAssertConfirm(driver);
 }
 
 export async function confirmDepositTransactionWithCustomNonce(

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

@@ -2,7 +2,10 @@ import React from 'react';
 import configureMockStore from 'redux-mock-store';
 
 import { unapprovedTypedSignMsgV4 } from '../../../../../../test/data/confirmations/typed_sign';
-import { getMockPersonalSignConfirmState } from '../../../../../../test/data/confirmations/helper';
+import {
+  getMockContractInteractionConfirmState,
+  getMockPersonalSignConfirmState,
+} from '../../../../../../test/data/confirmations/helper';
 import { renderWithConfirmContextProvider } from '../../../../../../test/lib/confirmations/render-helpers';
 import * as usePreviousHooks from '../../../../../hooks/usePrevious';
 import ScrollToBottom from './scroll-to-bottom';
@@ -116,6 +119,16 @@ describe('ScrollToBottom', () => {
       expect(mockSetHasScrolledToBottom).toHaveBeenCalledWith(false);
     });
 
+    it('does not render the scroll button when the confirmation is transaction redesigned', () => {
+      const mockStateTransaction = getMockContractInteractionConfirmState();
+      const { container } = renderWithConfirmContextProvider(
+        <ScrollToBottom>foobar</ScrollToBottom>,
+        configureMockStore([])(mockStateTransaction),
+      );
+
+      expect(container.querySelector(buttonSelector)).not.toBeInTheDocument();
+    });
+
     describe('when user has scrolled to the bottom', () => {
       beforeEach(() => {
         mockedUseScrollRequiredResult.isScrolledToBottom = true;

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

@@ -1,5 +1,6 @@
 import React, { useContext, useEffect } from 'react';
 import { useSelector } from 'react-redux';
+import { TransactionType } from '@metamask/transaction-controller';
 import {
   Box,
   ButtonIcon,
@@ -20,6 +21,7 @@ import { usePrevious } from '../../../../../hooks/usePrevious';
 import { useScrollRequired } from '../../../../../hooks/useScrollRequired';
 import { useConfirmContext } from '../../../context/confirm';
 import { selectConfirmationAdvancedDetailsOpen } from '../../../selectors/preferences';
+import { REDESIGN_DEV_TRANSACTION_TYPES } from '../../../utils';
 
 type ContentProps = {
   /**
@@ -49,6 +51,13 @@ const ScrollToBottom = ({ children }: ContentProps) => {
     offsetPxFromBottom: 0,
   });
 
+  const isTransactionRedesign = REDESIGN_DEV_TRANSACTION_TYPES.includes(
+    currentConfirmation?.type as TransactionType,
+  );
+
+  const showScrollToBottom =
+    isScrollable && !isScrolledToBottom && !isTransactionRedesign;
+
   /**
    * Scroll to the top of the page when the confirmation changes. This happens
    * when we navigate through different confirmations. Also, resets hasScrolledToBottom
@@ -71,8 +80,13 @@ const ScrollToBottom = ({ children }: ContentProps) => {
   }, [currentConfirmation?.id, previousId, ref?.current]);
 
   useEffect(() => {
+    if (isTransactionRedesign) {
+      setIsScrollToBottomCompleted(true);
+      return;
+    }
+
     setIsScrollToBottomCompleted(!isScrollable || hasScrolledToBottom);
-  }, [isScrollable, hasScrolledToBottom]);
+  }, [isScrollable, hasScrolledToBottom, isTransactionRedesign]);
 
   return (
     <Box
@@ -104,7 +118,7 @@ const ScrollToBottom = ({ children }: ContentProps) => {
       >
         {children}
 
-        {isScrollable && !isScrolledToBottom && (
+        {showScrollToBottom && (
           <ButtonIcon
             className="confirm-scroll-to-bottom__button"
             onClick={scrollToBottom}