diff --git a/src/components/FeatureFlagModal/FeatureFlagModal.tsx b/src/components/FeatureFlagModal/FeatureFlagModal.tsx
index 7a097e9b6e..7aeecc1e54 100644
--- a/src/components/FeatureFlagModal/FeatureFlagModal.tsx
+++ b/src/components/FeatureFlagModal/FeatureFlagModal.tsx
@@ -1,7 +1,6 @@
import { BaseVariant, FeatureFlag, featureFlagSettings, useUpdateFlag } from 'featureFlags'
import { useBaseEnabledFlag } from 'featureFlags/flags/baseEnabled'
import { useForceUniswapXOnFlag } from 'featureFlags/flags/forceUniswapXOn'
-import { DetailsV2Variant, useDetailsV2Flag } from 'featureFlags/flags/nftDetails'
import { useRoutingAPIForPriceFlag } from 'featureFlags/flags/priceRoutingApi'
import { TraceJsonRpcVariant, useTraceJsonRpcFlag } from 'featureFlags/flags/traceJsonRpc'
import { UniswapXVariant, useUniswapXFlag } from 'featureFlags/flags/uniswapx'
@@ -207,12 +206,6 @@ export default function FeatureFlagModal() {
-
{
- const [timePeriod, setTimePeriod] = useState(HistoryDuration.Week)
- return (
-
- Activity Content
-
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/BuyButton.tsx b/src/nft/components/details/detailsV2/BuyButton.tsx
deleted file mode 100644
index a550a7a3ab..0000000000
--- a/src/nft/components/details/detailsV2/BuyButton.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { formatNumber } from '@uniswap/conedison/format'
-import { ButtonPrimary } from 'components/Button'
-import Loader from 'components/Icons/LoadingSpinner'
-import { useBuyAssetCallback } from 'nft/hooks/useFetchAssets'
-import { GenieAsset } from 'nft/types'
-import styled from 'styled-components/macro'
-
-import { OfferButton } from './OfferButton'
-import { ButtonStyles } from './shared'
-
-const StyledBuyButton = styled(ButtonPrimary)`
- display: flex;
- flex-direction: row;
- padding: 16px 24px;
- gap: 8px;
- line-height: 24px;
- white-space: nowrap;
-
- ${ButtonStyles}
-`
-
-const Price = styled.div`
- color: ${({ theme }) => theme.accentTextLightSecondary};
-`
-
-export const BuyButton = ({ asset, onDataPage }: { asset: GenieAsset; onDataPage?: boolean }) => {
- const { fetchAndPurchaseSingleAsset, isLoading: isLoadingRoute } = useBuyAssetCallback()
- const price = asset.sellorders?.[0]?.price.value
-
- if (!price) {
- return
- }
-
- return (
- <>
- fetchAndPurchaseSingleAsset(asset)}>
- {isLoadingRoute ? (
- <>
- Fetching Route
-
-
- ) : (
- <>
- Buy
- {formatNumber(price)} ETH
-
- )}
-
- {onDataPage && }
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/DataPage.test.tsx b/src/nft/components/details/detailsV2/DataPage.test.tsx
deleted file mode 100644
index 198e545918..0000000000
--- a/src/nft/components/details/detailsV2/DataPage.test.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { TEST_NFT_ASSET } from 'test-utils/nft/fixtures'
-import { render } from 'test-utils/render'
-
-import { DataPage } from './DataPage'
-
-it('data page loads with header showing', () => {
- const { asFragment } = render()
- expect(asFragment()).toMatchSnapshot()
-})
-
-// The header is hidden via opacity: 0 to maintain its spacing, so it still exists in the DOM
-// Therefore we can not check for its non-existence and instead rely on comparing the full generated snapshots
-it('data page loads without header showing', () => {
- const { asFragment } = render()
- expect(asFragment()).toMatchSnapshot()
-})
diff --git a/src/nft/components/details/detailsV2/DataPage.tsx b/src/nft/components/details/detailsV2/DataPage.tsx
deleted file mode 100644
index a0846e904c..0000000000
--- a/src/nft/components/details/detailsV2/DataPage.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import Column from 'components/Column'
-import Row from 'components/Row'
-import { GenieAsset } from 'nft/types'
-import styled from 'styled-components/macro'
-import { BREAKPOINTS } from 'theme'
-
-import { DataPageDescription } from './DataPageDescription'
-import { DataPageHeader } from './DataPageHeader'
-import { DataPageTable } from './DataPageTable'
-import { DataPageTraits } from './DataPageTraits'
-
-const DataPagePaddingContainer = styled.div`
- padding: 24px 64px;
- height: 100vh;
- width: 100%;
-
- @media screen and (max-width: ${BREAKPOINTS.md}px) {
- height: 100%;
- }
-
- @media screen and (max-width: ${BREAKPOINTS.sm}px) {
- padding: 24px 48px;
- }
-
- @media screen and (max-width: ${BREAKPOINTS.xs}px) {
- padding: 24px 20px;
- }
-`
-
-const DataPageContainer = styled(Column)`
- height: 100%;
- width: 100%;
- gap: 36px;
- max-width: ${({ theme }) => theme.maxWidth};
- margin: 0 auto;
-`
-
-const HeaderContainer = styled.div<{ showDataHeader?: boolean }>`
- position: sticky;
- top: ${({ theme }) => `${theme.navHeight}px`};
- padding-top: 16px;
- backdrop-filter: blur(12px);
- z-index: 1;
- transition: ${({ theme }) => `opacity ${theme.transition.duration.fast}`};
- opacity: ${({ showDataHeader }) => (showDataHeader ? '1' : '0')};
-
- @media screen and (max-width: ${BREAKPOINTS.md}px) {
- display: none;
- }
-`
-
-const ContentContainer = styled(Row)`
- gap: 24px;
- padding-bottom: 45px;
-
- @media screen and (max-width: ${BREAKPOINTS.lg}px) {
- flex-wrap: wrap;
- }
-`
-
-const LeftColumn = styled(Column)`
- gap: 24px;
- width: 100%;
- align-self: flex-start;
-`
-
-export const DataPage = ({ asset, showDataHeader }: { asset: GenieAsset; showDataHeader: boolean }) => {
- return (
-
-
-
-
-
-
-
- {!!asset.traits?.length && }
-
-
-
-
-
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/DataPageDescription.tsx b/src/nft/components/details/detailsV2/DataPageDescription.tsx
deleted file mode 100644
index d2da80ed72..0000000000
--- a/src/nft/components/details/detailsV2/DataPageDescription.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { Trans } from '@lingui/macro'
-import styled from 'styled-components/macro'
-
-import { Tab, TabbedComponent } from './TabbedComponent'
-
-const DescriptionContentContainer = styled.div`
- height: 252px;
-`
-
-const DescriptionContent = () => {
- return Description Content
-}
-
-const DetailsContent = () => {
- return Details Content
-}
-
-enum DescriptionTabsKeys {
- Description = 'description',
- Details = 'details',
-}
-
-const DescriptionTabs: Map = new Map([
- [
- DescriptionTabsKeys.Description,
- {
- title: Description,
- key: DescriptionTabsKeys.Description,
- content: ,
- },
- ],
- [
- DescriptionTabsKeys.Details,
- {
- title: Details,
- key: DescriptionTabsKeys.Details,
- content: ,
- },
- ],
-])
-
-export const DataPageDescription = () => {
- return
-}
diff --git a/src/nft/components/details/detailsV2/DataPageHeader.test.tsx b/src/nft/components/details/detailsV2/DataPageHeader.test.tsx
deleted file mode 100644
index 9163995c32..0000000000
--- a/src/nft/components/details/detailsV2/DataPageHeader.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { TEST_NFT_ASSET, TEST_SELL_ORDER } from 'test-utils/nft/fixtures'
-import { render } from 'test-utils/render'
-
-import { DataPageHeader } from './DataPageHeader'
-
-it('Header loads with asset with no sell orders', () => {
- const { asFragment } = render()
- expect(asFragment()).toMatchSnapshot()
-})
-
-it('Header loads with asset with a sell order', () => {
- const assetWithOrder = {
- ...TEST_NFT_ASSET,
- sellorders: [TEST_SELL_ORDER],
- }
- const { asFragment } = render()
- expect(asFragment()).toMatchSnapshot()
-})
diff --git a/src/nft/components/details/detailsV2/DataPageHeader.tsx b/src/nft/components/details/detailsV2/DataPageHeader.tsx
deleted file mode 100644
index 628079c022..0000000000
--- a/src/nft/components/details/detailsV2/DataPageHeader.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import Column from 'components/Column'
-import Row from 'components/Row'
-import { VerifiedIcon } from 'nft/components/icons'
-import { GenieAsset } from 'nft/types'
-import styled from 'styled-components/macro'
-import { BREAKPOINTS, ThemedText } from 'theme'
-
-import { BuyButton } from './BuyButton'
-
-const HeaderContainer = styled(Row)`
- gap: 24px;
-`
-
-const AssetImage = styled.img`
- width: 96px;
- height: 96px;
- border-radius: 20px;
- object-fit: cover;
-
- @media screen and (max-width: ${BREAKPOINTS.lg}px) {
- display: none;
- }
-`
-
-const AssetText = styled(Column)`
- gap: 4px;
- margin-right: auto;
-`
-
-export const DataPageHeader = ({ asset }: { asset: GenieAsset }) => {
- return (
-
-
-
-
- {asset.collectionName}
-
-
-
- {asset.name ?? `${asset.collectionName} #${asset.tokenId}`}
-
-
-
-
-
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/DataPageTable.test.tsx b/src/nft/components/details/detailsV2/DataPageTable.test.tsx
deleted file mode 100644
index c9fc63996c..0000000000
--- a/src/nft/components/details/detailsV2/DataPageTable.test.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { TEST_NFT_ASSET, TEST_OFFER, TEST_SELL_ORDER } from 'test-utils/nft/fixtures'
-import { render } from 'test-utils/render'
-
-import { ListingsTableContent } from './ListingsTableContent'
-import { OffersTableContent } from './OffersTableContent'
-
-it('data page offers table content loads with a given asset', () => {
- const assetWithOffer = {
- ...TEST_NFT_ASSET,
- offers: [TEST_OFFER],
- }
- const { asFragment } = render()
- expect(asFragment()).toMatchSnapshot()
-})
-
-it('data page listings table content loads with a given asset', () => {
- const assetWithOrder = {
- ...TEST_NFT_ASSET,
- sellorders: [TEST_SELL_ORDER],
- }
- const { asFragment } = render()
- expect(asFragment()).toMatchSnapshot()
-})
diff --git a/src/nft/components/details/detailsV2/DataPageTable.tsx b/src/nft/components/details/detailsV2/DataPageTable.tsx
deleted file mode 100644
index 5c4637d8ff..0000000000
--- a/src/nft/components/details/detailsV2/DataPageTable.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { GenieAsset } from 'nft/types'
-import { useMemo } from 'react'
-
-import { ActivityTableContent } from './ActivityTableContent'
-import { ListingsTableContent } from './ListingsTableContent'
-import { OffersTableContent } from './OffersTableContent'
-import { Tab, TabbedComponent } from './TabbedComponent'
-
-export enum TableTabsKeys {
- Activity = 'activity',
- Offers = 'offers',
- Listings = 'listings',
-}
-
-export const DataPageTable = ({ asset }: { asset: GenieAsset }) => {
- const TableTabs: Map = useMemo(
- () =>
- new Map([
- [
- TableTabsKeys.Activity,
- {
- title: Activity,
- key: TableTabsKeys.Activity,
- content: ,
- },
- ],
- [
- TableTabsKeys.Offers,
- {
- title: Offers,
- key: TableTabsKeys.Offers,
- content: ,
- count: 11, // TODO Replace Placeholder with real data
- },
- ],
- [
- TableTabsKeys.Listings,
- {
- title: Listings,
- key: TableTabsKeys.Listings,
- content: ,
- count: asset.sellorders?.length,
- },
- ],
- ]),
- [asset]
- )
- return
-}
diff --git a/src/nft/components/details/detailsV2/DataPageTraits.test.tsx b/src/nft/components/details/detailsV2/DataPageTraits.test.tsx
deleted file mode 100644
index 7d8de3d2b3..0000000000
--- a/src/nft/components/details/detailsV2/DataPageTraits.test.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import { TEST_NFT_ASSET } from 'test-utils/nft/fixtures'
-import { render } from 'test-utils/render'
-
-import { DataPageTraits } from './DataPageTraits'
-
-it('data page trait component does not load with asset with no traits', () => {
- const { asFragment } = render()
- expect(asFragment()).toMatchSnapshot()
-})
-
-// TODO(NFT-1114): add test for trait component with asset with traits when rarity is not randomly generated
-// while rarities are randomly generated, snapshots will never match
diff --git a/src/nft/components/details/detailsV2/DataPageTraits.tsx b/src/nft/components/details/detailsV2/DataPageTraits.tsx
deleted file mode 100644
index bc464b3274..0000000000
--- a/src/nft/components/details/detailsV2/DataPageTraits.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import { Trans } from '@lingui/macro'
-import Column from 'components/Column'
-import { ScrollBarStyles } from 'components/Common'
-import Row from 'components/Row'
-import { useSubscribeScrollState } from 'nft/hooks'
-import { GenieAsset } from 'nft/types'
-import { useMemo } from 'react'
-import styled from 'styled-components/macro'
-import { BREAKPOINTS, ThemedText } from 'theme'
-
-import { Scrim } from './shared'
-import { Tab, TabbedComponent } from './TabbedComponent'
-import { TraitRow } from './TraitRow'
-
-const TraitsHeaderContainer = styled(Row)`
- padding: 0px 12px;
-`
-
-const TraitsHeader = styled(ThemedText.SubHeaderSmall)<{
- $flex?: number
- $justifyContent?: string
- hideOnSmall?: boolean
-}>`
- display: flex;
- line-height: 20px;
- color: ${({ theme }) => theme.textSecondary};
- flex: ${({ $flex }) => $flex ?? 1};
- justify-content: ${({ $justifyContent }) => $justifyContent};
-
- @media screen and (max-width: ${BREAKPOINTS.sm}px) {
- display: ${({ hideOnSmall }) => (hideOnSmall ? 'none' : 'flex')};
- }
-`
-
-const TraitRowContainer = styled.div`
- position: relative;
-`
-
-const TraitRowScrollableContainer = styled.div`
- overflow-y: auto;
- overflow-x: hidden;
- max-height: 412px;
- width: calc(100% + 6px);
-
- ${ScrollBarStyles}
-`
-
-const TraitsContent = ({ asset }: { asset: GenieAsset }) => {
- const { userCanScroll, scrollRef, scrollProgress, scrollHandler } = useSubscribeScrollState()
-
- // This is needed to prevent rerenders when handling scrolls
- const traitRows = useMemo(() => {
- return asset.traits?.map((trait) => (
-
- ))
- }, [asset.address, asset.traits])
-
- return (
-
-
-
- Trait
-
-
- Floor price
-
-
- Quantity
-
-
- Rarity
-
-
-
- {scrollProgress > 0 && }
-
- {traitRows}
-
- {userCanScroll && scrollProgress !== 100 && }
-
-
- )
-}
-
-enum TraitTabsKeys {
- Traits = 'traits',
-}
-
-export const DataPageTraits = ({ asset }: { asset: GenieAsset }) => {
- const TraitTabs: Map = useMemo(
- () =>
- new Map([
- [
- TraitTabsKeys.Traits,
- {
- title: Traits,
- key: TraitTabsKeys.Traits,
- content: ,
- count: asset.traits?.length,
- },
- ],
- ]),
- [asset]
- )
- return
-}
diff --git a/src/nft/components/details/detailsV2/InfoChips.tsx b/src/nft/components/details/detailsV2/InfoChips.tsx
deleted file mode 100644
index bdf7d4ad5d..0000000000
--- a/src/nft/components/details/detailsV2/InfoChips.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { useWeb3React } from '@web3-react/core'
-import Column from 'components/Column'
-import Row from 'components/Row'
-import { Unicon } from 'components/Unicon'
-import useENSAvatar from 'hooks/useENSAvatar'
-import useENSName from 'hooks/useENSName'
-import { useIsMobile } from 'nft/hooks'
-import { GenieAsset } from 'nft/types'
-import { getLinkForTrait } from 'nft/utils'
-import { ReactNode, useReducer } from 'react'
-import { ChevronDown, DollarSign } from 'react-feather'
-import { Link } from 'react-router-dom'
-import styled from 'styled-components/macro'
-import { BREAKPOINTS, ClickableStyle, EllipsisStyle, ExternalLink, LinkStyle, ThemedText } from 'theme'
-import { isAddress, shortenAddress } from 'utils'
-import { ExplorerDataType } from 'utils/getExplorerLink'
-import { getExplorerLink } from 'utils/getExplorerLink'
-
-const StyledBubble = styled(Row)`
- background-color: ${({ theme }) => theme.backgroundSurface};
- padding: 10px 12px 10px 8px;
- border-radius: 20px;
- max-width: 144px;
-
- @media screen and (min-width: ${BREAKPOINTS.sm}px) {
- max-width: 169px;
- }
-`
-
-const StyledLabelMedium = styled.div`
- font-weight: 600;
- font-size: 16px;
- line-height: 20px;
- color: ${({ theme }) => theme.textPrimary};
-
- ${EllipsisStyle}
-`
-
-const StyledIcon = styled(Row)`
- width: 24px;
- height: 24px;
- flex-shrink: 0;
- color: ${({ theme }) => theme.accentAction};
- border-radius: 100%;
- overflow: hidden;
- justify-content: center;
- align-items: center;
-`
-
-const StyledLink = styled(Link)`
- ${ClickableStyle}
- ${LinkStyle}
-`
-
-const ConditionalLinkWrapper = ({
- isExternal,
- href,
- children,
-}: {
- isExternal?: boolean
- href: string
- children: ReactNode
-}) => {
- return isExternal ? (
- {children}
- ) : (
- {children}
- )
-}
-
-const InfoBubble = ({
- title,
- info,
- icon,
- href,
- isExternal,
-}: {
- title: ReactNode
- info: string
- icon: ReactNode
- href: string
- isExternal?: boolean
-}) => {
- return (
-
- {title}
-
-
- {icon}
- {info}
-
-
-
- )
-}
-
-const InfoChipDropdown = styled.button`
- padding: 10px;
- background-color: ${({ theme }) => theme.backgroundSurface};
- color: ${({ theme }) => theme.textSecondary};
- border-radius: 100%;
- border: none;
- cursor: pointer;
-`
-
-const InfoChipDropdownContainer = styled(Column)`
- height: 100%;
- margin-top: auto;
-
- @media screen and (min-width: ${BREAKPOINTS.sm}px) {
- display: none;
- }
-`
-
-const Break = styled(Column)`
- flex-basis: 100%;
-
- @media screen and (min-width: ${BREAKPOINTS.sm}px) {
- display: none;
- }
-`
-
-const InfoChipsContainer = styled(Row)`
- gap: 4px;
- width: 100%;
- flex-wrap: wrap;
-
- @media screen and (min-width: ${BREAKPOINTS.sm}px) {
- gap: 12px;
- flex-wrap: nowrap;
- }
-`
-
-const StyledChevron = styled(ChevronDown)<{ isOpen: boolean }>`
- transform: ${({ isOpen }) => (isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
- will-change: transform;
- transition: transform ${({ theme }) => theme.transition.duration.medium};
-`
-
-export const InfoChips = ({ asset }: { asset: GenieAsset }) => {
- const { chainId } = useWeb3React()
- const isMobile = useIsMobile()
- const [showExtraInfoChips, toggleShowExtraInfoChips] = useReducer((s) => !s, false)
- const shouldShowExtraInfoChips = !isMobile || showExtraInfoChips
-
- const topTrait = asset?.traits?.[0]
- const traitCollectionAddress = topTrait && getLinkForTrait(topTrait, asset.address)
-
- const isChecksummedAddress = isAddress(asset.ownerAddress)
- const checksummedAddress = isChecksummedAddress ? isChecksummedAddress : undefined
- const { ENSName } = useENSName(checksummedAddress)
- const { avatar } = useENSAvatar(checksummedAddress)
- const shortenedAddress = asset.ownerAddress ? shortenAddress(asset.ownerAddress) : ''
- const addressToDisplay = ENSName ?? shortenedAddress
- const avatarToDisplay = avatar ? (
- 
- ) : (
-
- )
-
- return (
-
-
- Owner}
- info={addressToDisplay}
- icon={avatarToDisplay}
- href={getExplorerLink(chainId ?? 1, asset.ownerAddress ?? '', ExplorerDataType.ADDRESS)}
- isExternal={true}
- />
- {traitCollectionAddress && (
- <>
- Trait Floor}
- info="5.3 ETH"
- icon={}
- href={traitCollectionAddress}
- />
-
-
-
-
-
- {shouldShowExtraInfoChips && (
- <>
-
- Top Trait}
- info={topTrait.trait_value}
- icon=""
- href={traitCollectionAddress}
- />
-
- )}
-
- )}
-
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/LandingPage.test.tsx b/src/nft/components/details/detailsV2/LandingPage.test.tsx
deleted file mode 100644
index 99d1ecbb4e..0000000000
--- a/src/nft/components/details/detailsV2/LandingPage.test.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { TEST_NFT_ASSET, TEST_NFT_COLLECTION_INFO_FOR_ASSET } from 'test-utils/nft/fixtures'
-import { render } from 'test-utils/render'
-
-import { LandingPage } from './LandingPage'
-
-beforeEach(() => {
- // IntersectionObserver isn't available in test environment
- const mockIntersectionObserver = jest.fn()
- mockIntersectionObserver.mockReturnValue({
- observe: () => null,
- unobserve: () => null,
- disconnect: () => null,
- })
- window.IntersectionObserver = mockIntersectionObserver
-})
-
-describe('LandingPage', () => {
- const mockSetShowDataHeader = jest.fn()
- it('renders it correctly', () => {
- const { asFragment } = render(
-
- )
- expect(asFragment()).toMatchSnapshot()
- })
-})
diff --git a/src/nft/components/details/detailsV2/LandingPage.tsx b/src/nft/components/details/detailsV2/LandingPage.tsx
deleted file mode 100644
index 4ab0d1cbbd..0000000000
--- a/src/nft/components/details/detailsV2/LandingPage.tsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import Column, { ColumnCenter } from 'components/Column'
-import Row from 'components/Row'
-import { VerifiedIcon } from 'nft/components/icons'
-import { CollectionInfoForAsset, GenieAsset } from 'nft/types'
-import { useEffect, useRef } from 'react'
-import styled from 'styled-components/macro'
-import { BREAKPOINTS } from 'theme'
-
-import { BuyButton } from './BuyButton'
-import { InfoChips } from './InfoChips'
-import { MediaRenderer } from './MediaRenderer'
-
-const MAX_WIDTH = 560
-
-const LandingPageContainer = styled.div`
- display: flex;
- flex-direction: column;
- min-height: ${({ theme }) => `calc(100vh - ${theme.navHeight}px - ${theme.mobileBottomBarHeight}px)`};
- align-items: center;
- padding: 22px 20px 0px;
- gap: 26px;
- width: 100%;
-
- @media screen and (min-width: ${BREAKPOINTS.sm}px) {
- gap: 64px;
- padding-top: 28px;
- }
-
- @media screen and (min-width: ${BREAKPOINTS.md}px) {
- min-height: ${({ theme }) => `calc(100vh - ${theme.navHeight}px )`};
- }
-
- @media screen and (min-width: ${BREAKPOINTS.xl}px) {
- flex-direction: row;
- padding-top: 0px;
- padding-bottom: ${({ theme }) => `${theme.navHeight}px`};
- gap: 80px;
- justify-content: center;
- }
-`
-
-const InfoContainer = styled(ColumnCenter)`
- gap: 40px;
-
- @media screen and (min-width: ${BREAKPOINTS.sm}px) {
- width: ${MAX_WIDTH}px;
- }
-`
-
-const StyledHeadlineText = styled.div`
- font-weight: 600;
- font-size: 20px;
- line-height: 28px;
- text-align: center;
- color: ${({ theme }) => theme.textPrimary};
-
- @media screen and (min-width: ${BREAKPOINTS.sm}px) {
- line-height: 44px;
- font-size: 36px;
- }
-`
-const StyledSubheaderText = styled.div`
- font-weight: 500;
- font-size: 14px;
- line-height: 20px;
- text-align: center;
- color: ${({ theme }) => theme.textSecondary};
-
- @media screen and (min-width: ${BREAKPOINTS.sm}px) {
- line-height: 24px;
- font-size: 16px;
- }
-`
-
-const InfoDetailsContainer = styled(Column)`
- gap: 4px;
- align-items: center;
-
- @media screen and (min-width: ${BREAKPOINTS.sm}px) {
- ${StyledHeadlineText} {
- line-height: 44px;
- font-size: 36px;
- }
-
- ${StyledSubheaderText} {
- line-height: 24px;
- font-size: 16px;
- }
- }
-`
-
-const MediaContainer = styled.div`
- position: relative;
- width: 100%;
- height: 100%;
- filter: drop-shadow(0px 12px 20px rgba(0, 0, 0, 0.1));
-
- @media screen and (min-width: ${BREAKPOINTS.sm}px) {
- width: ${MAX_WIDTH}px;
- height: ${MAX_WIDTH}px;
- }
-`
-
-interface LandingPageProps {
- asset: GenieAsset
- collection: CollectionInfoForAsset
- setShowDataHeader: (showDataHeader: boolean) => void
-}
-
-export const LandingPage = ({ asset, collection, setShowDataHeader }: LandingPageProps) => {
- const intersectionRef = useRef(null)
- const observableRef = useRef(
- new IntersectionObserver((entries) => {
- if (!entries[0].isIntersecting) {
- setShowDataHeader(true)
- } else {
- setShowDataHeader(false)
- }
- })
- )
-
- // Checks if the intersectionRef is in the viewport
- // If it is not in the viewport, the data page header becomes visible
- useEffect(() => {
- const cachedRef = intersectionRef.current
- const observer = observableRef.current
- if (cachedRef && observer) {
- observer.observe(cachedRef)
- return () => observer.unobserve(cachedRef)
- }
- return
- }, [intersectionRef, observableRef, setShowDataHeader])
-
- return (
-
-
-
-
-
-
-
- {collection.collectionName}
- {collection.isVerified && }
-
- {asset.name ?? `${asset.collectionName} #${asset.tokenId}`}
-
-
-
-
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/ListingsTableContent.tsx b/src/nft/components/details/detailsV2/ListingsTableContent.tsx
deleted file mode 100644
index ced9994146..0000000000
--- a/src/nft/components/details/detailsV2/ListingsTableContent.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { NftStandard } from 'graphql/data/__generated__/types-and-hooks'
-import { AddToBagIcon } from 'nft/components/icons'
-import { useIsMobile } from 'nft/hooks'
-import { GenieAsset } from 'nft/types'
-import { useTheme } from 'styled-components/macro'
-
-import { TableTabsKeys } from './DataPageTable'
-import { TableContentComponent } from './TableContentComponent'
-import { ContentRow, HeaderRow } from './TableRowComponent'
-
-export const ListingsTableContent = ({ asset }: { asset: GenieAsset }) => {
- const isMobile = useIsMobile()
- const theme = useTheme()
- const headers =
- const contentRows = (asset.sellorders || []).map((offer, index) => (
- : Add to Bag}
- is1155={asset.tokenType === NftStandard.Erc1155}
- />
- ))
- return
-}
diff --git a/src/nft/components/details/detailsV2/MediaRenderer.test.tsx b/src/nft/components/details/detailsV2/MediaRenderer.test.tsx
deleted file mode 100644
index c921648bfa..0000000000
--- a/src/nft/components/details/detailsV2/MediaRenderer.test.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import {
- TEST_AUDIO_NFT_ASSET,
- TEST_EMBEDDED_NFT_ASSET,
- TEST_NFT_ASSET,
- TEST_VIDEO_NFT_ASSET,
-} from 'test-utils/nft/fixtures'
-import { render } from 'test-utils/render'
-
-import { MediaRenderer } from './MediaRenderer'
-
-describe('Media renderer', () => {
- it('renders image nft correctly', () => {
- const { asFragment } = render()
- expect(asFragment()).toMatchSnapshot()
- })
-
- it('renders an embedded nft correctly', () => {
- const { asFragment } = render()
- expect(asFragment()).toMatchSnapshot()
- })
-
- it('renders a video nft correctly', () => {
- const { asFragment } = render()
- expect(asFragment()).toMatchSnapshot()
- })
-
- it('renders an audio nft correctly', () => {
- const { asFragment } = render()
- expect(asFragment()).toMatchSnapshot()
- })
-})
diff --git a/src/nft/components/details/detailsV2/MediaRenderer.tsx b/src/nft/components/details/detailsV2/MediaRenderer.tsx
deleted file mode 100644
index daef71ae42..0000000000
--- a/src/nft/components/details/detailsV2/MediaRenderer.tsx
+++ /dev/null
@@ -1,184 +0,0 @@
-import { GenieAsset } from 'nft/types'
-import { isAudio, isVideo } from 'nft/utils'
-import { useState } from 'react'
-import styled, { css } from 'styled-components/macro'
-import { BREAKPOINTS, ThemedText } from 'theme'
-
-const MediaStyle = css`
- position: relative;
- object-fit: contain;
- height: 100%;
- width: 100%;
- aspect-ratio: 1;
- z-index: 1;
-`
-
-const StyledImage = styled.img`
- ${MediaStyle}
-`
-
-const StyledVideo = styled.video`
- ${MediaStyle}
-`
-
-const MediaShadow = styled.img`
- object-fit: contain;
- height: 100%;
- aspect-ratio: 1;
- border-radius: 20px;
- filter: blur(25px);
-
- @media screen and (min-width: ${BREAKPOINTS.xl}px) {
- filter: blur(50px);
- }
-`
-
-const MediaShadowContainer = styled.div`
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
-`
-
-const StyledEmbed = styled.div`
- position: relative;
- overflow: hidden;
- width: 100%;
- padding-top: 100%;
- z-index: 1;
-`
-
-const StyledIFrame = styled.iframe`
- position: absolute;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- width: 100%;
- height: 100%;
-`
-
-const AudioContainer = styled.div`
- position: relative;
-`
-
-const StyledAudio = styled.audio`
- position: absolute;
- left: 0;
- bottom: 0;
- z-index: 2;
- width: 100%;
-`
-
-const AudioPlayer = ({ asset, onError }: { asset: GenieAsset; onError: () => void }) => {
- return (
-
-
-
-
- )
-}
-
-const EmbeddedMediaPlayer = ({ asset, onError }: { asset: GenieAsset; onError: () => void }) => {
- return (
-
-
-
- )
-}
-
-const ContentNotAvailable = styled(ThemedText.BodySmall)`
- display: flex;
- background-color: ${({ theme }) => theme.backgroundSurface};
- color: ${({ theme }) => theme.textSecondary};
- align-items: center;
- justify-content: center;
-
- ${MediaStyle}
-`
-
-// TODO: when assets query is moved to nxyz update with mediaType from the query
-enum MediaType {
- Audio = 'audio',
- Video = 'video',
- Image = 'image',
- Raw = 'raw',
-}
-
-function assetMediaType(asset: GenieAsset): MediaType {
- if (isAudio(asset.animationUrl ?? '')) {
- return MediaType.Audio
- } else if (isVideo(asset.animationUrl ?? '')) {
- return MediaType.Video
- } else if (asset.animationUrl) {
- return MediaType.Raw
- }
- return MediaType.Image
-}
-
-const RenderMediaShadow = ({ imageUrl }: { imageUrl?: string }) => {
- const [contentNotAvailable, setContentNotAvailable] = useState(false)
-
- if (!imageUrl || contentNotAvailable) {
- return null
- }
-
- return (
-
- setContentNotAvailable(true)} />
-
- )
-}
-
-const RenderMediaType = ({ asset }: { asset: GenieAsset }) => {
- const [contentNotAvailable, setContentNotAvailable] = useState(false)
-
- if (contentNotAvailable) {
- return Content not available
- }
-
- switch (assetMediaType(asset)) {
- case MediaType.Image:
- return (
- setContentNotAvailable(true)}
- />
- )
- case MediaType.Video:
- return (
- setContentNotAvailable(true)}
- />
- )
- case MediaType.Audio:
- return setContentNotAvailable(true)} />
- case MediaType.Raw:
- return setContentNotAvailable(true)} />
- }
-}
-
-export const MediaRenderer = ({ asset }: { asset: GenieAsset }) => (
- <>
-
-
-
-)
diff --git a/src/nft/components/details/detailsV2/NftDetails.tsx b/src/nft/components/details/detailsV2/NftDetails.tsx
deleted file mode 100644
index 329f2cbf27..0000000000
--- a/src/nft/components/details/detailsV2/NftDetails.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { CollectionInfoForAsset, GenieAsset } from 'nft/types'
-import { useState } from 'react'
-import styled from 'styled-components/macro'
-import { Z_INDEX } from 'theme/zIndex'
-
-import { DataPage } from './DataPage'
-import { LandingPage } from './LandingPage'
-
-interface NftDetailsProps {
- asset: GenieAsset
- collection: CollectionInfoForAsset
-}
-
-const DetailsBackground = styled.div<{ backgroundImage: string }>`
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-image: ${({ backgroundImage }) => `url(${backgroundImage})`};
- filter: blur(100px);
- opacity: ${({ theme }) => (theme.darkMode ? 0.2 : 0.24)};
-`
-
-const DetailsContentContainer = styled.div`
- z-index: ${Z_INDEX.hover};
- width: 100%;
-`
-
-export const NftDetails = ({ asset, collection }: NftDetailsProps) => {
- const [showDataHeader, setShowDataHeader] = useState(false)
- return (
- <>
- {asset.imageUrl && }
-
-
-
-
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/OfferButton.tsx b/src/nft/components/details/detailsV2/OfferButton.tsx
deleted file mode 100644
index 377f122d2a..0000000000
--- a/src/nft/components/details/detailsV2/OfferButton.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { ButtonGray, ButtonPrimary } from 'components/Button'
-import { HandHoldingDollarIcon } from 'nft/components/icons'
-import styled from 'styled-components/macro'
-
-import { ButtonStyles } from './shared'
-
-const MakeOfferButtonSmall = styled(ButtonPrimary)`
- padding: 16px;
- ${ButtonStyles}
-`
-
-const MakeOfferButtonLarge = styled(ButtonGray)`
- white-space: nowrap;
- ${ButtonStyles}
-`
-
-export const OfferButton = ({ smallVersion }: { smallVersion?: boolean }) => {
- if (smallVersion) {
- return (
-
-
-
- )
- }
-
- return (
-
- Make an offer
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/OffersTableContent.tsx b/src/nft/components/details/detailsV2/OffersTableContent.tsx
deleted file mode 100644
index 8df5bc71c0..0000000000
--- a/src/nft/components/details/detailsV2/OffersTableContent.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { NftStandard } from 'graphql/data/__generated__/types-and-hooks'
-import { useIsMobile } from 'nft/hooks'
-import { GenieAsset } from 'nft/types'
-import { Check } from 'react-feather'
-import { useTheme } from 'styled-components/macro'
-import { TEST_OFFER } from 'test-utils/nft/fixtures'
-
-import { TableTabsKeys } from './DataPageTable'
-import { TableContentComponent } from './TableContentComponent'
-import { ContentRow, HeaderRow } from './TableRowComponent'
-
-export const OffersTableContent = ({ asset }: { asset: GenieAsset }) => {
- // TODO(NFT-1114) Replace with real offer data when BE supports
- const mockOffers = new Array(11).fill(TEST_OFFER)
- const isMobile = useIsMobile()
- const theme = useTheme()
- const headers =
- const contentRows = mockOffers.map((offer, index) => (
- : Accept}
- is1155={asset.tokenType === NftStandard.Erc1155}
- />
- ))
- return
-}
diff --git a/src/nft/components/details/detailsV2/RarityGraph.tsx b/src/nft/components/details/detailsV2/RarityGraph.tsx
deleted file mode 100644
index 4f9148e24d..0000000000
--- a/src/nft/components/details/detailsV2/RarityGraph.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Trans } from '@lingui/macro'
-import Row from 'components/Row'
-import { Trait } from 'nft/types'
-import styled from 'styled-components/macro'
-import { colors } from 'theme/colors'
-
-const RarityBar = styled.div<{ $color?: string }>`
- background: ${({ $color, theme }) => $color ?? theme.backgroundOutline};
- width: 2px;
- height: 10px;
- border-radius: 2px;
-`
-
-interface RarityValue {
- threshold: number
- color: string
- caption: React.ReactNode
-}
-
-enum RarityLevel {
- VeryCommon = 'Very Common',
- Common = 'Common',
- Rare = 'Rare',
- VeryRare = 'Very Rare',
- ExtremelyRare = 'Extremely Rare',
-}
-
-const RarityLevels: { [key in RarityLevel]: RarityValue } = {
- [RarityLevel.VeryCommon]: {
- threshold: 0.8,
- color: colors.gray500,
- caption: Very common,
- },
- [RarityLevel.Common]: {
- threshold: 0.6,
- color: colors.green300,
- caption: Common,
- },
- [RarityLevel.Rare]: {
- threshold: 0.4,
- color: colors.blueVibrant,
- caption: Rare,
- },
- [RarityLevel.VeryRare]: {
- threshold: 0.2,
- color: colors.purpleVibrant,
- caption: Very rare,
- },
- [RarityLevel.ExtremelyRare]: {
- threshold: 0,
- color: colors.magentaVibrant,
- caption: Extremely rare,
- },
-}
-
-export function getRarityLevel(rarity: number) {
- switch (true) {
- case rarity > RarityLevels[RarityLevel.VeryCommon].threshold:
- return RarityLevels[RarityLevel.VeryCommon]
- case rarity > RarityLevels[RarityLevel.Common].threshold:
- return RarityLevels[RarityLevel.Common]
- case rarity > RarityLevels[RarityLevel.Rare].threshold:
- return RarityLevels[RarityLevel.Rare]
- case rarity > RarityLevels[RarityLevel.VeryRare].threshold:
- return RarityLevels[RarityLevel.VeryRare]
- case rarity >= RarityLevels[RarityLevel.ExtremelyRare].threshold:
- return RarityLevels[RarityLevel.ExtremelyRare]
- default:
- return RarityLevels[RarityLevel.VeryCommon]
- }
-}
-
-export const RarityGraph = ({ trait, rarity }: { trait: Trait; rarity: number }) => {
- const rarityLevel = getRarityLevel(rarity)
- return (
-
- {Array.from({ length: 20 }).map((_, index) => (
-
- ))}
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/TabbedComponent.tsx b/src/nft/components/details/detailsV2/TabbedComponent.tsx
deleted file mode 100644
index 3cb4566398..0000000000
--- a/src/nft/components/details/detailsV2/TabbedComponent.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import Row from 'components/Row'
-import { useState } from 'react'
-import styled from 'styled-components/macro'
-import { ThemedText } from 'theme'
-
-import { containerStyles } from './shared'
-
-const TabbedComponentContainer = styled.div`
- ${containerStyles}
-`
-
-const TabsRow = styled(Row)`
- gap: 32px;
- width: 100;
- margin-bottom: 12px;
- padding-bottom: 12px;
- border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
-`
-
-const Tab = styled(ThemedText.SubHeader)<{ isActive: boolean; numTabs: number }>`
- color: ${({ theme, isActive }) => (isActive ? theme.textPrimary : theme.textTertiary)};
- line-height: 24px;
- cursor: ${({ numTabs }) => (numTabs > 1 ? 'pointer' : 'default')};
-
- &:hover {
- opacity: ${({ numTabs, theme }) => numTabs > 1 && theme.opacity.hover};
- }
-`
-
-const TabNumBubble = styled(ThemedText.UtilityBadge)`
- background: ${({ theme }) => theme.backgroundOutline};
- border-radius: 4px;
- padding: 2px 4px;
- color: ${({ theme }) => theme.textSecondary};
- line-height: 12px;
-`
-
-export interface Tab {
- title: React.ReactNode
- key: string
- content: JSX.Element
- count?: number
-}
-
-interface TabbedComponentProps {
- tabs: Map
- defaultTabKey?: string
-}
-
-export const TabbedComponent = ({ tabs, defaultTabKey }: TabbedComponentProps) => {
- const firstKey = tabs.keys().next().value
- const [activeKey, setActiveKey] = useState(defaultTabKey ?? firstKey)
- const activeContent = tabs.get(activeKey)?.content
- const tabArray = Array.from(tabs.values())
- return (
-
-
- {tabArray.map((tab) => (
- setActiveKey(tab.key)}
- key={tab.key}
- >
-
- {tab.title}
- {!!tab.count && {tab.count > 10 ? '10+' : tab.count}}
-
-
- ))}
-
- {activeContent}
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/TableContentComponent.tsx b/src/nft/components/details/detailsV2/TableContentComponent.tsx
deleted file mode 100644
index 79a713af51..0000000000
--- a/src/nft/components/details/detailsV2/TableContentComponent.tsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { ScrollBarStyles } from 'components/Common'
-import { useSubscribeScrollState } from 'nft/hooks'
-import styled from 'styled-components/macro'
-
-import { TableTabsKeys } from './DataPageTable'
-import { Scrim } from './shared'
-
-const TableRowsContainer = styled.div`
- position: relative;
-`
-
-const TableRowScrollableContainer = styled.div`
- overflow-y: auto;
- overflow-x: hidden;
- max-height: 264px;
-
- ${ScrollBarStyles}
-`
-
-const TableHeaderRowContainer = styled.div<{ userCanScroll: boolean }>`
- margin-right: ${({ userCanScroll }) => (userCanScroll ? '11px' : '0')};
-`
-
-const TableRowContainer = styled.div`
- border-bottom: 1px solid ${({ theme }) => theme.backgroundOutline};
-
- &:last-child {
- border-bottom: none;
- }
-`
-
-interface TableContentComponentProps {
- headerRow: React.ReactNode
- contentRows: React.ReactNode[]
- type: TableTabsKeys
-}
-
-export const TableContentComponent = ({ headerRow, contentRows, type }: TableContentComponentProps) => {
- const { userCanScroll, scrollRef, scrollProgress, scrollHandler } = useSubscribeScrollState()
-
- return (
- <>
- {headerRow}
-
- {scrollProgress > 0 && }
-
- {contentRows.map((row, index) => (
- {row}
- ))}
-
- {userCanScroll && scrollProgress !== 100 && }
-
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/TableRowComponent.tsx b/src/nft/components/details/detailsV2/TableRowComponent.tsx
deleted file mode 100644
index 6f3939b0d6..0000000000
--- a/src/nft/components/details/detailsV2/TableRowComponent.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { Trans } from '@lingui/macro'
-import { formatCurrencyAmount, NumberType } from '@uniswap/conedison/format'
-import { useWeb3React } from '@web3-react/core'
-import { OpacityHoverState } from 'components/Common'
-import Row from 'components/Row'
-import { OrderType } from 'graphql/data/__generated__/types-and-hooks'
-import { useScreenSize } from 'hooks/useScreenSize'
-import { useStablecoinValue } from 'hooks/useStablecoinPrice'
-import useNativeCurrency from 'lib/hooks/useNativeCurrency'
-import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
-import { HomeSearchIcon } from 'nft/components/icons'
-import { Offer, SellOrder } from 'nft/types'
-import { formatEth, getMarketplaceIcon, timeUntil } from 'nft/utils'
-import styled from 'styled-components/macro'
-import { BREAKPOINTS, ExternalLink, ThemedText } from 'theme'
-import { shortenAddress } from 'utils'
-
-import { TableTabsKeys } from './DataPageTable'
-
-const TableCell = styled.div<{ $flex?: number; $justifyContent?: string; $color?: string; hideOnSmall?: boolean }>`
- display: flex;
- flex: ${({ $flex }) => $flex ?? 1};
- justify-content: ${({ $justifyContent }) => $justifyContent};
- color: ${({ $color }) => $color};
- flex-shrink: 0;
-
- @media screen and (max-width: ${BREAKPOINTS.sm}px) {
- display: ${({ hideOnSmall }) => (hideOnSmall ? 'none' : 'flex')};
- }
-`
-
-const ActionButton = styled.div`
- cursor: pointer;
- white-space: nowrap;
- ${OpacityHoverState}
-`
-
-const USDPrice = styled(ThemedText.BodySmall)`
- color: ${({ theme }) => theme.textSecondary};
- line-height: 20px;
-
- @media screen and (max-width: ${BREAKPOINTS.sm}px) {
- display: none;
- }
-
- @media screen and (min-width: ${BREAKPOINTS.lg}px) and (max-width: ${BREAKPOINTS.xl - 1}px) {
- display: none;
- }
-`
-
-const Link = styled(ExternalLink)`
- height: 20px;
-`
-
-const PriceCell = ({ price }: { price: number }) => {
- const { chainId } = useWeb3React()
- const nativeCurrency = useNativeCurrency(chainId)
- const parsedAmount = tryParseCurrencyAmount(price.toString(), nativeCurrency)
- const usdValue = useStablecoinValue(parsedAmount)
- return (
-
-
- {formatEth(price)}
-
- {formatCurrencyAmount(usdValue, NumberType.FiatTokenPrice)}
-
- )
-}
-
-export const HeaderRow = ({ type, is1155 }: { type: TableTabsKeys; is1155?: boolean }) => {
- const screenSize = useScreenSize()
- const isMobile = !screenSize['sm']
- const isLargeScreen = screenSize['lg'] && !screenSize['xl']
- const reducedPriceWidth = isMobile || isLargeScreen
-
- return (
-
-
-
-
- Price
-
-
- {is1155 && (
-
-
- Quantity
-
-
- )}
- {(type === TableTabsKeys.Offers || is1155) && (
-
-
- {type === TableTabsKeys.Offers ? From : Seller}
-
-
- )}
-
-
- Expires in
-
-
- {/* An empty cell is needed in the headers for proper vertical alignment with the action buttons */}
-
-
- )
-}
-
-export const ContentRow = ({
- content,
- buttonCTA,
- is1155,
-}: {
- content: Offer | SellOrder
- buttonCTA: React.ReactNode
- is1155?: boolean
-}) => {
- const screenSize = useScreenSize()
- const isMobile = !screenSize['sm']
- const date = content.endAt && new Date(content.endAt)
- const isSellOrder = 'type' in content && content.type === OrderType.Listing
- const reducedPriceWidth = isMobile || (screenSize['lg'] && !screenSize['xl'])
-
- return (
-
- {getMarketplaceIcon(content.marketplace, '20')}
- {content.price && (
-
-
-
- )}
- {is1155 && (
-
- {content.quantity}
-
- )}
- {(!isSellOrder || is1155) && (
-
-
- {shortenAddress(content.maker)}
-
-
- )}
-
-
- {date ? timeUntil(date) : Never}
-
-
-
-
- {buttonCTA}
-
-
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/TimePeriodSwitcher.test.tsx b/src/nft/components/details/detailsV2/TimePeriodSwitcher.test.tsx
deleted file mode 100644
index f76e032d23..0000000000
--- a/src/nft/components/details/detailsV2/TimePeriodSwitcher.test.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import userEvent from '@testing-library/user-event'
-import { HistoryDuration } from 'graphql/data/__generated__/types-and-hooks'
-import { act, render, screen } from 'test-utils/render'
-
-import { TimePeriodSwitcher } from './TimePeriodSwitcher'
-
-describe('NFT Details Activity Time Period Switcher', () => {
- const mockSetTimePeriod = jest.fn()
-
- it('renders when week is selected', () => {
- render()
- expect(screen.queryByTestId('activity-time-period-switcher')?.textContent).toBe('1 week')
- })
-
- it('renders when month is selected', () => {
- render()
- expect(screen.queryByTestId('activity-time-period-switcher')?.textContent).toBe('1 month')
- })
-
- it('renders when year is selected', () => {
- render()
- expect(screen.queryByTestId('activity-time-period-switcher')?.textContent).toBe('1 year')
- })
-
- it('renders when all time is selected', () => {
- render()
- expect(screen.queryByTestId('activity-time-period-switcher')?.textContent).toBe('All time')
- })
-
- it('renders dropdown when clicked', async () => {
- render()
- await act(() => userEvent.click(screen.getByTestId('activity-time-period-switcher')))
- expect(screen.queryByTestId('activity-time-period-switcher-dropdown')).toBeTruthy()
- })
-})
diff --git a/src/nft/components/details/detailsV2/TimePeriodSwitcher.tsx b/src/nft/components/details/detailsV2/TimePeriodSwitcher.tsx
deleted file mode 100644
index ccd524d091..0000000000
--- a/src/nft/components/details/detailsV2/TimePeriodSwitcher.tsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import { Trans } from '@lingui/macro'
-import Column from 'components/Column'
-import { OpacityHoverState } from 'components/Common'
-import Row from 'components/Row'
-import { HistoryDuration } from 'graphql/data/__generated__/types-and-hooks'
-import { useOnClickOutside } from 'hooks/useOnClickOutside'
-import { Dispatch, ReactNode, SetStateAction, useReducer, useRef } from 'react'
-import { Check, ChevronDown } from 'react-feather'
-import styled, { useTheme } from 'styled-components/macro'
-import { ThemedText } from 'theme'
-import { Z_INDEX } from 'theme/zIndex'
-
-const SwitcherAndDropdownWrapper = styled.div`
- position: relative;
-`
-
-const SwitcherWrapper = styled(Row)`
- gap: 4px;
- padding: 8px;
- cursor: pointer;
- border-radius: 12px;
- width: 92px;
- justify-content: space-between;
- user-select: none;
- background: ${({ theme }) => theme.backgroundInteractive};
- ${OpacityHoverState}
-`
-
-const Chevron = styled(ChevronDown)<{ $isOpen: boolean }>`
- height: 16px;
- width: 16px;
- color: ${({ theme }) => theme.textSecondary};
- transform: ${({ $isOpen }) => ($isOpen ? 'rotate(180deg)' : 'rotate(0deg)')};
- transition: transform ${({ theme }) => theme.transition.duration.fast};
-`
-
-const TimeDropdownMenu = styled(Column)`
- background-color: ${({ theme }) => theme.backgroundSurface};
- box-shadow: ${({ theme }) => theme.deepShadow};
- border: 0.5px solid ${({ theme }) => theme.backgroundOutline};
- border-radius: 12px;
- padding: 10px 8px;
- gap: 8px;
- position: absolute;
- top: 42px;
- z-index: ${Z_INDEX.dropdown}};
- right: 0px;
- width: 240px;
-`
-
-const DropdownContent = styled(Row)`
- gap: 4px;
- padding: 10px 8px;
- width: 100%;
- justify-content: space-between;
- border-radius: 8px;
- cursor: pointer;
-
- &:hover {
- background-color: ${({ theme }) => theme.stateOverlayHover};
- }
-`
-
-const supportedTimePeriods = [
- HistoryDuration.Week,
- HistoryDuration.Month,
- HistoryDuration.Year,
- HistoryDuration.Max,
-] as const
-export type SupportedTimePeriodsType = (typeof supportedTimePeriods)[number]
-
-const supportedTimePeriodsData: Record = {
- [HistoryDuration.Week]: 1 week,
- [HistoryDuration.Month]: 1 month,
- [HistoryDuration.Year]: 1 year,
- [HistoryDuration.Max]: All time,
-}
-
-export const TimePeriodSwitcher = ({
- activeTimePeriod,
- setTimePeriod,
-}: {
- activeTimePeriod: SupportedTimePeriodsType
- setTimePeriod: Dispatch>
-}) => {
- const theme = useTheme()
- const [isOpen, toggleIsOpen] = useReducer((isOpen) => !isOpen, false)
- const menuRef = useRef(null)
- useOnClickOutside(menuRef, () => {
- isOpen && toggleIsOpen()
- })
-
- return (
-
-
-
- {supportedTimePeriodsData[activeTimePeriod]}
-
-
-
- {isOpen && (
-
- {supportedTimePeriods.map((timePeriod) => (
- {
- setTimePeriod(timePeriod)
- toggleIsOpen()
- }}
- >
- {supportedTimePeriodsData[timePeriod]}
-
-
- ))}
-
- )}
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/TraitRow.tsx b/src/nft/components/details/detailsV2/TraitRow.tsx
deleted file mode 100644
index 43a3429e27..0000000000
--- a/src/nft/components/details/detailsV2/TraitRow.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import Column from 'components/Column'
-import Row from 'components/Row'
-import { Trait } from 'nft/types'
-import { formatEth, getLinkForTrait } from 'nft/utils'
-import { Link } from 'react-router-dom'
-import styled from 'styled-components/macro'
-import { BREAKPOINTS, ThemedText } from 'theme'
-
-import { getRarityLevel, RarityGraph } from './RarityGraph'
-
-const TraitRowLink = styled(Link)`
- text-decoration: none;
-`
-
-const SubheaderTiny = styled.div<{ $color?: string }>`
- font-size: 10px;
- line-height: 16px;
- font-weight: 600;
- color: ${({ theme, $color }) => ($color ? $color : theme.textSecondary)};
-`
-
-const SubheaderTinyHidden = styled(SubheaderTiny)`
- opacity: 0;
-`
-
-const TraitRowContainer = styled(Row)`
- padding: 12px 18px 12px 12px;
- border-radius: 12px;
- cursor: pointer;
- text-decoration: none;
- &:hover {
- background: ${({ theme }) => theme.hoverDefault};
- ${SubheaderTinyHidden} {
- opacity: 1;
- }
- }
-`
-
-const TraitColumnValue = styled(Column)<{ $flex?: number; $alignItems?: string }>`
- gap: 4px;
- flex: ${({ $flex }) => $flex ?? 3};
- align-items: ${({ $alignItems }) => $alignItems};
-`
-
-const TraitRowValue = styled(ThemedText.BodySmall)<{ $flex?: number; $justifyContent?: string; hideOnSmall?: boolean }>`
- display: flex;
- line-height: 20px;
- padding-top: 20px;
- flex: ${({ $flex }) => $flex ?? 1};
- justify-content: ${({ $justifyContent }) => $justifyContent};
-
- @media screen and (max-width: ${BREAKPOINTS.sm}px) {
- display: ${({ hideOnSmall }) => (hideOnSmall ? 'none' : 'flex')};
- }
-`
-
-export const TraitRow = ({ trait, collectionAddress }: { trait: Trait; collectionAddress: string }) => {
- // TODO(NFT-1114): Replace with actual rarity, count, and floor price when BE supports
- // rarity eventually should be number of items with this trait / total number of items, smaller rarity means more rare
- const randomRarity = Math.random()
- const rarityLevel = getRarityLevel(randomRarity)
-
- return (
-
-
-
- {trait.trait_type}
- {trait.trait_value}
-
- {formatEth(randomRarity * 1000)} ETH
- {Math.round(randomRarity * 10000)}
-
- {rarityLevel.caption}
-
-
-
-
- )
-}
diff --git a/src/nft/components/details/detailsV2/__snapshots__/DataPage.test.tsx.snap b/src/nft/components/details/detailsV2/__snapshots__/DataPage.test.tsx.snap
deleted file mode 100644
index 01b2cc063c..0000000000
--- a/src/nft/components/details/detailsV2/__snapshots__/DataPage.test.tsx.snap
+++ /dev/null
@@ -1,1203 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`data page loads with header showing 1`] = `
-
- .c4 {
- box-sizing: border-box;
- margin: 0;
- min-width: 0;
-}
-
-.c12 {
- box-sizing: border-box;
- margin: 0;
- min-width: 0;
- justify-self: flex-end;
- width: -webkit-min-content;
- width: -moz-min-content;
- width: min-content;
-}
-
-.c14 {
- box-sizing: border-box;
- margin: 0;
- min-width: 0;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- display: inline-block;
- text-align: center;
- line-height: inherit;
- -webkit-text-decoration: none;
- text-decoration: none;
- font-size: inherit;
- padding-left: 16px;
- padding-right: 16px;
- padding-top: 8px;
- padding-bottom: 8px;
- color: white;
- background-color: primary;
- border: 0;
- border-radius: 4px;
-}
-
-.c5 {
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- padding: 0;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-.c9 {
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- padding: 0;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- gap: 4px;
-}
-
-.c13 {
- width: -webkit-min-content;
- width: -moz-min-content;
- width: min-content;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- padding: 0;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- gap: 12px;
-}
-
-.c23 {
- width: 100%;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- padding: 0;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
- gap: 8px;
-}
-
-.c10 {
- color: #7780A0;
-}
-
-.c11 {
- color: #0D111C;
-}
-
-.c1 {
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-flex-direction: column;
- -ms-flex-direction: column;
- flex-direction: column;
- -webkit-box-pack: start;
- -webkit-justify-content: flex-start;
- -ms-flex-pack: start;
- justify-content: flex-start;
-}
-
-.c20 {
- background: #FFFFFF;
- border: 1px solid #D2D9EE;
- border-radius: 16px;
- padding: 16px 20px;
- width: 100%;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: start;
- align-self: flex-start;
-}
-
-.c21 {
- gap: 32px;
- width: 100;
- margin-bottom: 12px;
- padding-bottom: 12px;
- border-bottom: 1px solid #D2D9EE;
-}
-
-.c22 {
- color: #0D111C;
- line-height: 24px;
- cursor: pointer;
-}
-
-.c22:hover {
- opacity: 0.6;
-}
-
-.c24 {
- color: #98A1C0;
- line-height: 24px;
- cursor: pointer;
-}
-
-.c24:hover {
- opacity: 0.6;
-}
-
-.c26 {
- background: #D2D9EE;
- border-radius: 4px;
- padding: 2px 4px;
- color: #7780A0;
- line-height: 12px;
-}
-
-.c25 {
- height: 252px;
-}
-
-.c15 {
- padding: 16px;
- width: 100%;
- font-weight: 500;
- text-align: center;
- border-radius: 20px;
- outline: none;
- border: 1px solid transparent;
- color: #0D111C;
- -webkit-text-decoration: none;
- text-decoration: none;
- display: -webkit-box;
- display: -webkit-flex;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-pack: center;
- -webkit-justify-content: center;
- -ms-flex-pack: center;
- justify-content: center;
- -webkit-flex-wrap: nowrap;
- -ms-flex-wrap: nowrap;
- flex-wrap: nowrap;
- -webkit-align-items: center;
- -webkit-box-align: center;
- -ms-flex-align: center;
- align-items: center;
- cursor: pointer;
- position: relative;
- z-index: 1;
- will-change: transform;
- -webkit-transition: -webkit-transform 450ms ease;
- -webkit-transition: transform 450ms ease;
- transition: transform 450ms ease;
- -webkit-transform: perspective(1px) translateZ(0);
- -ms-transform: perspective(1px) translateZ(0);
- transform: perspective(1px) translateZ(0);
-}
-
-.c15:disabled {
- opacity: 50%;
- cursor: auto;
- pointer-events: none;
-}
-
-.c15 > * {
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
-}
-
-.c15 > a {
- -webkit-text-decoration: none;
- text-decoration: none;
-}
-
-.c16 {
- background-color: #F5F6FC;
- color: #7780A0;
- font-size: 16px;
- font-weight: 500;
-}
-
-.c16:hover {
- background-color: #d2daf7;
-}
-
-.c16:active {
- background-color: #bdc8f3;
-}
-
-.c17 {
- white-space: nowrap;
- width: -webkit-min-content;
- width: -moz-min-content;
- width: min-content;
- -webkit-flex-shrink: 0;
- -ms-flex-negative: 0;
- flex-shrink: 0;
- border-radius: 16px;
-}
-
-.c6 {
- gap: 24px;
-}
-
-.c7 {
- width: 96px;
- height: 96px;
- border-radius: 20px;
- object-fit: cover;
-}
-
-.c8 {
- gap: 4px;
- margin-right: auto;
-}
-
-.c28 {
- position: relative;
-}
-
-.c29 {
- gap: 4px;
- padding: 8px;
- cursor: pointer;
- border-radius: 12px;
- width: 92px;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- background: #E8ECFB;
- -webkit-transition: opacity 250ms ease;
- transition: opacity 250ms ease;
-}
-
-.c29:hover {
- opacity: 0.6;
-}
-
-.c29:active {
- opacity: 0.4;
-}
-
-.c30 {
- height: 16px;
- width: 16px;
- color: #7780A0;
- -webkit-transform: rotate(0deg);
- -ms-transform: rotate(0deg);
- transform: rotate(0deg);
- -webkit-transition: -webkit-transform 125ms;
- -webkit-transition: transform 125ms;
- transition: transform 125ms;
-}
-
-.c27 {
- height: 568px;
- -webkit-box-pack: justify;
- -webkit-justify-content: space-between;
- -ms-flex-pack: justify;
- justify-content: space-between;
- -webkit-align-items: flex-start;
- -webkit-box-align: flex-start;
- -ms-flex-align: flex-start;
- align-items: flex-start;
-}
-
-.c0 {
- padding: 24px 64px;
- height: 100vh;
- width: 100%;
-}
-
-.c2 {
- height: 100%;
- width: 100%;
- gap: 36px;
- max-width: 1200px;
- margin: 0 auto;
-}
-
-.c3 {
- position: -webkit-sticky;
- position: sticky;
- top: 72px;
- padding-top: 16px;
- -webkit-backdrop-filter: blur(12px);
- backdrop-filter: blur(12px);
- z-index: 1;
- -webkit-transition: opacity 125ms;
- transition: opacity 125ms;
- opacity: 1;
-}
-
-.c18 {
- gap: 24px;
- padding-bottom: 45px;
-}
-
-.c19 {
- gap: 24px;
- width: 100%;
- -webkit-align-self: flex-start;
- -ms-flex-item-align: start;
- align-self: flex-start;
-}
-
-@media screen and (max-width:1024px) {
- .c7 {
- display: none;
- }
-}
-
-@media screen and (max-width:768px) {
- .c0 {
- height: 100%;
- }
-}
-
-@media screen and (max-width:640px) {
- .c0 {
- padding: 24px 48px;
- }
-}
-
-@media screen and (max-width:396px) {
- .c0 {
- padding: 24px 20px;
- }
-}
-
-@media screen and (max-width:768px) {
- .c3 {
- display: none;
- }
-}
-
-@media screen and (max-width:1024px) {
- .c18 {
- -webkit-flex-wrap: wrap;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
- }
-}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Description Content
-
-
-
-
-
-
-
- Activity Content
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Description Content
-
-
-
-
-
-
-
- Activity Content
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Trait
-
-
- Floor price
-
-
- Quantity
-
-
- Rarity
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- .c1 {
- object-fit: contain;
- height: 100%;
- aspect-ratio: 1;
- border-radius: 20px;
- -webkit-filter: blur(25px);
- filter: blur(25px);
-}
-
-.c0 {
- position: absolute;
- top: 0;
- left: 0;
- bottom: 0;
- right: 0;
-}
-
-@media screen and (min-width:1280px) {
- .c1 {
- -webkit-filter: blur(50px);
- filter: blur(50px);
- }
-}
-
-
-
-
-
-