From 702cab5fa79a30191808c0ff867a7a4ea15067b2 Mon Sep 17 00:00:00 2001
From: amerkadicE <97883527+amerkadicE@users.noreply.github.com>
Date: Fri, 2 Dec 2022 15:12:43 +0100
Subject: [PATCH] Add user guidance on signature request screen (#16600)

---
 app/_locales/en/messages.json                 |  3 +++
 .../signature-request-original.test.js.snap   |  5 ++++
 .../app/signature-request-original/index.scss |  4 ++-
 .../signature-request-original.component.js   | 27 ++++++++++++++-----
 .../signature-request-original.stories.js     |  1 +
 .../app/signature-request/index.scss          | 11 ++++++--
 .../signature-request.component.js            | 14 ++++++++--
 .../signature-request.container.test.js       |  8 ++++++
 .../signature-request.stories.js              |  3 ++-
 .../text-field-search.test.js.snap            |  2 +-
 10 files changed, 65 insertions(+), 13 deletions(-)

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index ea827a261..e9c9b78c3 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -3294,6 +3294,9 @@
   "signatureRequest1": {
     "message": "Message"
   },
+  "signatureRequestGuidance": {
+    "message": "Only sign this message if you fully understand the content and trust the requesting site."
+  },
   "signatureRequestWarning": {
     "message": "Signing this message could be dangerous. You may be giving total control of your account and assets to the party on the other end of this message. That means they could drain your account at any time. Proceed with caution. $1."
   },
diff --git a/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap b/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap
index 6bf931eb6..38b691b7d 100644
--- a/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap
+++ b/ui/components/app/signature-request-original/__snapshots__/signature-request-original.test.js.snap
@@ -140,6 +140,11 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
       >
         Signature request
       </h3>
+      <h6
+        class="box box--margin-12 box--margin-top-3 box--margin-bottom-1 box--flex-direction-row typography request-signature__content__subtitle typography--h7 typography--weight-normal typography--style-normal typography--align-center typography--color-text-alternative"
+      >
+        Only sign this message if you fully understand the content and trust the requesting site.
+      </h6>
       <div
         class="request-signature__notice"
       >
diff --git a/ui/components/app/signature-request-original/index.scss b/ui/components/app/signature-request-original/index.scss
index 26ee4c81a..d44b72f71 100644
--- a/ui/components/app/signature-request-original/index.scss
+++ b/ui/components/app/signature-request-original/index.scss
@@ -10,6 +10,8 @@
     align-items: center;
     position: relative;
     height: 100%;
+    margin-left: auto;
+    margin-right: auto;
 
     @include screen-sm-max {
       width: 100%;
@@ -78,7 +80,7 @@
     @include H6;
 
     text-align: center;
-    margin-top: 41px;
+    margin-top: 21px;
     margin-bottom: 11px;
     width: 100%;
   }
diff --git a/ui/components/app/signature-request-original/signature-request-original.component.js b/ui/components/app/signature-request-original/signature-request-original.component.js
index e02b29b81..b2f4813f8 100644
--- a/ui/components/app/signature-request-original/signature-request-original.component.js
+++ b/ui/components/app/signature-request-original/signature-request-original.component.js
@@ -16,6 +16,8 @@ import Typography from '../../ui/typography/typography';
 import {
   TYPOGRAPHY,
   FONT_WEIGHT,
+  COLORS,
+  TEXT_ALIGN,
 } from '../../../helpers/constants/design-system';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
 import SignatureRequestOriginalWarning from './signature-request-original-warning';
@@ -153,6 +155,16 @@ export default class SignatureRequestOriginal extends Component {
         >
           {this.context.t('sigRequest')}
         </Typography>
+        <Typography
+          className="request-signature__content__subtitle"
+          variant={TYPOGRAPHY.H7}
+          color={COLORS.TEXT_ALTERNATIVE}
+          align={TEXT_ALIGN.CENTER}
+          margin={12}
+          marginTop={3}
+        >
+          {this.context.t('signatureRequestGuidance')}
+        </Typography>
 
         <div className={classnames('request-signature__notice')}>{notice}</div>
         <div className="request-signature__rows">
@@ -303,13 +315,16 @@ export default class SignatureRequestOriginal extends Component {
 
   render = () => {
     const { messagesCount, conversionRate, nativeCurrency } = this.props;
-    const { fromAccount, showSignatureRequestWarning } = this.state;
+    const {
+      fromAccount: { address, balance, name },
+      showSignatureRequestWarning,
+    } = this.state;
     const { t } = this.context;
 
     const rejectNText = t('rejectRequestsN', [messagesCount]);
     const currentNetwork = this.getNetworkName();
 
-    const balanceInBaseAsset = conversionUtil(fromAccount.balance, {
+    const balanceInBaseAsset = conversionUtil(balance, {
       fromNumericBase: 'hex',
       toNumericBase: 'dec',
       fromDenomination: 'WEI',
@@ -322,10 +337,10 @@ export default class SignatureRequestOriginal extends Component {
         <div className="request-signature__account">
           <NetworkAccountBalanceHeader
             networkName={currentNetwork}
-            accountName={fromAccount.name}
+            accountName={name}
             accountBalance={balanceInBaseAsset}
             tokenName={nativeCurrency}
-            accountAddress={fromAccount.address}
+            accountAddress={address}
           />
         </div>
         {this.renderBody()}
@@ -336,8 +351,8 @@ export default class SignatureRequestOriginal extends Component {
         ) : null}
         {showSignatureRequestWarning && (
           <SignatureRequestOriginalWarning
-            senderAddress={fromAccount.address}
-            name={fromAccount.name}
+            senderAddress={address}
+            name={name}
             onSubmit={async (event) => await this.onSubmit(event)}
             onCancel={async (event) => await this.onCancel(event)}
           />
diff --git a/ui/components/app/signature-request-original/signature-request-original.stories.js b/ui/components/app/signature-request-original/signature-request-original.stories.js
index bc2c73900..6e52df8ef 100644
--- a/ui/components/app/signature-request-original/signature-request-original.stories.js
+++ b/ui/components/app/signature-request-original/signature-request-original.stories.js
@@ -71,6 +71,7 @@ export default {
     },
     mostRecentOverviewPage: '/',
     nativeCurrency: 'ETH',
+    provider: { name: 'Goerli ETH' },
   },
 };
 
diff --git a/ui/components/app/signature-request/index.scss b/ui/components/app/signature-request/index.scss
index 0e5c891a7..28a2eb16c 100644
--- a/ui/components/app/signature-request/index.scss
+++ b/ui/components/app/signature-request/index.scss
@@ -8,9 +8,17 @@
   flex: 1 1 auto;
   flex-direction: column;
   min-width: 0;
+  width: 408px;
+  background-color: var(--color-background-default);
+  box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
+  border-radius: 8px;
 
   @include screen-sm-min {
-    flex: initial;
+    max-height: 55vh;
+    min-height: 570px;
+    flex: 0 0 auto;
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
@@ -29,7 +37,6 @@
   display: flex;
   align-items: center;
   flex-direction: column;
-  margin-bottom: 25px;
   min-height: min-content;
 
   &__title {
diff --git a/ui/components/app/signature-request/signature-request.component.js b/ui/components/app/signature-request/signature-request.component.js
index 18c3f487e..fde4acd51 100644
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@@ -12,6 +12,7 @@ import {
   TYPOGRAPHY,
   FONT_WEIGHT,
   COLORS,
+  TEXT_ALIGN,
 } from '../../../helpers/constants/design-system';
 import NetworkAccountBalanceHeader from '../network-account-balance-header';
 import { NETWORK_TYPES } from '../../../../shared/constants/network';
@@ -174,7 +175,7 @@ export default class SignatureRequest extends PureComponent {
       : null;
 
     return (
-      <div className="signature-request page-container">
+      <div className="signature-request">
         <div className="request-signature__account">
           <NetworkAccountBalanceHeader
             networkName={currentNetwork}
@@ -204,7 +205,16 @@ export default class SignatureRequest extends PureComponent {
           >
             {this.context.t('sigRequest')}
           </Typography>
-
+          <Typography
+            className="request-signature__content__subtitle"
+            variant={TYPOGRAPHY.H7}
+            color={COLORS.TEXT_ALTERNATIVE}
+            align={TEXT_ALIGN.CENTER}
+            margin={12}
+            marginTop={3}
+          >
+            {this.context.t('signatureRequestGuidance')}
+          </Typography>
           <div>
             <Button
               type="link"
diff --git a/ui/components/app/signature-request/signature-request.container.test.js b/ui/components/app/signature-request/signature-request.container.test.js
index c1255a054..9d921609d 100644
--- a/ui/components/app/signature-request/signature-request.container.test.js
+++ b/ui/components/app/signature-request/signature-request.container.test.js
@@ -114,4 +114,12 @@ describe('Signature Request', () => {
 
     expect(props.sign.calledOnce).toStrictEqual(true);
   });
+
+  it('have user warning', () => {
+    const warningText = screen.getByText(
+      'Only sign this message if you fully understand the content and trust the requesting site.',
+    );
+
+    expect(warningText).toBeInTheDocument();
+  });
 });
diff --git a/ui/components/app/signature-request/signature-request.stories.js b/ui/components/app/signature-request/signature-request.stories.js
index f3ebe0e1b..cbe781231 100644
--- a/ui/components/app/signature-request/signature-request.stories.js
+++ b/ui/components/app/signature-request/signature-request.stories.js
@@ -71,8 +71,9 @@ DefaultStory.args = {
           ],
         },
       }),
-      origin: 'https://happydapp.website/governance?futarchy=true',
+      origin: 'https://happydapp.website/',
     },
   },
   fromAccount: MOCK_PRIMARY_IDENTITY,
+  provider: { name: 'Goerli ETH' },
 };
diff --git a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
index 79a56d213..cebcf32b5 100644
--- a/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
+++ b/ui/components/component-library/text-field-search/__snapshots__/text-field-search.test.js.snap
@@ -11,7 +11,7 @@ exports[`TextFieldSearch should render correctly 1`] = `
     />
     <input
       autocomplete="off"
-      class="box text mm-text-field-base__input text--body-md text--color-text-default box--margin-right-6 box--padding-right-4 box--padding-left-2 box--flex-direction-row box--background-color-transparent"
+      class="box mm-text mm-text-field-base__input mm-text--body-md mm-text--color-text-default box--margin-right-6 box--padding-right-4 box--padding-left-2 box--flex-direction-row box--background-color-transparent"
       focused="false"
       type="search"
       value=""