1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-25 11:28:51 +01:00

replacing deprecated constants and components (#20070)

This commit is contained in:
Dhruv 2023-07-19 15:06:21 +05:30 committed by GitHub
parent fe3e960b62
commit 821888effd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 52 additions and 25 deletions

View File

@ -3,21 +3,18 @@ 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 {
IconColor,
DISPLAY,
FLEX_DIRECTION,
FONT_WEIGHT,
Display,
FlexDirection,
FontWeight,
JustifyContent,
TextColor,
TypographyVariant,
TextVariant,
} from '../../../../helpers/constants/design-system';
import Identicon from '../../../ui/identicon';
import { shortenAddress } from '../../../../helpers/utils/util';
import { Icon, IconName } from '../../../component-library';
import { Icon, IconName, Box, Text, Button } from '../../../component-library';
const SignatureRequestOriginalWarning = ({
senderAddress,
@ -30,8 +27,8 @@ const SignatureRequestOriginalWarning = ({
return (
<Popover className="signature-request-warning__content">
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.ROW}
display={Display.Flex}
flexDirection={FlexDirection.Row}
padding={4}
className="signature-request-warning__content__header"
>
@ -40,37 +37,36 @@ const SignatureRequestOriginalWarning = ({
color={IconColor.errorDefault}
className="signature-request-warning__content__header__warning-icon"
/>
<Typography
variant={TypographyVariant.H4}
fontWeight={FONT_WEIGHT.BOLD}
>
<Text variant={TextVariant.headingSm} fontWeight={FontWeight.Bold}>
{t('yourFundsMayBeAtRisk')}
</Typography>
</Text>
</Box>
<Box
display={DISPLAY.FLEX}
display={Display.Flex}
padding={4}
justifyContent={JustifyContent.spaceBetween}
className="signature-request-warning__content__account"
>
<Box display={DISPLAY.FLEX}>
<Box display={Display.Flex}>
<Identicon address={senderAddress} diameter={32} />
<Typography
variant={TypographyVariant.H5}
<Text
variant={TextVariant.bodyMd}
as="h5"
marginLeft={2}
className="signature-request-warning__content__account-name"
>
<b>{name}</b> {` (${shortenAddress(senderAddress)})`}
</Typography>
</Text>
</Box>
</Box>
<Typography
<Text
color={TextColor.textAlternative}
margin={4}
marginTop={4}
marginBottom={4}
variant={TypographyVariant.H6}
variant={TextVariant.bodySm}
as="h6"
>
{t('signatureRequestWarning', [
<a
@ -84,11 +80,11 @@ const SignatureRequestOriginalWarning = ({
{t('learnMoreUpperCase')}
</a>,
])}
</Typography>
</Text>
<Box
display={DISPLAY.FLEX}
flexDirection={FLEX_DIRECTION.COLUMN}
display={Display.Flex}
flexDirection={FlexDirection.Column}
justifyContent={JustifyContent.spaceBetween}
padding={4}
className="signature-request-warning__footer"

View File

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