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 index 418b8dba0..d7106d17d 100644 --- 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" >

Message:

-
Click to sign in and accept the Terms of Service: https://community.metamask.io/tos -
+

URI:

-
http://localhost:8080 -
+

Version:

-
1 -
+

Chain ID:

-
1 -
+

Nonce:

-
STMt6KQMwwdOXE306 -
+

Issued At:

-
2023-03-18T21:40:40.823Z -
+

Resources: 2

-
ipfs://Qme7ss3ARVgxv6rXqVPiikMJ8u2NLgmgszg13pYrDKEoiu https://example.com/my-web2-claim.json -
+

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 index d78461332..36739dab5 100644 --- 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/ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js b/ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js index e92912dda..565703ef2 100644 --- a/ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js +++ b/ui/components/app/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 }) => { {data.map(({ label, value }, i) => ( - {label} - - + {value} - + ))} diff --git a/ui/components/app/signature-request-siwe/signature-request-siwe.js b/ui/components/app/signature-request-siwe/signature-request-siwe.js index de7441cb7..5fab50ab2 100644 --- 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 && ( - ) : null} + )} + {!isMatchingAddress && ( } >
setAgreeToDomainWarning((checked) => !checked)} + onClick={() => setHasAgreedToDomainWarning((checked) => !checked)} />