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 && (