From 765886d625b3061dded157899734aba21845cb66 Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 14 Nov 2023 11:17:03 -0800 Subject: [PATCH 01/21] feat: Setup navigation --- components/navbar/HamburgerMenu.tsx | 19 ++++++++++++-- components/navbar/NavItem.tsx | 1 + components/navbar/index.tsx | 39 ++++++++++++++++------------- 3 files changed, 39 insertions(+), 20 deletions(-) diff --git a/components/navbar/HamburgerMenu.tsx b/components/navbar/HamburgerMenu.tsx index 05aa1b1ad..cce50def2 100644 --- a/components/navbar/HamburgerMenu.tsx +++ b/components/navbar/HamburgerMenu.tsx @@ -134,7 +134,7 @@ const HamburgerMenu = () => { Explore - + { pt: '24px', }} > - Trending + Trending Collections + + + Trending Mints + + + + { Explore - - Trending - - {/* + - - - NFTs - + + Trending - + - + - Trending Collections + Collections - + - Trending Mints + Mints - */} + {false && ( From 8ee92799412bf2813af144daf8c7d5c4a9af6ab6 Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 14 Nov 2023 11:23:49 -0800 Subject: [PATCH 02/21] feat: Update nav --- components/navbar/HamburgerMenu.tsx | 4 +- components/navbar/index.tsx | 12 +- pages/[chain]/mints/trending/index.tsx | 214 +++++++++++++++++++++++++ 3 files changed, 218 insertions(+), 12 deletions(-) create mode 100644 pages/[chain]/mints/trending/index.tsx diff --git a/components/navbar/HamburgerMenu.tsx b/components/navbar/HamburgerMenu.tsx index cce50def2..e7d5bda78 100644 --- a/components/navbar/HamburgerMenu.tsx +++ b/components/navbar/HamburgerMenu.tsx @@ -134,7 +134,7 @@ const HamburgerMenu = () => { Explore - + { - + { - Trending - - + { Collections - + + +const IndexPage: NextPage = ({ ssr }) => { + const router = useRouter() + const isSSR = typeof window === 'undefined' + const isMounted = useMounted() + const compactToggleNames = useMediaQuery({ query: '(max-width: 800px)' }) + const [sortByTime, setSortByTime] = + useState('1DayVolume') + + let collectionQuery: Parameters['0'] = { + limit: 20, + sortBy: sortByTime, + includeMintStages: true, + } + + const { chain, switchCurrentChain } = useContext(ChainContext) + + 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, fetchNextPage, isFetchingPage, isValidating } = useCollections( + collectionQuery, + { + fallbackData: [ssr.collection], + } + ) + + let collections = data || [] + + const loadMoreRef = useRef(null) + const loadMoreObserver = useIntersectionObserver(loadMoreRef, {}) + + useEffect(() => { + let isVisible = !!loadMoreObserver?.isIntersecting + if (isVisible) { + fetchNextPage() + } + }, [loadMoreObserver?.isIntersecting]) + + 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 ( + + + + + + + Trending Mints + + + { + setSortByTime(option) + }} + /> + + + + {isSSR || !isMounted ? null : ( + + )} + + + {(isFetchingPage || isValidating) && ( + + + + )} + + + ) +} + +type CollectionSchema = + paths['/collections/v7']['get']['responses']['200']['schema'] + +export const getServerSideProps: GetServerSideProps<{ + ssr: { + collection: CollectionSchema + } +}> = async ({ res, params }) => { + const collectionQuery: paths['/collections/v7']['get']['parameters']['query'] = + { + sortBy: '1DayVolume', + normalizeRoyalties: NORMALIZE_ROYALTIES, + limit: 20, + } + const chainPrefix = params?.chain || '' + const chain = + supportedChains.find((chain) => chain.routePrefix === chainPrefix) || + DefaultChain + const query = { ...collectionQuery } + if (chain.collectionSetId) { + query.collectionsSetId = chain.collectionSetId + } else if (chain.community) { + query.community = chain.community + } + const response = await fetcher( + `${chain.reservoirBaseUrl}/collections/v7`, + query, + { + headers: { + 'x-api-key': process.env.RESERVOIR_API_KEY || '', + }, + } + ) + + res.setHeader( + 'Cache-Control', + 'public, s-maxage=30, stale-while-revalidate=60' + ) + + return { + props: { ssr: { collection: response.data } }, + } +} + +export default IndexPage From 5af3ea8895bc15427f4040a2c21cc030642e4ec9 Mon Sep 17 00:00:00 2001 From: armando Date: Fri, 17 Nov 2023 11:45:25 -0800 Subject: [PATCH 03/21] feat: Trending mints page --- components/common/MintTypeSelector.tsx | 52 +++ components/common/MintsPeriodDropdown.tsx | 98 ++++++ components/rankings/MintRankingsTable.tsx | 390 ++++++++++++++++++++++ pages/[chain]/mints/trending/index.tsx | 123 +++---- 4 files changed, 590 insertions(+), 73 deletions(-) create mode 100644 components/common/MintTypeSelector.tsx create mode 100644 components/common/MintsPeriodDropdown.tsx create mode 100644 components/rankings/MintRankingsTable.tsx diff --git a/components/common/MintTypeSelector.tsx b/components/common/MintTypeSelector.tsx new file mode 100644 index 000000000..61a66559c --- /dev/null +++ b/components/common/MintTypeSelector.tsx @@ -0,0 +1,52 @@ +import { ToggleGroupRoot, ToggleGroupItem } from 'components/primitives' +import { FC } from 'react' + +export const MintTypeOptions = ['any', 'free', 'paid'] as const +export type MintTypeOption = (typeof MintTypeOptions)[number] + +type Props = { + option: MintTypeOption + onOptionSelected: (option: MintTypeOption) => void +} + +const MintTypeSelector: FC = ({ onOptionSelected, option }) => { + return ( + + selectedOption && onOptionSelected(selectedOption as MintTypeOption) + } + > + {MintTypeOptions.map((option) => ( + + {option} + + ))} + + ) +} + +export default MintTypeSelector diff --git a/components/common/MintsPeriodDropdown.tsx b/components/common/MintsPeriodDropdown.tsx new file mode 100644 index 000000000..b0a58b438 --- /dev/null +++ b/components/common/MintsPeriodDropdown.tsx @@ -0,0 +1,98 @@ +import { useTrendingMints } from '@reservoir0x/reservoir-kit-ui' +import { Text, Button, Box } from '../primitives' +import { + DropdownMenuItem, + DropdownMenuContent, +} from 'components/primitives/Dropdown' +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' +import { FC } from 'react' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { faChevronDown } from '@fortawesome/free-solid-svg-icons' + +export type MintsSortingOption = NonNullable< + Exclude[0], false | undefined>['period'] +> + +const sortingOptions: MintsSortingOption[] = [ + '24h', + '6h', + '2h', + '1h', + '30m', + '10m', + '5m', +] + +const nameForSortingOption = (option: MintsSortingOption, compact: boolean) => { + switch (option) { + case '24h': + return compact ? '24h' : '24 hours' + case '6h': + return compact ? '6h' : '6 hours' + case '2h': + return compact ? '2h' : '2 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' + } +} + +type Props = { + compact?: boolean + option: MintsSortingOption + onOptionSelected: (option: MintsSortingOption) => void +} + +const MintsPeriodDropdown: FC = ({ + compact = false, + option, + onOptionSelected, +}) => { + return ( + + + + + + {sortingOptions.map((optionItem) => ( + onOptionSelected(optionItem as MintsSortingOption)} + > + {nameForSortingOption(optionItem, false)} + + ))} + + + ) +} + +export default MintsPeriodDropdown diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx new file mode 100644 index 000000000..2f2e68123 --- /dev/null +++ b/components/rankings/MintRankingsTable.tsx @@ -0,0 +1,390 @@ +import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import { useCollections, useTrendingMints } 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 Props = { + mints: NonNullable['data']> + loading?: boolean + volumeKey: '1day' | '7day' | '30day' | 'allTime' +} + +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 MintRankingsTable: FC = ({ mints, loading, volumeKey }) => { + const isSmallDevice = useMediaQuery({ maxWidth: 900 }) + + return ( + <> + {!loading && mints && mints.length === 0 ? ( + + + + + No mints found + + ) : ( + + {isSmallDevice ? ( + + + Collection + + + Volume + + + ) : ( + + )} + + {mints?.map((mint, i) => ( + + ))} + + + )} + + ) +} + +type RankingsTableRowProps = { + mint: NonNullable['data']>[0] + rank: number + volumeKey: ComponentPropsWithoutRef['volumeKey'] +} + +const RankingsTableRow: FC = ({ + mint, + rank, + volumeKey, +}) => { + const { routePrefix } = useMarketplaceChain() + const isSmallDevice = useMediaQuery({ maxWidth: 900 }) + + const collectionImage = useMemo(() => { + return optimizeImage(mint.image as string, 250) + }, [mint.image]) + + const mintData = mint?.mintStages?.find((stage) => stage.kind === 'public') + + console.log(mint.mintCount, mint.maxSupply, rank) + + let mintPercentage: string | null = null + if (mint.mintCount && mint.maxSupply) { + mintPercentage = + mint.mintCount <= mint.maxSupply + ? ((mint.mintCount / mint.maxSupply) * 100).toFixed(0) + : null + } + + const mintPriceDecimal = mintData?.price?.amount?.decimal + const hasMintPriceDecimal = typeof mintPriceDecimal === 'number' + + if (isSmallDevice) { + return ( + + + + {rank} + + Collection Image + + + + {mint?.name} + + {/** + * + */} + {mintData && hasMintPriceDecimal ? : null} + + + + + + + + + + {volumeKey !== 'allTime' && ( + + )} + + + + ) + } else { + return ( + + + + + + {rank} + + Collection Image + + + + {mint?.name} + + {/** + * + */} + {mintData && hasMintPriceDecimal ? : null} + + + + + + + {mint.mintPrice} + + + + + + + + + + + {mint?.mintCount} + + + + + + + + + + + + + + {mintPercentage ? `${mintPercentage}%` : '-'} + + + + + + {/** + * {mint?.sampleImages?.map((image, i) => { + if (image) { + return ( + + ) => { + e.currentTarget.style.visibility = 'hidden' + }} + /> + ) + } + return null + })} + */} + + + + ) + } +} + +const headings = [ + 'Collection', + 'Mint Price', + 'Floor Price', + 'Total Mints', + '1H Mints', + '6h Mints', + 'Minted', + 'Recent Mints', +] + +const TableHeading = () => ( + + {headings.map((heading, i) => ( + 3} + key={heading} + css={{ textAlign: i === headings.length - 1 ? 'right' : 'left' }} + > + + {heading} + + + ))} + +) diff --git a/pages/[chain]/mints/trending/index.tsx b/pages/[chain]/mints/trending/index.tsx index fd95c23d5..bfd48b2a3 100644 --- a/pages/[chain]/mints/trending/index.tsx +++ b/pages/[chain]/mints/trending/index.tsx @@ -1,17 +1,11 @@ import { GetServerSideProps, InferGetServerSidePropsType, NextPage } from 'next' import { Text, Flex, Box } from 'components/primitives' import Layout from 'components/Layout' -import { - ComponentPropsWithoutRef, - useContext, - useEffect, - useRef, - useState, -} from 'react' +import { useContext, useEffect, useRef, 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 { useCollections, useTrendingMints } from '@reservoir0x/reservoir-kit-ui' import fetcher from 'utils/fetcher' import { NORMALIZE_ROYALTIES } from '../../../_app' import supportedChains, { DefaultChain } from 'utils/chains' @@ -25,6 +19,13 @@ import ChainToggle from 'components/common/ChainToggle' import { Head } from 'components/Head' import { ChainContext } from 'context/ChainContextProvider' import { useRouter } from 'next/router' +import MintTypeSelector, { + MintTypeOption, +} from 'components/common/MintTypeSelector' +import MintsPeriodDropdown, { + MintsSortingOption, +} from 'components/common/MintsPeriodDropdown' +import { MintRankingsTable } from 'components/rankings/MintRankingsTable' type Props = InferGetServerSidePropsType @@ -33,13 +34,17 @@ const IndexPage: NextPage = ({ ssr }) => { const isSSR = typeof window === 'undefined' const isMounted = useMounted() const compactToggleNames = useMediaQuery({ query: '(max-width: 800px)' }) + const isSmallDevice = useMediaQuery({ maxWidth: 600 }) const [sortByTime, setSortByTime] = useState('1DayVolume') - let collectionQuery: Parameters['0'] = { - limit: 20, - sortBy: sortByTime, - includeMintStages: true, + const [mintType, setMintType] = useState('any') + const [sortByPeriod, setSortByPeriod] = useState('24h') + + let mintQuery: Parameters['0'] = { + limit: 50, + period: sortByPeriod, + type: mintType, } const { chain, switchCurrentChain } = useContext(ChainContext) @@ -58,47 +63,15 @@ const IndexPage: NextPage = ({ ssr }) => { } }, [router.query]) - if (chain.collectionSetId) { - collectionQuery.collectionsSetId = chain.collectionSetId - } else if (chain.community) { - collectionQuery.community = chain.community - } - - const { data, fetchNextPage, isFetchingPage, isValidating } = useCollections( - collectionQuery, - { - fallbackData: [ssr.collection], - } - ) + const { data, isValidating } = useTrendingMints(mintQuery, chain.id, { + fallbackData: [ssr.mint], + }) - let collections = data || [] + let mints = data || [] const loadMoreRef = useRef(null) const loadMoreObserver = useIntersectionObserver(loadMoreRef, {}) - useEffect(() => { - let isVisible = !!loadMoreObserver?.isIntersecting - if (isVisible) { - fetchNextPage() - } - }, [loadMoreObserver?.isIntersecting]) - - 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 ( @@ -133,31 +106,37 @@ const IndexPage: NextPage = ({ ssr }) => { Trending Mints - + )} + { - setSortByTime(option) + setSortByPeriod(option) }} /> + {isSmallDevice && ( + + )} {isSSR || !isMounted ? null : ( - )} - - {(isFetchingPage || isValidating) && ( + {isValidating && ( @@ -170,27 +149,25 @@ const IndexPage: NextPage = ({ ssr }) => { type CollectionSchema = paths['/collections/v7']['get']['responses']['200']['schema'] +type MintsSchema = + paths['/collections/trending-mints/v1']['get']['responses']['200']['schema'] + export const getServerSideProps: GetServerSideProps<{ ssr: { - collection: CollectionSchema + mint: MintsSchema } }> = async ({ res, params }) => { - const collectionQuery: paths['/collections/v7']['get']['parameters']['query'] = + const mintsQuery: paths['/collections/trending-mints/v1']['get']['parameters']['query'] = { - sortBy: '1DayVolume', - normalizeRoyalties: NORMALIZE_ROYALTIES, - limit: 20, + period: '24h', + limit: 50, } const chainPrefix = params?.chain || '' const chain = supportedChains.find((chain) => chain.routePrefix === chainPrefix) || DefaultChain - const query = { ...collectionQuery } - if (chain.collectionSetId) { - query.collectionsSetId = chain.collectionSetId - } else if (chain.community) { - query.community = chain.community - } + const query = { ...mintsQuery } + const response = await fetcher( `${chain.reservoirBaseUrl}/collections/v7`, query, @@ -207,7 +184,7 @@ export const getServerSideProps: GetServerSideProps<{ ) return { - props: { ssr: { collection: response.data } }, + props: { ssr: { mint: response.data } }, } } From aba422875743da60dbdddc3dd80bf45a3d822165 Mon Sep 17 00:00:00 2001 From: armando Date: Fri, 17 Nov 2023 12:06:38 -0800 Subject: [PATCH 04/21] feat: changes --- components/common/MintTypeSelector.tsx | 2 +- components/common/MintsPeriodDropdown.tsx | 10 ++--- components/rankings/MintRankingsTable.tsx | 45 +++-------------------- pages/[chain]/mints/trending/index.tsx | 34 ++++++++--------- 4 files changed, 27 insertions(+), 64 deletions(-) diff --git a/components/common/MintTypeSelector.tsx b/components/common/MintTypeSelector.tsx index 61a66559c..bd1e110d5 100644 --- a/components/common/MintTypeSelector.tsx +++ b/components/common/MintTypeSelector.tsx @@ -1,4 +1,4 @@ -import { ToggleGroupRoot, ToggleGroupItem } from 'components/primitives' +import { ToggleGroupItem, ToggleGroupRoot } from 'components/primitives' import { FC } from 'react' export const MintTypeOptions = ['any', 'free', 'paid'] as const diff --git a/components/common/MintsPeriodDropdown.tsx b/components/common/MintsPeriodDropdown.tsx index b0a58b438..ee61ae683 100644 --- a/components/common/MintsPeriodDropdown.tsx +++ b/components/common/MintsPeriodDropdown.tsx @@ -1,13 +1,13 @@ +import { faChevronDown } from '@fortawesome/free-solid-svg-icons' +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' +import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import { useTrendingMints } from '@reservoir0x/reservoir-kit-ui' -import { Text, Button, Box } from '../primitives' import { - DropdownMenuItem, DropdownMenuContent, + DropdownMenuItem, } from 'components/primitives/Dropdown' -import * as DropdownMenu from '@radix-ui/react-dropdown-menu' import { FC } from 'react' -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faChevronDown } from '@fortawesome/free-solid-svg-icons' +import { Box, Button, Text } from '../primitives' export type MintsSortingOption = NonNullable< Exclude[0], false | undefined>['period'] diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index 2f2e68123..898abe113 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -1,8 +1,7 @@ import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { useCollections, useTrendingMints } from '@reservoir0x/reservoir-kit-ui' +import { useTrendingMints } 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, @@ -69,7 +68,7 @@ export const MintRankingsTable: FC = ({ mints, loading, volumeKey }) => { Collection - Volume + Total Mints ) : ( @@ -96,11 +95,7 @@ type RankingsTableRowProps = { volumeKey: ComponentPropsWithoutRef['volumeKey'] } -const RankingsTableRow: FC = ({ - mint, - rank, - volumeKey, -}) => { +const RankingsTableRow: FC = ({ mint, rank }) => { const { routePrefix } = useMarketplaceChain() const isSmallDevice = useMediaQuery({ maxWidth: 900 }) @@ -110,8 +105,6 @@ const RankingsTableRow: FC = ({ const mintData = mint?.mintStages?.find((stage) => stage.kind === 'public') - console.log(mint.mintCount, mint.maxSupply, rank) - let mintPercentage: string | null = null if (mint.mintCount && mint.maxSupply) { mintPercentage = @@ -153,14 +146,7 @@ const RankingsTableRow: FC = ({ > {mint?.name} - {/** - * - */} - {mintData && hasMintPriceDecimal ? : null} + @@ -174,20 +160,8 @@ const RankingsTableRow: FC = ({ /> - - - {volumeKey !== 'allTime' && ( - - )} + {mint?.mintCount} @@ -243,14 +217,7 @@ const RankingsTableRow: FC = ({ > {mint?.name} - {/** - * - */} - {mintData && hasMintPriceDecimal ? : null} + diff --git a/pages/[chain]/mints/trending/index.tsx b/pages/[chain]/mints/trending/index.tsx index bfd48b2a3..3589c3ba4 100644 --- a/pages/[chain]/mints/trending/index.tsx +++ b/pages/[chain]/mints/trending/index.tsx @@ -1,31 +1,27 @@ -import { GetServerSideProps, InferGetServerSidePropsType, NextPage } from 'next' -import { Text, Flex, Box } from 'components/primitives' -import Layout from 'components/Layout' -import { useContext, useEffect, useRef, useState } from 'react' -import { useMediaQuery } from 'react-responsive' -import { useMounted } from 'hooks' +import { useTrendingMints } from '@reservoir0x/reservoir-kit-ui' import { paths } from '@reservoir0x/reservoir-sdk' -import { useCollections, useTrendingMints } from '@reservoir0x/reservoir-kit-ui' -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' +import Layout from 'components/Layout' +import ChainToggle from 'components/common/ChainToggle' +import { CollectionsSortingOption } from 'components/common/CollectionsTimeDropdown' +import LoadingSpinner from 'components/common/LoadingSpinner' import MintTypeSelector, { MintTypeOption, } from 'components/common/MintTypeSelector' import MintsPeriodDropdown, { MintsSortingOption, } from 'components/common/MintsPeriodDropdown' +import { Box, Flex, Text } from 'components/primitives' import { MintRankingsTable } from 'components/rankings/MintRankingsTable' +import { ChainContext } from 'context/ChainContextProvider' +import { useMounted } from 'hooks' +import { GetServerSideProps, InferGetServerSidePropsType, NextPage } from 'next' +import { useRouter } from 'next/router' +import { useContext, useEffect, useRef, useState } from 'react' +import { useMediaQuery } from 'react-responsive' +import { useIntersectionObserver } from 'usehooks-ts' +import supportedChains, { DefaultChain } from 'utils/chains' +import fetcher from 'utils/fetcher' type Props = InferGetServerSidePropsType From d2e62e5dab5306440fbefe2a8870518060ae861e Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 21 Nov 2023 09:46:04 -0800 Subject: [PATCH 05/21] feat: Use placeholders for values --- components/rankings/MintRankingsTable.tsx | 25 ++++------------------- pages/[chain]/mints/trending/index.tsx | 6 +----- 2 files changed, 5 insertions(+), 26 deletions(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index 898abe113..0f0dea850 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -23,7 +23,6 @@ import optimizeImage from 'utils/optimizeImage' type Props = { mints: NonNullable['data']> loading?: boolean - volumeKey: '1day' | '7day' | '30day' | 'allTime' } const gridColumns = { @@ -41,7 +40,7 @@ const gridColumns = { }, } -export const MintRankingsTable: FC = ({ mints, loading, volumeKey }) => { +export const MintRankingsTable: FC = ({ mints, loading }) => { const isSmallDevice = useMediaQuery({ maxWidth: 900 }) return ( @@ -76,11 +75,7 @@ export const MintRankingsTable: FC = ({ mints, loading, volumeKey }) => { )} {mints?.map((mint, i) => ( - + ))} @@ -92,7 +87,6 @@ export const MintRankingsTable: FC = ({ mints, loading, volumeKey }) => { type RankingsTableRowProps = { mint: NonNullable['data']>[0] rank: number - volumeKey: ComponentPropsWithoutRef['volumeKey'] } const RankingsTableRow: FC = ({ mint, rank }) => { @@ -229,7 +223,6 @@ const RankingsTableRow: FC = ({ mint, rank }) => { justify="start" css={{ height: '100%' }} > - {mint.mintPrice} = ({ mint, rank }) => { - - - + 0 - - - + 0 diff --git a/pages/[chain]/mints/trending/index.tsx b/pages/[chain]/mints/trending/index.tsx index 3589c3ba4..de9dbc69f 100644 --- a/pages/[chain]/mints/trending/index.tsx +++ b/pages/[chain]/mints/trending/index.tsx @@ -125,11 +125,7 @@ const IndexPage: NextPage = ({ ssr }) => { )} {isSSR || !isMounted ? null : ( - + )} {isValidating && ( From 630a7aca8fa2aa236a3154852f2987e2fbcbcedf Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 21 Nov 2023 09:49:37 -0800 Subject: [PATCH 06/21] feat: Placeholder images --- components/rankings/MintRankingsTable.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index 0f0dea850..a5cf545df 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -270,8 +270,7 @@ const RankingsTableRow: FC = ({ mint, rank }) => { }} justify={'end'} > - {/** - * {mint?.sampleImages?.map((image, i) => { + {Array.apply(null, Array(5)).map((image: any, i) => { if (image) { return ( = ({ mint, rank }) => { } return null })} - */} From 226ad8af25b3445db847a9342f702d515e887064 Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 21 Nov 2023 10:01:38 -0800 Subject: [PATCH 07/21] fix: Image placeholders --- components/rankings/MintRankingsTable.tsx | 48 ++++++++++++----------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index a5cf545df..19c8f626b 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -270,29 +270,31 @@ const RankingsTableRow: FC = ({ mint, rank }) => { }} justify={'end'} > - {Array.apply(null, Array(5)).map((image: any, i) => { - if (image) { - return ( - - ) => { - e.currentTarget.style.visibility = 'hidden' - }} - /> - ) - } - return null - })} + {Array(4) + .fill(collectionImage) + .map((image: string, i) => { + if (image) { + return ( + + ) => { + e.currentTarget.style.visibility = 'hidden' + }} + /> + ) + } + return null + })} From 0292042b56893c701f524463876dc3df99a50267 Mon Sep 17 00:00:00 2001 From: armando Date: Wed, 22 Nov 2023 13:28:29 -0800 Subject: [PATCH 08/21] feat: Add rest of data --- components/rankings/MintRankingsTable.tsx | 79 ++++++++++++++--------- 1 file changed, 47 insertions(+), 32 deletions(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index 19c8f626b..512be4140 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -107,9 +107,17 @@ const RankingsTableRow: FC = ({ mint, rank }) => { : null } + const mintPrice = mint.mintPrice?.toString() const mintPriceDecimal = mintData?.price?.amount?.decimal const hasMintPriceDecimal = typeof mintPriceDecimal === 'number' + // @ts-ignore + const sampleImages: string[] = mint?.sampleImages + // @ts-ignore + const sixHourCount: number = mint?.sixHourCount + // @ts-ignore + const oneHourCount: number = mint?.oneHourCount + if (isSmallDevice) { return ( = ({ mint, rank }) => { justify="start" css={{ height: '100%' }} > - + {mintPrice !== '0' ? ( + + ) : ( + '-' + )} @@ -252,9 +264,13 @@ const RankingsTableRow: FC = ({ mint, rank }) => { - 0 + + {oneHourCount} + - 0 + + {sixHourCount} + @@ -270,31 +286,30 @@ const RankingsTableRow: FC = ({ mint, rank }) => { }} justify={'end'} > - {Array(4) - .fill(collectionImage) - .map((image: string, i) => { - if (image) { - return ( - - ) => { - e.currentTarget.style.visibility = 'hidden' - }} - /> - ) - } - return null - })} + {/** */} + {sampleImages.map((image: string, i) => { + if (image) { + return ( + + ) => { + e.currentTarget.style.visibility = 'hidden' + }} + /> + ) + } + return null + })} From 42d34d1da61cd5612eb2907faab0e14387eeed9c Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 28 Nov 2023 08:54:08 -0600 Subject: [PATCH 09/21] feat: remove cols --- components/rankings/MintRankingsTable.tsx | 40 +++-------------------- pages/[chain]/mints/trending/index.tsx | 17 +++++----- 2 files changed, 13 insertions(+), 44 deletions(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index 512be4140..705894a87 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -13,10 +13,9 @@ import { 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 { FC, useMemo } from 'react' import { useMediaQuery } from 'react-responsive' import optimizeImage from 'utils/optimizeImage' @@ -26,17 +25,17 @@ type Props = { } const gridColumns = { - gridTemplateColumns: '520px repeat(6, 0.5fr) 250px', + gridTemplateColumns: '520px repeat(3, 0.5fr) 250px', '@md': { - gridTemplateColumns: '420px 1fr 1fr 1fr', + gridTemplateColumns: '420px 1fr 1fr', }, '@lg': { - gridTemplateColumns: '360px repeat(6, 0.5fr) 250px', + gridTemplateColumns: '360px repeat(3, 0.5fr) 250px', }, '@xl': { - gridTemplateColumns: '520px repeat(6, 0.5fr) 250px', + gridTemplateColumns: '520px repeat(3, 0.5fr) 250px', }, } @@ -97,19 +96,7 @@ const RankingsTableRow: FC = ({ mint, rank }) => { return optimizeImage(mint.image as string, 250) }, [mint.image]) - const mintData = mint?.mintStages?.find((stage) => stage.kind === 'public') - - let mintPercentage: string | null = null - if (mint.mintCount && mint.maxSupply) { - mintPercentage = - mint.mintCount <= mint.maxSupply - ? ((mint.mintCount / mint.maxSupply) * 100).toFixed(0) - : null - } - const mintPrice = mint.mintPrice?.toString() - const mintPriceDecimal = mintData?.price?.amount?.decimal - const hasMintPriceDecimal = typeof mintPriceDecimal === 'number' // @ts-ignore const sampleImages: string[] = mint?.sampleImages @@ -264,20 +251,6 @@ const RankingsTableRow: FC = ({ mint, rank }) => { - - {oneHourCount} - - - - {sixHourCount} - - - - - {mintPercentage ? `${mintPercentage}%` : '-'} - - - = ({ ssr }) => { const isMounted = useMounted() const compactToggleNames = useMediaQuery({ query: '(max-width: 800px)' }) const isSmallDevice = useMediaQuery({ maxWidth: 600 }) - const [sortByTime, setSortByTime] = - useState('1DayVolume') const [mintType, setMintType] = useState('any') const [sortByPeriod, setSortByPeriod] = useState('24h') @@ -60,14 +59,11 @@ const IndexPage: NextPage = ({ ssr }) => { }, [router.query]) const { data, isValidating } = useTrendingMints(mintQuery, chain.id, { - fallbackData: [ssr.mint], + fallbackData: [ssr.mints], }) let mints = data || [] - const loadMoreRef = useRef(null) - const loadMoreObserver = useIntersectionObserver(loadMoreRef, {}) - return ( @@ -146,7 +142,7 @@ type MintsSchema = export const getServerSideProps: GetServerSideProps<{ ssr: { - mint: MintsSchema + mints: MintsSchema } }> = async ({ res, params }) => { const mintsQuery: paths['/collections/trending-mints/v1']['get']['parameters']['query'] = @@ -154,11 +150,14 @@ export const getServerSideProps: GetServerSideProps<{ period: '24h', limit: 50, } + const chainPrefix = params?.chain || '' + const chain = supportedChains.find((chain) => chain.routePrefix === chainPrefix) || DefaultChain - const query = { ...mintsQuery } + + const query = { ...mintsQuery, normalizeRoyalties: NORMALIZE_ROYALTIES } const response = await fetcher( `${chain.reservoirBaseUrl}/collections/v7`, @@ -176,7 +175,7 @@ export const getServerSideProps: GetServerSideProps<{ ) return { - props: { ssr: { mint: response.data } }, + props: { ssr: { mints: response.data } }, } } From d7634557934c5ee904f86efab2b1a177970ae4ab Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 28 Nov 2023 08:54:26 -0600 Subject: [PATCH 10/21] fix: rm undeeded vars --- components/rankings/MintRankingsTable.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index 705894a87..40d565d85 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -100,10 +100,6 @@ const RankingsTableRow: FC = ({ mint, rank }) => { // @ts-ignore const sampleImages: string[] = mint?.sampleImages - // @ts-ignore - const sixHourCount: number = mint?.sixHourCount - // @ts-ignore - const oneHourCount: number = mint?.oneHourCount if (isSmallDevice) { return ( From 6489e37a99fa619af6b09ceeb1ce754a12c6e806 Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 28 Nov 2023 08:55:50 -0600 Subject: [PATCH 11/21] feat: use opensea verifiation --- components/rankings/MintRankingsTable.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index 40d565d85..a8c2d3ce5 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -100,6 +100,8 @@ const RankingsTableRow: FC = ({ mint, rank }) => { // @ts-ignore const sampleImages: string[] = mint?.sampleImages + // @ts-ignore + const openseaVerificationStatus = mint?.openseaVerificationStatus if (isSmallDevice) { return ( @@ -131,7 +133,9 @@ const RankingsTableRow: FC = ({ mint, rank }) => { > {mint?.name} - + From 84b297dfb3f39f82dcd78db26d222bee0194d751 Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 28 Nov 2023 09:47:44 -0600 Subject: [PATCH 12/21] feat: os verification fixes --- components/rankings/MintRankingsTable.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index a8c2d3ce5..45eb2ff24 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -206,7 +206,9 @@ const RankingsTableRow: FC = ({ mint, rank }) => { > {mint?.name} - + From e8ba42deab1e4b23f9c53c01ea660859fb91592d Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 28 Nov 2023 09:55:24 -0600 Subject: [PATCH 13/21] feat: fix cols --- components/rankings/MintRankingsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index 45eb2ff24..a875e25e6 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -27,7 +27,7 @@ type Props = { const gridColumns = { gridTemplateColumns: '520px repeat(3, 0.5fr) 250px', '@md': { - gridTemplateColumns: '420px 1fr 1fr', + gridTemplateColumns: '420px 1fr 1fr 1fr', }, '@lg': { From d2a6e949899ebdcbb261231601c7053abc0455e3 Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 28 Nov 2023 09:56:52 -0600 Subject: [PATCH 14/21] feat: Uneeded variable --- pages/[chain]/mints/trending/index.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/pages/[chain]/mints/trending/index.tsx b/pages/[chain]/mints/trending/index.tsx index ce5b0fb54..37a13e4fb 100644 --- a/pages/[chain]/mints/trending/index.tsx +++ b/pages/[chain]/mints/trending/index.tsx @@ -3,7 +3,6 @@ import { paths } from '@reservoir0x/reservoir-sdk' import { Head } from 'components/Head' import Layout from 'components/Layout' import ChainToggle from 'components/common/ChainToggle' -import { CollectionsSortingOption } from 'components/common/CollectionsTimeDropdown' import LoadingSpinner from 'components/common/LoadingSpinner' import MintTypeSelector, { MintTypeOption, @@ -20,7 +19,6 @@ import { useRouter } from 'next/router' import { NORMALIZE_ROYALTIES } from 'pages/_app' import { useContext, useEffect, useRef, useState } from 'react' import { useMediaQuery } from 'react-responsive' -import { useIntersectionObserver } from 'usehooks-ts' import supportedChains, { DefaultChain } from 'utils/chains' import fetcher from 'utils/fetcher' @@ -134,9 +132,6 @@ const IndexPage: NextPage = ({ ssr }) => { ) } -type CollectionSchema = - paths['/collections/v7']['get']['responses']['200']['schema'] - type MintsSchema = paths['/collections/trending-mints/v1']['get']['responses']['200']['schema'] From 0c61c9e318aba88fbb495bd10dd1a5ce95ef159c Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 28 Nov 2023 09:58:19 -0600 Subject: [PATCH 15/21] feat: remove 2hr option --- components/common/MintsPeriodDropdown.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/common/MintsPeriodDropdown.tsx b/components/common/MintsPeriodDropdown.tsx index ee61ae683..7e734612d 100644 --- a/components/common/MintsPeriodDropdown.tsx +++ b/components/common/MintsPeriodDropdown.tsx @@ -16,7 +16,6 @@ export type MintsSortingOption = NonNullable< const sortingOptions: MintsSortingOption[] = [ '24h', '6h', - '2h', '1h', '30m', '10m', @@ -29,8 +28,6 @@ const nameForSortingOption = (option: MintsSortingOption, compact: boolean) => { return compact ? '24h' : '24 hours' case '6h': return compact ? '6h' : '6 hours' - case '2h': - return compact ? '2h' : '2 hours' case '1h': return compact ? '1h' : '1 hour' case '30m': From 1a6417ca97c1fd42d5b7b86708e0da6411db71ed Mon Sep 17 00:00:00 2001 From: armando Date: Tue, 28 Nov 2023 15:49:29 -0600 Subject: [PATCH 16/21] feat: fix fallback data --- pages/[chain]/mints/trending/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/pages/[chain]/mints/trending/index.tsx b/pages/[chain]/mints/trending/index.tsx index 37a13e4fb..199a2ef70 100644 --- a/pages/[chain]/mints/trending/index.tsx +++ b/pages/[chain]/mints/trending/index.tsx @@ -35,7 +35,7 @@ const IndexPage: NextPage = ({ ssr }) => { const [sortByPeriod, setSortByPeriod] = useState('24h') let mintQuery: Parameters['0'] = { - limit: 50, + limit: 20, period: sortByPeriod, type: mintType, } @@ -155,7 +155,7 @@ export const getServerSideProps: GetServerSideProps<{ const query = { ...mintsQuery, normalizeRoyalties: NORMALIZE_ROYALTIES } const response = await fetcher( - `${chain.reservoirBaseUrl}/collections/v7`, + `${chain.reservoirBaseUrl}/collections/trending-mints/v1`, query, { headers: { From 2bcc4cb8dfa565561732fbe5b1b650be35be04f0 Mon Sep 17 00:00:00 2001 From: armando Date: Wed, 29 Nov 2023 11:37:21 -0600 Subject: [PATCH 17/21] feat: Readd hour counts --- components/rankings/MintRankingsTable.tsx | 24 +++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index a875e25e6..e77fd744e 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -25,17 +25,17 @@ type Props = { } const gridColumns = { - gridTemplateColumns: '520px repeat(3, 0.5fr) 250px', + gridTemplateColumns: '520px repeat(5, 0.5fr) 250px', '@md': { gridTemplateColumns: '420px 1fr 1fr 1fr', }, '@lg': { - gridTemplateColumns: '360px repeat(3, 0.5fr) 250px', + gridTemplateColumns: '360px repeat(5, 0.5fr) 250px', }, '@xl': { - gridTemplateColumns: '520px repeat(3, 0.5fr) 250px', + gridTemplateColumns: '520px repeat(5, 0.5fr) 250px', }, } @@ -99,10 +99,16 @@ const RankingsTableRow: FC = ({ mint, rank }) => { const mintPrice = mint.mintPrice?.toString() // @ts-ignore - const sampleImages: string[] = mint?.sampleImages + const sampleImages: string[] = mint?.sampleImages || [] // @ts-ignore const openseaVerificationStatus = mint?.openseaVerificationStatus + // @ts-ignore + const oneHourCount = mint?.oneHourCount + + // @ts-ignore + const sixHourCount = mint?.sixHourCount + if (isSmallDevice) { return ( = ({ mint, rank }) => { + + {oneHourCount} + + + + {sixHourCount} + + Date: Fri, 1 Dec 2023 09:29:29 -0800 Subject: [PATCH 18/21] feat: Feedback and remove tsignore --- components/common/MintsPeriodDropdown.tsx | 10 +++++----- components/rankings/MintRankingsTable.tsx | 15 ++++----------- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/components/common/MintsPeriodDropdown.tsx b/components/common/MintsPeriodDropdown.tsx index 7e734612d..2a2094d83 100644 --- a/components/common/MintsPeriodDropdown.tsx +++ b/components/common/MintsPeriodDropdown.tsx @@ -14,12 +14,12 @@ export type MintsSortingOption = NonNullable< > const sortingOptions: MintsSortingOption[] = [ - '24h', - '6h', - '1h', - '30m', - '10m', '5m', + '10m', + '30m', + '1h', + '6h', + '24h', ] const nameForSortingOption = (option: MintsSortingOption, compact: boolean) => { diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index e77fd744e..a9d007159 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -98,15 +98,8 @@ const RankingsTableRow: FC = ({ mint, rank }) => { const mintPrice = mint.mintPrice?.toString() - // @ts-ignore const sampleImages: string[] = mint?.sampleImages || [] - // @ts-ignore - const openseaVerificationStatus = mint?.openseaVerificationStatus - - // @ts-ignore const oneHourCount = mint?.oneHourCount - - // @ts-ignore const sixHourCount = mint?.sixHourCount if (isSmallDevice) { @@ -140,7 +133,7 @@ const RankingsTableRow: FC = ({ mint, rank }) => { {mint?.name} @@ -213,7 +206,7 @@ const RankingsTableRow: FC = ({ mint, rank }) => { {mint?.name} @@ -260,11 +253,11 @@ const RankingsTableRow: FC = ({ mint, rank }) => { - {oneHourCount} + {mint?.oneHourCount} - {sixHourCount} + {mint?.sixHourCount} From d3cb893aeb5645170f8aff961614b77f89b17fd6 Mon Sep 17 00:00:00 2001 From: armando Date: Fri, 1 Dec 2023 10:24:33 -0800 Subject: [PATCH 19/21] feat: Fallback image --- components/rankings/MintRankingsTable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index a9d007159..e5d8bf507 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -93,7 +93,7 @@ const RankingsTableRow: FC = ({ mint, rank }) => { const isSmallDevice = useMediaQuery({ maxWidth: 900 }) const collectionImage = useMemo(() => { - return optimizeImage(mint.image as string, 250) + return optimizeImage(mint?.image || mint?.sampleImages?.[0], 250) }, [mint.image]) const mintPrice = mint.mintPrice?.toString() From 7693f239d2cec073b597552bd16b4f474e462699 Mon Sep 17 00:00:00 2001 From: armando Date: Fri, 1 Dec 2023 10:26:00 -0800 Subject: [PATCH 20/21] feat: rm --- components/rankings/MintRankingsTable.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index e5d8bf507..2d991256a 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -99,8 +99,6 @@ const RankingsTableRow: FC = ({ mint, rank }) => { const mintPrice = mint.mintPrice?.toString() const sampleImages: string[] = mint?.sampleImages || [] - const oneHourCount = mint?.oneHourCount - const sixHourCount = mint?.sixHourCount if (isSmallDevice) { return ( From 89b54eb6e48bb8b17283fba0409b9043b36a0554 Mon Sep 17 00:00:00 2001 From: armando Date: Mon, 4 Dec 2023 13:20:34 -0800 Subject: [PATCH 21/21] feat: commas --- components/rankings/MintRankingsTable.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/rankings/MintRankingsTable.tsx b/components/rankings/MintRankingsTable.tsx index 2d991256a..2545c18a3 100644 --- a/components/rankings/MintRankingsTable.tsx +++ b/components/rankings/MintRankingsTable.tsx @@ -147,7 +147,7 @@ const RankingsTableRow: FC = ({ mint, rank }) => { - {mint?.mintCount} + {mint?.mintCount?.toLocaleString()} @@ -246,16 +246,16 @@ const RankingsTableRow: FC = ({ mint, rank }) => { justify="start" css={{ height: '100%' }} > - {mint?.mintCount} + {mint?.mintCount?.toLocaleString()} - {mint?.oneHourCount} + {mint?.oneHourCount?.toLocaleString()} - {mint?.sixHourCount} + {mint?.sixHourCount?.toLocaleString()}