diff --git a/test/data/mock-state.json b/test/data/mock-state.json index 323f124ae..64c4c6e61 100644 --- a/test/data/mock-state.json +++ b/test/data/mock-state.json @@ -465,7 +465,14 @@ "name": "MUNK #1", "description": null, "image": "ipfs://QmTSZUNt8AKyDabkyXXXP4oHWDnaVXgNdXoJGEyaYzLbeL", - "standard": "ERC721" + "standard": "ERC721", + "lastSale": { + "total_price": "4900000000000000", + "event_timestamp": "2023-01-18T21:51:23", + "payment_token": { + "symbol": "ETH" + } + } }, { "address": "0xDc7382Eb0Bc9C352A4CbA23c909bDA01e0206414", diff --git a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap index 5b551c137..b66a360ac 100644 --- a/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap +++ b/ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap @@ -84,6 +84,42 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
+
+ +
+
+ 1/18/2023 +
+
+
+
+ +
+
+ 0.0049 ETH +
+
+
diff --git a/ui/components/app/nft-details/nft-details.js b/ui/components/app/nft-details/nft-details.js index a47f9f67e..116d0da35 100644 --- a/ui/components/app/nft-details/nft-details.js +++ b/ui/components/app/nft-details/nft-details.js @@ -55,6 +55,7 @@ import { import NftDefaultImage from '../nft-default-image'; import { ButtonIcon, ICON_NAMES } from '../../component-library'; import Tooltip from '../../ui/tooltip'; +import { decWEIToDecETH } from '../../../../shared/modules/conversion.utils'; export default function NftDetails({ nft }) { const { @@ -86,6 +87,7 @@ export default function NftDetails({ nft }) { const nftImageAlt = getNftImageAlt(nft); const nftImageURL = getAssetImageURL(imageOriginal ?? image, ipfsGateway); const isDataURI = nftImageURL.startsWith('data:'); + const formattedTimestamp = formatDate( new Date(lastSale?.event_timestamp).getTime(), 'M/d/y', @@ -297,7 +299,9 @@ export default function NftDetails({ nft }) { overflowWrap={OVERFLOW_WRAP.BREAK_WORD} boxProps={{ margin: 0, marginBottom: 4 }} > - {lastSale.total_price} + {`${Number(decWEIToDecETH(lastSale.total_price))} ${ + lastSale.payment_token.symbol + }`} @@ -461,6 +465,9 @@ NftDetails.propTypes = { lastSale: PropTypes.shape({ event_timestamp: PropTypes.string, total_price: PropTypes.string, + payment_token: PropTypes.shape({ + symbol: PropTypes.string, + }), }), }), }; diff --git a/ui/components/app/nft-details/nft-details.stories.js b/ui/components/app/nft-details/nft-details.stories.js index f1de0f684..76554d40d 100644 --- a/ui/components/app/nft-details/nft-details.stories.js +++ b/ui/components/app/nft-details/nft-details.stories.js @@ -12,6 +12,9 @@ const nft = { lastSale: { event_timestamp: '2023-01-18T21:51:23', total_price: '4900000000000000', + payment_token: { + symbol: 'ETH', + }, }, };