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

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}