mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-22 18:00:18 +01:00
* Update nft-details.js * Update nft-details.test.js.snap * Update nft-details.js * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update ui/components/app/nft-details/nft-details.js Co-authored-by: George Marshall <georgewrmarshall@gmail.com> * Update nft-details.test.js.snap --------- Co-authored-by: legobeat <109787230+legobeat@users.noreply.github.com> Co-authored-by: Brad Decker <bhdecker84@gmail.com> Co-authored-by: George Marshall <georgewrmarshall@gmail.com> Co-authored-by: George Marshall <george.marshall@consensys.net>
This commit is contained in:
Harsh Shukla
GitHub
parent
7ebd561ff9
commit
4ad281c806
@ -56,12 +56,12 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
|||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<h4
|
<h4
|
||||||
class="box box--margin-top-1 box--margin-bottom-2 box--flex-direction-row typography typography--h4 typography--weight-bold typography--style-normal typography--color-text-default"
|
class="box mm-text mm-text--heading-sm mm-text--font-weight-bold box--margin-bottom-2 box--flex-direction-row box--color-text-default"
|
||||||
>
|
>
|
||||||
MUNK #1
|
MUNK #1
|
||||||
</h4>
|
</h4>
|
||||||
<h5
|
<h5
|
||||||
class="box box--margin-top-1 box--margin-bottom-4 box--flex-direction-row typography typography--h5 typography--weight-normal typography--style-normal typography--color-text-muted typography--overflowwrap-break-word"
|
class="box mm-text mm-text--body-md mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-muted"
|
||||||
>
|
>
|
||||||
#
|
#
|
||||||
1
|
1
|
||||||
@ -88,7 +88,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
|||||||
class="box box--display-flex box--flex-direction-row"
|
class="box box--display-flex box--flex-direction-row"
|
||||||
>
|
>
|
||||||
<h6
|
<h6
|
||||||
class="box box--margin-top-1 box--margin-right-2 box--margin-bottom-4 box--flex-direction-row typography nft-details__link-title typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
|
||||||
>
|
>
|
||||||
Last sold
|
Last sold
|
||||||
</h6>
|
</h6>
|
||||||
@ -96,7 +96,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
|||||||
class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
|
class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
|
||||||
>
|
>
|
||||||
<h6
|
<h6
|
||||||
class="box box--margin-top-1 box--margin-bottom-4 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative typography--overflowwrap-break-word"
|
class="box mm-text mm-text--body-sm mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-alternative"
|
||||||
>
|
>
|
||||||
1/18/2023
|
1/18/2023
|
||||||
</h6>
|
</h6>
|
||||||
@ -106,7 +106,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
|||||||
class="box box--display-flex box--flex-direction-row"
|
class="box box--display-flex box--flex-direction-row"
|
||||||
>
|
>
|
||||||
<h6
|
<h6
|
||||||
class="box box--margin-top-1 box--margin-right-2 box--margin-bottom-4 box--flex-direction-row typography nft-details__link-title typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
|
||||||
>
|
>
|
||||||
Last price sold
|
Last price sold
|
||||||
</h6>
|
</h6>
|
||||||
@ -114,7 +114,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
|||||||
class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
|
class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
|
||||||
>
|
>
|
||||||
<h6
|
<h6
|
||||||
class="box box--margin-top-1 box--margin-bottom-4 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative typography--overflowwrap-break-word"
|
class="box mm-text mm-text--body-sm mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-alternative"
|
||||||
>
|
>
|
||||||
0.0049 ETH
|
0.0049 ETH
|
||||||
</h6>
|
</h6>
|
||||||
@ -124,12 +124,12 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
|||||||
class="box box--display-flex box--flex-direction-row"
|
class="box box--display-flex box--flex-direction-row"
|
||||||
>
|
>
|
||||||
<h6
|
<h6
|
||||||
class="box box--margin-top-1 box--margin-right-2 box--margin-bottom-4 box--flex-direction-row typography nft-details__link-title typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
|
||||||
>
|
>
|
||||||
Source
|
Source
|
||||||
</h6>
|
</h6>
|
||||||
<h6
|
<h6
|
||||||
class="box box--margin-top-1 box--margin-bottom-4 box--flex-direction-row typography nft-details__image-source typography--h6 typography--weight-normal typography--style-normal typography--color-primary-default"
|
class="box mm-text nft-details__image-source mm-text--body-sm box--margin-bottom-4 box--flex-direction-row box--color-primary-default"
|
||||||
>
|
>
|
||||||
<a
|
<a
|
||||||
href="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
|
href="https://bafybeiclzx7zfjvuiuwobn5ip3ogc236bjqfjzoblumf4pau4ep6dqramu.ipfs.dweb.link"
|
||||||
@ -145,7 +145,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
|||||||
class="box box--display-flex box--flex-direction-row"
|
class="box box--display-flex box--flex-direction-row"
|
||||||
>
|
>
|
||||||
<h6
|
<h6
|
||||||
class="box box--margin-top-1 box--margin-right-2 box--margin-bottom-4 box--flex-direction-row typography nft-details__link-title typography--h6 typography--weight-bold typography--style-normal typography--color-text-default"
|
class="box mm-text nft-details__link-title mm-text--body-sm-bold box--margin-right-2 box--margin-bottom-4 box--flex-direction-row box--color-text-default"
|
||||||
>
|
>
|
||||||
Contract address
|
Contract address
|
||||||
</h6>
|
</h6>
|
||||||
@ -153,7 +153,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
|||||||
class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
|
class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
|
||||||
>
|
>
|
||||||
<h6
|
<h6
|
||||||
class="box box--margin-top-1 box--margin-bottom-4 box--flex-direction-row typography typography--h6 typography--weight-normal typography--style-normal typography--color-text-alternative typography--overflowwrap-break-word"
|
class="box mm-text mm-text--body-sm mm-text--overflow-wrap-break-word box--margin-bottom-4 box--flex-direction-row box--color-text-alternative"
|
||||||
>
|
>
|
||||||
0xDc7...6414
|
0xDc7...6414
|
||||||
</h6>
|
</h6>
|
||||||
@ -183,7 +183,7 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<h6
|
<h6
|
||||||
class="box box--margin-top-1 box--margin-bottom-1 box--flex-direction-row typography typography--h7 typography--weight-normal typography--style-normal typography--color-text-alternative"
|
class="box mm-text mm-text--body-sm box--flex-direction-row box--color-text-alternative"
|
||||||
>
|
>
|
||||||
Disclaimer: MetaMask pulls the media file from the source url. This url sometimes is changed by the marketplace the NFT was minted on.
|
Disclaimer: MetaMask pulls the media file from the source url. This url sometimes is changed by the marketplace the NFT was minted on.
|
||||||
</h6>
|
</h6>
|
||||||
|
|||||||
@ -5,15 +5,14 @@ import { useHistory } from 'react-router-dom';
|
|||||||
import { isEqual } from 'lodash';
|
import { isEqual } from 'lodash';
|
||||||
import Box from '../../ui/box';
|
import Box from '../../ui/box';
|
||||||
import Card from '../../ui/card';
|
import Card from '../../ui/card';
|
||||||
import Typography from '../../ui/typography/typography';
|
|
||||||
import {
|
import {
|
||||||
TextColor,
|
TextColor,
|
||||||
IconColor,
|
IconColor,
|
||||||
TypographyVariant,
|
TextVariant,
|
||||||
FONT_WEIGHT,
|
FontWeight,
|
||||||
JustifyContent,
|
JustifyContent,
|
||||||
FLEX_DIRECTION,
|
FLEX_DIRECTION,
|
||||||
OVERFLOW_WRAP,
|
OverflowWrap,
|
||||||
DISPLAY,
|
DISPLAY,
|
||||||
BLOCK_SIZES,
|
BLOCK_SIZES,
|
||||||
} from '../../../helpers/constants/design-system';
|
} from '../../../helpers/constants/design-system';
|
||||||
@ -53,7 +52,7 @@ import {
|
|||||||
TokenStandard,
|
TokenStandard,
|
||||||
} from '../../../../shared/constants/transaction';
|
} from '../../../../shared/constants/transaction';
|
||||||
import NftDefaultImage from '../nft-default-image';
|
import NftDefaultImage from '../nft-default-image';
|
||||||
import { ButtonIcon, IconName } from '../../component-library';
|
import { ButtonIcon, IconName, Text } from '../../component-library';
|
||||||
import Tooltip from '../../ui/tooltip';
|
import Tooltip from '../../ui/tooltip';
|
||||||
import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils';
|
import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils';
|
||||||
|
|
||||||
@ -201,42 +200,45 @@ export default function NftDetails({ nft }) {
|
|||||||
justifyContent={JustifyContent.spaceBetween}
|
justifyContent={JustifyContent.spaceBetween}
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textDefault}
|
color={TextColor.textDefault}
|
||||||
variant={TypographyVariant.H4}
|
variant={TextVariant.headingSm}
|
||||||
fontWeight={FONT_WEIGHT.BOLD}
|
as="h4"
|
||||||
boxProps={{ margin: 0, marginBottom: 2 }}
|
fontWeight={FontWeight.Bold}
|
||||||
|
marginBottom={2}
|
||||||
>
|
>
|
||||||
{name}
|
{name}
|
||||||
</Typography>
|
</Text>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textMuted}
|
color={TextColor.textMuted}
|
||||||
variant={TypographyVariant.H5}
|
variant={TextVariant.bodyMd}
|
||||||
boxProps={{ margin: 0, marginBottom: 4 }}
|
as="h5"
|
||||||
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
|
marginBottom={4}
|
||||||
|
overflowWrap={OverflowWrap.BreakWord}
|
||||||
>
|
>
|
||||||
#{tokenId}
|
#{tokenId}
|
||||||
</Typography>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
{description ? (
|
{description ? (
|
||||||
<div>
|
<div>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textDefault}
|
color={TextColor.textDefault}
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySmBold}
|
||||||
fontWeight={FONT_WEIGHT.BOLD}
|
as="h6"
|
||||||
|
marginBottom={2}
|
||||||
className="nft-details__description"
|
className="nft-details__description"
|
||||||
boxProps={{ margin: 0, marginBottom: 2 }}
|
|
||||||
>
|
>
|
||||||
{t('description')}
|
{t('description')}
|
||||||
</Typography>
|
</Text>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textAlternative}
|
color={TextColor.textAlternative}
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySm}
|
||||||
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
|
as="h6"
|
||||||
boxProps={{ margin: 0, marginBottom: 4 }}
|
overflowWrap={OverflowWrap.BreakWord}
|
||||||
|
marginBottom={4}
|
||||||
>
|
>
|
||||||
{description}
|
{description}
|
||||||
</Typography>
|
</Text>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
{inPopUp ? null : renderSendButton()}
|
{inPopUp ? null : renderSendButton()}
|
||||||
@ -246,87 +248,78 @@ export default function NftDetails({ nft }) {
|
|||||||
{lastSale ? (
|
{lastSale ? (
|
||||||
<>
|
<>
|
||||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
|
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textDefault}
|
color={TextColor.textDefault}
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySmBold}
|
||||||
fontWeight={FONT_WEIGHT.BOLD}
|
as="h6"
|
||||||
boxProps={{
|
marginBottom={4}
|
||||||
margin: 0,
|
marginRight={2}
|
||||||
marginBottom: 4,
|
|
||||||
marginRight: 2,
|
|
||||||
}}
|
|
||||||
className="nft-details__link-title"
|
className="nft-details__link-title"
|
||||||
>
|
>
|
||||||
{t('lastSold')}
|
{t('lastSold')}
|
||||||
</Typography>
|
</Text>
|
||||||
<Box
|
<Box
|
||||||
display={DISPLAY.FLEX}
|
display={DISPLAY.FLEX}
|
||||||
flexDirection={FLEX_DIRECTION.ROW}
|
flexDirection={FLEX_DIRECTION.ROW}
|
||||||
className="nft-details__contract-wrapper"
|
className="nft-details__contract-wrapper"
|
||||||
>
|
>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textAlternative}
|
color={TextColor.textAlternative}
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySm}
|
||||||
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
|
as="h6"
|
||||||
boxProps={{ margin: 0, marginBottom: 4 }}
|
overflowWrap={OverflowWrap.BreakWord}
|
||||||
|
marginBottom={4}
|
||||||
>
|
>
|
||||||
{formattedTimestamp}
|
{formattedTimestamp}
|
||||||
</Typography>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
|
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textDefault}
|
color={TextColor.textDefault}
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySmBold}
|
||||||
fontWeight={FONT_WEIGHT.BOLD}
|
as="h6"
|
||||||
boxProps={{
|
marginBottom={4}
|
||||||
margin: 0,
|
marginRight={2}
|
||||||
marginBottom: 4,
|
|
||||||
marginRight: 2,
|
|
||||||
}}
|
|
||||||
className="nft-details__link-title"
|
className="nft-details__link-title"
|
||||||
>
|
>
|
||||||
{t('lastPriceSold')}
|
{t('lastPriceSold')}
|
||||||
</Typography>
|
</Text>
|
||||||
<Box
|
<Box
|
||||||
display={DISPLAY.FLEX}
|
display={DISPLAY.FLEX}
|
||||||
flexDirection={FLEX_DIRECTION.ROW}
|
flexDirection={FLEX_DIRECTION.ROW}
|
||||||
className="nft-details__contract-wrapper"
|
className="nft-details__contract-wrapper"
|
||||||
>
|
>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textAlternative}
|
color={TextColor.textAlternative}
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySm}
|
||||||
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
|
as="h6"
|
||||||
boxProps={{ margin: 0, marginBottom: 4 }}
|
overflowWrap={OverflowWrap.BreakWord}
|
||||||
|
marginBottom={4}
|
||||||
>
|
>
|
||||||
{`${Number(decWEIToDecETH(lastSale.total_price))} ${
|
{`${Number(decWEIToDecETH(lastSale.total_price))} ${
|
||||||
lastSale.payment_token.symbol
|
lastSale.payment_token.symbol
|
||||||
}`}
|
}`}
|
||||||
</Typography>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
|
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textDefault}
|
color={TextColor.textDefault}
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySmBold}
|
||||||
fontWeight={FONT_WEIGHT.BOLD}
|
as="h6"
|
||||||
boxProps={{
|
marginBottom={4}
|
||||||
margin: 0,
|
marginRight={2}
|
||||||
marginBottom: 4,
|
|
||||||
marginRight: 2,
|
|
||||||
}}
|
|
||||||
className="nft-details__link-title"
|
className="nft-details__link-title"
|
||||||
>
|
>
|
||||||
{t('source')}
|
{t('source')}
|
||||||
</Typography>
|
</Text>
|
||||||
<Typography
|
<Text
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySm}
|
||||||
boxProps={{
|
as="h6"
|
||||||
margin: 0,
|
marginBottom={4}
|
||||||
marginBottom: 4,
|
|
||||||
}}
|
|
||||||
className="nft-details__image-source"
|
className="nft-details__image-source"
|
||||||
color={
|
color={
|
||||||
isDataURI ? TextColor.textDefault : TextColor.primaryDefault
|
isDataURI ? TextColor.textDefault : TextColor.primaryDefault
|
||||||
@ -344,29 +337,24 @@ export default function NftDetails({ nft }) {
|
|||||||
{nftImageURL}
|
{nftImageURL}
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
</Typography>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
{imageThumbnail ? (
|
{imageThumbnail ? (
|
||||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
|
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textDefault}
|
color={TextColor.textDefault}
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySmBold}
|
||||||
fontWeight={FONT_WEIGHT.BOLD}
|
as="h6"
|
||||||
boxProps={{
|
marginBottom={4}
|
||||||
margin: 0,
|
marginRight={2}
|
||||||
marginBottom: 4,
|
|
||||||
marginRight: 2,
|
|
||||||
}}
|
|
||||||
className="nft-details__link-title"
|
className="nft-details__link-title"
|
||||||
>
|
>
|
||||||
{t('link')}
|
{t('link')}
|
||||||
</Typography>
|
</Text>
|
||||||
<Typography
|
<Text
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySm}
|
||||||
boxProps={{
|
as="h6"
|
||||||
margin: 0,
|
marginBottom={4}
|
||||||
marginBottom: 4,
|
|
||||||
}}
|
|
||||||
className="nft-details__image-source"
|
className="nft-details__image-source"
|
||||||
color={
|
color={
|
||||||
isDataURI ? TextColor.textDefault : TextColor.primaryDefault
|
isDataURI ? TextColor.textDefault : TextColor.primaryDefault
|
||||||
@ -380,36 +368,34 @@ export default function NftDetails({ nft }) {
|
|||||||
>
|
>
|
||||||
{imageThumbnail}
|
{imageThumbnail}
|
||||||
</a>
|
</a>
|
||||||
</Typography>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
) : null}
|
) : null}
|
||||||
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
|
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textDefault}
|
color={TextColor.textDefault}
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySmBold}
|
||||||
fontWeight={FONT_WEIGHT.BOLD}
|
as="h6"
|
||||||
boxProps={{
|
marginBottom={4}
|
||||||
margin: 0,
|
marginRight={2}
|
||||||
marginBottom: 4,
|
|
||||||
marginRight: 2,
|
|
||||||
}}
|
|
||||||
className="nft-details__link-title"
|
className="nft-details__link-title"
|
||||||
>
|
>
|
||||||
{t('contractAddress')}
|
{t('contractAddress')}
|
||||||
</Typography>
|
</Text>
|
||||||
<Box
|
<Box
|
||||||
display={DISPLAY.FLEX}
|
display={DISPLAY.FLEX}
|
||||||
flexDirection={FLEX_DIRECTION.ROW}
|
flexDirection={FLEX_DIRECTION.ROW}
|
||||||
className="nft-details__contract-wrapper"
|
className="nft-details__contract-wrapper"
|
||||||
>
|
>
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textAlternative}
|
color={TextColor.textAlternative}
|
||||||
variant={TypographyVariant.H6}
|
variant={TextVariant.bodySm}
|
||||||
overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
|
as="h6"
|
||||||
boxProps={{ margin: 0, marginBottom: 4 }}
|
overflowWrap={OverflowWrap.BreakWord}
|
||||||
|
marginBottom={4}
|
||||||
>
|
>
|
||||||
{shortenAddress(address)}
|
{shortenAddress(address)}
|
||||||
</Typography>
|
</Text>
|
||||||
<Tooltip
|
<Tooltip
|
||||||
wrapperClassName="nft-details__tooltip-wrapper"
|
wrapperClassName="nft-details__tooltip-wrapper"
|
||||||
position="bottom"
|
position="bottom"
|
||||||
@ -433,12 +419,13 @@ export default function NftDetails({ nft }) {
|
|||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
{inPopUp ? renderSendButton() : null}
|
{inPopUp ? renderSendButton() : null}
|
||||||
<Typography
|
<Text
|
||||||
color={TextColor.textAlternative}
|
color={TextColor.textAlternative}
|
||||||
variant={TypographyVariant.H7}
|
variant={TextVariant.bodySm}
|
||||||
|
as="h6"
|
||||||
>
|
>
|
||||||
{t('nftDisclaimer')}
|
{t('nftDisclaimer')}
|
||||||
</Typography>
|
</Text>
|
||||||
</Box>
|
</Box>
|
||||||
</Box>
|
</Box>
|
||||||
</>
|
</>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user