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

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

* Fix storybook

* Update snapshot to include pricing

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

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`] = `
     <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"
       >

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
+                    }`}
                   </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,
+      }),
     }),
   }),
 };

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',
+    },
   },
 };