From 2903533d42983ff0bb33e4e40b82f158d9ea815f Mon Sep 17 00:00:00 2001 From: Nicolas Mahe Date: Fri, 2 Feb 2024 16:44:57 +0700 Subject: [PATCH 1/4] flatten `sales` in `FetchFeaturedAssets` query --- components/HomeSection/Featured.gql | 59 +++++++++++++------------- components/HomeSection/Featured.tsx | 64 +++++++++++++++++++++-------- components/Sales/Detail.tsx | 40 +++++++++--------- components/Token/Header.tsx | 10 +++-- components/Token/Metadata.tsx | 9 ++-- pages/tokens/[id]/index.gql | 1 - pages/tokens/[id]/index.tsx | 4 +- 7 files changed, 111 insertions(+), 76 deletions(-) diff --git a/components/HomeSection/Featured.gql b/components/HomeSection/Featured.gql index dea12f1b..e5b09b19 100644 --- a/components/HomeSection/Featured.gql +++ b/components/HomeSection/Featured.gql @@ -1,9 +1,10 @@ query FetchFeaturedAssets( - $featuredIds: [String!]! + $assetFilter: [AssetFilter!]! + $salesFilter: [OfferOpenSaleFilter!]! $now: Datetime! $address: Address ) { - assets(filter: { quantity: { greaterThan: "0" }, id: { in: $featuredIds } }) { + assets(filter: { quantity: { greaterThan: "0" }, and: $assetFilter }) { nodes { id chainId @@ -66,33 +67,35 @@ query FetchFeaturedAssets( symbol } } - sales( - orderBy: [UNIT_PRICE_IN_REF_ASC, CREATED_AT_ASC] - filter: { expiredAt: { greaterThan: $now } } - first: 100 # TODO: implement pagination - ) { - nodes { - id - unitPrice - availableQuantity - expiredAt - currency { - image - name - id - decimals - symbol - } - maker { - image - address - name - verification { - status - } - } + } + } + sales: offerOpenSales( + orderBy: [UNIT_PRICE_IN_REF_ASC, CREATED_AT_ASC] + filter: { expiredAt: { greaterThan: $now }, and: $salesFilter } + first: 100 # TODO: implement pagination + ) { + nodes { + id + chainId + collectionAddress + tokenId + unitPrice + availableQuantity + expiredAt + currency { + image + name + id + decimals + symbol + } + maker { + image + address + name + verification { + status } - totalAvailableQuantitySum } } } diff --git a/components/HomeSection/Featured.tsx b/components/HomeSection/Featured.tsx index d62b3c26..42bedbe6 100644 --- a/components/HomeSection/Featured.tsx +++ b/components/HomeSection/Featured.tsx @@ -8,7 +8,12 @@ import { Stack, } from '@chakra-ui/react' import { FC, useCallback, useMemo } from 'react' -import { useFetchFeaturedAssetsQuery } from '../../graphql' +import invariant from 'ts-invariant' +import { + AssetFilter, + OfferOpenSaleFilter, + useFetchFeaturedAssetsQuery, +} from '../../graphql' import useAccount from '../../hooks/useAccount' import useEnvironment from '../../hooks/useEnvironment' import useHandleQueryError from '../../hooks/useHandleQueryError' @@ -23,9 +28,27 @@ type Props = { const FeaturedHomeSection: FC = ({ date }) => { const { FEATURED_TOKEN } = useEnvironment() const { address } = useAccount() + const idFilters = { + or: FEATURED_TOKEN.map((x) => x.split('-')).map( + ([chainId, collectionAddress, tokenId]) => { + invariant( + chainId !== undefined && + collectionAddress !== undefined && + tokenId !== undefined, + 'invalid feature token', + ) + return { + collectionAddress: { equalTo: collectionAddress.toLowerCase() }, + chainId: { equalTo: parseInt(chainId, 10) }, + tokenId: { equalTo: tokenId }, + } + }, + ), + } const featureAssetsQuery = useFetchFeaturedAssetsQuery({ variables: { - featuredIds: FEATURED_TOKEN, + assetFilter: idFilters as AssetFilter, + salesFilter: idFilters as OfferOpenSaleFilter, now: date, address: address || '', }, @@ -34,6 +57,7 @@ const FeaturedHomeSection: FC = ({ date }) => { useHandleQueryError(featureAssetsQuery) const currencies = featureAssetsQuery.data?.currencies?.nodes + const sales = featureAssetsQuery.data?.sales?.nodes const featured = useOrderByKey( FEATURED_TOKEN, @@ -45,21 +69,27 @@ const FeaturedHomeSection: FC = ({ date }) => { void featureAssetsQuery.refetch() }, [featureAssetsQuery]) - const featuredAssets = useMemo( - () => - featured && currencies - ? featured.map((asset) => ( - - )) - : undefined, - [featured, reloadInfo, currencies], - ) + const featuredAssets = useMemo(() => { + if (!featured || !currencies || !sales) return undefined + return featured.map((asset) => { + const salesOfAsset = sales.filter( + (sale) => + sale.chainId === asset.chainId && + sale.collectionAddress === asset.collectionAddress && + sale.tokenId === asset.tokenId, + ) + return ( + + ) + }) + }, [featured, currencies, sales, reloadInfo]) if (!FEATURED_TOKEN.length) return null if (!featuredAssets) diff --git a/components/Sales/Detail.tsx b/components/Sales/Detail.tsx index 08b07470..6ed4f25e 100644 --- a/components/Sales/Detail.tsx +++ b/components/Sales/Detail.tsx @@ -21,27 +21,25 @@ export type Props = { } | null } sales: { - nodes: { + id: string + unitPrice: string + expiredAt: Date + availableQuantity: string + maker: { + address: string + image: string | null + name: string | null + verification: { + status: AccountVerificationStatus + } | null + } + currency: { id: string - unitPrice: string - expiredAt: Date - availableQuantity: string - maker: { - address: string - image: string | null - name: string | null - verification: { - status: AccountVerificationStatus - } | null - } - currency: { - id: string - decimals: number - image: string - symbol: string - } - }[] - } + decimals: number + image: string + symbol: string + } + }[] currencies: { chainId: number image: string @@ -74,7 +72,7 @@ const SaleDetail: FC = ({ () => asset.collection.standard === 'ERC721', [asset.collection.standard], ) - const directSales = sales.nodes + const directSales = sales return ( diff --git a/components/Token/Header.tsx b/components/Token/Header.tsx index 62183f4c..c37a1439 100644 --- a/components/Token/Header.tsx +++ b/components/Token/Header.tsx @@ -10,12 +10,13 @@ import { FC, useMemo } from 'react' import { FetchFeaturedAssetsQuery } from '../../graphql' import useDetectAssetMedia from '../../hooks/useDetectAssetMedia' import Link from '../Link/Link' -import SaleDetail from '../Sales/Detail' +import SaleDetail, { Props as SaleDetailProps } from '../Sales/Detail' import TokenMedia from '../Token/Media' -import TokenMetadata from '../Token/Metadata' +import TokenMetadata, { Props as TokenMetadataProps } from '../Token/Metadata' export type Props = { asset: NonNullable['nodes'][0] + sales: TokenMetadataProps['sales'] & SaleDetailProps['sales'] currencies: { chainId: number image: string @@ -26,6 +27,7 @@ export type Props = { const TokenHeader: FC = ({ asset, + sales, currencies, isHomepage, onOfferCanceled, @@ -86,12 +88,12 @@ const TokenHeader: FC = ({ = ({ asset, sales, ownerships }) => { @@ -52,7 +52,10 @@ const TokenMetadata: FC = ({ asset, sales, ownerships }) => { const isOpenCollection = asset.collection.mintType === 'PUBLIC' const numberOfOwners = ownerships.totalCount - const saleSupply = BigNumber.from(sales.totalAvailableQuantitySum) + const saleSupply = sales.reduce( + (sum, sale) => sum.add(sale.availableQuantity), + BigNumber.from(0), + ) const totalSupply = BigNumber.from(asset.quantity) const owners = ownerships.nodes diff --git a/pages/tokens/[id]/index.gql b/pages/tokens/[id]/index.gql index 03971762..2ff57208 100644 --- a/pages/tokens/[id]/index.gql +++ b/pages/tokens/[id]/index.gql @@ -150,7 +150,6 @@ query FetchAsset( } } } - totalAvailableQuantitySum } currencies( orderBy: CREATED_AT_ASC diff --git a/pages/tokens/[id]/index.tsx b/pages/tokens/[id]/index.tsx index 7b9d52e6..a56b893c 100644 --- a/pages/tokens/[id]/index.tsx +++ b/pages/tokens/[id]/index.tsx @@ -233,7 +233,7 @@ const DetailPage: NextPage = ({ now: nowProp }) => { ) : ( )} @@ -245,7 +245,7 @@ const DetailPage: NextPage = ({ now: nowProp }) => { ) : ( Date: Fri, 2 Feb 2024 16:51:06 +0700 Subject: [PATCH 2/4] add comment --- components/HomeSection/Featured.gql | 2 +- pages/tokens/[id]/index.gql | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/HomeSection/Featured.gql b/components/HomeSection/Featured.gql index e5b09b19..7f781165 100644 --- a/components/HomeSection/Featured.gql +++ b/components/HomeSection/Featured.gql @@ -72,7 +72,7 @@ query FetchFeaturedAssets( sales: offerOpenSales( orderBy: [UNIT_PRICE_IN_REF_ASC, CREATED_AT_ASC] filter: { expiredAt: { greaterThan: $now }, and: $salesFilter } - first: 100 # TODO: implement pagination + first: 100 # TODO: implement pagination. when implementing pagination, find a way to get availableQuantity of all sales ) { nodes { id diff --git a/pages/tokens/[id]/index.gql b/pages/tokens/[id]/index.gql index 2ff57208..65580b84 100644 --- a/pages/tokens/[id]/index.gql +++ b/pages/tokens/[id]/index.gql @@ -127,7 +127,7 @@ query FetchAsset( tokenId: { equalTo: $tokenId } expiredAt: { greaterThan: $now } } - first: 100 # TODO: implement pagination + first: 100 # TODO: implement pagination. when implementing pagination, find a way to get availableQuantity of all sales ) { nodes { id From be9538bb7950ce9e86def19bbb3c920c0c9b4538 Mon Sep 17 00:00:00 2001 From: Nicolas Mahe Date: Fri, 2 Feb 2024 16:52:58 +0700 Subject: [PATCH 3/4] remove limit on offerOpenSales --- components/HomeSection/Featured.gql | 3 +-- pages/tokens/[id]/index.gql | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/components/HomeSection/Featured.gql b/components/HomeSection/Featured.gql index 7f781165..f019e3ef 100644 --- a/components/HomeSection/Featured.gql +++ b/components/HomeSection/Featured.gql @@ -71,8 +71,7 @@ query FetchFeaturedAssets( } sales: offerOpenSales( orderBy: [UNIT_PRICE_IN_REF_ASC, CREATED_AT_ASC] - filter: { expiredAt: { greaterThan: $now }, and: $salesFilter } - first: 100 # TODO: implement pagination. when implementing pagination, find a way to get availableQuantity of all sales + filter: { expiredAt: { greaterThan: $now }, and: $salesFilter } # TODO: implement pagination. when implementing pagination, find a way to get availableQuantity of all sales ) { nodes { id diff --git a/pages/tokens/[id]/index.gql b/pages/tokens/[id]/index.gql index 65580b84..f363a2ea 100644 --- a/pages/tokens/[id]/index.gql +++ b/pages/tokens/[id]/index.gql @@ -126,8 +126,7 @@ query FetchAsset( collectionAddress: { equalTo: $collectionAddress } tokenId: { equalTo: $tokenId } expiredAt: { greaterThan: $now } - } - first: 100 # TODO: implement pagination. when implementing pagination, find a way to get availableQuantity of all sales + } # TODO: implement pagination. when implementing pagination, find a way to get availableQuantity of all sales ) { nodes { id From 56e7b6cfcba92d1d071045c76ce378725b4f9112 Mon Sep 17 00:00:00 2001 From: Nicolas Mahe Date: Fri, 2 Feb 2024 17:41:36 +0700 Subject: [PATCH 4/4] Remove FetchFeaturedAssets query by multiple FetchFeaturedToken query --- components/HomeSection/Featured.gql | 108 ------------------ components/HomeSection/Featured.tsx | 127 +++++---------------- components/HomeSection/FeaturedToken.gql | 126 ++++++++++++++++++++ components/HomeSection/FeaturedToken.tsx | 139 +++++++++++++++++++++++ components/Token/Header.tsx | 106 ----------------- pages/tokens/[id]/index.gql | 5 +- pages/tokens/[id]/index.tsx | 16 +-- 7 files changed, 305 insertions(+), 322 deletions(-) delete mode 100644 components/HomeSection/Featured.gql create mode 100644 components/HomeSection/FeaturedToken.gql create mode 100644 components/HomeSection/FeaturedToken.tsx delete mode 100644 components/Token/Header.tsx diff --git a/components/HomeSection/Featured.gql b/components/HomeSection/Featured.gql deleted file mode 100644 index f019e3ef..00000000 --- a/components/HomeSection/Featured.gql +++ /dev/null @@ -1,108 +0,0 @@ -query FetchFeaturedAssets( - $assetFilter: [AssetFilter!]! - $salesFilter: [OfferOpenSaleFilter!]! - $now: Datetime! - $address: Address -) { - assets(filter: { quantity: { greaterThan: "0" }, and: $assetFilter }) { - nodes { - id - chainId - collectionAddress - tokenId - name - collection { - chainId - address - name - standard - mintType - } - image - imageMimetype - animationUrl - animationMimetype - quantity - creator { - address - name - image - verification { - status - } - } - owned: ownership(ownerAddress: $address) { - quantity - } - ownerships( - orderBy: [ - QUANTITY_DESC - ACCOUNT_BY_OWNER_ADDRESS__NAME_ASC - OWNER_ADDRESS_ASC - ] - first: 5 - ) { - totalCount - nodes { - ownerAddress - quantity - owner { - address - name - image - verification { - status - } - } - } - } - bestBid { - unitPrice - amount - currency { - image - name - id - decimals - symbol - } - } - } - } - sales: offerOpenSales( - orderBy: [UNIT_PRICE_IN_REF_ASC, CREATED_AT_ASC] - filter: { expiredAt: { greaterThan: $now }, and: $salesFilter } # TODO: implement pagination. when implementing pagination, find a way to get availableQuantity of all sales - ) { - nodes { - id - chainId - collectionAddress - tokenId - unitPrice - availableQuantity - expiredAt - currency { - image - name - id - decimals - symbol - } - maker { - image - address - name - verification { - status - } - } - } - } - currencies(orderBy: CREATED_AT_ASC, filter: { address: { isNull: false } }) { - # keep only non-native currency. Cannot create bid with native currency. - nodes { - chainId - image - } - } -} diff --git a/components/HomeSection/Featured.tsx b/components/HomeSection/Featured.tsx index 42bedbe6..141becdc 100644 --- a/components/HomeSection/Featured.tsx +++ b/components/HomeSection/Featured.tsx @@ -1,25 +1,9 @@ -import { - Box, - Flex, - SimpleGrid, - Skeleton, - SkeletonText, - Spacer, - Stack, -} from '@chakra-ui/react' -import { FC, useCallback, useMemo } from 'react' +import { Flex } from '@chakra-ui/react' +import { FC, useMemo } from 'react' import invariant from 'ts-invariant' -import { - AssetFilter, - OfferOpenSaleFilter, - useFetchFeaturedAssetsQuery, -} from '../../graphql' -import useAccount from '../../hooks/useAccount' import useEnvironment from '../../hooks/useEnvironment' -import useHandleQueryError from '../../hooks/useHandleQueryError' -import { useOrderByKey } from '../../hooks/useOrderByKey' import Slider from '../Slider/Slider' -import TokenHeader from '../Token/Header' +import TokenHeader from './FeaturedToken' type Props = { date: Date @@ -27,90 +11,33 @@ type Props = { const FeaturedHomeSection: FC = ({ date }) => { const { FEATURED_TOKEN } = useEnvironment() - const { address } = useAccount() - const idFilters = { - or: FEATURED_TOKEN.map((x) => x.split('-')).map( - ([chainId, collectionAddress, tokenId]) => { - invariant( - chainId !== undefined && - collectionAddress !== undefined && - tokenId !== undefined, - 'invalid feature token', - ) - return { - collectionAddress: { equalTo: collectionAddress.toLowerCase() }, - chainId: { equalTo: parseInt(chainId, 10) }, - tokenId: { equalTo: tokenId }, - } - }, - ), - } - const featureAssetsQuery = useFetchFeaturedAssetsQuery({ - variables: { - assetFilter: idFilters as AssetFilter, - salesFilter: idFilters as OfferOpenSaleFilter, - now: date, - address: address || '', - }, - skip: !FEATURED_TOKEN.length, - }) - useHandleQueryError(featureAssetsQuery) - const currencies = featureAssetsQuery.data?.currencies?.nodes - const sales = featureAssetsQuery.data?.sales?.nodes - - const featured = useOrderByKey( - FEATURED_TOKEN, - featureAssetsQuery.data?.assets?.nodes, - (asset) => asset.id, + const featuredAssets = useMemo( + () => + FEATURED_TOKEN.map((x) => x.split('-')).map( + ([chainId, collectionAddress, tokenId], index) => { + invariant( + chainId !== undefined && + collectionAddress !== undefined && + tokenId !== undefined, + 'invalid feature token', + ) + return ( + + ) + }, + ), + [FEATURED_TOKEN, date], ) - const reloadInfo = useCallback(async () => { - void featureAssetsQuery.refetch() - }, [featureAssetsQuery]) - - const featuredAssets = useMemo(() => { - if (!featured || !currencies || !sales) return undefined - return featured.map((asset) => { - const salesOfAsset = sales.filter( - (sale) => - sale.chainId === asset.chainId && - sale.collectionAddress === asset.collectionAddress && - sale.tokenId === asset.tokenId, - ) - return ( - - ) - }) - }, [featured, currencies, sales, reloadInfo]) - - if (!FEATURED_TOKEN.length) return null - if (!featuredAssets) - return ( - - - - - - - - - - - - - - - ) - if (featuredAssets.length === 0) return null - if (featuredAssets.length === 1) return
{featuredAssets}
+ if (FEATURED_TOKEN.length === 0) return null + if (FEATURED_TOKEN.length === 1) return
{featuredAssets}
return (
{featuredAssets} diff --git a/components/HomeSection/FeaturedToken.gql b/components/HomeSection/FeaturedToken.gql new file mode 100644 index 00000000..019e05da --- /dev/null +++ b/components/HomeSection/FeaturedToken.gql @@ -0,0 +1,126 @@ +query FetchFeaturedToken( + $chainId: Int! + $collectionAddress: Address! + $tokenId: String! + $now: Datetime! + $address: Address +) { + asset( + chainId: $chainId + collectionAddress: $collectionAddress + tokenId: $tokenId + ) { + id + chainId + collectionAddress + tokenId + name + collection { + chainId + address + name + standard + mintType + } + image + imageMimetype + animationUrl + animationMimetype + quantity + creator { + address + name + image + verification { + status + } + } + owned: ownership(ownerAddress: $address) { + quantity + } + bestBid { + unitPrice + amount + currency { + image + name + id + decimals + symbol + } + } + } + ownerships( + filter: { + chainId: { equalTo: $chainId } + collectionAddress: { equalTo: $collectionAddress } + tokenId: { equalTo: $tokenId } + } + orderBy: [ + QUANTITY_DESC + ACCOUNT_BY_OWNER_ADDRESS__NAME_ASC + OWNER_ADDRESS_ASC + ] + first: 5 + ) { + totalCount + nodes { + ownerAddress + quantity + owner { + address + name + image + verification { + status + } + } + } + } + sales: offerOpenSales( + orderBy: [UNIT_PRICE_IN_REF_ASC, CREATED_AT_ASC] + filter: { + chainId: { equalTo: $chainId } + collectionAddress: { equalTo: $collectionAddress } + tokenId: { equalTo: $tokenId } + expiredAt: { greaterThan: $now } + } # TODO: implement pagination. when implementing pagination, find a way to get availableQuantity of all sales + ) { + nodes { + id + chainId + collectionAddress + tokenId + unitPrice + availableQuantity + expiredAt + currency { + image + name + id + decimals + symbol + } + maker { + image + address + name + verification { + status + } + } + } + } + currencies( + orderBy: CREATED_AT_ASC + filter: { + chainId: { equalTo: $chainId } + address: { isNull: false } # keep only non-native currency. Cannot create bid with native currency. + } + ) { + nodes { + chainId + image + } + } +} diff --git a/components/HomeSection/FeaturedToken.tsx b/components/HomeSection/FeaturedToken.tsx new file mode 100644 index 00000000..ab2d3a34 --- /dev/null +++ b/components/HomeSection/FeaturedToken.tsx @@ -0,0 +1,139 @@ +import { + AspectRatio, + Box, + Flex, + Heading, + SimpleGrid, + Skeleton, + Stack, +} from '@chakra-ui/react' +import { FC, useCallback } from 'react' +import { useFetchFeaturedTokenQuery } from '../../graphql' +import useAccount from '../../hooks/useAccount' +import useCart from '../../hooks/useCart' +import useDetectAssetMedia from '../../hooks/useDetectAssetMedia' +import useHandleQueryError from '../../hooks/useHandleQueryError' +import Link from '../Link/Link' +import SaleDetail from '../Sales/Detail' +import SkeletonProperty from '../Skeleton/Property' +import TokenMedia from '../Token/Media' +import TokenMetadata from '../Token/Metadata' + +export type Props = { + date: Date + chainId: number + collectionAddress: string + tokenId: string +} + +const FeaturedToken: FC = ({ + date, + chainId, + collectionAddress, + tokenId, +}) => { + const { address } = useAccount() + + const fetchFeaturedTokenQuery = useFetchFeaturedTokenQuery({ + variables: { + chainId, + collectionAddress, + tokenId, + now: date, + address: address || '', + }, + }) + useHandleQueryError(fetchFeaturedTokenQuery) + const asset = fetchFeaturedTokenQuery.data?.asset + const sales = fetchFeaturedTokenQuery.data?.sales?.nodes + const currencies = fetchFeaturedTokenQuery.data?.currencies?.nodes + const ownerships = fetchFeaturedTokenQuery.data?.ownerships + + const media = useDetectAssetMedia(asset) + + const refresh = useCallback(async () => { + await fetchFeaturedTokenQuery.refetch({ + now: new Date(), + }) + }, [fetchFeaturedTokenQuery]) + + useCart({ onCheckout: fetchFeaturedTokenQuery.refetch }) + + return ( + + + + + {!asset ? ( + + ) : ( + + )} + + + + + + + {!asset ? ( + + ) : ( + + {asset.collection.name} + + )} + + + {!asset ? : asset.name} + + + + {!asset || !sales || !ownerships ? ( + + ) : ( + + )} + + {!asset || !sales || !currencies ? ( + <> + + + + ) : ( + + )} + + + ) +} + +export default FeaturedToken diff --git a/components/Token/Header.tsx b/components/Token/Header.tsx deleted file mode 100644 index c37a1439..00000000 --- a/components/Token/Header.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { - AspectRatio, - Box, - Flex, - Heading, - SimpleGrid, - Stack, -} from '@chakra-ui/react' -import { FC, useMemo } from 'react' -import { FetchFeaturedAssetsQuery } from '../../graphql' -import useDetectAssetMedia from '../../hooks/useDetectAssetMedia' -import Link from '../Link/Link' -import SaleDetail, { Props as SaleDetailProps } from '../Sales/Detail' -import TokenMedia from '../Token/Media' -import TokenMetadata, { Props as TokenMetadataProps } from '../Token/Metadata' - -export type Props = { - asset: NonNullable['nodes'][0] - sales: TokenMetadataProps['sales'] & SaleDetailProps['sales'] - currencies: { - chainId: number - image: string - }[] - isHomepage: boolean - onOfferCanceled: (id: string) => Promise -} - -const TokenHeader: FC = ({ - asset, - sales, - currencies, - isHomepage, - onOfferCanceled, -}) => { - const media = useDetectAssetMedia(asset) - - const chainCurrencies = useMemo( - () => - currencies.filter( - (currency) => currency.chainId === asset.collection.chainId, - ), - [currencies, asset], - ) - - return ( - - - - - - - - - - - {asset.collection.name && ( - - - {asset.collection.name} - - - )} - - {asset.name} - - - - - - - ) -} - -export default TokenHeader diff --git a/pages/tokens/[id]/index.gql b/pages/tokens/[id]/index.gql index f363a2ea..e748aa3c 100644 --- a/pages/tokens/[id]/index.gql +++ b/pages/tokens/[id]/index.gql @@ -152,7 +152,10 @@ query FetchAsset( } currencies( orderBy: CREATED_AT_ASC - filter: { chainId: { equalTo: $chainId }, address: { isNull: false } } + filter: { + chainId: { equalTo: $chainId } + address: { isNull: false } # keep only non-native currency. Cannot create bid with native currency. + } ) { nodes { id diff --git a/pages/tokens/[id]/index.tsx b/pages/tokens/[id]/index.tsx index a56b893c..398c71c6 100644 --- a/pages/tokens/[id]/index.tsx +++ b/pages/tokens/[id]/index.tsx @@ -85,8 +85,9 @@ const DetailPage: NextPage = ({ now: nowProp }) => { }, }) const asset = data?.asset - const sales = data?.sales - const bids = data?.bids + const sales = data?.sales?.nodes + const bids = data?.bids?.nodes + const currencies = data?.currencies?.nodes const ownerships = data?.ownerships const media = useDetectAssetMedia(asset) @@ -233,11 +234,12 @@ const DetailPage: NextPage = ({ now: nowProp }) => { ) : ( )} - {!asset || !sales || !data?.currencies?.nodes ? ( + + {!asset || !sales || !currencies ? ( <> @@ -245,8 +247,8 @@ const DetailPage: NextPage = ({ now: nowProp }) => { ) : ( @@ -391,7 +393,7 @@ const DetailPage: NextPage = ({ now: nowProp }) => { {(!query.filter || query.filter === AssetTabs.bids) && (