Fixing sign type data message formatting, requiring content scroll before sign (#13642)

* Fixing signature request formatting, requiring scroll before sign

* Ensure sign button not disable when no scroll is required

* Test fix attempt #1

* Clean up e2e tests

Co-authored-by: Dan Miller <danjm.com@gmail.com>

Author: ryanml

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

@@ -1,5 +1,9 @@
 const { strict: assert } = require('assert');
-const { convertToHexValue, withFixtures } = require('../helpers');
+const {
+  convertToHexValue,
+  withFixtures,
+  regularDelayMs,
+} = require('../helpers');
 
 describe('Sign Typed Data V4 Signature Request', function () {
   it('can initiate and confirm a Signature Request', async function () {
@@ -61,8 +65,12 @@ 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.delay(regularDelayMs);
         await driver.clickElement({ text: 'Sign', tag: 'button' });
         await driver.waitUntilXWindowHandles(2);
         windowHandles = await driver.getAllWindowHandles();

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

@@ -1,6 +1,7 @@
 .signature-request-message {
   flex: 1 60%;
   display: flex;
+  max-height: 250px;
   flex-direction: column;
 
   &__title {

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

@@ -1,16 +1,41 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { debounce } from 'lodash';
 import classnames from 'classnames';
 
 export default class SignatureRequestMessage extends PureComponent {
   static propTypes = {
     data: PropTypes.object.isRequired,
+    onMessageScrolled: PropTypes.func,
+    setMessageRootRef: PropTypes.func,
   };
 
   static contextTypes = {
     t: PropTypes.func,
   };
 
+  messageAreaRef;
+
+  state = {
+    messageIsScrolled: false,
+  };
+
+  setMessageIsScrolled = () => {
+    if (!this.messageAreaRef || this.state.messageIsScrolled) {
+      return;
+    }
+
+    const { scrollTop, offsetHeight, scrollHeight } = this.messageAreaRef;
+    const isAtBottom = scrollTop + offsetHeight >= scrollHeight;
+
+    if (isAtBottom) {
+      this.setState({ messageIsScrolled: true });
+      this.props.onMessageScrolled();
+    }
+  };
+
+  onScroll = debounce(this.setMessageIsScrolled, 25);
+
   renderNode(data) {
     return (
       <div className="signature-request-message--node">
@@ -42,11 +67,20 @@ export default class SignatureRequestMessage extends PureComponent {
     const { data } = this.props;
 
     return (
-      <div className="signature-request-message">
+      <div
+        onScroll={this.onScroll}
+        ref={(ref) => {
+          this.messageAreaRef = ref;
+        }}
+        className="signature-request-message"
+      >
         <div className="signature-request-message__title">
           {this.context.t('signatureRequest1')}
         </div>
-        <div className="signature-request-message--root">
+        <div
+          className="signature-request-message--root"
+          ref={this.props.setMessageRootRef}
+        >
           {this.renderNode(data)}
         </div>
       </div>

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

@@ -44,6 +44,14 @@ export default class SignatureRequest extends PureComponent {
     metricsEvent: PropTypes.func,
   };
 
+  state = {
+    hasScrolledMessage: false,
+  };
+
+  setMessageRootRef(ref) {
+    this.messageRootRef = ref;
+  }
+
   formatWallet(wallet) {
     return `${wallet.slice(0, 8)}...${wallet.slice(
       wallet.length - 8,
@@ -97,6 +105,9 @@ export default class SignatureRequest extends PureComponent {
       });
     };
 
+    const messageIsScrollable =
+      this.messageRootRef?.scrollHeight > this.messageRootRef?.clientHeight;
+
     return (
       <div className="signature-request page-container">
         <Header fromAccount={fromAccount} />
@@ -124,11 +135,18 @@ export default class SignatureRequest extends PureComponent {
             <LedgerInstructionField showDataInstruction />
           </div>
         ) : null}
-        <Message data={sanitizeMessage(message, primaryType, types)} />
+        <Message
+          data={sanitizeMessage(message, primaryType, types)}
+          onMessageScrolled={() => this.setState({ hasScrolledMessage: true })}
+          setMessageRootRef={this.setMessageRootRef.bind(this)}
+        />
         <Footer
           cancelAction={onCancel}
           signAction={onSign}
-          disabled={hardwareWalletRequiresConnection}
+          disabled={
+            hardwareWalletRequiresConnection ||
+            (messageIsScrollable && !this.state.hasScrolledMessage)
+          }
         />
       </div>
     );