mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 01:39:44 +01:00
* 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:
parent
490e0770c7
commit
e991439718
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user