Ensure sign message button is only enabled on scroll (#13645)

* Ensure sign message button is only enabled on scroll

* Add button for message scrolling to signature request screen

* lint fix

* Only show scroll button if message is scrollable

Co-authored-by: ryanml <ryanlanese@gmail.com>

test/e2e/tests/signature-request.spec.js

@@ -66,10 +66,9 @@ describe('Sign Typed Data V4 Signature Request', function () {
         );
         assert.equal(await message.getText(), 'Hello, Bob!');
         // Approve signing typed data
-        await driver.executeScript(`
-          const lastNodeInMessage = document.querySelectorAll('.signature-request-message--node')[7];
-          lastNodeInMessage.scrollIntoView();
-        `);
+        await driver.clickElement(
+          '[data-testid="signature-request-scroll-button"]',
+        );
         await driver.delay(regularDelayMs);
         await driver.clickElement({ text: 'Sign', tag: 'button' });
         await driver.waitUntilXWindowHandles(2);

ui/components/app/signature-request/signature-request-footer/index.scss

@@ -9,10 +9,16 @@
   }
 
   button:first-child {
-    margin-left: 1rem;
+    flex: 1 1 100%;
+    padding: 0;
   }
 
   button:last-child {
+    flex: 1 1 100%;
     margin-right: 1rem;
   }
+
+  &__tooltip {
+    display: flex;
+  }
 }

ui/components/app/signature-request/signature-request-message/index.scss

@@ -3,6 +3,7 @@
   display: flex;
   max-height: 250px;
   flex-direction: column;
+  position: relative;
 
   &__title {
     @include H6;
@@ -57,4 +58,16 @@
   &--node-leaf {
     display: flex;
   }
+
+  &__scroll-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--Grey-500);
+    position: absolute;
+    right: 24px;
+    bottom: 12px;
+    border-radius: 50%;
+    cursor: pointer;
+  }
 }

ui/components/app/signature-request/signature-request-message/signature-request-message.component.js

@@ -8,24 +8,24 @@ export default class SignatureRequestMessage extends PureComponent {
     data: PropTypes.object.isRequired,
     onMessageScrolled: PropTypes.func,
     setMessageRootRef: PropTypes.func,
+    messageRootRef: PropTypes.object,
+    messageIsScrollable: PropTypes.bool,
   };
 
   static contextTypes = {
     t: PropTypes.func,
   };
 
-  messageAreaRef;
-
   state = {
     messageIsScrolled: false,
   };
 
   setMessageIsScrolled = () => {
-    if (!this.messageAreaRef || this.state.messageIsScrolled) {
+    if (!this.props.messageRootRef || this.state.messageIsScrolled) {
       return;
     }
 
-    const { scrollTop, offsetHeight, scrollHeight } = this.messageAreaRef;
+    const { scrollTop, offsetHeight, scrollHeight } = this.props.messageRootRef;
     const isAtBottom = scrollTop + offsetHeight >= scrollHeight;
 
     if (isAtBottom) {
@@ -63,17 +63,36 @@ export default class SignatureRequestMessage extends PureComponent {
     );
   }
 
-  render() {
-    const { data } = this.props;
-
+  renderScrollButton() {
     return (
       <div
-        onScroll={this.onScroll}
-        ref={(ref) => {
-          this.messageAreaRef = ref;
+        onClick={() => {
+          this.setState({ messageIsScrolled: true });
+          this.props.onMessageScrolled();
+          this.props.messageRootRef.scrollTo(
+            0,
+            this.props.messageRootRef.scrollHeight,
+          );
         }}
-        className="signature-request-message"
+        className="signature-request-message__scroll-button"
+        data-testid="signature-request-scroll-button"
       >
+        <img
+          src="./images/icons/down-arrow.svg"
+          width="28"
+          height="28"
+          alt={this.context.t('scrollDown')}
+        />
+      </div>
+    );
+  }
+
+  render() {
+    const { data, messageIsScrollable } = this.props;
+
+    return (
+      <div onScroll={this.onScroll} className="signature-request-message">
+        {messageIsScrollable ? this.renderScrollButton() : null}
         <div className="signature-request-message__title">
           {this.context.t('signatureRequest1')}
         </div>

ui/components/app/signature-request/signature-request.component.js

@@ -139,6 +139,8 @@ export default class SignatureRequest extends PureComponent {
           data={sanitizeMessage(message, primaryType, types)}
           onMessageScrolled={() => this.setState({ hasScrolledMessage: true })}
           setMessageRootRef={this.setMessageRootRef.bind(this)}
+          messageRootRef={this.messageRootRef}
+          messageIsScrollable={messageIsScrollable}
         />
         <Footer
           cancelAction={onCancel}