diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx
index d5954e56609b..6bf31166b6e5 100644
--- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.test.tsx
+++ b/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(
+ foobar,
+ configureMockStore([])(mockStateTransaction),
+ );
+
+ expect(container.querySelector(buttonSelector)).not.toBeInTheDocument();
+ });
+
describe('when user has scrolled to the bottom', () => {
beforeEach(() => {
mockedUseScrollRequiredResult.isScrolledToBottom = true;
diff --git a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx b/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx
index f42997de114e..c61053818923 100644
--- a/ui/pages/confirmations/components/confirm/scroll-to-bottom/scroll-to-bottom.tsx
+++ b/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 (
{
>
{children}
- {isScrollable && !isScrolledToBottom && (
+ {showScrollToBottom && (