m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 09:57:02 +01:00
Code

Fix #17932 - Ensure NFT last sold price is formatted correctly (#17983)

Browse Source 
* Fix #17932 - Ensure NFT last sold price is formatted correctly

* Fix storybook

* Update snapshot to include pricing
This commit is contained in:
David Walsh 2023-03-08 14:39:12 -06:00 committed by GitHub
parent 7086494b72
commit de83546d6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 55 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
test/data/mock-state.json
View File

@ -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",

36
ui/components/app/nft-details/__snapshots__/nft-details.test.js.snap
View File

@ -84,6 +84,42 @@ exports[`NFT Details should match minimal props and state snapshot 1`] = `
<div
class="box box--margin-bottom-2 box--flex-direction-row"
>
<div
class="box box--display-flex box--flex-direction-row"
>
<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"
>
Last sold
</h6>
<div
class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
>
<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"
>
1/18/2023
</h6>
</div>
</div>
<div
class="box box--display-flex box--flex-direction-row"
>
<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"
>
Last price sold
</h6>
<div
class="box nft-details__contract-wrapper box--display-flex box--flex-direction-row"
>
<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"
>
0.0049 ETH
</h6>
</div>
</div>
<div
class="box box--display-flex box--flex-direction-row"
>

9
ui/components/app/nft-details/nft-details.js
View File

@ -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
}`}
</Typography>
</Box>
</Box>
@ -461,6 +465,9 @@ NftDetails.propTypes = {
lastSale: PropTypes.shape({
event_timestamp: PropTypes.string,
total_price: PropTypes.string,
payment_token: PropTypes.shape({
symbol: PropTypes.string,
}),
}),
}),
};

3
ui/components/app/nft-details/nft-details.stories.js
View File

@ -12,6 +12,9 @@ const nft = {
lastSale: {
event_timestamp: '2023-01-18T21:51:23',
total_price: '4900000000000000',
payment_token: {
symbol: 'ETH',
},
},
};