From b123458a26fcb04761593e8f22745cbb9ca314ba Mon Sep 17 00:00:00 2001 From: Nidhi Kumari Date: Thu, 2 Feb 2023 23:56:36 +0530 Subject: [PATCH] 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 | 6 + .../collectible-details.js | 179 +++++++++++++----- .../collectible-details.stories.js | 5 + .../app/collectible-details/index.scss | 7 +- 4 files changed, 151 insertions(+), 46 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index c11147352..7e69d31d6 100644 --- a/app/_locales/en/messages.json +++ b/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" diff --git a/ui/components/app/collectible-details/collectible-details.js b/ui/components/app/collectible-details/collectible-details.js index f1d2edf87..2fd028a98 100644 --- a/ui/components/app/collectible-details/collectible-details.js +++ b/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 }) { + {lastSale ? ( + <> + + + {t('lastSold')} + + + + {formattedTimestamp} + + + + + + {t('lastPriceSold')} + + + + {lastSale.total_price} + + + + + ) : null} )} - { - handleSourceCopy(collectibleImageURL); + + + + className="collectible-details__link-title" + > + {t('link')} + + + + {imageThumbnail} + + - - {inPopUp ? shortenAddress(address) : address} - + {shortenAddress(address)} - { - handleAddressCopy(address); - }} - iconName={ - addressCopied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY + + > + { + handleAddressCopy(address); + }} + iconName={ + addressCopied ? ICON_NAMES.COPY_SUCCESS : ICON_NAMES.COPY + } + /> + {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, + }), }), }; diff --git a/ui/components/app/collectible-details/collectible-details.stories.js b/ui/components/app/collectible-details/collectible-details.stories.js index 7b8c91d29..88c37d586 100644 --- a/ui/components/app/collectible-details/collectible-details.stories.js +++ b/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 { diff --git a/ui/components/app/collectible-details/index.scss b/ui/components/app/collectible-details/index.scss index aa059e216..e1414325c 100644 --- a/ui/components/app/collectible-details/index.scss +++ b/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 {