Sign-in With Ethereum SIWE cleanup (#18230)

* signature-req: replace Typography w/ Text - this does update styles slightly * siwe: extract showSecurityProviderBanner * siwe: rn -> hasAgreedToDomainWarning * siwe: update snapshot for updated Text usage
MetaMask · Apr 21, 2023 · 8bfcd5b · 8bfcd5b
1 parent f833f0e
commit 8bfcd5b
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 47 deletions.
diff --git a/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap b/ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap
@@ -122,100 +122,100 @@ exports[`SignatureRequestSIWE (Sign in with Ethereum) should match snapshot 1`]
           class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
         >
           <h4
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="box mm-text mm-text--body-lg-medium box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             Message:
           </h4>
-          <h6
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
+          <p
+            class="box mm-text signature-request-siwe-message__sub-text mm-text--body-md mm-text--overflow-wrap-break-word box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             Click to sign in and accept the Terms of Service: https://community.metamask.io/tos
-          </h6>
+          </p>
         </div>
         <div
           class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
         >
           <h4
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="box mm-text mm-text--body-lg-medium box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             URI:
           </h4>
-          <h6
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
+          <p
+            class="box mm-text signature-request-siwe-message__sub-text mm-text--body-md mm-text--overflow-wrap-break-word box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             http://localhost:8080
-          </h6>
+          </p>
         </div>
         <div
           class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
         >
           <h4
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="box mm-text mm-text--body-lg-medium box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             Version:
           </h4>
-          <h6
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
+          <p
+            class="box mm-text signature-request-siwe-message__sub-text mm-text--body-md mm-text--overflow-wrap-break-word box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             1
-          </h6>
+          </p>
         </div>
         <div
           class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
         >
           <h4
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="box mm-text mm-text--body-lg-medium box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             Chain ID:
           </h4>
-          <h6
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
+          <p
+            class="box mm-text signature-request-siwe-message__sub-text mm-text--body-md mm-text--overflow-wrap-break-word box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             1
-          </h6>
+          </p>
         </div>
         <div
           class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
         >
           <h4
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="box mm-text mm-text--body-lg-medium box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             Nonce:
           </h4>
-          <h6
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
+          <p
+            class="box mm-text signature-request-siwe-message__sub-text mm-text--body-md mm-text--overflow-wrap-break-word box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             STMt6KQMwwdOXE306
-          </h6>
+          </p>
         </div>
         <div
           class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
         >
           <h4
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="box mm-text mm-text--body-lg-medium box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             Issued At:
           </h4>
-          <h6
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
+          <p
+            class="box mm-text signature-request-siwe-message__sub-text mm-text--body-md mm-text--overflow-wrap-break-word box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             2023-03-18T21:40:40.823Z
-          </h6>
+          </p>
         </div>
         <div
           class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
         >
           <h4
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-normal typography--style-normal typography--color-text-default"
+            class="box mm-text mm-text--body-lg-medium box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             Resources: 2
           </h4>
-          <h6
-            class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row typography signature-request-siwe-message__sub-text typography--h6 typography--weight-normal typography--style-normal typography--color-text-default"
+          <p
+            class="box mm-text signature-request-siwe-message__sub-text mm-text--body-md mm-text--overflow-wrap-break-word box--margin-top-2 box--margin-bottom-2 box--flex-direction-row box--color-text-default"
           >
             ipfs://Qme7ss3ARVgxv6rXqVPiikMJ8u2NLgmgszg13pYrDKEoiu
 https://example.com/my-web2-claim.json
-          </h6>
+          </p>
         </div>
       </div>
     </div>

diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe-message/index.scss b/ui/components/app/signature-request-siwe/signature-request-siwe-message/index.scss
@@ -8,6 +8,5 @@
   &__sub-text {
     white-space: pre-line;
     overflow: hidden;
-    word-wrap: break-word;
   }
 }
