liteflow-labs · NicolasMahe · Feb 5, 2024 · Feb 2, 2024 · Feb 3, 2024
diff --git a/components/Cart/CartDrawerListItem.tsx b/components/Cart/CartDrawerListItem.tsx
@@ -23,7 +23,9 @@ type Props = {
       symbol: string
     }
     asset: {
-      id: string
+      chainId: number
+      collectionAddress: string
+      tokenId: string
       image: string
       name: string
       collection: {
@@ -47,7 +49,9 @@ const CartDrawerListItem: FC<Props> = ({ offer }) => {
   return (
     <ListItem
       image={
-        <Link href={`/tokens/${offer.asset.id}`}>
+        <Link
+          href={`/tokens/${offer.asset.chainId}-${offer.asset.collectionAddress}-${offer.asset.tokenId}`}
+        >
           <Image
             src={offer.asset.image}
             alt={offer.asset.name}
@@ -62,7 +66,7 @@ const CartDrawerListItem: FC<Props> = ({ offer }) => {
       label={
         <Text
           as={Link}
-          href={`/tokens/${offer.asset.id}`}
+          href={`/tokens/${offer.asset.chainId}-${offer.asset.collectionAddress}-${offer.asset.tokenId}`}
           variant="subtitle2"
           color="gray.800"
           title={offer.asset.name}

diff --git a/components/Cart/Step/Selection.gql b/components/Cart/Step/Selection.gql
@@ -21,7 +21,6 @@ query FetchCartItems($offerIds: [UUID!]!) {
         symbol
       }
       asset {
-        id
         chainId
         collectionAddress
         tokenId

diff --git a/components/HomeSection/Assets.gql b/components/HomeSection/Assets.gql
@@ -5,21 +5,19 @@ query FetchDefaultAssetIds($limit: Int!) {
     first: $limit
   ) {
     nodes {
-      id
       chainId
       collectionAddress
       tokenId
     }
   }
 }
 
-query FetchAssets($limit: Int!, $assetIds: [String!]!, $address: Address) {
+query FetchAssets($limit: Int!, $filter: [AssetFilter!]!, $address: Address) {
   assets(
-    filter: { quantity: { greaterThan: "0" }, id: { in: $assetIds } }
+    filter: { quantity: { greaterThan: "0" }, and: $filter }
     first: $limit
   ) {
     nodes {
-      id
       chainId
       collectionAddress
       tokenId

diff --git a/components/HomeSection/Assets.tsx b/components/HomeSection/Assets.tsx
@@ -11,7 +11,9 @@ import {
 import { HiArrowNarrowRight } from '@react-icons/all-files/hi/HiArrowNarrowRight'
 import useTranslation from 'next-translate/useTranslation'
 import { FC, useMemo } from 'react'
+import invariant from 'ts-invariant'
 import {
+  AssetFilter,
   useFetchAssetsQuery,
   useFetchDefaultAssetIdsQuery,
 } from '../../graphql'
@@ -57,24 +59,40 @@ const AssetsHomeSection: FC<Props> = ({ date }) => {
       }
       return randomTokens
     }
-    return defaultAssetData?.assets?.nodes.map((x) => x.id)
+    return defaultAssetData?.assets?.nodes.map(
+      (x) => `${x.chainId}-${x.collectionAddress}-${x.tokenId}`,
+    )
   }, [HOME_TOKENS, PAGINATION_LIMIT, defaultAssetData, date])
 
   const assetsQuery = useFetchAssetsQuery({
     variables: {
       limit: PAGINATION_LIMIT,
-      assetIds: assetIds || [],
+      filter: {
+        or: (assetIds || [])
+          .map((x) => x.split('-'))
+          .map(([chainId, collectionAddress, tokenId]) => {
+            invariant(
+              chainId !== undefined &&
+                collectionAddress !== undefined &&
+                tokenId !== undefined,
+              'invalid collection',
+            )
+            return {
+              collectionAddress: { equalTo: collectionAddress.toLowerCase() },
+              chainId: { equalTo: parseInt(chainId, 10) },
+              tokenId: { equalTo: tokenId },
+            }
+          }),
+      } as AssetFilter,
       address: address || '',
     },
     skip: assetIds === undefined,
   })
   useHandleQueryError(assetsQuery)
   const assetData = assetsQuery.data
 
-  const assets = useOrderByKey(
-    assetIds,
-    assetData?.assets?.nodes,
-    (asset) => asset.id,
+  const assets = useOrderByKey(assetIds, assetData?.assets?.nodes, (asset) =>
+    [asset.chainId, asset.collectionAddress, asset.tokenId].join('-'),
   )
 
   if (!assets)

diff --git a/components/HomeSection/Featured.tsx b/components/HomeSection/Featured.tsx
@@ -26,7 +26,7 @@ const FeaturedHomeSection: FC<Props> = ({ date }) => {
             <TokenHeader
               key={index}
               chainId={parseInt(chainId, 10)}
-              collectionAddress={collectionAddress}
+              collectionAddress={collectionAddress.toLowerCase()}
               tokenId={tokenId}
               date={date}
             />

diff --git a/components/HomeSection/FeaturedToken.gql b/components/HomeSection/FeaturedToken.gql
@@ -10,7 +10,6 @@ query FetchFeaturedToken(
     collectionAddress: $collectionAddress
     tokenId: $tokenId
   ) {
-    id
     chainId
     collectionAddress
     tokenId

diff --git a/components/HomeSection/FeaturedToken.tsx b/components/HomeSection/FeaturedToken.tsx
@@ -64,7 +64,7 @@ const FeaturedToken: FC<Props> = ({
       <Box my="auto" p={{ base: 6, md: 12 }} textAlign="center">
         <Flex
           as={Link}
-          href={`/tokens/${asset?.id}`}
+          href={`/tokens/${asset?.chainId}-${asset?.collection.address}-${asset?.tokenId}`}
           condition={!!asset}
           mx="auto"
           maxH="sm"

diff --git a/components/Sales/Detail.tsx b/components/Sales/Detail.tsx
@@ -10,10 +10,11 @@ import SaleAction from './SaleAction'
 
 export type Props = {
   asset: {
-    id: string
+    chainId: number
+    collectionAddress: string
+    tokenId: string
     quantity: string
     collection: {
-      chainId: number
       standard: Standard
     }
     owned: {
@@ -80,8 +81,7 @@ const SaleDetail: FC<Props> = ({
         <>
           <SaleDirectSummary sales={directSales} isSingle={isSingle} />
           <SaleDirectButton
-            assetId={asset.id}
-            chainId={asset.collection.chainId}
+            asset={asset}
             sales={directSales}
             isHomepage={isHomepage}
             ownAllSupply={ownAllSupply}
@@ -92,17 +92,13 @@ const SaleDetail: FC<Props> = ({
         <>
           <SaleOpenSummary currencies={currencies} />
           <SaleOpenButton
-            assetId={asset.id}
+            asset={asset}
             isHomepage={isHomepage}
             ownAllSupply={ownAllSupply}
           />
         </>
       )}
-      <SaleAction
-        assetId={asset.id}
-        isHomepage={isHomepage}
-        isOwner={isOwner}
-      />
+      <SaleAction asset={asset} isHomepage={isHomepage} isOwner={isOwner} />
     </Stack>
   )
 }

diff --git a/components/Sales/Direct/Button.tsx b/components/Sales/Direct/Button.tsx
@@ -15,17 +15,19 @@ import type { Props as ModalProps } from './Modal'
 import SaleDirectModal from './Modal'
 
 export type Props = {
-  assetId: string
-  chainId: number
+  asset: {
+    chainId: number
+    collectionAddress: string
+    tokenId: string
+  }
   isHomepage: boolean
   sales: ModalProps['sales']
   ownAllSupply: boolean
   onOfferCanceled: (id: string) => Promise<void>
 }
 
 const SaleDirectButton: FC<Props> = ({
-  assetId,
-  chainId,
+  asset,
   isHomepage,
   sales,
   ownAllSupply,
@@ -36,7 +38,7 @@ const SaleDirectButton: FC<Props> = ({
   const [cancelOffer, { activeStep, transactionHash }] = useCancelOffer(signer)
   const toast = useToast()
   const { address } = useAccount()
-  const blockExplorer = useBlockExplorer(chainId)
+  const blockExplorer = useBlockExplorer(asset.chainId)
   const { isOpen, onOpen, onClose } = useDisclosure()
 
   const handleCancel = useCallback(
@@ -69,7 +71,7 @@ const SaleDirectButton: FC<Props> = ({
     return (
       <>
         <ConnectButtonWithNetworkSwitch
-          chainId={chainId}
+          chainId={asset.chainId}
           onClick={() => handleCancel(sale.id)}
           isLoading={activeStep !== CancelOfferStep.INITIAL}
           width="full"
@@ -94,8 +96,8 @@ const SaleDirectButton: FC<Props> = ({
   }, [
     activeStep,
     address,
+    asset.chainId,
     blockExplorer,
-    chainId,
     handleCancel,
     isOpen,
     onClose,
@@ -109,7 +111,7 @@ const SaleDirectButton: FC<Props> = ({
     return (
       <Button
         as={Link}
-        href={`/tokens/${assetId}/bid`}
+        href={`/tokens/${asset.chainId}-${asset.collectionAddress}-${asset.tokenId}/bid`}
         variant={cancel ? 'solid' : 'outline'}
         colorScheme={cancel ? undefined : 'gray'}
         size="lg"
@@ -120,7 +122,7 @@ const SaleDirectButton: FC<Props> = ({
         </Text>
       </Button>
     )
-  }, [assetId, cancel, ownAllSupply, t])
+  }, [asset, cancel, ownAllSupply, t])
 
   const buyNow = useMemo(() => {
     if (sales.length !== 1) return
@@ -141,18 +143,18 @@ const SaleDirectButton: FC<Props> = ({
     if (sales.length <= 1) return
     return (
       <SaleDirectModal
-        chainId={chainId}
+        chainId={asset.chainId}
         sales={sales}
         onOfferCanceled={onOfferCanceled}
       />
     )
-  }, [chainId, sales, onOfferCanceled])
+  }, [asset.chainId, sales, onOfferCanceled])
 
   if (ownAllSupply && isHomepage)
     return (
       <Button
         as={Link}
-        href={`/tokens/${assetId}`}
+        href={`/tokens/${asset.chainId}-${asset.collectionAddress}-${asset.tokenId}`}
         variant="outline"
         colorScheme="gray"
         bgColor="white"

diff --git a/components/Sales/Open/Button.tsx b/components/Sales/Open/Button.tsx
@@ -5,19 +5,23 @@ import { FC } from 'react'
 import Link from '../../Link/Link'
 
 type Props = {
-  assetId: string
+  asset: {
+    chainId: number
+    collectionAddress: string
+    tokenId: string
+  }
   isHomepage: boolean
   ownAllSupply: boolean
 }
 
-const SaleOpenButton: FC<Props> = ({ assetId, isHomepage, ownAllSupply }) => {
+const SaleOpenButton: FC<Props> = ({ asset, isHomepage, ownAllSupply }) => {
   const { t } = useTranslation('components')
 
   if (ownAllSupply && isHomepage)
     return (
       <Button
         as={Link}
-        href={`/tokens/${assetId}`}
+        href={`/tokens/${asset.chainId}-${asset.collectionAddress}-${asset.tokenId}`}
         variant="outline"
         colorScheme="gray"
         bgColor="white"
@@ -34,7 +38,12 @@ const SaleOpenButton: FC<Props> = ({ assetId, isHomepage, ownAllSupply }) => {
   if (ownAllSupply) return null
 
   return (
-    <Button as={Link} href={`/tokens/${assetId}/bid`} size="lg" width="full">
+    <Button
+      as={Link}
+      href={`/tokens/${asset.chainId}-${asset.collectionAddress}-${asset.tokenId}/bid`}
+      size="lg"
+      width="full"
+    >
       <Text as="span" isTruncated>
         {t('sales.open.button.place-bid')}
       </Text>

diff --git a/components/Sales/Open/CardFooter.tsx b/components/Sales/Open/CardFooter.tsx
@@ -5,7 +5,11 @@ import Link from '../../Link/Link'
 import Price from '../../Price/Price'
 
 type Props = {
-  assetId: string
+  asset: {
+    chainId: number
+    collectionAddress: string
+    tokenId: string
+  }
   bestBid: {
     unitPrice: string
     currency: {
@@ -18,7 +22,7 @@ type Props = {
 }
 
 const SaleOpenCardFooter: FC<HTMLAttributes<any> & Props> = ({
-  assetId,
+  asset,
   bestBid,
   isOwner,
   showButton = true,
@@ -28,7 +32,7 @@ const SaleOpenCardFooter: FC<HTMLAttributes<any> & Props> = ({
   return (
     <Box
       as={Link}
-      href={`/tokens/${assetId}${!isOwner ? '/bid' : ''}`}
+      href={`/tokens/${asset.chainId}-${asset.collectionAddress}-${asset.tokenId}${!isOwner ? '/bid' : ''}`}
       py={2}
       px={4}
       bgColor={showButton ? 'brand.500' : 'gray.100'}

diff --git a/components/Sales/SaleAction.tsx b/components/Sales/SaleAction.tsx
@@ -6,18 +6,25 @@ import Link from 'next/link'
 import { FC } from 'react'
 
 type Props = {
-  assetId: string
+  asset: {
+    chainId: number
+    collectionAddress: string
+    tokenId: string
+  }
   isOwner: boolean
   isHomepage: boolean
 }
 
-const SaleAction: FC<Props> = ({ assetId, isOwner, isHomepage }) => {
+const SaleAction: FC<Props> = ({ asset, isOwner, isHomepage }) => {
   const { t } = useTranslation('components')
   if (!isOwner) return null
   if (isHomepage) return null
 
   return (
-    <Link href={`/tokens/${assetId}/offer`} passHref>
+    <Link
+      href={`/tokens/${asset.chainId}-${asset.collectionAddress}-${asset.tokenId}/offer`}
+      passHref
+    >
       <Flex
         gap={6}
         align={{