m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Part of #17670 & #18714: Replace Typography with Text component in token-details-page.js (#18741)

Browse Source 
* Worked on issue #17670 & #18714 in file token-details-page.js in file

* Worked on issue #17670 & #18714 in file token-details-page.js in file

* Update token-details-page.js
This commit is contained in:
Harsh Shukla 2023-05-10 06:25:30 +05:30 committed by GitHub
parent 490e0770c7
commit e991439718
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 61 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

110
ui/pages/token-details/token-details-page.js
View File

@ -14,13 +14,12 @@ import { ASSET_ROUTE, DEFAULT_ROUTE } from '../../helpers/constants/routes';
import Tooltip from '../../components/ui/tooltip'; import Tooltip from '../../components/ui/tooltip';
import Button from '../../components/ui/button'; import Button from '../../components/ui/button';
import Box from '../../components/ui/box'; import Box from '../../components/ui/box';
import Typography from '../../components/ui/typography';
import { import {
TypographyVariant, TextVariant,
FONT_WEIGHT, FontWeight,
DISPLAY, DISPLAY,
TEXT_ALIGN, TextAlign,
OVERFLOW_WRAP, OverflowWrap,
TextColor, TextColor,
IconColor, IconColor,
} from '../../helpers/constants/design-system'; } from '../../helpers/constants/design-system';
@ -29,6 +28,7 @@ import {
ButtonIcon, ButtonIcon,
ButtonIconSize, ButtonIconSize,
IconName, IconName,
Text,
} from '../../components/component-library'; } from '../../components/component-library';
export default function TokenDetailsPage() { export default function TokenDetailsPage() {
@ -64,11 +64,12 @@ export default function TokenDetailsPage() {
return ( return (
<Box className="page-container token-details"> <Box className="page-container token-details">
<Box marginLeft={5} marginRight={6}> <Box marginLeft={5} marginRight={6}>
<Typography <Text
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
margin={0} margin={0}
marginTop={4} marginTop={4}
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textDefault} color={TextColor.textDefault}
className="token-details__title" className="token-details__title"
> >
@ -78,19 +79,20 @@ export default function TokenDetailsPage() {
onClick={() => history.push(`${ASSET_ROUTE}/${token.address}`)} onClick={() => history.push(`${ASSET_ROUTE}/${token.address}`)}
className="token-details__closeButton" className="token-details__closeButton"
/> />
</Typography> </Text>
<Box display={DISPLAY.FLEX} marginTop={4}> <Box display={DISPLAY.FLEX} marginTop={4}>
<Typography <Text
align={TEXT_ALIGN.CENTER} align={TextAlign.Center}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
margin={0} margin={0}
marginRight={5} marginRight={5}
variant={TypographyVariant.H4} variant={TextVariant.headingSm}
as="h4"
color={TextColor.textDefault} color={TextColor.textDefault}
className="token-details__token-value" className="token-details__token-value"
> >
{tokenBalance || ''} {tokenBalance || ''}
</Typography> </Text>
<Box marginTop={1}> <Box marginTop={1}>
<Identicon <Identicon
diameter={32} diameter={32}
@ -99,34 +101,37 @@ export default function TokenDetailsPage() {
/> />
</Box> </Box>
</Box> </Box>
<Typography <Text
margin={0} margin={0}
marginTop={4} marginTop={4}
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
> >
{tokenCurrencyBalance || ''} {tokenCurrencyBalance || ''}
</Typography> </Text>
<Typography <Text
margin={0} margin={0}
marginTop={6} marginTop={6}
variant={TypographyVariant.H9} variant={TextVariant.bodyXs}
as="h6"
color={TextColor.textAlternative} color={TextColor.textAlternative}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
> >
{t('tokenContractAddress')} {t('tokenContractAddress')}
</Typography> </Text>
<Box display={DISPLAY.FLEX}> <Box display={DISPLAY.FLEX}>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
margin={0} margin={0}
marginTop={2} marginTop={2}
color={TextColor.textDefault} color={TextColor.textDefault}
overflowWrap={OVERFLOW_WRAP.BREAK_WORD} overflowWrap={OverflowWrap.BreakWord}
className="token-details__token-address" className="token-details__token-address"
> >
{token.address} {token.address}
</Typography> </Text>
<Tooltip <Tooltip
position="bottom" position="bottom"
title={copied ? t('copiedExclamation') : t('copyToClipboard')} title={copied ? t('copiedExclamation') : t('copyToClipboard')}
@ -142,34 +147,38 @@ export default function TokenDetailsPage() {
/> />
</Tooltip> </Tooltip>
</Box> </Box>
<Typography <Text
variant={TypographyVariant.H9} variant={TextVariant.bodyXs}
as="h6"
margin={0} margin={0}
marginTop={4} marginTop={4}
color={TextColor.textAlternative} color={TextColor.textAlternative}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
> >
{t('tokenDecimalTitle')} {t('tokenDecimalTitle')}
</Typography> </Text>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
margin={0} margin={0}
marginTop={1} marginTop={1}
color={TextColor.textDefault} color={TextColor.textDefault}
> >
{token.decimals} {token.decimals}
</Typography> </Text>
<Typography <Text
variant={TypographyVariant.H9} variant={TextVariant.bodyXs}
as="h6"
margin={0} margin={0}
marginTop={4} marginTop={4}
color={TextColor.textAlternative} color={TextColor.textAlternative}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
> >
{t('network')} {t('network')}
</Typography> </Text>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
margin={1} margin={1}
marginTop={0} marginTop={0}
color={TextColor.textDefault} color={TextColor.textDefault}
@ -177,26 +186,28 @@ export default function TokenDetailsPage() {
{networkType === NETWORK_TYPES.RPC {networkType === NETWORK_TYPES.RPC
? nickname ?? t('privateNetwork') ? nickname ?? t('privateNetwork')
: t(networkType)} : t(networkType)}
</Typography> </Text>
{aggregators && ( {aggregators && (
<> <>
<Typography <Text
variant={TypographyVariant.H9} variant={TextVariant.bodyXs}
as="h6"
margin={0} margin={0}
marginTop={4} marginTop={4}
color={TextColor.textAlternative} color={TextColor.textAlternative}
fontWeight={FONT_WEIGHT.BOLD} fontWeight={FontWeight.Bold}
> >
{t('tokenList')} {t('tokenList')}
</Typography> </Text>
<Typography <Text
variant={TypographyVariant.H7} variant={TextVariant.bodySm}
as="h6"
margin={0} margin={0}
marginTop={1} marginTop={1}
color={TextColor.textDefault} color={TextColor.textDefault}
> >
{`${aggregators}.`} {`${aggregators}.`}
</Typography> </Text>
</> </>
)} )}
<Button <Button
@ -208,12 +219,13 @@ export default function TokenDetailsPage() {
); );
}} }}
> >
<Typography <Text
variant={TypographyVariant.H6} variant={TextVariant.bodySm}
as="h6"
color={TextColor.primaryDefault} color={TextColor.primaryDefault}
> >
{t('hideToken')} {t('hideToken')}
</Typography> </Text>
</Button> </Button>
</Box> </Box>
</Box> </Box>