1
0
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:
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 { 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"

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