1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-12 04:37:13 +01:00
metamask-extension/ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js

123 lines
3.4 KiB
JavaScript
Raw Normal View History

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 {
UX: Icon: Remove fa-exclamation-triangle usages (#17691) * UX: Icon: WIP: Remove fa-exclamation-triangle usages * Swap the rest of the icons * Fix color import * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/app/add-network/add-network.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/ui/review-spending-cap/review-spending-cap.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Fix lint * Fix alignment and sizes * Use IconColor * Update ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/components/ui/review-spending-cap/review-spending-cap.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Fix imports * Use IconColor --------- Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: Danica Shen <zhaodanica@gmail.com>
2023-02-23 22:20:07 +01:00
IconColor,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
JustifyContent,
TextColor,
TypographyVariant,
} from '../../../../helpers/constants/design-system';
import Identicon from '../../../ui/identicon';
import { shortenAddress } from '../../../../helpers/utils/util';
UX: Icon: Remove fa-exclamation-triangle usages (#17691) * UX: Icon: WIP: Remove fa-exclamation-triangle usages * Swap the rest of the icons * Fix color import * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/app/add-network/add-network.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/ui/review-spending-cap/review-spending-cap.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Fix lint * Fix alignment and sizes * Use IconColor * Update ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/components/ui/review-spending-cap/review-spending-cap.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Fix imports * Use IconColor --------- Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: Danica Shen <zhaodanica@gmail.com>
2023-02-23 22:20:07 +01:00
import { Icon, ICON_NAMES } from '../../../component-library';
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"
>
UX: Icon: Remove fa-exclamation-triangle usages (#17691) * UX: Icon: WIP: Remove fa-exclamation-triangle usages * Swap the rest of the icons * Fix color import * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.stories.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/app/add-network/add-network.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Update ui/components/ui/review-spending-cap/review-spending-cap.js Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> * Fix lint * Fix alignment and sizes * Use IconColor * Update ui/components/app/custom-spending-cap/custom-spending-cap-tooltip.js Co-authored-by: George Marshall <george.marshall@consensys.net> * Update ui/components/app/confirmation-warning-modal/confirmation-warning-modal.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/components/app/signature-request-original/signature-request-original-warning/signature-request-original-warning.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/components/ui/review-spending-cap/review-spending-cap.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Update ui/pages/onboarding-flow/secure-your-wallet/skip-srp-backup-popover.js Co-authored-by: Danica Shen <zhaodanica@gmail.com> * Fix imports * Use IconColor --------- Co-authored-by: Nidhi Kumari <nidhi.kumari@consensys.net> Co-authored-by: George Marshall <george.marshall@consensys.net> Co-authored-by: Danica Shen <zhaodanica@gmail.com>
2023-02-23 22:20:07 +01:00
<Icon
name={ICON_NAMES.DANGER}
color={IconColor.errorDefault}
className="signature-request-warning__content__header__warning-icon"
/>
<Typography
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
>
{t('yourFundsMayBeAtRisk')}
</Typography>
</Box>
<Box
display={DISPLAY.FLEX}
padding={4}
justifyContent={JustifyContent.spaceBetween}
className="signature-request-warning__content__account"
>
<Box display={DISPLAY.FLEX}>
<Identicon address={senderAddress} diameter={32} />
<Typography
variant={TypographyVariant.H5}
marginLeft={2}
className="signature-request-warning__content__account-name"
>
<b>{name}</b> {` (${shortenAddress(senderAddress)})`}
</Typography>
</Box>
</Box>
<Typography
color={TextColor.textAlternative}
margin={4}
marginTop={4}
marginBottom={4}
variant={TypographyVariant.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={JustifyContent.spaceBetween}
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;