From 47d5ad6a5640ddccaa710a10c6e2c15abcb0b6da Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 21 Nov 2023 13:17:37 -0800 Subject: [PATCH 01/16] wip: FeaturedCards --- components/home/FeaturedCards.tsx | 208 +++++++++++++++++++++++ pages/[chain]/index.tsx | 265 +----------------------------- 2 files changed, 216 insertions(+), 257 deletions(-) create mode 100644 components/home/FeaturedCards.tsx diff --git a/components/home/FeaturedCards.tsx b/components/home/FeaturedCards.tsx new file mode 100644 index 000000000..8f6d6ef7f --- /dev/null +++ b/components/home/FeaturedCards.tsx @@ -0,0 +1,208 @@ +import { useTrendingCollections } from '@reservoir0x/reservoir-kit-ui' +import { + Box, + Flex, + FormatCryptoCurrency, + MarkdownLink, + Text, +} from 'components/primitives' +import Img from 'components/primitives/Img' +import { useMarketplaceChain } from 'hooks' +import Link from 'next/link' +import ReactMarkdown from 'react-markdown' +import optimizeImage from 'utils/optimizeImage' + +type TrendingCollections = ReturnType['data'] + +type FeaturedCardsProps = { + collections: TrendingCollections +} + +export const FeaturedCards = ({ + collections, +}: FeaturedCardsProps): JSX.Element => { + const marketplaceChain = useMarketplaceChain() + + const isMinting = false + + if (!collections) { + return Empty State + } + + return ( + + {collections.map((collection) => { + return ( + + div > div> img:nth-child(1)': { + transform: 'scale(1.075)', + }, + }} + > + + {collection?.name + + + + {/** + * {collection?.banner?.length || + collection.recentSales?.[0]?.token?.image?.length ? ( + + ) : ( + + )} + */} + {collection?.name + + + + {collection?.name} + + + + + + + + + FLOOR + + + + + + + 24H SALES + + + {collection.count?.toLocaleString()} + + + + + + + ) + })} + + ) +} diff --git a/pages/[chain]/index.tsx b/pages/[chain]/index.tsx index cea28e655..e238f3bf6 100644 --- a/pages/[chain]/index.tsx +++ b/pages/[chain]/index.tsx @@ -26,6 +26,8 @@ import ChainToggle from 'components/common/ChainToggle' import optimizeImage from 'utils/optimizeImage' import { MarkdownLink } from 'components/primitives/MarkdownLink' import { useRouter } from 'next/router' +import { FeaturedCards } from 'components/home/FeaturedCards' +import { useTrendingCollections } from '@reservoir0x/reservoir-kit-ui' const StyledImage = styled('img', {}) @@ -62,6 +64,11 @@ const Home: NextPage = ({ ssr }) => { isMounted ? chain?.id : undefined ) + const { data: trendingCollectionsData } = useTrendingCollections({ + period: '24h', + limit: 4, + }) + const topCollection = topSellingCollectionsData?.collections?.[0] return ( @@ -79,263 +86,7 @@ const Home: NextPage = ({ ssr }) => { }, }} > - - - - - - {topSellingCollectionsData && ( - <> - - - - collection image - - - - - - - {topCollection?.name} - - - - - - - - - - FLOOR - - - - - - - - - 24H SALES - - - {topCollection?.count?.toLocaleString()} - - - - - - RECENT SALES - - - {topCollection?.recentSales - ?.slice(0, 4) - ?.map((sale, i) => ( - { - e.stopPropagation() - e.preventDefault() - if ( - sale?.collection?.id && - sale?.token?.id - ) { - router.push( - `/${chain.routePrefix}/asset/${sale?.collection?.id}:${sale?.token?.id}` - ) - } - }} - > - - - - - - ))} - - - - - - - {theme == 'light' ? ( - - ) : ( - - )} - - - - - )} - - - + Date: Tue, 28 Nov 2023 12:30:34 -0600 Subject: [PATCH 02/16] feat: bottom half --- pages/[chain]/index.tsx | 482 ++++++++++++++++++++-------------------- 1 file changed, 243 insertions(+), 239 deletions(-) diff --git a/pages/[chain]/index.tsx b/pages/[chain]/index.tsx index e238f3bf6..edbbd1d5d 100644 --- a/pages/[chain]/index.tsx +++ b/pages/[chain]/index.tsx @@ -1,35 +1,40 @@ -import { NextPage, GetServerSideProps } from 'next' -import Link from 'next/link' -import { - Text, - Flex, - Box, - Button, - FormatCryptoCurrency, -} from 'components/primitives' -import Layout from 'components/Layout' import { paths } from '@reservoir0x/reservoir-sdk' -import { useContext, useEffect, useState } from 'react' +import { Head } from 'components/Head' +import Layout from 'components/Layout' import { Footer } from 'components/home/Footer' +import { Box, Button, Flex, Text } from 'components/primitives' +import { ChainContext } from 'context/ChainContextProvider' import { useMarketplaceChain, useMounted } from 'hooks' +import { GetServerSideProps, NextPage } from 'next' +import Link from 'next/link' +import { + ComponentPropsWithoutRef, + useContext, + useEffect, + useState, +} from 'react' import supportedChains, { DefaultChain } from 'utils/chains' -import { Head } from 'components/Head' -import { ChainContext } from 'context/ChainContextProvider' -import Img from 'components/primitives/Img' -import useTopSellingCollections from 'hooks/useTopSellingCollections' -import ReactMarkdown from 'react-markdown' -import { basicFetcher as fetcher } from 'utils/fetcher' -import { styled } from 'stitches.config' -import { useTheme } from 'next-themes' +import * as Tabs from '@radix-ui/react-tabs' +import { useCollections, useTrendingMints } from '@reservoir0x/reservoir-kit-ui' import ChainToggle from 'components/common/ChainToggle' -import optimizeImage from 'utils/optimizeImage' -import { MarkdownLink } from 'components/primitives/MarkdownLink' +import CollectionsTimeDropdown, { + CollectionsSortingOption, +} from 'components/common/CollectionsTimeDropdown' +import LoadingSpinner from 'components/common/LoadingSpinner' +import { MintTypeOption } from 'components/common/MintTypeSelector' +import MintsPeriodDropdown, { + MintsSortingOption, +} from 'components/common/MintsPeriodDropdown' +import { TabsContent, TabsList, TabsTrigger } from 'components/primitives/Tab' +import { CollectionRankingsTable } from 'components/rankings/CollectionRankingsTable' +import { MintRankingsTable } from 'components/rankings/MintRankingsTable' +import { useTheme } from 'next-themes' import { useRouter } from 'next/router' -import { FeaturedCards } from 'components/home/FeaturedCards' -import { useTrendingCollections } from '@reservoir0x/reservoir-kit-ui' +import { useMediaQuery } from 'react-responsive' +import { basicFetcher as fetcher } from 'utils/fetcher' -const StyledImage = styled('img', {}) +type TabValue = 'collections' | 'mints' const Home: NextPage = ({ ssr }) => { const router = useRouter() @@ -45,31 +50,80 @@ const Home: NextPage = ({ ssr }) => { } }, [nextTheme]) - const { chain } = useContext(ChainContext) + const isSSR = typeof window === 'undefined' + const isSmallDevice = useMediaQuery({ query: '(max-width: 800px)' }) - const { data: topSellingCollectionsData } = useTopSellingCollections( - { - period: '24h', - includeRecentSales: true, - limit: 9, - fillType: 'sale', - }, - { - revalidateOnMount: true, - refreshInterval: 300000, - fallbackData: ssr.topSellingCollections[marketplaceChain.id]?.collections - ? ssr.topSellingCollections[marketplaceChain.id] - : null, - }, - isMounted ? chain?.id : undefined - ) + const [tab, setTab] = useState('collections') + const [sortByTime, setSortByTime] = + useState('1DayVolume') + const [mintType, setMintType] = useState('any') + const [sortByPeriod, setSortByPeriod] = useState('24h') + + let mintsQuery: Parameters['0'] = { + limit: 50, + period: sortByPeriod, + type: mintType, + } + + let collectionQuery: Parameters['0'] = { + limit: 20, + sortBy: sortByTime, + includeMintStages: true, + } + + const { chain, switchCurrentChain } = useContext(ChainContext) - const { data: trendingCollectionsData } = useTrendingCollections({ - period: '24h', - limit: 4, + useEffect(() => { + if (router.query.chain) { + let chainIndex: number | undefined + for (let i = 0; i < supportedChains.length; i++) { + if (supportedChains[i].routePrefix == router.query.chain) { + chainIndex = supportedChains[i].id + } + } + if (chainIndex !== -1 && chainIndex) { + switchCurrentChain(chainIndex) + } + } + }, [router.query]) + + if (chain.collectionSetId) { + collectionQuery.collectionsSetId = chain.collectionSetId + } else if (chain.community) { + collectionQuery.community = chain.community + } + + const { + data: trendingCollections, + isFetchingPage, + isValidating: isCollectionsValidating, + } = useCollections(collectionQuery, { + fallbackData: [ssr.collection], }) - const topCollection = topSellingCollectionsData?.collections?.[0] + const { data: trendingMints, isValidating: isMintsValidating } = + useTrendingMints({ ...mintsQuery }, chain.id, { + fallbackData: [], + }) + + let collections = trendingCollections || [] + let mints = trendingMints || [] + + let volumeKey: ComponentPropsWithoutRef< + typeof CollectionRankingsTable + >['volumeKey'] = 'allTime' + + switch (sortByTime) { + case '1DayVolume': + volumeKey = '1day' + break + case '7DayVolume': + volumeKey = '7day' + break + case '30DayVolume': + volumeKey = '30day' + break + } return ( @@ -86,206 +140,156 @@ const Home: NextPage = ({ ssr }) => { }, }} > - - - - Trending Collections - - - - {topSellingCollectionsData?.collections && - topSellingCollectionsData.collections.length && - topSellingCollectionsData.collections - .slice(1, 9) - .map((collection) => { - return ( - - div > div> img:nth-child(1)': { - transform: 'scale(1.075)', - }, - }} - > - - - {collection?.banner?.length || - collection.recentSales?.[0]?.token?.image?.length ? ( - - ) : ( - - )} - {collection?.name - - - - {collection?.name} - - - - - - - - - - - FLOOR - - - - - - - 24H SALES - - - {collection.count?.toLocaleString()} - - - - - - - ) - })} + + + Featured + + + + Cards + + setTab(tab as TabValue)} + defaultValue="collections" + > + + + Trending + + {!isSmallDevice && ( + + {tab === 'collections' ? ( + { + setSortByTime(option) + }} + /> + ) : ( + + )} + + + )} + + + Collections + Mints + + {isSmallDevice && ( + + + { + setSortByTime(option) + }} + /> + + + + )} + + + + {isSSR || !isMounted ? null : ( + + )} + + + {(isFetchingPage || isCollectionsValidating) && ( + + + + )} + + + + + + {isSSR || !isMounted ? null : ( + + )} + + + {isMintsValidating && ( + + + + )} + + + - + From bd7bc93d34eac0028d506a0898a42e5ec72c7e9d Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 28 Nov 2023 15:47:29 -0600 Subject: [PATCH 03/16] feat: trending rankings table --- .../rankings/CollectionRankingsTableV2.tsx | 402 ++++++++++++++++++ 1 file changed, 402 insertions(+) create mode 100644 components/rankings/CollectionRankingsTableV2.tsx diff --git a/components/rankings/CollectionRankingsTableV2.tsx b/components/rankings/CollectionRankingsTableV2.tsx new file mode 100644 index 000000000..97585326a --- /dev/null +++ b/components/rankings/CollectionRankingsTableV2.tsx @@ -0,0 +1,402 @@ +import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { + useCollections, + useTrendingCollections, +} from '@reservoir0x/reservoir-kit-ui' +import { OpenSeaVerified } from 'components/common/OpenSeaVerified' +import { ActiveMintTooltip } from 'components/home/ActiveMintTooltip' +import { NAVBAR_HEIGHT } from 'components/navbar' +import { + Box, + Flex, + FormatCryptoCurrency, + HeaderRow, + TableCell, + TableRow, + Text, +} from 'components/primitives' +import Img from 'components/primitives/Img' +import { PercentChange } from 'components/primitives/PercentChange' +import { useMarketplaceChain } from 'hooks' +import Link from 'next/link' +import { ComponentPropsWithoutRef, FC, useMemo } from 'react' +import { useMediaQuery } from 'react-responsive' +import optimizeImage from 'utils/optimizeImage' + +type TrendingCollections = NonNullable< + ReturnType['data'] +> + +type Props = { + collections: TrendingCollections + loading?: boolean + volumeKey: keyof NonNullable +} +const gridColumns = { + gridTemplateColumns: '520px repeat(6, 0.5fr) 250px', + '@md': { + gridTemplateColumns: '420px 1fr 1fr 1fr', + }, + + '@lg': { + gridTemplateColumns: '360px repeat(6, 0.5fr) 250px', + }, + + '@xl': { + gridTemplateColumns: '520px repeat(6, 0.5fr) 250px', + }, +} + +export const CollectionRankingsTable: FC = ({ + collections, + loading, + volumeKey, +}) => { + const isSmallDevice = useMediaQuery({ maxWidth: 900 }) + if (!collections) return null + return ( + <> + {!loading && collections.length === 0 ? ( + + + + + No collections found + + ) : ( + + {isSmallDevice ? ( + + + Collection + + + Volume + + + ) : ( + + )} + + {collections.map((collection, i) => { + return ( + + ) + })} + + + )} + + ) +} + +type RankingsTableRowProps = { + collection: TrendingCollections[0] + rank: number + volumeKey: ComponentPropsWithoutRef< + typeof CollectionRankingsTable + >['volumeKey'] +} + +const RankingsTableRow: FC = ({ + collection, + rank, + volumeKey, +}) => { + const { routePrefix } = useMarketplaceChain() + const isSmallDevice = useMediaQuery({ maxWidth: 900 }) + + const collectionImage = useMemo(() => { + return optimizeImage(collection.image as string, 250) + }, [collection.image]) + + /** + * const mintData = collection?.mintStages?.find( + (stage) => stage.kind === 'public' + ) + */ + const mintData = {} as any + + // @ts-ignore + const openseaVerificationStatus = collection?.openseaVerificationStatus + + const mintPriceDecimal = mintData?.price?.amount?.decimal + const hasMintPriceDecimal = typeof mintPriceDecimal === 'number' + + if (isSmallDevice) { + return ( + + + + {rank} + + Collection Image + + + + {collection?.name} + + + {mintData && hasMintPriceDecimal ? : null} + + + + Floor + + + + + + + + {volumeKey !== 'allTime' && ( + + )} + + + + ) + } else { + return ( + + + + + + {rank} + + Collection Image + + + + {collection?.name} + + + {mintData && hasMintPriceDecimal ? : null} + + + + + + + + + + + + {/** + * + */} + + + + + + + + + + + + + + + + + + + {Number(collection?.tokenCount)?.toLocaleString()} + + + + + + {/** collection.sampleImages */} + {[]?.map((image, i) => { + if (image) { + return ( + + ) => { + e.currentTarget.style.visibility = 'hidden' + }} + /> + ) + } + return null + })} + + + + ) + } +} + +const headings = [ + 'Collection', + 'Floor Price', + 'Top Offer', + 'Volume', + '1D Change', + '7D Change', + 'Supply', + 'Sample Tokens', +] + +const TableHeading = () => ( + + {headings.map((heading, i) => ( + 3} + key={heading} + css={{ textAlign: i === headings.length - 1 ? 'right' : 'left' }} + > + + {heading} + + + ))} + +) From 2dc63d60fdb2a49f02ec1f3244f144ee53bb59cb Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 28 Nov 2023 15:56:00 -0600 Subject: [PATCH 04/16] feat: use new trending endpoint --- components/common/CollectionsTimeDropdown.tsx | 44 +++-- components/home/FeaturedCards.tsx | 186 +++++++----------- pages/[chain]/index.tsx | 115 ++++++----- 3 files changed, 167 insertions(+), 178 deletions(-) diff --git a/components/common/CollectionsTimeDropdown.tsx b/components/common/CollectionsTimeDropdown.tsx index 111a4478e..da3f574db 100644 --- a/components/common/CollectionsTimeDropdown.tsx +++ b/components/common/CollectionsTimeDropdown.tsx @@ -1,4 +1,7 @@ -import { useCollections } from '@reservoir0x/reservoir-kit-ui' +import { + useCollections, + useTrendingCollections, +} from '@reservoir0x/reservoir-kit-ui' import { Text, Button, Box } from '../primitives' import { DropdownMenuItem, @@ -10,14 +13,21 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faChevronDown } from '@fortawesome/free-solid-svg-icons' export type CollectionsSortingOption = NonNullable< - Exclude[0], false | undefined>['sortBy'] + Exclude< + Parameters[0], + false | undefined + >['period'] > const sortingOptions: CollectionsSortingOption[] = [ - '1DayVolume', - '7DayVolume', - '30DayVolume', - 'allTimeVolume', + '10m', + '1d', + '1h', + '30d', + '30m', + '5m', + '6h', + '7d', ] const nameForSortingOption = ( @@ -25,14 +35,22 @@ const nameForSortingOption = ( compact: boolean ) => { switch (option) { - case '1DayVolume': - return compact ? '24h' : '24 hours' - case '7DayVolume': - return compact ? '7d' : '7 days' - case '30DayVolume': + case '30d': return compact ? '30d' : '30 days' - case 'allTimeVolume': - return compact ? 'All' : 'All Time' + case '7d': + return compact ? '7d' : '7 days' + case '1d': + return compact ? '24h' : '24 hours' + case '6h': + return compact ? '6h' : '6 hours' + case '1h': + return compact ? '1h' : '1 hour' + case '30m': + return compact ? '30m' : '30 minutes' + case '10m': + return compact ? '10m' : '10 minutes' + case '5m': + return compact ? '5m' : '5 minutes' } } diff --git a/components/home/FeaturedCards.tsx b/components/home/FeaturedCards.tsx index 8f6d6ef7f..66e2ada29 100644 --- a/components/home/FeaturedCards.tsx +++ b/components/home/FeaturedCards.tsx @@ -1,16 +1,8 @@ import { useTrendingCollections } from '@reservoir0x/reservoir-kit-ui' -import { - Box, - Flex, - FormatCryptoCurrency, - MarkdownLink, - Text, -} from 'components/primitives' +import { Box, Flex, FormatCryptoCurrency, Text } from 'components/primitives' import Img from 'components/primitives/Img' import { useMarketplaceChain } from 'hooks' import Link from 'next/link' -import ReactMarkdown from 'react-markdown' -import optimizeImage from 'utils/optimizeImage' type TrendingCollections = ReturnType['data'] @@ -32,8 +24,11 @@ export const FeaturedCards = ({ return ( {collections.map((collection) => { @@ -41,40 +36,63 @@ export const FeaturedCards = ({ div > div> img:nth-child(1)': { + p: '16px', + '&:hover > div > div > Img > Img:nth-child(1)': { transform: 'scale(1.075)', }, }} > {collection?.name + {collection?.name @@ -87,68 +105,6 @@ export const FeaturedCards = ({ width: '100%', }} > - - {/** - * {collection?.banner?.length || - collection.recentSales?.[0]?.token?.image?.length ? ( - - ) : ( - - )} - */} - {collection?.name - - - - {collection?.name} - - - - - - - - FLOOR - - - + > + + {collection?.name} + + + + + Mint Price + + + - - - 24H SALES - - - {collection.count?.toLocaleString()} - - - + + + 6H SALES + + + {collection.count?.toLocaleString()} + + + + diff --git a/pages/[chain]/index.tsx b/pages/[chain]/index.tsx index edbbd1d5d..9ed33b120 100644 --- a/pages/[chain]/index.tsx +++ b/pages/[chain]/index.tsx @@ -16,7 +16,11 @@ import { import supportedChains, { DefaultChain } from 'utils/chains' import * as Tabs from '@radix-ui/react-tabs' -import { useCollections, useTrendingMints } from '@reservoir0x/reservoir-kit-ui' +import { + useCollections, + useTrendingCollections, + useTrendingMints, +} from '@reservoir0x/reservoir-kit-ui' import ChainToggle from 'components/common/ChainToggle' import CollectionsTimeDropdown, { CollectionsSortingOption, @@ -26,8 +30,9 @@ import { MintTypeOption } from 'components/common/MintTypeSelector' import MintsPeriodDropdown, { MintsSortingOption, } from 'components/common/MintsPeriodDropdown' +import { FeaturedCards } from 'components/home/FeaturedCards' import { TabsContent, TabsList, TabsTrigger } from 'components/primitives/Tab' -import { CollectionRankingsTable } from 'components/rankings/CollectionRankingsTable' +import { CollectionRankingsTable } from 'components/rankings/CollectionRankingsTableV2' import { MintRankingsTable } from 'components/rankings/MintRankingsTable' import { useTheme } from 'next-themes' import { useRouter } from 'next/router' @@ -54,23 +59,16 @@ const Home: NextPage = ({ ssr }) => { const isSmallDevice = useMediaQuery({ query: '(max-width: 800px)' }) const [tab, setTab] = useState('collections') - const [sortByTime, setSortByTime] = - useState('1DayVolume') + const [sortByTime, setSortByTime] = useState('1d') const [mintType, setMintType] = useState('any') const [sortByPeriod, setSortByPeriod] = useState('24h') let mintsQuery: Parameters['0'] = { - limit: 50, + limit: 20, period: sortByPeriod, type: mintType, } - let collectionQuery: Parameters['0'] = { - limit: 20, - sortBy: sortByTime, - includeMintStages: true, - } - const { chain, switchCurrentChain } = useContext(ChainContext) useEffect(() => { @@ -87,26 +85,44 @@ const Home: NextPage = ({ ssr }) => { } }, [router.query]) - if (chain.collectionSetId) { - collectionQuery.collectionsSetId = chain.collectionSetId - } else if (chain.community) { - collectionQuery.community = chain.community - } - const { data: trendingCollections, - isFetchingPage, - isValidating: isCollectionsValidating, - } = useCollections(collectionQuery, { - fallbackData: [ssr.collection], - }) + isValidating: isTrendingCollectionsValidating, + } = useTrendingCollections( + { + limit: 20, + sortBy: 'volume', + period: sortByTime, + }, + chain.id, + { + fallbackData: [ssr.collection], + } + ) - const { data: trendingMints, isValidating: isMintsValidating } = + const { + data: featuredCollections, + isValidating: isFeaturedCollectionsValidating, + } = useTrendingCollections( + { + limit: 20, + sortBy: 'sales', + period: '24h', + }, + chain.id, + { + fallbackData: [ssr.collection], + } + ) + + const { data: trendingMints, isValidating: isTrendingMintsValidating } = useTrendingMints({ ...mintsQuery }, chain.id, { fallbackData: [], }) - let collections = trendingCollections || [] + let collectionSetOne = trendingCollections || [] + let collectionSetTwo = featuredCollections || [] + let mints = trendingMints || [] let volumeKey: ComponentPropsWithoutRef< @@ -114,14 +130,14 @@ const Home: NextPage = ({ ssr }) => { >['volumeKey'] = 'allTime' switch (sortByTime) { - case '1DayVolume': - volumeKey = '1day' + case '30d': + volumeKey = '30day' break - case '7DayVolume': + case '7d': volumeKey = '7day' break - case '30DayVolume': - volumeKey = '30day' + case '1d': + volumeKey = '1day' break } @@ -158,21 +174,20 @@ const Home: NextPage = ({ ssr }) => { - Cards + + + setTab(tab as TabValue)} defaultValue="collections" > - + Trending @@ -181,10 +196,6 @@ const Home: NextPage = ({ ssr }) => { align="center" css={{ gap: '$4', - display: 'none', - '@bp800': { - display: 'flex', - }, }} > {tab === 'collections' ? ( @@ -205,7 +216,7 @@ const Home: NextPage = ({ ssr }) => { )} - + Collections Mints @@ -216,10 +227,6 @@ const Home: NextPage = ({ ssr }) => { css={{ gap: 24, mb: '$4', - '@bp800': { - alignItems: 'center', - flexDirection: 'row', - }, }} > @@ -243,18 +250,18 @@ const Home: NextPage = ({ ssr }) => { {isSSR || !isMounted ? null : ( )} - {(isFetchingPage || isCollectionsValidating) && ( + {isTrendingCollectionsValidating && ( @@ -271,16 +278,16 @@ const Home: NextPage = ({ ssr }) => { {isSSR || !isMounted ? null : ( )} - {isMintsValidating && ( + {isTrendingMintsValidating && ( From f11875e7fc8661f426ed15da64520fd210613c24 Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 28 Nov 2023 16:04:04 -0600 Subject: [PATCH 05/16] Revert "feat: use new trending endpoint" This reverts commit 2dc63d60fdb2a49f02ec1f3244f144ee53bb59cb. --- components/common/CollectionsTimeDropdown.tsx | 44 ++--- components/home/FeaturedCards.tsx | 186 +++++++++++------- pages/[chain]/index.tsx | 115 +++++------ 3 files changed, 178 insertions(+), 167 deletions(-) diff --git a/components/common/CollectionsTimeDropdown.tsx b/components/common/CollectionsTimeDropdown.tsx index da3f574db..111a4478e 100644 --- a/components/common/CollectionsTimeDropdown.tsx +++ b/components/common/CollectionsTimeDropdown.tsx @@ -1,7 +1,4 @@ -import { - useCollections, - useTrendingCollections, -} from '@reservoir0x/reservoir-kit-ui' +import { useCollections } from '@reservoir0x/reservoir-kit-ui' import { Text, Button, Box } from '../primitives' import { DropdownMenuItem, @@ -13,21 +10,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faChevronDown } from '@fortawesome/free-solid-svg-icons' export type CollectionsSortingOption = NonNullable< - Exclude< - Parameters[0], - false | undefined - >['period'] + Exclude[0], false | undefined>['sortBy'] > const sortingOptions: CollectionsSortingOption[] = [ - '10m', - '1d', - '1h', - '30d', - '30m', - '5m', - '6h', - '7d', + '1DayVolume', + '7DayVolume', + '30DayVolume', + 'allTimeVolume', ] const nameForSortingOption = ( @@ -35,22 +25,14 @@ const nameForSortingOption = ( compact: boolean ) => { switch (option) { - case '30d': - return compact ? '30d' : '30 days' - case '7d': - return compact ? '7d' : '7 days' - case '1d': + case '1DayVolume': return compact ? '24h' : '24 hours' - case '6h': - return compact ? '6h' : '6 hours' - case '1h': - return compact ? '1h' : '1 hour' - case '30m': - return compact ? '30m' : '30 minutes' - case '10m': - return compact ? '10m' : '10 minutes' - case '5m': - return compact ? '5m' : '5 minutes' + case '7DayVolume': + return compact ? '7d' : '7 days' + case '30DayVolume': + return compact ? '30d' : '30 days' + case 'allTimeVolume': + return compact ? 'All' : 'All Time' } } diff --git a/components/home/FeaturedCards.tsx b/components/home/FeaturedCards.tsx index 66e2ada29..8f6d6ef7f 100644 --- a/components/home/FeaturedCards.tsx +++ b/components/home/FeaturedCards.tsx @@ -1,8 +1,16 @@ import { useTrendingCollections } from '@reservoir0x/reservoir-kit-ui' -import { Box, Flex, FormatCryptoCurrency, Text } from 'components/primitives' +import { + Box, + Flex, + FormatCryptoCurrency, + MarkdownLink, + Text, +} from 'components/primitives' import Img from 'components/primitives/Img' import { useMarketplaceChain } from 'hooks' import Link from 'next/link' +import ReactMarkdown from 'react-markdown' +import optimizeImage from 'utils/optimizeImage' type TrendingCollections = ReturnType['data'] @@ -24,11 +32,8 @@ export const FeaturedCards = ({ return ( {collections.map((collection) => { @@ -36,63 +41,40 @@ export const FeaturedCards = ({ div > div > Img > Img:nth-child(1)': { + p: '$3', + '&:hover > div > div> img:nth-child(1)': { transform: 'scale(1.075)', }, }} > {collection?.name - {collection?.name @@ -105,6 +87,68 @@ export const FeaturedCards = ({ width: '100%', }} > + + {/** + * {collection?.banner?.length || + collection.recentSales?.[0]?.token?.image?.length ? ( + + ) : ( + + )} + */} + {collection?.name + + + + {collection?.name} + + + - - {collection?.name} - - - - - Mint Price - - - + > - - - 6H SALES - - - {collection.count?.toLocaleString()} - - - - + + + + FLOOR + + + + + + + 24H SALES + + + {collection.count?.toLocaleString()} + + + diff --git a/pages/[chain]/index.tsx b/pages/[chain]/index.tsx index 9ed33b120..edbbd1d5d 100644 --- a/pages/[chain]/index.tsx +++ b/pages/[chain]/index.tsx @@ -16,11 +16,7 @@ import { import supportedChains, { DefaultChain } from 'utils/chains' import * as Tabs from '@radix-ui/react-tabs' -import { - useCollections, - useTrendingCollections, - useTrendingMints, -} from '@reservoir0x/reservoir-kit-ui' +import { useCollections, useTrendingMints } from '@reservoir0x/reservoir-kit-ui' import ChainToggle from 'components/common/ChainToggle' import CollectionsTimeDropdown, { CollectionsSortingOption, @@ -30,9 +26,8 @@ import { MintTypeOption } from 'components/common/MintTypeSelector' import MintsPeriodDropdown, { MintsSortingOption, } from 'components/common/MintsPeriodDropdown' -import { FeaturedCards } from 'components/home/FeaturedCards' import { TabsContent, TabsList, TabsTrigger } from 'components/primitives/Tab' -import { CollectionRankingsTable } from 'components/rankings/CollectionRankingsTableV2' +import { CollectionRankingsTable } from 'components/rankings/CollectionRankingsTable' import { MintRankingsTable } from 'components/rankings/MintRankingsTable' import { useTheme } from 'next-themes' import { useRouter } from 'next/router' @@ -59,16 +54,23 @@ const Home: NextPage = ({ ssr }) => { const isSmallDevice = useMediaQuery({ query: '(max-width: 800px)' }) const [tab, setTab] = useState('collections') - const [sortByTime, setSortByTime] = useState('1d') + const [sortByTime, setSortByTime] = + useState('1DayVolume') const [mintType, setMintType] = useState('any') const [sortByPeriod, setSortByPeriod] = useState('24h') let mintsQuery: Parameters['0'] = { - limit: 20, + limit: 50, period: sortByPeriod, type: mintType, } + let collectionQuery: Parameters['0'] = { + limit: 20, + sortBy: sortByTime, + includeMintStages: true, + } + const { chain, switchCurrentChain } = useContext(ChainContext) useEffect(() => { @@ -85,44 +87,26 @@ const Home: NextPage = ({ ssr }) => { } }, [router.query]) - const { - data: trendingCollections, - isValidating: isTrendingCollectionsValidating, - } = useTrendingCollections( - { - limit: 20, - sortBy: 'volume', - period: sortByTime, - }, - chain.id, - { - fallbackData: [ssr.collection], - } - ) + if (chain.collectionSetId) { + collectionQuery.collectionsSetId = chain.collectionSetId + } else if (chain.community) { + collectionQuery.community = chain.community + } const { - data: featuredCollections, - isValidating: isFeaturedCollectionsValidating, - } = useTrendingCollections( - { - limit: 20, - sortBy: 'sales', - period: '24h', - }, - chain.id, - { - fallbackData: [ssr.collection], - } - ) + data: trendingCollections, + isFetchingPage, + isValidating: isCollectionsValidating, + } = useCollections(collectionQuery, { + fallbackData: [ssr.collection], + }) - const { data: trendingMints, isValidating: isTrendingMintsValidating } = + const { data: trendingMints, isValidating: isMintsValidating } = useTrendingMints({ ...mintsQuery }, chain.id, { fallbackData: [], }) - let collectionSetOne = trendingCollections || [] - let collectionSetTwo = featuredCollections || [] - + let collections = trendingCollections || [] let mints = trendingMints || [] let volumeKey: ComponentPropsWithoutRef< @@ -130,14 +114,14 @@ const Home: NextPage = ({ ssr }) => { >['volumeKey'] = 'allTime' switch (sortByTime) { - case '30d': - volumeKey = '30day' + case '1DayVolume': + volumeKey = '1day' break - case '7d': + case '7DayVolume': volumeKey = '7day' break - case '1d': - volumeKey = '1day' + case '30DayVolume': + volumeKey = '30day' break } @@ -174,20 +158,21 @@ const Home: NextPage = ({ ssr }) => { - - - + Cards setTab(tab as TabValue)} defaultValue="collections" > - + Trending @@ -196,6 +181,10 @@ const Home: NextPage = ({ ssr }) => { align="center" css={{ gap: '$4', + display: 'none', + '@bp800': { + display: 'flex', + }, }} > {tab === 'collections' ? ( @@ -216,7 +205,7 @@ const Home: NextPage = ({ ssr }) => { )} - + Collections Mints @@ -227,6 +216,10 @@ const Home: NextPage = ({ ssr }) => { css={{ gap: 24, mb: '$4', + '@bp800': { + alignItems: 'center', + flexDirection: 'row', + }, }} > @@ -250,18 +243,18 @@ const Home: NextPage = ({ ssr }) => { {isSSR || !isMounted ? null : ( )} - {isTrendingCollectionsValidating && ( + {(isFetchingPage || isCollectionsValidating) && ( @@ -278,16 +271,16 @@ const Home: NextPage = ({ ssr }) => { {isSSR || !isMounted ? null : ( )} - {isTrendingMintsValidating && ( + {isMintsValidating && ( From 9de786fb3cebfd5a6506019d457297e26b166208 Mon Sep 17 00:00:00 2001 From: armando Date: Wed, 29 Nov 2023 11:47:53 -0600 Subject: [PATCH 06/16] Merge branch 'armando/grwth-3585-trending-mint-detail-page' into armando/grwth-3613-featured-section From c313c294db85579abb3d9f04c9477ff48180862b Mon Sep 17 00:00:00 2001 From: armando Date: Wed, 29 Nov 2023 11:48:31 -0600 Subject: [PATCH 07/16] Revert "Revert "feat: use new trending endpoint"" This reverts commit f11875e7fc8661f426ed15da64520fd210613c24. --- components/common/CollectionsTimeDropdown.tsx | 44 +++-- components/home/FeaturedCards.tsx | 186 +++++++----------- pages/[chain]/index.tsx | 115 ++++++----- 3 files changed, 167 insertions(+), 178 deletions(-) diff --git a/components/common/CollectionsTimeDropdown.tsx b/components/common/CollectionsTimeDropdown.tsx index 111a4478e..da3f574db 100644 --- a/components/common/CollectionsTimeDropdown.tsx +++ b/components/common/CollectionsTimeDropdown.tsx @@ -1,4 +1,7 @@ -import { useCollections } from '@reservoir0x/reservoir-kit-ui' +import { + useCollections, + useTrendingCollections, +} from '@reservoir0x/reservoir-kit-ui' import { Text, Button, Box } from '../primitives' import { DropdownMenuItem, @@ -10,14 +13,21 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faChevronDown } from '@fortawesome/free-solid-svg-icons' export type CollectionsSortingOption = NonNullable< - Exclude[0], false | undefined>['sortBy'] + Exclude< + Parameters[0], + false | undefined + >['period'] > const sortingOptions: CollectionsSortingOption[] = [ - '1DayVolume', - '7DayVolume', - '30DayVolume', - 'allTimeVolume', + '10m', + '1d', + '1h', + '30d', + '30m', + '5m', + '6h', + '7d', ] const nameForSortingOption = ( @@ -25,14 +35,22 @@ const nameForSortingOption = ( compact: boolean ) => { switch (option) { - case '1DayVolume': - return compact ? '24h' : '24 hours' - case '7DayVolume': - return compact ? '7d' : '7 days' - case '30DayVolume': + case '30d': return compact ? '30d' : '30 days' - case 'allTimeVolume': - return compact ? 'All' : 'All Time' + case '7d': + return compact ? '7d' : '7 days' + case '1d': + return compact ? '24h' : '24 hours' + case '6h': + return compact ? '6h' : '6 hours' + case '1h': + return compact ? '1h' : '1 hour' + case '30m': + return compact ? '30m' : '30 minutes' + case '10m': + return compact ? '10m' : '10 minutes' + case '5m': + return compact ? '5m' : '5 minutes' } } diff --git a/components/home/FeaturedCards.tsx b/components/home/FeaturedCards.tsx index 8f6d6ef7f..66e2ada29 100644 --- a/components/home/FeaturedCards.tsx +++ b/components/home/FeaturedCards.tsx @@ -1,16 +1,8 @@ import { useTrendingCollections } from '@reservoir0x/reservoir-kit-ui' -import { - Box, - Flex, - FormatCryptoCurrency, - MarkdownLink, - Text, -} from 'components/primitives' +import { Box, Flex, FormatCryptoCurrency, Text } from 'components/primitives' import Img from 'components/primitives/Img' import { useMarketplaceChain } from 'hooks' import Link from 'next/link' -import ReactMarkdown from 'react-markdown' -import optimizeImage from 'utils/optimizeImage' type TrendingCollections = ReturnType['data'] @@ -32,8 +24,11 @@ export const FeaturedCards = ({ return ( {collections.map((collection) => { @@ -41,40 +36,63 @@ export const FeaturedCards = ({ div > div> img:nth-child(1)': { + p: '16px', + '&:hover > div > div > Img > Img:nth-child(1)': { transform: 'scale(1.075)', }, }} > {collection?.name + {collection?.name @@ -87,68 +105,6 @@ export const FeaturedCards = ({ width: '100%', }} > - - {/** - * {collection?.banner?.length || - collection.recentSales?.[0]?.token?.image?.length ? ( - - ) : ( - - )} - */} - {collection?.name - - - - {collection?.name} - - - - - - - - FLOOR - - - + > + + {collection?.name} + + + + + Mint Price + + + - - - 24H SALES - - - {collection.count?.toLocaleString()} - - - + + + 6H SALES + + + {collection.count?.toLocaleString()} + + + + diff --git a/pages/[chain]/index.tsx b/pages/[chain]/index.tsx index edbbd1d5d..9ed33b120 100644 --- a/pages/[chain]/index.tsx +++ b/pages/[chain]/index.tsx @@ -16,7 +16,11 @@ import { import supportedChains, { DefaultChain } from 'utils/chains' import * as Tabs from '@radix-ui/react-tabs' -import { useCollections, useTrendingMints } from '@reservoir0x/reservoir-kit-ui' +import { + useCollections, + useTrendingCollections, + useTrendingMints, +} from '@reservoir0x/reservoir-kit-ui' import ChainToggle from 'components/common/ChainToggle' import CollectionsTimeDropdown, { CollectionsSortingOption, @@ -26,8 +30,9 @@ import { MintTypeOption } from 'components/common/MintTypeSelector' import MintsPeriodDropdown, { MintsSortingOption, } from 'components/common/MintsPeriodDropdown' +import { FeaturedCards } from 'components/home/FeaturedCards' import { TabsContent, TabsList, TabsTrigger } from 'components/primitives/Tab' -import { CollectionRankingsTable } from 'components/rankings/CollectionRankingsTable' +import { CollectionRankingsTable } from 'components/rankings/CollectionRankingsTableV2' import { MintRankingsTable } from 'components/rankings/MintRankingsTable' import { useTheme } from 'next-themes' import { useRouter } from 'next/router' @@ -54,23 +59,16 @@ const Home: NextPage = ({ ssr }) => { const isSmallDevice = useMediaQuery({ query: '(max-width: 800px)' }) const [tab, setTab] = useState('collections') - const [sortByTime, setSortByTime] = - useState('1DayVolume') + const [sortByTime, setSortByTime] = useState('1d') const [mintType, setMintType] = useState('any') const [sortByPeriod, setSortByPeriod] = useState('24h') let mintsQuery: Parameters['0'] = { - limit: 50, + limit: 20, period: sortByPeriod, type: mintType, } - let collectionQuery: Parameters['0'] = { - limit: 20, - sortBy: sortByTime, - includeMintStages: true, - } - const { chain, switchCurrentChain } = useContext(ChainContext) useEffect(() => { @@ -87,26 +85,44 @@ const Home: NextPage = ({ ssr }) => { } }, [router.query]) - if (chain.collectionSetId) { - collectionQuery.collectionsSetId = chain.collectionSetId - } else if (chain.community) { - collectionQuery.community = chain.community - } - const { data: trendingCollections, - isFetchingPage, - isValidating: isCollectionsValidating, - } = useCollections(collectionQuery, { - fallbackData: [ssr.collection], - }) + isValidating: isTrendingCollectionsValidating, + } = useTrendingCollections( + { + limit: 20, + sortBy: 'volume', + period: sortByTime, + }, + chain.id, + { + fallbackData: [ssr.collection], + } + ) - const { data: trendingMints, isValidating: isMintsValidating } = + const { + data: featuredCollections, + isValidating: isFeaturedCollectionsValidating, + } = useTrendingCollections( + { + limit: 20, + sortBy: 'sales', + period: '24h', + }, + chain.id, + { + fallbackData: [ssr.collection], + } + ) + + const { data: trendingMints, isValidating: isTrendingMintsValidating } = useTrendingMints({ ...mintsQuery }, chain.id, { fallbackData: [], }) - let collections = trendingCollections || [] + let collectionSetOne = trendingCollections || [] + let collectionSetTwo = featuredCollections || [] + let mints = trendingMints || [] let volumeKey: ComponentPropsWithoutRef< @@ -114,14 +130,14 @@ const Home: NextPage = ({ ssr }) => { >['volumeKey'] = 'allTime' switch (sortByTime) { - case '1DayVolume': - volumeKey = '1day' + case '30d': + volumeKey = '30day' break - case '7DayVolume': + case '7d': volumeKey = '7day' break - case '30DayVolume': - volumeKey = '30day' + case '1d': + volumeKey = '1day' break } @@ -158,21 +174,20 @@ const Home: NextPage = ({ ssr }) => { - Cards + + + setTab(tab as TabValue)} defaultValue="collections" > - + Trending @@ -181,10 +196,6 @@ const Home: NextPage = ({ ssr }) => { align="center" css={{ gap: '$4', - display: 'none', - '@bp800': { - display: 'flex', - }, }} > {tab === 'collections' ? ( @@ -205,7 +216,7 @@ const Home: NextPage = ({ ssr }) => { )} - + Collections Mints @@ -216,10 +227,6 @@ const Home: NextPage = ({ ssr }) => { css={{ gap: 24, mb: '$4', - '@bp800': { - alignItems: 'center', - flexDirection: 'row', - }, }} > @@ -243,18 +250,18 @@ const Home: NextPage = ({ ssr }) => { {isSSR || !isMounted ? null : ( )} - {(isFetchingPage || isCollectionsValidating) && ( + {isTrendingCollectionsValidating && ( @@ -271,16 +278,16 @@ const Home: NextPage = ({ ssr }) => { {isSSR || !isMounted ? null : ( )} - {isMintsValidating && ( + {isTrendingMintsValidating && ( From 4ef0e90d39a0000e55e11ca2c917247cc8c6eb43 Mon Sep 17 00:00:00 2001 From: armando Date: Wed, 29 Nov 2023 12:06:14 -0600 Subject: [PATCH 08/16] feat: image fallbacks --- components/home/FeaturedCards.tsx | 38 +++++++++++++++---------------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/components/home/FeaturedCards.tsx b/components/home/FeaturedCards.tsx index 66e2ada29..f52acd543 100644 --- a/components/home/FeaturedCards.tsx +++ b/components/home/FeaturedCards.tsx @@ -17,9 +17,7 @@ export const FeaturedCards = ({ const isMinting = false - if (!collections) { - return Empty State - } + if (!collections) return <> return ( {collections.map((collection) => { + const bannerImage = + collection?.banner || + collection?.image || + // @ts-ignore + collection.sampleImages?.[0] + + const collectionImage = + collection?.image || + collection?.banner || + // @ts-ignore + collection.sampleImages?.[0] + return ( div > div > Img > Img:nth-child(1)': { - transform: 'scale(1.075)', - }, }} > {collection?.name {collection?.name From 637b279233ccdb499df2c0443464249553b67bbf Mon Sep 17 00:00:00 2001 From: armando Date: Wed, 29 Nov 2023 12:22:25 -0600 Subject: [PATCH 09/16] feat: Empty and featured loading state --- components/home/FeaturedCards.tsx | 298 ++++++++++++++++-------------- pages/[chain]/index.tsx | 5 + 2 files changed, 163 insertions(+), 140 deletions(-) diff --git a/components/home/FeaturedCards.tsx b/components/home/FeaturedCards.tsx index f52acd543..2bda18171 100644 --- a/components/home/FeaturedCards.tsx +++ b/components/home/FeaturedCards.tsx @@ -1,3 +1,5 @@ +import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { useTrendingCollections } from '@reservoir0x/reservoir-kit-ui' import { Box, Flex, FormatCryptoCurrency, Text } from 'components/primitives' import Img from 'components/primitives/Img' @@ -8,165 +10,181 @@ type TrendingCollections = ReturnType['data'] type FeaturedCardsProps = { collections: TrendingCollections + loading?: boolean } -export const FeaturedCards = ({ +export const FeaturedCards: React.FC = ({ collections, -}: FeaturedCardsProps): JSX.Element => { + loading, +}) => { const marketplaceChain = useMarketplaceChain() - const isMinting = false - - if (!collections) return <> + if (!collections) return null return ( - - {collections.map((collection) => { - const bannerImage = - collection?.banner || - collection?.image || - // @ts-ignore - collection.sampleImages?.[0] + <> + {!loading && collections.length === 0 ? ( + + + + + No collections found + + ) : ( + + {collections.map((collection) => { + const bannerImage = + collection?.banner || + collection?.image || + // @ts-ignore + collection.sampleImages?.[0] - const collectionImage = - collection?.image || - collection?.banner || - // @ts-ignore - collection.sampleImages?.[0] + const collectionImage = + collection?.image || + collection?.banner || + // @ts-ignore + collection.sampleImages?.[0] - return ( - - - - {collection?.name - {collection.name - - - - - {collection?.name} - - - + + {collection.name + {collection.name + + + - Mint Price + {collection?.name} - - + + + + FLOOR + + + - - - 6H SALES - - - {collection.count?.toLocaleString()} - + + + 6H SALES + + + {collection.count?.toLocaleString()} + + + - - - - - ) - })} - + + + ) + })} + + )} + ) } diff --git a/pages/[chain]/index.tsx b/pages/[chain]/index.tsx index 9ed33b120..29d2932de 100644 --- a/pages/[chain]/index.tsx +++ b/pages/[chain]/index.tsx @@ -180,6 +180,11 @@ const Home: NextPage = ({ ssr }) => { }} > + {isFeaturedCollectionsValidating && ( + + + + )} From e918483790f7fd591067b3dc7f7dd8b07b10463d Mon Sep 17 00:00:00 2001 From: armando Date: Wed, 29 Nov 2023 13:36:21 -0600 Subject: [PATCH 10/16] wip: offsetting --- .../rankings/CollectionRankingsTable.tsx | 48 ++- .../rankings/CollectionRankingsTableV2.tsx | 402 ------------------ pages/[chain]/collections/trending/index.tsx | 86 ++-- pages/[chain]/index.tsx | 3 +- 4 files changed, 74 insertions(+), 465 deletions(-) delete mode 100644 components/rankings/CollectionRankingsTableV2.tsx diff --git a/components/rankings/CollectionRankingsTable.tsx b/components/rankings/CollectionRankingsTable.tsx index fd0c99326..db9071747 100644 --- a/components/rankings/CollectionRankingsTable.tsx +++ b/components/rankings/CollectionRankingsTable.tsx @@ -1,6 +1,6 @@ import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { useCollections } from '@reservoir0x/reservoir-kit-ui' +import { useTrendingCollections } from '@reservoir0x/reservoir-kit-ui' import { OpenSeaVerified } from 'components/common/OpenSeaVerified' import { ActiveMintTooltip } from 'components/home/ActiveMintTooltip' import { NAVBAR_HEIGHT } from 'components/navbar' @@ -21,12 +21,16 @@ import { ComponentPropsWithoutRef, FC, useMemo } from 'react' import { useMediaQuery } from 'react-responsive' import optimizeImage from 'utils/optimizeImage' +type TrendingCollections = NonNullable< + ReturnType['data'] +> + type Props = { - collections: ReturnType['data'] + collections: TrendingCollections loading?: boolean - volumeKey: '1day' | '7day' | '30day' | 'allTime' + offset?: number + volumeKey: keyof NonNullable } - const gridColumns = { gridTemplateColumns: '520px repeat(6, 0.5fr) 250px', '@md': { @@ -45,10 +49,12 @@ const gridColumns = { export const CollectionRankingsTable: FC = ({ collections, loading, + offset, volumeKey, }) => { const isSmallDevice = useMediaQuery({ maxWidth: 900 }) + if (!collections) return null return ( <> {!loading && collections.length === 0 ? ( @@ -80,7 +86,8 @@ export const CollectionRankingsTable: FC = ({ )} - {collections.map((collection, i) => { + {collections.splice(0, offset).map((collection, i) => { + console.log(i) return ( = ({ } type RankingsTableRowProps = { - collection: ReturnType['data'][0] + collection: TrendingCollections[0] rank: number volumeKey: ComponentPropsWithoutRef< typeof CollectionRankingsTable @@ -117,9 +124,15 @@ const RankingsTableRow: FC = ({ return optimizeImage(collection.image as string, 250) }, [collection.image]) - const mintData = collection?.mintStages?.find( + /** + * const mintData = collection?.mintStages?.find( (stage) => stage.kind === 'public' ) + */ + const mintData = {} as any + + // @ts-ignore + const openseaVerificationStatus = collection?.openseaVerificationStatus const mintPriceDecimal = mintData?.price?.amount?.decimal const hasMintPriceDecimal = typeof mintPriceDecimal === 'number' @@ -155,9 +168,7 @@ const RankingsTableRow: FC = ({ {collection?.name} {mintData && hasMintPriceDecimal ? : null} @@ -178,14 +189,14 @@ const RankingsTableRow: FC = ({ {volumeKey !== 'allTime' && ( )} @@ -245,9 +256,7 @@ const RankingsTableRow: FC = ({ {collection?.name} {mintData && hasMintPriceDecimal ? : null} @@ -272,12 +281,14 @@ const RankingsTableRow: FC = ({ - + */} @@ -288,7 +299,7 @@ const RankingsTableRow: FC = ({ css={{ height: '100%' }} > @@ -323,7 +334,8 @@ const RankingsTableRow: FC = ({ }} justify={'end'} > - {collection?.sampleImages?.map((image, i) => { + {/** collection.sampleImages */} + {[]?.map((image, i) => { if (image) { return ( ['data'] -> - -type Props = { - collections: TrendingCollections - loading?: boolean - volumeKey: keyof NonNullable -} -const gridColumns = { - gridTemplateColumns: '520px repeat(6, 0.5fr) 250px', - '@md': { - gridTemplateColumns: '420px 1fr 1fr 1fr', - }, - - '@lg': { - gridTemplateColumns: '360px repeat(6, 0.5fr) 250px', - }, - - '@xl': { - gridTemplateColumns: '520px repeat(6, 0.5fr) 250px', - }, -} - -export const CollectionRankingsTable: FC = ({ - collections, - loading, - volumeKey, -}) => { - const isSmallDevice = useMediaQuery({ maxWidth: 900 }) - if (!collections) return null - return ( - <> - {!loading && collections.length === 0 ? ( - - - - - No collections found - - ) : ( - - {isSmallDevice ? ( - - - Collection - - - Volume - - - ) : ( - - )} - - {collections.map((collection, i) => { - return ( - - ) - })} - - - )} - - ) -} - -type RankingsTableRowProps = { - collection: TrendingCollections[0] - rank: number - volumeKey: ComponentPropsWithoutRef< - typeof CollectionRankingsTable - >['volumeKey'] -} - -const RankingsTableRow: FC = ({ - collection, - rank, - volumeKey, -}) => { - const { routePrefix } = useMarketplaceChain() - const isSmallDevice = useMediaQuery({ maxWidth: 900 }) - - const collectionImage = useMemo(() => { - return optimizeImage(collection.image as string, 250) - }, [collection.image]) - - /** - * const mintData = collection?.mintStages?.find( - (stage) => stage.kind === 'public' - ) - */ - const mintData = {} as any - - // @ts-ignore - const openseaVerificationStatus = collection?.openseaVerificationStatus - - const mintPriceDecimal = mintData?.price?.amount?.decimal - const hasMintPriceDecimal = typeof mintPriceDecimal === 'number' - - if (isSmallDevice) { - return ( - - - - {rank} - - Collection Image - - - - {collection?.name} - - - {mintData && hasMintPriceDecimal ? : null} - - - - Floor - - - - - - - - {volumeKey !== 'allTime' && ( - - )} - - - - ) - } else { - return ( - - - - - - {rank} - - Collection Image - - - - {collection?.name} - - - {mintData && hasMintPriceDecimal ? : null} - - - - - - - - - - - - {/** - * - */} - - - - - - - - - - - - - - - - - - - {Number(collection?.tokenCount)?.toLocaleString()} - - - - - - {/** collection.sampleImages */} - {[]?.map((image, i) => { - if (image) { - return ( - - ) => { - e.currentTarget.style.visibility = 'hidden' - }} - /> - ) - } - return null - })} - - - - ) - } -} - -const headings = [ - 'Collection', - 'Floor Price', - 'Top Offer', - 'Volume', - '1D Change', - '7D Change', - 'Supply', - 'Sample Tokens', -] - -const TableHeading = () => ( - - {headings.map((heading, i) => ( - 3} - key={heading} - css={{ textAlign: i === headings.length - 1 ? 'right' : 'left' }} - > - - {heading} - - - ))} - -) diff --git a/pages/[chain]/collections/trending/index.tsx b/pages/[chain]/collections/trending/index.tsx index df9cad938..a85087553 100644 --- a/pages/[chain]/collections/trending/index.tsx +++ b/pages/[chain]/collections/trending/index.tsx @@ -1,6 +1,18 @@ -import { GetServerSideProps, InferGetServerSidePropsType, NextPage } from 'next' -import { Text, Flex, Box } from 'components/primitives' +import { useTrendingCollections } from '@reservoir0x/reservoir-kit-ui' +import { paths } from '@reservoir0x/reservoir-sdk' +import { Head } from 'components/Head' import Layout from 'components/Layout' +import ChainToggle from 'components/common/ChainToggle' +import CollectionsTimeDropdown, { + CollectionsSortingOption, +} from 'components/common/CollectionsTimeDropdown' +import LoadingSpinner from 'components/common/LoadingSpinner' +import { Box, Flex, Text } from 'components/primitives' +import { CollectionRankingsTable } from 'components/rankings/CollectionRankingsTable' +import { ChainContext } from 'context/ChainContextProvider' +import { useMounted } from 'hooks' +import { GetServerSideProps, InferGetServerSidePropsType, NextPage } from 'next' +import { useRouter } from 'next/router' import { ComponentPropsWithoutRef, useContext, @@ -9,22 +21,10 @@ import { useState, } from 'react' import { useMediaQuery } from 'react-responsive' -import { useMounted } from 'hooks' -import { paths } from '@reservoir0x/reservoir-sdk' -import { useCollections } from '@reservoir0x/reservoir-kit-ui' +import { useIntersectionObserver } from 'usehooks-ts' +import supportedChains, { DefaultChain } from 'utils/chains' import fetcher from 'utils/fetcher' import { NORMALIZE_ROYALTIES } from '../../../_app' -import supportedChains, { DefaultChain } from 'utils/chains' -import { CollectionRankingsTable } from 'components/rankings/CollectionRankingsTable' -import { useIntersectionObserver } from 'usehooks-ts' -import LoadingSpinner from 'components/common/LoadingSpinner' -import CollectionsTimeDropdown, { - CollectionsSortingOption, -} from 'components/common/CollectionsTimeDropdown' -import ChainToggle from 'components/common/ChainToggle' -import { Head } from 'components/Head' -import { ChainContext } from 'context/ChainContextProvider' -import { useRouter } from 'next/router' type Props = InferGetServerSidePropsType @@ -33,13 +33,13 @@ const IndexPage: NextPage = ({ ssr }) => { const isSSR = typeof window === 'undefined' const isMounted = useMounted() const compactToggleNames = useMediaQuery({ query: '(max-width: 800px)' }) - const [sortByTime, setSortByTime] = - useState('1DayVolume') + const [sortByTime, setSortByTime] = useState('1d') + const [offset, setOffset] = useState(20) + const [isOffsetting, setIsOffsetting] = useState(false) - let collectionQuery: Parameters['0'] = { - limit: 20, - sortBy: sortByTime, - includeMintStages: true, + let collectionQuery: Parameters['0'] = { + limit: 1000, + period: sortByTime, } const { chain, switchCurrentChain } = useContext(ChainContext) @@ -58,47 +58,46 @@ const IndexPage: NextPage = ({ ssr }) => { } }, [router.query]) - if (chain.collectionSetId) { - collectionQuery.collectionsSetId = chain.collectionSetId - } else if (chain.community) { - collectionQuery.community = chain.community - } + const loadMoreRef = useRef(null) + const loadMoreObserver = useIntersectionObserver(loadMoreRef, {}) - const { data, fetchNextPage, isFetchingPage, isValidating } = useCollections( + const { data, isValidating } = useTrendingCollections( collectionQuery, + chain.id, { fallbackData: [ssr.collection], } ) - let collections = data || [] - - const loadMoreRef = useRef(null) - const loadMoreObserver = useIntersectionObserver(loadMoreRef, {}) - useEffect(() => { let isVisible = !!loadMoreObserver?.isIntersecting - if (isVisible) { - fetchNextPage() + if (isVisible && (!isValidating || !isOffsetting)) { + setIsOffsetting(true) + setTimeout(() => { + setOffset(offset + 20) + setIsOffsetting(false) + }, 500) } - }, [loadMoreObserver?.isIntersecting]) + }, [loadMoreObserver?.isIntersecting, isValidating]) let volumeKey: ComponentPropsWithoutRef< typeof CollectionRankingsTable >['volumeKey'] = 'allTime' switch (sortByTime) { - case '1DayVolume': - volumeKey = '1day' + case '30d': + volumeKey = '30day' break - case '7DayVolume': + case '7d': volumeKey = '7day' break - case '30DayVolume': - volumeKey = '30day' + case '1d': + volumeKey = '1day' break } + const collections = data || [] + return ( @@ -145,6 +144,7 @@ const IndexPage: NextPage = ({ ssr }) => { {isSSR || !isMounted ? null : ( = ({ ssr }) => { - {(isFetchingPage || isValidating) && ( + {(isValidating || isOffsetting) && ( diff --git a/pages/[chain]/index.tsx b/pages/[chain]/index.tsx index 29d2932de..ea848a88a 100644 --- a/pages/[chain]/index.tsx +++ b/pages/[chain]/index.tsx @@ -17,7 +17,6 @@ import supportedChains, { DefaultChain } from 'utils/chains' import * as Tabs from '@radix-ui/react-tabs' import { - useCollections, useTrendingCollections, useTrendingMints, } from '@reservoir0x/reservoir-kit-ui' @@ -32,7 +31,7 @@ import MintsPeriodDropdown, { } from 'components/common/MintsPeriodDropdown' import { FeaturedCards } from 'components/home/FeaturedCards' import { TabsContent, TabsList, TabsTrigger } from 'components/primitives/Tab' -import { CollectionRankingsTable } from 'components/rankings/CollectionRankingsTableV2' +import { CollectionRankingsTable } from 'components/rankings/CollectionRankingsTable' import { MintRankingsTable } from 'components/rankings/MintRankingsTable' import { useTheme } from 'next-themes' import { useRouter } from 'next/router' From a3a2755cbe595ac3f3e1fdab837a2c23059206b2 Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 5 Dec 2023 09:56:43 -0800 Subject: [PATCH 11/16] feat: change --- components/home/FeaturedCards.tsx | 8 ++--- .../rankings/CollectionRankingsTable.tsx | 36 ++++++------------- pages/[chain]/index.tsx | 11 ++---- 3 files changed, 16 insertions(+), 39 deletions(-) diff --git a/components/home/FeaturedCards.tsx b/components/home/FeaturedCards.tsx index 2bda18171..8b8216364 100644 --- a/components/home/FeaturedCards.tsx +++ b/components/home/FeaturedCards.tsx @@ -38,7 +38,7 @@ export const FeaturedCards: React.FC = ({ = ({ const bannerImage = collection?.banner || collection?.image || - // @ts-ignore collection.sampleImages?.[0] const collectionImage = collection?.image || collection?.banner || - // @ts-ignore collection.sampleImages?.[0] return ( @@ -85,7 +83,7 @@ export const FeaturedCards: React.FC = ({ }} > {collection.name = ({ }} /> {collection.name } const gridColumns = { @@ -49,11 +47,9 @@ const gridColumns = { export const CollectionRankingsTable: FC = ({ collections, loading, - offset, volumeKey, }) => { const isSmallDevice = useMediaQuery({ maxWidth: 900 }) - if (!collections) return null return ( <> @@ -86,8 +82,7 @@ export const CollectionRankingsTable: FC = ({ )} - {collections.splice(0, offset).map((collection, i) => { - console.log(i) + {collections.map((collection, i) => { return ( = ({ return optimizeImage(collection.image as string, 250) }, [collection.image]) - /** - * const mintData = collection?.mintStages?.find( - (stage) => stage.kind === 'public' - ) - */ - const mintData = {} as any - - // @ts-ignore - const openseaVerificationStatus = collection?.openseaVerificationStatus - - const mintPriceDecimal = mintData?.price?.amount?.decimal - const hasMintPriceDecimal = typeof mintPriceDecimal === 'number' - if (isSmallDevice) { return ( = ({ {collection?.name} - {mintData && hasMintPriceDecimal ? : null} @@ -256,9 +239,10 @@ const RankingsTableRow: FC = ({ {collection?.name} - {mintData && hasMintPriceDecimal ? : null} @@ -283,12 +267,13 @@ const RankingsTableRow: FC = ({ {/** * */} + 0 @@ -334,8 +319,7 @@ const RankingsTableRow: FC = ({ }} justify={'end'} > - {/** collection.sampleImages */} - {[]?.map((image, i) => { + {collection?.sampleImages?.map((image, i) => { if (image) { return ( = ({ ssr }) => { fallbackData: [], }) - let collectionSetOne = trendingCollections || [] - let collectionSetTwo = featuredCollections || [] - - let mints = trendingMints || [] - let volumeKey: ComponentPropsWithoutRef< typeof CollectionRankingsTable >['volumeKey'] = 'allTime' @@ -254,7 +249,7 @@ const Home: NextPage = ({ ssr }) => { {isSSR || !isMounted ? null : ( @@ -281,7 +276,7 @@ const Home: NextPage = ({ ssr }) => { {isSSR || !isMounted ? null : ( )} @@ -329,7 +324,7 @@ export const getServerSideProps: GetServerSideProps<{ const topSellingCollections: ChainTopSellingCollections = {} try { const response = await fetcher( - `${chain.reservoirBaseUrl}/collections/top-selling/v2?period=24h&includeRecentSales=true&limit=9&fillType=sale`, + `${chain.reservoirBaseUrl}/collections/trending/v1?period=24h&includeRecentSales=true&limit=9&fillType=sale`, { headers: { 'x-api-key': process.env.RESERVOIR_API_KEY || '', From ebdb4dde8e11763aa0b097b691efa7a0d7eae572 Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 5 Dec 2023 10:15:33 -0800 Subject: [PATCH 12/16] feat: fix ssr --- pages/[chain]/index.tsx | 37 +++++++++++++++++++++++++++---------- 1 file changed, 27 insertions(+), 10 deletions(-) diff --git a/pages/[chain]/index.tsx b/pages/[chain]/index.tsx index b8304edce..14e7dd4ec 100644 --- a/pages/[chain]/index.tsx +++ b/pages/[chain]/index.tsx @@ -59,13 +59,13 @@ const Home: NextPage = ({ ssr }) => { const [tab, setTab] = useState('collections') const [sortByTime, setSortByTime] = useState('1d') - const [mintType, setMintType] = useState('any') + const [sortByPeriod, setSortByPeriod] = useState('24h') let mintsQuery: Parameters['0'] = { limit: 20, period: sortByPeriod, - type: mintType, + type: 'any', } const { chain, switchCurrentChain } = useContext(ChainContext) @@ -306,14 +306,18 @@ const Home: NextPage = ({ ssr }) => { ) } -type TopSellingCollectionsSchema = - paths['/collections/top-selling/v1']['get']['responses']['200']['schema'] +type trendingCollectionsSchema = + paths['/collections/trending/v1']['get']['responses']['200']['schema'] +type trendingMintsSchema = + paths['/collections/trending-mints/v1']['get']['responses']['200']['schema'] -type ChainTopSellingCollections = Record +type ChainTrendingMints = Record +type ChainTrendingCollections = Record export const getServerSideProps: GetServerSideProps<{ ssr: { - topSellingCollections: ChainTopSellingCollections + trendingMints: ChainTrendingMints + trendingCollections: ChainTrendingCollections } }> = async ({ params, res }) => { const chainPrefix = params?.chain || '' @@ -321,9 +325,11 @@ export const getServerSideProps: GetServerSideProps<{ supportedChains.find((chain) => chain.routePrefix === chainPrefix) || DefaultChain - const topSellingCollections: ChainTopSellingCollections = {} + const trendingCollections: ChainTrendingCollections = {} + const trendingMints: ChainTrendingMints = {} + try { - const response = await fetcher( + const { data: trendingCollectionsData } = await fetcher( `${chain.reservoirBaseUrl}/collections/trending/v1?period=24h&includeRecentSales=true&limit=9&fillType=sale`, { headers: { @@ -332,7 +338,18 @@ export const getServerSideProps: GetServerSideProps<{ } ) - topSellingCollections[chain.id] = response.data + trendingCollections[chain.id] = trendingCollectionsData + + const { data: trendingMintsData } = await fetcher( + `${chain.reservoirBaseUrl}/collections/trending-mints/v1?period=24h&limit=25`, + { + headers: { + 'x-api-key': process.env.RESERVOIR_API_KEY || '', + }, + } + ) + + trendingCollections[chain.id] = trendingMintsData res.setHeader( 'Cache-Control', @@ -341,7 +358,7 @@ export const getServerSideProps: GetServerSideProps<{ } catch (e) {} return { - props: { ssr: { topSellingCollections } }, + props: { ssr: { trendingCollections, trendingMints } }, } } From 2ae5e688be4dfd4668ab383102a6e042c14c0908 Mon Sep 17 00:00:00 2001 From: armando Date: Wed, 6 Dec 2023 11:19:35 -0800 Subject: [PATCH 13/16] feat: remove offset --- components/home/FeaturedCards.tsx | 23 ++++++++++------- pages/[chain]/collections/trending/index.tsx | 26 +------------------- pages/[chain]/index.tsx | 3 ++- 3 files changed, 17 insertions(+), 35 deletions(-) diff --git a/components/home/FeaturedCards.tsx b/components/home/FeaturedCards.tsx index 8b8216364..0a0ed7b8e 100644 --- a/components/home/FeaturedCards.tsx +++ b/components/home/FeaturedCards.tsx @@ -5,6 +5,7 @@ import { Box, Flex, FormatCryptoCurrency, Text } from 'components/primitives' import Img from 'components/primitives/Img' import { useMarketplaceChain } from 'hooks' import Link from 'next/link' +import { ActiveMintTooltip } from './ActiveMintTooltip' type TrendingCollections = ReturnType['data'] @@ -136,14 +137,18 @@ export const FeaturedCards: React.FC = ({ }, }} > - - {collection?.name} - + + {collection?.name} + + = ({ as="p" css={{ mb: 2 }} > - FLOOR + Floor = ({ - 6H SALES + 6h Sales {collection.count?.toLocaleString()} diff --git a/pages/[chain]/collections/trending/index.tsx b/pages/[chain]/collections/trending/index.tsx index a85087553..ee7869483 100644 --- a/pages/[chain]/collections/trending/index.tsx +++ b/pages/[chain]/collections/trending/index.tsx @@ -21,7 +21,6 @@ import { useState, } from 'react' import { useMediaQuery } from 'react-responsive' -import { useIntersectionObserver } from 'usehooks-ts' import supportedChains, { DefaultChain } from 'utils/chains' import fetcher from 'utils/fetcher' import { NORMALIZE_ROYALTIES } from '../../../_app' @@ -34,8 +33,6 @@ const IndexPage: NextPage = ({ ssr }) => { const isMounted = useMounted() const compactToggleNames = useMediaQuery({ query: '(max-width: 800px)' }) const [sortByTime, setSortByTime] = useState('1d') - const [offset, setOffset] = useState(20) - const [isOffsetting, setIsOffsetting] = useState(false) let collectionQuery: Parameters['0'] = { limit: 1000, @@ -58,9 +55,6 @@ const IndexPage: NextPage = ({ ssr }) => { } }, [router.query]) - const loadMoreRef = useRef(null) - const loadMoreObserver = useIntersectionObserver(loadMoreRef, {}) - const { data, isValidating } = useTrendingCollections( collectionQuery, chain.id, @@ -69,17 +63,6 @@ const IndexPage: NextPage = ({ ssr }) => { } ) - useEffect(() => { - let isVisible = !!loadMoreObserver?.isIntersecting - if (isVisible && (!isValidating || !isOffsetting)) { - setIsOffsetting(true) - setTimeout(() => { - setOffset(offset + 20) - setIsOffsetting(false) - }, 500) - } - }, [loadMoreObserver?.isIntersecting, isValidating]) - let volumeKey: ComponentPropsWithoutRef< typeof CollectionRankingsTable >['volumeKey'] = 'allTime' @@ -144,20 +127,13 @@ const IndexPage: NextPage = ({ ssr }) => { {isSSR || !isMounted ? null : ( )} - - {(isValidating || isOffsetting) && ( + {isValidating && ( diff --git a/pages/[chain]/index.tsx b/pages/[chain]/index.tsx index 14e7dd4ec..f976e0c41 100644 --- a/pages/[chain]/index.tsx +++ b/pages/[chain]/index.tsx @@ -25,7 +25,6 @@ import CollectionsTimeDropdown, { CollectionsSortingOption, } from 'components/common/CollectionsTimeDropdown' import LoadingSpinner from 'components/common/LoadingSpinner' -import { MintTypeOption } from 'components/common/MintTypeSelector' import MintsPeriodDropdown, { MintsSortingOption, } from 'components/common/MintsPeriodDropdown' @@ -306,6 +305,8 @@ const Home: NextPage = ({ ssr }) => { ) } +let t: paths['/collections/top-selling/v2']['get']['responses']['200']['schema'] + type trendingCollectionsSchema = paths['/collections/trending/v1']['get']['responses']['200']['schema'] type trendingMintsSchema = From 93c61fe5036230ae8dccd63328b2d93c98822a63 Mon Sep 17 00:00:00 2001 From: armando Date: Wed, 6 Dec 2023 11:27:06 -0800 Subject: [PATCH 14/16] feat: mobile fixes --- .../rankings/CollectionRankingsTable.tsx | 27 +++---------------- 1 file changed, 4 insertions(+), 23 deletions(-) diff --git a/components/rankings/CollectionRankingsTable.tsx b/components/rankings/CollectionRankingsTable.tsx index 320a57954..edbf318a7 100644 --- a/components/rankings/CollectionRankingsTable.tsx +++ b/components/rankings/CollectionRankingsTable.tsx @@ -30,17 +30,17 @@ type Props = { volumeKey: keyof NonNullable } const gridColumns = { - gridTemplateColumns: '520px repeat(6, 0.5fr) 250px', + gridTemplateColumns: '520px repeat(5, 0.5fr) 250px', '@md': { gridTemplateColumns: '420px 1fr 1fr 1fr', }, '@lg': { - gridTemplateColumns: '360px repeat(6, 0.5fr) 250px', + gridTemplateColumns: '360px repeat(5, 0.5fr) 250px', }, '@xl': { - gridTemplateColumns: '520px repeat(6, 0.5fr) 250px', + gridTemplateColumns: '520px repeat(5, 0.5fr) 250px', }, } @@ -169,7 +169,6 @@ const RankingsTableRow: FC = ({ /> - = ({ /> - - - {/** - * - */} - 0 - - = ({ /> - - - {Number(collection?.tokenCount)?.toLocaleString()} - = ({ const headings = [ 'Collection', 'Floor Price', - 'Top Offer', 'Volume', '1D Change', '7D Change', @@ -374,7 +355,7 @@ const TableHeading = () => ( > {headings.map((heading, i) => ( 3} + desktopOnly={i > 2} key={heading} css={{ textAlign: i === headings.length - 1 ? 'right' : 'left' }} > From ccd6d4c5847cc2d57e587305ffb9f4fbf1964b14 Mon Sep 17 00:00:00 2001 From: armando Date: Wed, 6 Dec 2023 11:31:20 -0800 Subject: [PATCH 15/16] fix: loading bug --- components/rankings/CollectionRankingsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/rankings/CollectionRankingsTable.tsx b/components/rankings/CollectionRankingsTable.tsx index edbf318a7..ca6ba6b3f 100644 --- a/components/rankings/CollectionRankingsTable.tsx +++ b/components/rankings/CollectionRankingsTable.tsx @@ -50,7 +50,7 @@ export const CollectionRankingsTable: FC = ({ volumeKey, }) => { const isSmallDevice = useMediaQuery({ maxWidth: 900 }) - if (!collections) return null + return ( <> {!loading && collections.length === 0 ? ( From c1711e6d478b1d8d24712bcd078084ddbf88beeb Mon Sep 17 00:00:00 2001 From: armando Date: Thu, 7 Dec 2023 14:28:09 -0800 Subject: [PATCH 16/16] feat: address feedback --- components/home/ActiveMintTooltip.tsx | 19 ------------------- components/home/FeaturedCards.tsx | 1 - pages/[chain]/collections/trending/index.tsx | 1 - pages/[chain]/index.tsx | 2 -- 4 files changed, 23 deletions(-) delete mode 100644 components/home/ActiveMintTooltip.tsx diff --git a/components/home/ActiveMintTooltip.tsx b/components/home/ActiveMintTooltip.tsx deleted file mode 100644 index f5fa80197..000000000 --- a/components/home/ActiveMintTooltip.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { faSeedling } from '@fortawesome/free-solid-svg-icons' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { Flex, Tooltip, Text } from 'components/primitives' - -export const ActiveMintTooltip = () => { - return ( - - Actively minting - - } - > - - - - - ) -} diff --git a/components/home/FeaturedCards.tsx b/components/home/FeaturedCards.tsx index 0a0ed7b8e..f4b10a95d 100644 --- a/components/home/FeaturedCards.tsx +++ b/components/home/FeaturedCards.tsx @@ -5,7 +5,6 @@ import { Box, Flex, FormatCryptoCurrency, Text } from 'components/primitives' import Img from 'components/primitives/Img' import { useMarketplaceChain } from 'hooks' import Link from 'next/link' -import { ActiveMintTooltip } from './ActiveMintTooltip' type TrendingCollections = ReturnType['data'] diff --git a/pages/[chain]/collections/trending/index.tsx b/pages/[chain]/collections/trending/index.tsx index ee7869483..0d9c27f5d 100644 --- a/pages/[chain]/collections/trending/index.tsx +++ b/pages/[chain]/collections/trending/index.tsx @@ -17,7 +17,6 @@ import { ComponentPropsWithoutRef, useContext, useEffect, - useRef, useState, } from 'react' import { useMediaQuery } from 'react-responsive' diff --git a/pages/[chain]/index.tsx b/pages/[chain]/index.tsx index f976e0c41..2ce945f02 100644 --- a/pages/[chain]/index.tsx +++ b/pages/[chain]/index.tsx @@ -305,8 +305,6 @@ const Home: NextPage = ({ ssr }) => { ) } -let t: paths['/collections/top-selling/v2']['get']['responses']['200']['schema'] - type trendingCollectionsSchema = paths['/collections/trending/v1']['get']['responses']['200']['schema'] type trendingMintsSchema =