updated CollectibleDetail Storybook Coverage (#17351)

* updated CollectibleDetail Storybook Coverage

* updated tooltip for collectible details

* updated color of icon

* fixed lint error

* fix lint error

app/_locales/en/messages.json

@@ -1759,6 +1759,12 @@
   "lastConnected": {
     "message": "Last connected"
   },
+  "lastPriceSold": {
+    "message": "Last price sold"
+  },
+  "lastSold": {
+    "message": "Last sold"
+  },
   "learnCancelSpeeedup": {
     "message": "Learn how to $1",
     "description": "$1 is link to cancel or speed up transactions"

ui/components/app/collectible-details/collectible-details.js

@@ -2,12 +2,10 @@ import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
-import { getTokenTrackerLink } from '@metamask/etherscan-link';
 import { isEqual } from 'lodash';
 import Box from '../../ui/box';
 import Card from '../../ui/card';
 import Typography from '../../ui/typography/typography';
-import { ButtonIcon, ICON_NAMES } from '../../component-library';
 import {
   COLORS,
   TYPOGRAPHY,
@@ -17,14 +15,18 @@ import {
   OVERFLOW_WRAP,
   DISPLAY,
   BLOCK_SIZES,
+  ICON_COLORS,
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { getAssetImageURL, shortenAddress } from '../../../helpers/utils/util';
+import {
+  formatDate,
+  getAssetImageURL,
+  shortenAddress,
+} from '../../../helpers/utils/util';
 import { getCollectibleImageAlt } from '../../../helpers/utils/collectibles';
 import {
   getCurrentChainId,
   getIpfsGateway,
-  getRpcPrefsForCurrentProvider,
   getSelectedIdentity,
 } from '../../../selectors';
 import AssetNavigation from '../../../pages/asset/components/asset-navigation';
@@ -50,6 +52,8 @@ import {
   TokenStandard,
 } from '../../../../shared/constants/transaction';
 import CollectibleDefaultImage from '../collectible-default-image';
+import { ButtonIcon, ICON_NAMES } from '../../component-library';
+import Tooltip from '../../ui/tooltip';
 
 export default function CollectibleDetails({ collectible }) {
   const {
@@ -61,15 +65,15 @@ export default function CollectibleDetails({ collectible }) {
     tokenId,
     standard,
     isCurrentlyOwned,
+    lastSale,
+    imageThumbnail,
   } = collectible;
   const t = useI18nContext();
   const history = useHistory();
   const dispatch = useDispatch();
-  const rpcPrefs = useSelector(getRpcPrefsForCurrentProvider);
   const ipfsGateway = useSelector(getIpfsGateway);
   const collectibleContracts = useSelector(getCollectibleContracts);
   const currentNetwork = useSelector(getCurrentChainId);
-  const [sourceCopied, handleSourceCopy] = useCopyToClipboard();
   const [addressCopied, handleAddressCopy] = useCopyToClipboard();
 
   const collectibleContractName = collectibleContracts.find(
@@ -79,12 +83,16 @@ export default function CollectibleDetails({ collectible }) {
   const selectedAccountName = useSelector(
     (state) => getSelectedIdentity(state).name,
   );
+  const collectibleImageAlt = getCollectibleImageAlt(collectible);
   const collectibleImageURL = getAssetImageURL(
     imageOriginal ?? image,
     ipfsGateway,
   );
-  const collectibleImageAlt = getCollectibleImageAlt(collectible);
   const isDataURI = collectibleImageURL.startsWith('data:');
+  const formattedTimestamp = formatDate(
+    new Date(lastSale?.event_timestamp).getTime(),
+    'M/d/y',
+  );
 
   const onRemove = () => {
     dispatch(removeAndIgnoreNft(address, tokenId));
@@ -234,6 +242,68 @@ export default function CollectibleDetails({ collectible }) {
           </Box>
         </div>
         <Box marginBottom={2}>
+          {lastSale ? (
+            <>
+              <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
+                <Typography
+                  color={COLORS.TEXT_DEFAULT}
+                  variant={TYPOGRAPHY.H6}
+                  fontWeight={FONT_WEIGHT.BOLD}
+                  boxProps={{
+                    margin: 0,
+                    marginBottom: 4,
+                    marginRight: 2,
+                  }}
+                  className="collectible-details__link-title"
+                >
+                  {t('lastSold')}
+                </Typography>
+                <Box
+                  display={DISPLAY.FLEX}
+                  flexDirection={FLEX_DIRECTION.ROW}
+                  className="collectible-details__contract-wrapper"
+                >
+                  <Typography
+                    color={COLORS.TEXT_ALTERNATIVE}
+                    variant={TYPOGRAPHY.H6}
+                    overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
+                    boxProps={{ margin: 0, marginBottom: 4 }}
+                  >
+                    {formattedTimestamp}
+                  </Typography>
+                </Box>
+              </Box>
+              <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
+                <Typography
+                  color={COLORS.TEXT_DEFAULT}
+                  variant={TYPOGRAPHY.H6}
+                  fontWeight={FONT_WEIGHT.BOLD}
+                  boxProps={{
+                    margin: 0,
+                    marginBottom: 4,
+                    marginRight: 2,
+                  }}
+                  className="collectible-details__link-title"
+                >
+                  {t('lastPriceSold')}
+                </Typography>
+                <Box
+                  display={DISPLAY.FLEX}
+                  flexDirection={FLEX_DIRECTION.ROW}
+                  className="collectible-details__contract-wrapper"
+                >
+                  <Typography
+                    color={COLORS.TEXT_ALTERNATIVE}
+                    variant={TYPOGRAPHY.H6}
+                    overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
+                    boxProps={{ margin: 0, marginBottom: 4 }}
+                  >
+                    {lastSale.total_price}
+                  </Typography>
+                </Box>
+              </Box>
+            </>
+          ) : null}
           <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
             <Typography
               color={COLORS.TEXT_DEFAULT}
@@ -270,16 +340,39 @@ export default function CollectibleDetails({ collectible }) {
                 </a>
               )}
             </Typography>
-            <ButtonIcon
-              ariaLabel="copy"
-              className="collectible-details__contract-copy-button"
-              onClick={() => {
-                handleSourceCopy(collectibleImageURL);
+          </Box>
+          <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
+            <Typography
+              color={COLORS.TEXT_DEFAULT}
+              variant={TYPOGRAPHY.H6}
+              fontWeight={FONT_WEIGHT.BOLD}
+              boxProps={{
+                margin: 0,
+                marginBottom: 4,
+                marginRight: 2,
               }}
-              iconName={
-                sourceCopied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
-              }
-            />
+              className="collectible-details__link-title"
+            >
+              {t('link')}
+            </Typography>
+            <Typography
+              variant={TYPOGRAPHY.H6}
+              boxProps={{
+                margin: 0,
+                marginBottom: 4,
+              }}
+              className="collectible-details__image-source"
+              color={isDataURI ? COLORS.TEXT_DEFAULT : COLORS.PRIMARY_DEFAULT}
+            >
+              <a
+                target="_blank"
+                rel="noopener noreferrer"
+                href={collectibleImageURL}
+                title={collectibleImageURL}
+              >
+                {imageThumbnail}
+              </a>
+            </Typography>
           </Box>
           <Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.ROW}>
             <Typography
@@ -301,40 +394,32 @@ export default function CollectibleDetails({ collectible }) {
               className="collectible-details__contract-wrapper"
             >
               <Typography
-                color={COLORS.PRIMARY_DEFAULT}
+                color={COLORS.TEXT_ALTERNATIVE}
                 variant={TYPOGRAPHY.H6}
                 overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
-                boxProps={{
-                  margin: 0,
-                  marginBottom: 4,
-                }}
-                className="collectible-details__contract-link"
+                boxProps={{ margin: 0, marginBottom: 4 }}
               >
-                <a
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  href={getTokenTrackerLink(
-                    address,
-                    currentNetwork,
-                    null,
-                    null,
-                    rpcPrefs,
-                  )}
-                  title={address}
-                >
-                  {inPopUp ? shortenAddress(address) : address}
-                </a>
+                {shortenAddress(address)}
               </Typography>
-              <ButtonIcon
-                ariaLabel="copy"
-                className="collectible-details__contract-copy-button"
-                onClick={() => {
-                  handleAddressCopy(address);
-                }}
-                iconName={
-                  addressCopied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
+              <Tooltip
+                wrapperClassName="collectible-details__tooltip-wrapper"
+                position="bottom"
+                title={
+                  addressCopied ? t('copiedExclamation') : t('copyToClipboard')
                 }
-              />
+              >
+                <ButtonIcon
+                  ariaLabel="copy"
+                  color={ICON_COLORS.ICON_ALTERNATIVE}
+                  className="collectible-details__contract-copy-button"
+                  onClick={() => {
+                    handleAddressCopy(address);
+                  }}
+                  iconName={
+                    addressCopied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY
+                  }
+                />
+              </Tooltip>
             </Box>
           </Box>
           {inPopUp ? renderSendButton() : null}
@@ -364,5 +449,9 @@ CollectibleDetails.propTypes = {
       config: PropTypes.string,
       profile_img_url: PropTypes.string,
     }),
+    lastSale: PropTypes.shape({
+      event_timestamp: PropTypes.string,
+      total_price: PropTypes.string,
+    }),
   }),
 };

ui/components/app/collectible-details/collectible-details.stories.js

@@ -6,8 +6,13 @@ const collectible = {
   tokenId: '1124157',
   address: '0x06012c8cf97bead5deae237070f9587f8e7a266d',
   image: './catnip-spicywright.png',
+  imageThumbnail: 'https://www.cryptokitties.co/.../1124157',
   description:
     "Good day. My name is Catnip Spicywight, which got me teased a lot in high school. If I want to put low fat mayo all over my hamburgers, I shouldn't have to answer to anyone about it, am I right? One time I beat Arlene in an arm wrestle.",
+  lastSale: {
+    event_timestamp: '2023-01-18T21:51:23',
+    total_price: '4900000000000000',
+  },
 };
 
 export default {

ui/components/app/collectible-details/index.scss

@@ -10,10 +10,16 @@ $spacer-break-small: 16px;
     padding: 0 $spacer-break-large;
   }
 
+  &__tooltip-wrapper {
+    width: 100%;
+  }
+
   &__top-section {
     display: flex;
     flex-direction: column;
     margin-bottom: $spacer-break-small;
+    box-shadow: var(--shadow-size-xs) var(--color-shadow-default);
+    padding: $spacer-break-large;
 
     @include screen-sm-min {
       margin-bottom: $spacer-break-large;
@@ -79,7 +85,6 @@ $spacer-break-small: 16px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    width: 332px;
   }
 
   &__image-source {