From f9955eeea9d5985861ec1a0add501e83a79fb71e Mon Sep 17 00:00:00 2001
From: Vinicius Stevam <45455812+vinistevam@users.noreply.github.com>
Date: Wed, 6 Nov 2024 08:12:57 +0000
Subject: [PATCH] fix: remove scroll-to-bottom requirement in redesigned
 transaction confirmations (#27910)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
This PR addresses the removal of the scroll-to-bottom requirement in the
redesigned transaction confirmation screens. It eliminates the need for
users to scroll to the bottom in order to enable the confirm button,
streamlining the confirmation process. The scroll-to-bottom arrow is
also removed, ensuring a smoother user experience without unnecessary
interaction barriers.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/27910?quickstart=1)

## **Related issues**

Fixes: https://github.com/MetaMask/MetaMask-planning/issues/3495

## **Manual testing steps**

1. Go to test dapp
2. Have 2+ transaction insights snaps installed
3. Click Create Token
4. See the confirm button disabled until you scroll to bottom

## **Screenshots/Recordings**


[deploy.webm](https://github.com/user-attachments/assets/79716a68-e70f-456a-b962-ccec8732935b)


<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.
---
 .../scroll-to-bottom/scroll-to-bottom.test.tsx | 15 ++++++++++++++-
 .../scroll-to-bottom/scroll-to-bottom.tsx      | 18 ++++++++++++++++--
 2 files changed, 30 insertions(+), 3 deletions(-)

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(
+        <ScrollToBottom>foobar</ScrollToBottom>,
+        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 (
     <Box
@@ -104,7 +118,7 @@ const ScrollToBottom = ({ children }: ContentProps) => {
       >
         {children}
 
-        {isScrollable && !isScrolledToBottom && (
+        {showScrollToBottom && (
           <ButtonIcon
             className="confirm-scroll-to-bottom__button"
             onClick={scrollToBottom}