1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-22 17:33:23 +01:00

Add user guidance on signature request screen (#16600)

This commit is contained in:
amerkadicE 2022-12-02 15:12:43 +01:00 committed by GitHub
parent 3deb8734ac
commit 702cab5fa7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
10 changed files with 65 additions and 13 deletions

View File

@ -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."
},

View File

@ -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"
>

View File

@ -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%;
}

View File

@ -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)}
/>

View File

@ -71,6 +71,7 @@ export default {
},
mostRecentOverviewPage: '/',
nativeCurrency: 'ETH',
provider: { name: 'Goerli ETH' },
},
};

View File

@ -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 {

View File

@ -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"

View File

@ -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();
});
});

View File

@ -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' },
};

View File

@ -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=""