From 7c9fe506ea4f90c71d1dc9c5e0ff8c4c3f9ec295 Mon Sep 17 00:00:00 2001
From: Nicolas Mahe <nicolas@mahe.me>
Date: Fri, 2 Feb 2024 12:38:11 +0700
Subject: [PATCH] Flatten `ownerships` in `fetchAsset` query

---
 components/Token/Header.tsx       |  6 ++++-
 components/Token/Metadata.tsx     | 38 +++++++++++++--------------
 components/Token/Owners/Modal.tsx | 39 +++++++++++++---------------
 pages/tokens/[id]/index.gql       | 43 +++++++++++++++++--------------
 pages/tokens/[id]/index.tsx       |  9 +++++--
 5 files changed, 73 insertions(+), 62 deletions(-)

diff --git a/components/Token/Header.tsx b/components/Token/Header.tsx
index c5cafeac..62183f4c 100644
--- a/components/Token/Header.tsx
+++ b/components/Token/Header.tsx
@@ -84,7 +84,11 @@ const TokenHeader: FC<Props> = ({
             {asset.name}
           </Heading>
         </Stack>
-        <TokenMetadata asset={asset} sales={asset.sales} />
+        <TokenMetadata
+          asset={asset}
+          sales={asset.sales}
+          ownerships={asset.ownerships}
+        />
         <SaleDetail
           asset={asset}
           sales={asset.sales}
diff --git a/components/Token/Metadata.tsx b/components/Token/Metadata.tsx
index fffdb1bd..19acb38b 100644
--- a/components/Token/Metadata.tsx
+++ b/components/Token/Metadata.tsx
@@ -26,35 +26,35 @@ export type Props = {
         status: AccountVerificationStatus
       } | null
     }
-    ownerships: {
-      totalCount: number
-      nodes: {
-        ownerAddress: string
-        quantity: string
-        owner: {
-          address: string
-          name: string | null
-          image: string | null
-          verification: {
-            status: AccountVerificationStatus
-          } | null
-        }
-      }[]
-    }
+  }
+  ownerships: {
+    totalCount: number
+    nodes: {
+      ownerAddress: string
+      quantity: string
+      owner: {
+        address: string
+        name: string | null
+        image: string | null
+        verification: {
+          status: AccountVerificationStatus
+        } | null
+      }
+    }[]
   }
   sales: {
     totalAvailableQuantitySum: string
   }
 }
 
-const TokenMetadata: FC<Props> = ({ asset, sales }) => {
+const TokenMetadata: FC<Props> = ({ asset, sales, ownerships }) => {
   const { t } = useTranslation('components')
 
   const isOpenCollection = asset.collection.mintType === 'PUBLIC'
-  const numberOfOwners = asset.ownerships.totalCount
+  const numberOfOwners = ownerships.totalCount
   const saleSupply = BigNumber.from(sales.totalAvailableQuantitySum)
   const totalSupply = BigNumber.from(asset.quantity)
-  const owners = asset.ownerships.nodes
+  const owners = ownerships.nodes
 
   return (
     <Flex wrap="wrap" rowGap={6} columnGap={8}>
@@ -81,7 +81,7 @@ const TokenMetadata: FC<Props> = ({ asset, sales }) => {
           <Heading as="h5" variant="heading3" color="gray.500">
             {t('token.metadata.owners')}
           </Heading>
-          <OwnersModal asset={asset} />
+          <OwnersModal asset={asset} ownerships={ownerships} />
         </Stack>
       )}
       {asset.collection.standard === 'ERC721' && (
diff --git a/components/Token/Owners/Modal.tsx b/components/Token/Owners/Modal.tsx
index 399203e3..2e6ed96b 100644
--- a/components/Token/Owners/Modal.tsx
+++ b/components/Token/Owners/Modal.tsx
@@ -29,27 +29,27 @@ export type Props = {
     chainId: number
     collectionAddress: string
     tokenId: string
-    ownerships: {
-      totalCount: number
-      nodes: {
-        ownerAddress: string
-        quantity: string
-        owner: {
-          address: string
-          name: string | null
-          image: string | null
-          verification: {
-            status: AccountVerificationStatus
-          } | null
-        }
-      }[]
-    }
+  }
+  ownerships: {
+    totalCount: number
+    nodes: {
+      ownerAddress: string
+      quantity: string
+      owner: {
+        address: string
+        name: string | null
+        image: string | null
+        verification: {
+          status: AccountVerificationStatus
+        } | null
+      }
+    }[]
   }
 }
 
 const OwnerPaginationLimit = 8
 
-const OwnersModal: FC<Props> = ({ asset }) => {
+const OwnersModal: FC<Props> = ({ asset, ownerships }) => {
   const { t } = useTranslation('components')
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [page, setPage] = useState(1)
@@ -76,10 +76,7 @@ const OwnersModal: FC<Props> = ({ asset }) => {
 
   return (
     <>
-      <OwnersModalActivator
-        ownerships={asset.ownerships}
-        onClick={openOwners}
-      />
+      <OwnersModalActivator ownerships={ownerships} onClick={openOwners} />
       <Modal
         isOpen={isOpen}
         onClose={closeOwners}
@@ -103,7 +100,7 @@ const OwnersModal: FC<Props> = ({ asset }) => {
                 px={2.5}
               >
                 <Text as="span" variant="caption" color="brand.500">
-                  {asset.ownerships.totalCount}
+                  {ownerships.totalCount}
                 </Text>
               </Flex>
             </Flex>
diff --git a/pages/tokens/[id]/index.gql b/pages/tokens/[id]/index.gql
index 99b67003..03971762 100644
--- a/pages/tokens/[id]/index.gql
+++ b/pages/tokens/[id]/index.gql
@@ -54,25 +54,30 @@ query FetchAsset(
     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
-          }
+  }
+  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
         }
       }
     }
diff --git a/pages/tokens/[id]/index.tsx b/pages/tokens/[id]/index.tsx
index 36df4895..7b9d52e6 100644
--- a/pages/tokens/[id]/index.tsx
+++ b/pages/tokens/[id]/index.tsx
@@ -87,6 +87,7 @@ const DetailPage: NextPage<Props> = ({ now: nowProp }) => {
   const asset = data?.asset
   const sales = data?.sales
   const bids = data?.bids
+  const ownerships = data?.ownerships
 
   const media = useDetectAssetMedia(asset)
 
@@ -227,10 +228,14 @@ const DetailPage: NextPage<Props> = ({ now: nowProp }) => {
             )}
           </Flex>
 
-          {!asset || !sales ? (
+          {!asset || !sales || !ownerships ? (
             <SkeletonProperty items={3} />
           ) : (
-            <TokenMetadata asset={asset} sales={sales} />
+            <TokenMetadata
+              asset={asset}
+              sales={sales}
+              ownerships={ownerships}
+            />
           )}
           {!asset || !sales || !data?.currencies?.nodes ? (
             <>