diff --git a/...p/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js b/...p/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js
@@ -1,11 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Box from '../../../ui/box';
-import Typography from '../../../ui/typography';
+import { Text } from '../../../component-library';
 
 import {
   FLEX_DIRECTION,
-  TypographyVariant,
+  OVERFLOW_WRAP,
+  TextVariant,
 } from '../../../../helpers/constants/design-system';
 
 const SignatureRequestSIWEMessage = ({ data }) => {
@@ -14,21 +15,22 @@ const SignatureRequestSIWEMessage = ({ data }) => {
       <Box flexDirection={FLEX_DIRECTION.COLUMN}>
         {data.map(({ label, value }, i) => (
           <Box key={i.toString()} marginTop={2} marginBottom={2}>
-            <Typography
-              variant={TypographyVariant.H4}
+            <Text
+              as="h4"
+              variant={TextVariant.bodyLgMedium}
               marginTop={2}
               marginBottom={2}
             >
               {label}
-            </Typography>
-            <Typography
+            </Text>
+            <Text
               className="signature-request-siwe-message__sub-text"
-              variant={TypographyVariant.H6}
+              overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
               marginTop={2}
               marginBottom={2}
             >
               {value}
-            </Typography>
+            </Text>
           </Box>
         ))}
       </Box>

diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe.js b/ui/components/app/signature-request-siwe/signature-request-siwe.js
@@ -64,7 +64,15 @@ export default function SignatureRequestSIWE({
   const isSIWEDomainValid = checkSIWEDomain();
 
   const [isShowingDomainWarning, setIsShowingDomainWarning] = useState(false);
-  const [agreeToDomainWarning, setAgreeToDomainWarning] = useState(false);
+  const [hasAgreedToDomainWarning, setHasAgreedToDomainWarning] =
+    useState(false);
+
+  const showSecurityProviderBanner =
+    (txData?.securityProviderResponse?.flagAsDangerous !== undefined &&
+      txData?.securityProviderResponse?.flagAsDangerous !==
+        SECURITY_PROVIDER_MESSAGE_SEVERITIES.NOT_MALICIOUS) ||
+    (txData?.securityProviderResponse &&
+      Object.keys(txData.securityProviderResponse).length === 0);
 
   const onSign = useCallback(
     async (event) => {
@@ -96,15 +104,13 @@ export default function SignatureRequestSIWE({
         isSIWEDomainValid={isSIWEDomainValid}
         subjectMetadata={targetSubjectMetadata}
       />
-      {(txData?.securityProviderResponse?.flagAsDangerous !== undefined &&
-        txData?.securityProviderResponse?.flagAsDangerous !==
-          SECURITY_PROVIDER_MESSAGE_SEVERITIES.NOT_MALICIOUS) ||
-      (txData?.securityProviderResponse &&
-        Object.keys(txData.securityProviderResponse).length === 0) ? (
+
+      {showSecurityProviderBanner && (
         <SecurityProviderBannerMessage
           securityProviderResponse={txData.securityProviderResponse}
         />
-      ) : null}
+      )}
+
       <Message data={formatMessageParams(parsedMessage, t)} />
       {!isMatchingAddress && (
         <BannerAlert
@@ -165,16 +171,16 @@ export default function SignatureRequestSIWE({
               onSubmit={onSign}
               submitText={t('confirm')}
               submitButtonType="danger-primary"
-              disabled={!agreeToDomainWarning}
+              disabled={!hasAgreedToDomainWarning}
             />
           }
         >
           <div className="signature-request-siwe__warning-popover__checkbox-wrapper">
             <Checkbox
               id="signature-request-siwe_domain-checkbox"
-              checked={agreeToDomainWarning}
+              checked={hasAgreedToDomainWarning}
               className="signature-request-siwe__warning-popover__checkbox-wrapper__checkbox"
-              onClick={() => setAgreeToDomainWarning((checked) => !checked)}
+              onClick={() => setHasAgreedToDomainWarning((checked) => !checked)}
             />
             <label
               className="signature-request-siwe__warning-popover__checkbox-wrapper__label"