1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js
amerkadicE dd0844e200
Add signature request warning modal (#16225)
* Add signature request warning modal

Fix e2e tests

Fix e2e tests

Remove warning message from eth sign request

Remove unused locales

Fix e2e test

Fix e2e test

* Run pipeline

* Fix locales:
?

* Add unit tests
2022-11-30 16:34:50 +01:00

114 lines
3.2 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { useI18nContext } from '../../../../hooks/useI18nContext';
import Popover from '../../../ui/popover';
import Box from '../../../ui/box';
import Button from '../../../ui/button';
import Typography from '../../../ui/typography';
import {
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
JUSTIFY_CONTENT,
TYPOGRAPHY,
COLORS,
} from '../../../../helpers/constants/design-system';
import Identicon from '../../../ui/identicon';
import { shortenAddress } from '../../../../helpers/utils/util';
const SignatureRequestOriginalWarning = ({
senderAddress,
name,
onSubmit,
onCancel,
}) => {
const t = useI18nContext();
return (
<Popover className="signature-request-warning__content">
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
padding={4}
className="signature-request-warning__content__header"
>
<i className="fa fa-exclamation-triangle signature-request-warning__content__header__warning-icon" />
<Typography variant={TYPOGRAPHY.H4} fontWeight={FONT_WEIGHT.BOLD}>
{t('yourFundsMayBeAtRisk')}
</Typography>
</Box>
<Box
display={DISPLAY.FLEX}
padding={4}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
className="signature-request-warning__content__account"
>
<Box display={DISPLAY.FLEX}>
<Identicon address={senderAddress} diameter={32} />
<Typography
variant={TYPOGRAPHY.H5}
marginLeft={2}
className="signature-request-warning__content__account-name"
>
<b>{name}</b> {` (${shortenAddress(senderAddress)})`}
</Typography>
</Box>
</Box>
<Typography
color={COLORS.TEXT_ALTERNATIVE}
margin={4}
marginTop={4}
marginBottom={4}
variant={TYPOGRAPHY.H6}
>
{t('signatureRequestWarning', [
<a
href="https://consensys.net/blog/metamask/the-seal-of-approval-know-what-youre-consenting-to-with-permissions-and-approvals-in-metamask/"
target="_blank"
type="link"
key="non_custodial_link"
rel="noopener noreferrer"
style={{ color: 'var(--color-primary-default)' }}
>
{t('learnMoreUpperCase')}
</a>,
])}
</Typography>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
padding={4}
className="signature-request-warning__footer"
>
<Button
className="signature-request-warning__footer__sign-button"
type="danger-primary"
onClick={onSubmit}
>
{t('sign')}
</Button>
<Button
className="signature-request-warning__footer__reject-button"
type="secondary"
onClick={onCancel}
>
{t('reject')}
</Button>
</Box>
</Popover>
);
};
SignatureRequestOriginalWarning.propTypes = {
senderAddress: PropTypes.string,
name: PropTypes.string,
onSubmit: PropTypes.func,
onCancel: PropTypes.func,
};
export default SignatureRequestOriginalWarning;