| Event | +Price | +By | +To | +Time | +
|---|---|---|---|---|
|
+ |
+
+ {formattedPrice && (
+ |
+
+ + {fromAddress && ( + + {shortenAddress(fromAddress, 2, 4)} + + )} + | + ++ {toAddress && ( + + {shortenAddress(toAddress, 2, 4)} + + )} + | +{eventTimestamp && getTimeDifference(eventTimestamp.toString())} | +
-
- {assetMediaType === MediaType.Image ? (
- 
- ) : (
-
-
-
-
+
+ {asset.imageUrl === undefined || showHolder ? (
+ Content not available yet
+ ) : assetMediaType === MediaType.Image ? (
+ setShowHolder(true)}
+ />
+ ) : (
+
+
+
+ {collection.collectionName} {collectionStats?.isVerified &&
+
+
+ {asset.name ?? `${asset.collectionName} #${asset.tokenId}`}
+
+
+
+
+ 
+
+
+ {collectionStats?.rarityVerified
+ ? `Verified by ${collectionStats?.name}`
+ : `Ranking by ${rarity.provider === 'Genie' ? fallbackProvider : rarity.provider}`}
+
+
+ }
+ placement="top"
>
- {rarityProvider && (
-
- 
- Ranking by{' '}
- {asset.rarity?.primaryProvider === 'Genie' ? fallbackProvider : asset.rarity?.primaryProvider}
-
- }
- >
-
- #{rarityProvider.rank} 
+ Rarity: {putCommas(rarity.score)}
+
+ ) : null
+ }
+ >
+
+ <>
+
+
+ {events && events.length > 0 ? (
+
+
-
- )}
-
- {
- await navigator.clipboard.writeText(`${window.location.hostname}/#${pathname}`)
- }}
- >
-
-
- {
- if (!parsed.origin || parsed.origin === 'collection') {
- navigate(`/nfts/collection/${asset.address}`)
- } else if (parsed.origin === 'profile') {
- navigate('/profile', undefined)
- } else if (parsed.origin === 'explore') {
- navigate(`/nfts`, undefined)
- } else if (parsed.origin === 'activity') {
- navigate(`/nfts/collection/${asset.address}/activity`, undefined)
- }
- }}
- >
- {parsed.origin ? (
-
-
-
-
- {asset.susFlag && (
-
- {SUSPICIOUS_TEXT} }>
-
- {collection.collectionDescription ? (
-
-
- ) : null}
-
- {ownerAddress.length > 0 && (
-
-
-
-
- {asset.priceInfo && asset.sellorders && !isOwned ? (
-
-
-
-
- }.svg`})
-
-
- {formatEthPrice(asset.priceInfo.ETHPrice)}
- {USDPrice && (
-
- ${toSignificant(USDPrice)}
-
- )}
-
- {(asset.sellorders?.[0] as Deprecated_SellOrder).orderClosingDate ||
- (asset.sellorders?.[0] as SellOrder).endAt ? (
-
- {
- if (isSelected) {
- removeAssetsFromBag([asset])
- } else {
- addAssetsToBag([asset])
- sendAnalyticsEvent(EventName.NFT_BUY_ADDED, { ...eventProperties })
- }
- setSelected((x) => !x)
- }}
- >
- {isSelected ? 'Added to Bag' : 'Buy Now'}
-
-
- ) : null}
-
-
-
-
- {showTraits ? (
-
+
)}
-
-
-
+
-
-
+
No activities yet
+ View collection items{' '}
+
+ {!isErc1555 || !assetInBag ? (
+
+ {
+ assetInBag ? removeAssetsFromBag([asset]) : addAssetsToBag([asset])
+ if (!assetInBag && !isErc1555 && !bagExpanded) {
+ toggleBag()
+ }
+ }}
+ >
+
+ {assetInBag ? 'Remove' : 'Buy Now'}
+
+
+
+ ) : (
+
+
+ removeAssetsFromBag([asset])}>
+
+
+
+
+
+ {quantity}
+
+
+
+
+ addAssetsToBag([asset])}>
+
+
+
+ )}
+
+ {header}
+ {body}
+
+ )
+}
+
+const stringShortener = (text: string) => `${text.substring(0, 4)}...${text.substring(text.length - 4, text.length)}`
+
+const DetailsContainer = ({ asset, collection }: { asset: GenieAsset; collection: CollectionInfoForAsset }) => {
+ const { address, tokenId, tokenType, creator } = asset
+ const { totalSupply } = collection
+
+ const [, setCopied] = useCopyClipboard()
+ const copy = useCallback(() => {
+ setCopied(address ?? '')
+ }, [address, setCopied])
+
+ return (
+
+
+ {shortenAddress(address, 2, 4)} 9 ? stringShortener(tokenId) : tokenId} />
+
+ {shortenAddress(creator.address, 2, 4)}
+
+ )
+ }
+ />
+
+ )
+}
+
+export default DetailsContainer
diff --git a/src/nft/components/details/InfoContainer.tsx b/src/nft/components/details/InfoContainer.tsx
new file mode 100644
index 0000000000..d38187ca18
--- /dev/null
+++ b/src/nft/components/details/InfoContainer.tsx
@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import { ChevronDown, ChevronUp } from 'react-feather'
+import styled, { css } from 'styled-components/macro'
+
+const Header = styled.div<{ isOpen: boolean }>`
+ display: flex;
+ border-radius: ${({ isOpen }) => (isOpen ? '16px 16px 0px 0px' : '16px')};
+ justify-content: space-between;
+ background-color: ${({ theme }) => theme.backgroundSurface};
+ padding: 14px 20px;
+ cursor: pointer;
+ border: 1px solid ${({ theme }) => theme.backgroundOutline};
+ margin-top: 28px;
+ width: 100%;
+ align-items: center;
+
+ &:hover {
+ background-color: ${({ theme }) => theme.stateOverlayHover};
+ }
+
+ &:active {
+ background-color: ${({ theme }) => theme.stateOverlayPressed};
+ }
+
+ transition: ${({
+ theme: {
+ transition: { duration, timing },
+ },
+ }) => css`background-color ${duration.medium} ${timing.ease}`};
+`
+
+const PrimaryHeader = styled.span`
+ display: flex;
+ align-items: center;
+ gap: 16px;
+ color: ${({ theme }) => theme.textPrimary};
+ font-weight: 500;
+ line-height: 28px;
+ font-size: 20px;
+`
+
+const SecondaryHeader = styled.span`
+ font-size: 12px;
+ color: ${({ theme }) => theme.textSecondary};
+`
+
+const SecondaryHeaderContainer = styled.span`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 32px;
+ color: ${({ theme }) => theme.textPrimary};
+`
+
+const ContentContainer = styled.div`
+ padding: 20px;
+ border: 1px solid ${({ theme }) => theme.backgroundOutline};
+ border-top: none;
+ border-radius: 0px 0px 16px 16px;
+ background-color: ${({ theme }) => theme.backgroundSurface}; ;
+`
+
+const InfoContainer = ({
+ children,
+ primaryHeader,
+ secondaryHeader,
+ defaultOpen,
+}: {
+ children: JSX.Element
+ primaryHeader: string
+ secondaryHeader: React.ReactNode
+ defaultOpen?: boolean
+}) => {
+ const [isOpen, setIsOpen] = useState(!!defaultOpen)
+
+ return (
+
+ setIsOpen(!isOpen)}>
+
+ {primaryHeader} {secondaryHeader}
+
+ {isOpen ?
+
+ {isOpen && {children} }
+
+ )
+}
+
+export default InfoContainer
diff --git a/src/nft/components/details/Traits.css.ts b/src/nft/components/details/Traits.css.ts
deleted file mode 100644
index 56f7f525da..0000000000
--- a/src/nft/components/details/Traits.css.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { style } from '@vanilla-extract/css'
-
-import { sprinkles } from '../../css/sprinkles.css'
-
-export const grid = style([
- sprinkles({ gap: '16', display: 'grid' }),
- {
- gridTemplateColumns: 'repeat(4, 1fr)',
- '@media': {
- '(max-width: 1536px)': {
- gridTemplateColumns: 'repeat(3, 1fr)',
- },
- '(max-width: 640px)': {
- gridTemplateColumns: 'repeat(2, 1fr)',
- },
- },
- },
-])
diff --git a/src/nft/components/details/Traits.tsx b/src/nft/components/details/Traits.tsx
deleted file mode 100644
index e8b935fd03..0000000000
--- a/src/nft/components/details/Traits.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import { Trait } from 'nft/hooks'
-import qs from 'query-string'
-
-import { badge } from '../../css/common.css'
-import { Box } from '../Box'
-import { Column } from '../Flex'
-import * as styles from './Traits.css'
-
-const TraitRow: React.FC
- {traits.length === 0
- ? 'No traits'
- : traits.map((item) => {
- const params = qs.stringify(
- { traits: [`("${item.trait_type}","${item.trait_value}")`] },
- {
- arrayFormat: 'comma',
- }
- )
-
- return (
-
-
-)
diff --git a/src/nft/components/details/TraitsContainer.tsx b/src/nft/components/details/TraitsContainer.tsx
new file mode 100644
index 0000000000..c2faf5b725
--- /dev/null
+++ b/src/nft/components/details/TraitsContainer.tsx
@@ -0,0 +1,97 @@
+import { GenieAsset, Trait } from 'nft/types'
+import qs from 'query-string'
+import { useMemo } from 'react'
+import { Link } from 'react-router-dom'
+import styled from 'styled-components/macro'
+
+const Grid = styled.div`
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ gap: 16px;
+ max-width: 780px;
+
+ @media (max-width: 960px) {
+ grid-template-columns: 1fr 1fr 1fr;
+ }
+
+ @media (max-width: 420px) {
+ grid-template-columns: 1fr 1fr;
+ }
+`
+
+const GridItemContainer = styled(Link)`
+ background-color: ${({ theme }) => theme.backgroundInteractive};
+ border-radius: 12px;
+ cursor: pointer;
+ padding: 12px;
+ text-decoration: none;
+
+ &:hover {
+ opacity: ${({ theme }) => theme.opacity.hover};
+ }
+
+ &:active {
+ opacity: ${({ theme }) => theme.opacity.click};
+ }
+
+ transition: ${({
+ theme: {
+ transition: { duration, timing },
+ },
+ }) => `opacity ${duration.medium} ${timing.ease}`};
+ min-width: 0;
+`
+
+const TraitType = styled.div`
+ color: ${({ theme }) => theme.textSecondary};
+ font-weight: 600;
+ font-size: 10px;
+ line-height: 12px;
+ white-space: nowrap;
+ width: 100%;
+`
+
+const TraitValue = styled.div`
+ color: ${({ theme }) => theme.textPrimary};
+ font-size: 16px;
+ line-height: 24px;
+ margin-top: 4px;
+ display: inline-block;
+
+ display: inline-block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 100%;
+`
+
+const GridItem = ({ trait, collectionAddress }: { trait: Trait; collectionAddress: string }) => {
+ const { trait_type, trait_value } = trait
+ const params = qs.stringify(
+ { traits: [`("${trait_type}","${trait_value}")`] },
+ {
+ arrayFormat: 'comma',
+ }
+ )
+
+ return (
+