Merge remote-tracking branch 'origin/master' into Version-v10.10.0

CHANGELOG.md

@@ -34,6 +34,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure settings can be opened if browser zoom level > 100% ([#13460](https://github.com/MetaMask/metamask-extension/pull/13460))
 - Ensure displayed balances of tokens are not incorrectly rounded down ([#13337](https://github.com/MetaMask/metamask-extension/pull/13337))
 - Improve visual spacing on the wallet selection flow of onboarding ([#12799](https://github.com/MetaMask/metamask-extension/pull/12799))
+## [10.9.3]
+### Fixed
+- Allow for scrolling when sign type data message is too long ([#13642](https://github.com/MetaMask/metamask-extension/pull/13642))
+  - Require a scroll through of message before allowing user signature
 
 ## [10.9.2]
 ### Fixed
@@ -2728,6 +2732,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 [Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.10.0...HEAD
 [10.10.0]: https://github.com/MetaMask/metamask-extension/compare/v10.9.2...v10.10.0
+[Unreleased]: https://github.com/MetaMask/metamask-extension/compare/v10.9.3...HEAD
+[10.9.3]: https://github.com/MetaMask/metamask-extension/compare/v10.9.2...v10.9.3
 [10.9.2]: https://github.com/MetaMask/metamask-extension/compare/v10.9.1...v10.9.2
 [10.9.1]: https://github.com/MetaMask/metamask-extension/compare/v10.9.0...v10.9.1
 [10.9.0]: https://github.com/MetaMask/metamask-extension/compare/v10.8.2...v10.9.0

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('Signature Request', function () {
   it('can initiate and confirm a Signature Request', async function () {
@@ -59,6 +63,10 @@ describe('Signature Request', function () {
         );
 
         // Approve signing typed data
+        await driver.clickElement(
+          '[data-testid="signature-request-scroll-button"]',
+        );
+        await driver.delay(regularDelayMs);
         await driver.clickElement({ text: 'Sign', tag: 'button' }, 10000);
         await driver.waitUntilXWindowHandles(2);
         windowHandles = await driver.getAllWindowHandles();

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

@@ -1,7 +1,9 @@
 .signature-request-message {
   flex: 1 60%;
   display: flex;
+  max-height: 250px;
   flex-direction: column;
+  position: relative;
 
   &__title {
     @include H6;
@@ -56,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

@@ -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,
+    messageRootRef: PropTypes.object,
+    messageIsScrollable: PropTypes.bool,
   };
 
   static contextTypes = {
     t: PropTypes.func,
   };
 
+  state = {
+    messageIsScrolled: false,
+  };
+
+  setMessageIsScrolled = () => {
+    if (!this.props.messageRootRef || this.state.messageIsScrolled) {
+      return;
+    }
+
+    const { scrollTop, offsetHeight, scrollHeight } = this.props.messageRootRef;
+    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">
@@ -38,15 +63,43 @@ export default class SignatureRequestMessage extends PureComponent {
     );
   }
 
+  renderScrollButton() {
+    return (
+      <div
+        onClick={() => {
+          this.setState({ messageIsScrolled: true });
+          this.props.onMessageScrolled();
+          this.props.messageRootRef.scrollTo(
+            0,
+            this.props.messageRootRef.scrollHeight,
+          );
+        }}
+        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 } = this.props;
+    const { data, messageIsScrollable } = this.props;
 
     return (
-      <div className="signature-request-message">
+      <div onScroll={this.onScroll} className="signature-request-message">
+        {messageIsScrollable ? this.renderScrollButton() : null}
         <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,20 @@ 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)}
+          messageRootRef={this.messageRootRef}
+          messageIsScrollable={messageIsScrollable}
+        />
         <Footer
           cancelAction={onCancel}
           signAction={onSign}
-          disabled={hardwareWalletRequiresConnection}
+          disabled={
+            hardwareWalletRequiresConnection ||
+            (messageIsScrollable && !this.state.hasScrolledMessage)
+          }
         />
       </div>
     );

yarn.lock

@@ -5090,6 +5090,11 @@ acorn-walk@^7.0.0, acorn-walk@^7.1.1, acorn-walk@^7.2.0:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
+acorn-walk@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
 acorn@^3.0.4:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
@@ -5110,10 +5115,10 @@ acorn@^7.0.0, acorn@^7.1.1, acorn@^7.4.0, acorn@^7.4.1:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.2.4:
-  version "8.5.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.5.0.tgz#4512ccb99b3698c752591e9bb4472e38ad43cee2"
-  integrity sha512-yXbYeFy+jUuYd3/CDcg2NkIYE991XYX/bje7LmjJigUciaeO1JR4XxXgCIV1/Zc/dRuFEyw1L0pbA+qynJkW5Q==
+acorn@^8.2.4, acorn@^8.7.0:
+  version "8.7.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
+  integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
 
 addons-linter@1.14.0:
   version "1.14.0"
@@ -8470,7 +8475,7 @@ core-util-is@1.0.2, core-util-is@~1.0.0:
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
-cors@~2.8.5:
+cors@^2.8.1, cors@~2.8.5:
   version "2.8.5"
   resolved "https://registry.yarnpkg.com/cors/-/cors-2.8.5.tgz#eac11da51592dd86b9f06f6e7ac293b3df875d29"
   integrity sha512-KIHbLJqu73RGr/hnbrO9uBeixNGuvSQjul/jdFvS/KFSIH1hWVd1ng7zOHx+YrEfInLG7q4n6GHQ9cDtxv/P6g==
@@ -12312,10 +12317,10 @@ fnv1a@^1.0.1:
   resolved "https://registry.yarnpkg.com/fnv1a/-/fnv1a-1.0.1.tgz#915e2d6d023c43d5224ad9f6d2a3c4156f5712f5"
   integrity sha1-kV4tbQI8Q9UiStn20qPEFW9XEvU=
 
-follow-redirects@^1.14.0:
-  version "1.14.7"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.7.tgz#2004c02eb9436eee9a21446a6477debf17e81685"
-  integrity sha512-+hbxoLbFMbRKDwohX8GkTataGqO6Jb7jGwpAlwgy2bIz25XtRm7KEzJM76R1WiNT5SwZkX4Y75SwBolkpmE7iQ==
+follow-redirects@^1.14.0, follow-redirects@^1.14.7:
+  version "1.14.8"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.8.tgz#016996fb9a11a100566398b1c6839337d7bfa8fc"
+  integrity sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -27006,9 +27011,12 @@ vm-browserify@^1.0.0, vm-browserify@^1.0.1:
   integrity sha512-2ham8XPWTONajOR0ohOKOHXkm3+gaBmGut3SRuu75xLd/RRaY6vqgh8NBYYk7+RW3u5AtzPQZG8F10LHkl0lAQ==
 
 vm2@^3.9.3:
-  version "3.9.5"
-  resolved "https://registry.yarnpkg.com/vm2/-/vm2-3.9.5.tgz#5288044860b4bbace443101fcd3bddb2a0aa2496"
-  integrity sha512-LuCAHZN75H9tdrAiLFf030oW7nJV5xwNMuk1ymOZwopmuK3d2H4L1Kv4+GFHgarKiLfXXLFU+7LDABHnwOkWng==
+  version "3.9.7"
+  resolved "https://registry.yarnpkg.com/vm2/-/vm2-3.9.7.tgz#bb87aa677c97c61e23a6cb6547e44e990517a6f6"
+  integrity sha512-g/GZ7V0Mlmch3eDVOATvAXr1GsJNg6kQ5PjvYy3HbJMCRn5slNbo/u73Uy7r5yUej1cRa3ZjtoVwcWSQuQ/fow==
+  dependencies:
+    acorn "^8.7.0"
+    acorn-walk "^8.2.0"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"