mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
replacing deprecated constants and components (#20070)
This commit is contained in:
parent
fe3e960b62
commit
821888effd
@ -3,21 +3,18 @@ import PropTypes from 'prop-types';
|
|||||||
import { useI18nContext } from '../../../../hooks/useI18nContext';
|
import { useI18nContext } from '../../../../hooks/useI18nContext';
|
||||||
|
|
||||||
import Popover from '../../../ui/popover';
|
import Popover from '../../../ui/popover';
|
||||||
import Box from '../../../ui/box';
|
|
||||||
import Button from '../../../ui/button';
|
|
||||||
import Typography from '../../../ui/typography';
|
|
||||||
import {
|
import {
|
||||||
IconColor,
|
IconColor,
|
||||||
DISPLAY,
|
Display,
|
||||||
FLEX_DIRECTION,
|
FlexDirection,
|
||||||
FONT_WEIGHT,
|
FontWeight,
|
||||||
JustifyContent,
|
JustifyContent,
|
||||||
TextColor,
|
TextColor,
|
||||||
TypographyVariant,
|
TextVariant,
|
||||||
} from '../../../../helpers/constants/design-system';
|
} from '../../../../helpers/constants/design-system';
|
||||||
import Identicon from '../../../ui/identicon';
|
import Identicon from '../../../ui/identicon';
|
||||||
import { shortenAddress } from '../../../../helpers/utils/util';
|
import { shortenAddress } from '../../../../helpers/utils/util';
|
||||||
import { Icon, IconName } from '../../../component-library';
|
import { Icon, IconName, Box, Text, Button } from '../../../component-library';
|
||||||
|
|
||||||
const SignatureRequestOriginalWarning = ({
|
const SignatureRequestOriginalWarning = ({
|
||||||
senderAddress,
|
senderAddress,
|
||||||
@ -30,8 +27,8 @@ const SignatureRequestOriginalWarning = ({
|
|||||||
return (
|
return (
|
||||||
<Popover className="signature-request-warning__content">
|
<Popover className="signature-request-warning__content">
|
||||||
<Box
|
<Box
|
||||||
display={DISPLAY.FLEX}
|
display={Display.Flex}
|
||||||
flexDirection={FLEX_DIRECTION.ROW}
|
flexDirection={FlexDirection.Row}
|
||||||
padding={4}
|
padding={4}
|
||||||
className="signature-request-warning__content__header"
|
className="signature-request-warning__content__header"
|
||||||
>
|
>
|
||||||
@ -40,37 +37,36 @@ const SignatureRequestOriginalWarning = ({
|
|||||||
color={IconColor.errorDefault}
|
color={IconColor.errorDefault}
|
||||||
className="signature-request-warning__content__header__warning-icon"
|
className="signature-request-warning__content__header__warning-icon"
|
||||||
/>
|
/>
|
||||||
<Typography
|
<Text variant={TextVariant.headingSm} fontWeight={FontWeight.Bold}>
|
||||||
variant={TypographyVariant.H4}
|
|
||||||
fontWeight={FONT_WEIGHT.BOLD}
|
|
||||||
>
|
|
||||||
{t('yourFundsMayBeAtRisk')}
|
{t('yourFundsMayBeAtRisk')}
|
||||||
</Typography>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
<Box
|
<Box
|
||||||
display={DISPLAY.FLEX}
|
display={Display.Flex}
|
||||||
padding={4}
|
padding={4}
|
||||||
justifyContent={JustifyContent.spaceBetween}
|
justifyContent={JustifyContent.spaceBetween}
|
||||||
className="signature-request-warning__content__account"
|
className="signature-request-warning__content__account"
|
||||||
>
|
>
|
||||||
<Box display={DISPLAY.FLEX}>
|
<Box display={Display.Flex}>
|
||||||
<Identicon address={senderAddress} diameter={32} />
|
<Identicon address={senderAddress} diameter={32} />
|
||||||
<Typography
|
<Text
|
||||||
variant={TypographyVariant.H5}
|
variant={TextVariant.bodyMd}
|
||||||
|
as="h5"
|
||||||
marginLeft={2}
|
marginLeft={2}
|
||||||
className="signature-request-warning__content__account-name"
|
className="signature-request-warning__content__account-name"
|
||||||
>
|
>
|
||||||
<b>{name}</b> {` (${shortenAddress(senderAddress)})`}
|
<b>{name}</b> {` (${shortenAddress(senderAddress)})`}
|
||||||
</Typography>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textAlternative}
|
color={TextColor.textAlternative}
|
||||||
margin={4}
|
margin={4}
|
||||||
marginTop={4}
|
marginTop={4}
|
||||||
marginBottom={4}
|
marginBottom={4}
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySm}
|
||||||
|
as="h6"
|
||||||
>
|
>
|
||||||
{t('signatureRequestWarning', [
|
{t('signatureRequestWarning', [
|
||||||
<a
|
<a
|
||||||
@ -84,11 +80,11 @@ const SignatureRequestOriginalWarning = ({
|
|||||||
{t('learnMoreUpperCase')}
|
{t('learnMoreUpperCase')}
|
||||||
</a>,
|
</a>,
|
||||||
])}
|
])}
|
||||||
</Typography>
|
</Text>
|
||||||
|
|
||||||
<Box
|
<Box
|
||||||
display={DISPLAY.FLEX}
|
display={Display.Flex}
|
||||||
flexDirection={FLEX_DIRECTION.COLUMN}
|
flexDirection={FlexDirection.Column}
|
||||||
justifyContent={JustifyContent.spaceBetween}
|
justifyContent={JustifyContent.spaceBetween}
|
||||||
padding={4}
|
padding={4}
|
||||||
className="signature-request-warning__footer"
|
className="signature-request-warning__footer"
|
||||||
|
@ -0,0 +1,31 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import SignatureRequestOriginalWarning from './signature-request-original-warning';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'Components/App/SignatureRequestOriginalWarning',
|
||||||
|
component: SignatureRequestOriginalWarning,
|
||||||
|
argTypes: {
|
||||||
|
senderAddress: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
control: 'text',
|
||||||
|
},
|
||||||
|
onSubmit: {
|
||||||
|
action: 'onSubmit',
|
||||||
|
},
|
||||||
|
onCancel: {
|
||||||
|
action: 'onCancel',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
args: {
|
||||||
|
senderAddress: '0x5CfE73b6021E818B776b421B1c4Db2474086a7e1',
|
||||||
|
name: 'John Doe',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const DefaultStory = (args) => (
|
||||||
|
<SignatureRequestOriginalWarning {...args} />
|
||||||
|
);
|
||||||
|
|
||||||
|
DefaultStory.storyName = 'Default';
|
Loading…
x
Reference in New Issue
Block a user