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