m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Sign-in With Ethereum SIWE cleanup (#18230)

Browse Source 
* signature-req: replace Typography w/ Text
- this does update styles slightly

* siwe: extract showSecurityProviderBanner

* siwe: rn -> hasAgreedToDomainWarning

* siwe: update snapshot for updated Text usage
This commit is contained in:
Ariella Vu 2023-04-21 16:36:27 -03:00 committed by GitHub
parent f833f0e5aa
commit 8bfcd5b11e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 54 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
ui/components/app/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap
View File

@ -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" class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
> >
<h4 <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: Message:
</h4> </h4>
<h6 <p
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" 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 Click to sign in and accept the Terms of Service: https://community.metamask.io/tos
</h6> </p>
</div> </div>
<div <div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row" class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
> >
<h4 <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: URI:
</h4> </h4>
<h6 <p
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" 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 http://localhost:8080
</h6> </p>
</div> </div>
<div <div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row" class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
> >
<h4 <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: Version:
</h4> </h4>
<h6 <p
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" 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 1
</h6> </p>
</div> </div>
<div <div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row" class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
> >
<h4 <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: Chain ID:
</h4> </h4>
<h6 <p
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" 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 1
</h6> </p>
</div> </div>
<div <div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row" class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
> >
<h4 <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: Nonce:
</h4> </h4>
<h6 <p
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" 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 STMt6KQMwwdOXE306
</h6> </p>
</div> </div>
<div <div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row" class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
> >
<h4 <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: Issued At:
</h4> </h4>
<h6 <p
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" 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 2023-03-18T21:40:40.823Z
</h6> </p>
</div> </div>
<div <div
class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row" class="box box--margin-top-2 box--margin-bottom-2 box--flex-direction-row"
> >
<h4 <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 Resources: 2
</h4> </h4>
<h6 <p
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" 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 ipfs://Qme7ss3ARVgxv6rXqVPiikMJ8u2NLgmgszg13pYrDKEoiu
https://example.com/my-web2-claim.json https://example.com/my-web2-claim.json
</h6> </p>
</div> </div>
</div> </div>
</div> </div>

1
ui/components/app/signature-request-siwe/signature-request-siwe-message/index.scss
View File

@ -8,6 +8,5 @@
&__sub-text { &__sub-text {
white-space: pre-line; white-space: pre-line;
overflow: hidden; overflow: hidden;
word-wrap: break-word;
} }
} }

18
ui/components/app/signature-request-siwe/signature-request-siwe-message/signature-request-siwe-message.js
View File

@ -1,11 +1,12 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import Box from '../../../ui/box'; import Box from '../../../ui/box';
import Typography from '../../../ui/typography'; import { Text } from '../../../component-library';
import { import {
FLEX_DIRECTION, FLEX_DIRECTION,
TypographyVariant, OVERFLOW_WRAP,
TextVariant,
} from '../../../../helpers/constants/design-system'; } from '../../../../helpers/constants/design-system';
const SignatureRequestSIWEMessage = ({ data }) => { const SignatureRequestSIWEMessage = ({ data }) => {
@ -14,21 +15,22 @@ const SignatureRequestSIWEMessage = ({ data }) => {
<Box flexDirection={FLEX_DIRECTION.COLUMN}> <Box flexDirection={FLEX_DIRECTION.COLUMN}>
{data.map(({ label, value }, i) => ( {data.map(({ label, value }, i) => (
<Box key={i.toString()} marginTop={2} marginBottom={2}> <Box key={i.toString()} marginTop={2} marginBottom={2}>
<Typography <Text
variant={TypographyVariant.H4} as="h4"
variant={TextVariant.bodyLgMedium}
marginTop={2} marginTop={2}
marginBottom={2} marginBottom={2}
> >
{label} {label}
</Typography> </Text>
<Typography <Text
className="signature-request-siwe-message__sub-text" className="signature-request-siwe-message__sub-text"
variant={TypographyVariant.H6} overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
marginTop={2} marginTop={2}
marginBottom={2} marginBottom={2}
> >
{value} {value}
</Typography> </Text>
</Box> </Box>
))} ))}
</Box> </Box>

26
ui/components/app/signature-request-siwe/signature-request-siwe.js
View File

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