mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 01:47:00 +01:00
Add user guidance on signature request screen (#16600)
This commit is contained in:
amerkadicE
GitHub
parent
3deb8734ac
commit
702cab5fa7
3
app/_locales/en/messages.json
generated
3
app/_locales/en/messages.json
generated
@ -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."
|
||||
},
|
||||
|
||||
@ -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"
|
||||
>
|
||||
|
||||
@ -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%;
|
||||
}
|
||||
|
||||
@ -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)}
|
||||
/>
|
||||
|
||||
@ -71,6 +71,7 @@ export default {
|
||||
},
|
||||
mostRecentOverviewPage: '/',
|
||||
nativeCurrency: 'ETH',
|
||||
provider: { name: 'Goerli ETH' },
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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();
|
||||
});
|
||||
});
|
||||
|
||||
@ -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' },
|
||||
};
|
||||
|
||||
@ -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=""
|
||||
|
||||
Loading…
Reference in New Issue
Block a user