Replace asset id

liteflow-labs · Feb 2, 2024 · c48e592 · c48e592
1 parent 56e7b6c
commit c48e592
Show file tree

Hide file tree

Showing 35 changed files with 166 additions and 84 deletions.
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,7 +10,9 @@ import SaleAction from './SaleAction'
 
 export type Props = {
   asset: {
-    id: string
+    chainId: number
+    collectionAddress: string
+    tokenId: string
     quantity: string
     collection: {
       chainId: number
@@ -80,7 +82,7 @@ const SaleDetail: FC<Props> = ({
         <>
           <SaleDirectSummary sales={directSales} isSingle={isSingle} />
           <SaleDirectButton
-            assetId={asset.id}
+            asset={asset}
             chainId={asset.collection.chainId}
             sales={directSales}
             isHomepage={isHomepage}
@@ -92,17 +94,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,7 +15,11 @@ import type { Props as ModalProps } from './Modal'
 import SaleDirectModal from './Modal'
 
 export type Props = {
-  assetId: string
+  asset: {
+    chainId: number
+    collectionAddress: string
+    tokenId: string
+  }
   chainId: number
   isHomepage: boolean
   sales: ModalProps['sales']
@@ -24,7 +28,7 @@ export type Props = {
 }
 
 const SaleDirectButton: FC<Props> = ({
-  assetId,
+  asset,
   chainId,
   isHomepage,
   sales,
@@ -109,7 +113,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 +124,7 @@ const SaleDirectButton: FC<Props> = ({
         </Text>
       </Button>
     )
-  }, [assetId, cancel, ownAllSupply, t])
+  }, [asset, cancel, ownAllSupply, t])
 
   const buyNow = useMemo(() => {
     if (sales.length !== 1) return
@@ -152,7 +156,7 @@ const SaleDirectButton: FC<Props> = ({
     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={{

diff --git a/components/Token/Card.tsx b/components/Token/Card.tsx
@@ -28,7 +28,9 @@ import TokenMedia from './Media'
 
 export type Props = {
   asset: {
-    id: string
+    chainId: number
+    collectionAddress: string
+    tokenId: string
     name: string
     collection: {
       address: string
@@ -106,14 +108,14 @@ const TokenCard: FC<Props> = ({ asset }) => {
       )
     return (
       <SaleOpenCardFooter
-        assetId={asset.id}
+        asset={asset}
         bestBid={bestBid}
         isOwner={isOwner}
         showButton={isHovered}
       />
     )
   }, [
-    asset.id,
+    asset,
     bestBid,
     hasMultiCurrency,
     isHovered,
@@ -139,7 +141,7 @@ const TokenCard: FC<Props> = ({ asset }) => {
     >
       <Flex
         as={Link}
-        href={`/tokens/${asset.id}`}
+        href={`/tokens/${asset.chainId}-${asset.collectionAddress}-${asset.tokenId}`}
         w="full"
         position="relative"
         bg="gray.100"
@@ -217,7 +219,9 @@ const TokenCard: FC<Props> = ({ asset }) => {
               {asset.collection.name}
             </Text>
           </Link>
-          <Link href={`/tokens/${asset.id}`}>
+          <Link
+            href={`/tokens/${asset.chainId}-${asset.collectionAddress}-${asset.tokenId}`}
+          >
             <Heading
               as="h4"
               variant="heading2"
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,7 +21,6 @@ query FetchCartItems($offerIds: [UUID!]!) { @@
             symbol
           }
           asset {
-            id
             chainId
             collectionAddress
             tokenId
@@ Expand Down @@