[BX-1123] NFT Details - Owners + Distinct Owners (#1153)

rainbow-me · Nov 27, 2023 · 0b3528c · 0b3528c
1 parent cc28933
commit 0b3528c
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 15 deletions.
diff --git a/src/core/resources/nfts/nfts.ts b/src/core/resources/nfts/nfts.ts
@@ -86,12 +86,39 @@ async function nftsQueryFunction({
       }
     },
   );
+  const collectionOwnerMap: Record<
+    string,
+    {
+      distinct_nft_count: number;
+      distinct_owner_count: number;
+      total_quantity: number;
+    }
+  > = {};
   const collectionIds = filteredCollections
     .filter((c) => c.collection_id)
-    .map((c) => c.collection_id);
+    .map((c) => {
+      collectionOwnerMap[c.collection_id] = {
+        distinct_nft_count: c.collection_details.distinct_nft_count,
+        distinct_owner_count: c.collection_details.distinct_owner_count,
+        total_quantity: c.collection_details.total_quantity,
+      };
+      return c.collection_id;
+    });
   const nftsResponse = await fetchNfts({ address, chains, collectionIds });
-  const nfts = filterSimpleHashNFTs(nftsResponse, polygonAllowList).map((nft) =>
-    simpleHashNFTToUniqueAsset(nft),
+  const nfts = filterSimpleHashNFTs(nftsResponse, polygonAllowList).map(
+    (nft) => {
+      const uniqueAsset = simpleHashNFTToUniqueAsset(nft);
+      const collectionOwnersData =
+        collectionOwnerMap[nft.collection.collection_id || ''];
+      if (collectionOwnersData) {
+        return {
+          ...uniqueAsset,
+          collection: { ...uniqueAsset.collection, ...collectionOwnersData },
+        };
+      } else {
+        return uniqueAsset;
+      }
+    },
   );
   return {
     nfts,

diff --git a/src/core/types/nfts.ts b/src/core/types/nfts.ts
@@ -101,8 +101,6 @@ export type SimpleHashCollection = {
 
 export interface SimpleHashCollectionDetails {
   collection_id: string;
-  distinct_nft_count: number;
-  distinct_owner_count: number;
   total_copies_owned?: number;
   total_copies_owned_string?: string;
   last_acquired_date?: string;
@@ -113,6 +111,8 @@ export interface SimpleHashCollectionDetails {
     chains: string[];
     description: string;
     discord_url: string;
+    distinct_nft_count: number;
+    distinct_owner_count: number;
     external_url: string;
     floor_prices: SimpleHashFloorPrice[];
     image_url: string;
@@ -293,6 +293,9 @@ export interface UniqueAsset {
     collection_id?: string | null;
     description?: string | null;
     discord_url?: string | null;
+    total_quantity?: number | null;
+    distinct_nft_count?: number | null;
+    distinct_owner_count?: number | null;
     external_url?: string | null;
     featured_image_url?: string | null;
     hidden?: boolean | null;

diff --git a/src/design-system/styles/designTokens.ts b/src/design-system/styles/designTokens.ts
@@ -1030,6 +1030,7 @@ export const symbolNames = selectSymbolNames(
   'arrow.up.right.square.fill',
   'at.circle.fill',
   'ellipsis.bubble.fill',
+  'percent',
 );
 export type SymbolName = (typeof symbolNames)[number];
 

diff --git a/src/design-system/symbols/generated/index.ts b/src/design-system/symbols/generated/index.ts
@@ -4508,4 +4508,31 @@ export default {
       viewBox: { width: 32.224609375, height: 30.4609375 },
     },
   },
+  percent: {
+    regular: {
+      name: 'percent',
+      path: 'M3.7437 25.9547C4.2537 26.2447 4.9937 26.2047 5.4237 25.5747L21.4937 1.8247C21.9737 1.1447 21.6837 0.4447 21.1737 0.1447C20.7037 -0.1153 20.0337 -0.0653 19.5537 0.6247L3.4837 24.3047C2.9937 24.9947 3.2437 25.6547 3.7437 25.9547ZM4.7337 12.7447C7.6737 12.7447 9.4437 10.3247 9.4437 6.4747C9.4437 2.6147 7.6537 0.2347 4.7337 0.2347C1.7937 0.2347 0.0037 2.6347 0.0037 6.4747C0.0037 10.3447 1.7737 12.7447 4.7337 12.7447ZM4.7337 10.8347C3.1437 10.8347 2.2037 9.2347 2.2037 6.4747C2.2037 3.7547 3.1537 2.1447 4.7337 2.1447C6.3037 2.1447 7.2437 3.7347 7.2437 6.4747C7.2437 9.2347 6.3137 10.8347 4.7337 10.8347ZM20.2637 25.9047C23.2037 25.9047 24.9737 23.4847 24.9737 19.6447C24.9737 15.7747 23.1837 13.3947 20.2637 13.3947C17.3237 13.3947 15.5337 15.7847 15.5337 19.6447C15.5337 23.4947 17.3037 25.9047 20.2637 25.9047ZM20.2637 24.0047C18.6737 24.0047 17.7337 22.3847 17.7337 19.6447C17.7337 16.9047 18.6937 15.3047 20.2637 15.3047C21.8337 15.3047 22.7737 16.8947 22.7737 19.6447C22.7737 22.3847 21.8437 24.0047 20.2637 24.0047Z',
+      viewBox: { width: 24.978515625, height: 26.127119618484947 },
+    },
+    medium: {
+      name: 'percent',
+      path: 'M4.5237 25.9391C5.1237 26.2891 5.9737 26.1991 6.4537 25.5091L22.2137 2.1291C22.7337 1.3591 22.4637 0.5291 21.8337 0.1691C21.2637 -0.1609 20.4837 -0.0309 19.9637 0.7091L4.2137 24.0291C3.6737 24.8091 3.9137 25.5891 4.5237 25.9391ZM5.0137 13.0491C8.1337 13.0491 10.0337 10.5791 10.0337 6.6091C10.0337 2.6191 8.1037 0.2091 5.0137 0.2091C1.9237 0.2091 0.0037 2.6291 0.0037 6.6091C0.0037 10.5891 1.9137 13.0491 5.0137 13.0491ZM5.0137 10.8191C3.5237 10.8191 2.6637 9.3091 2.6637 6.6091C2.6637 3.9491 3.5237 2.4391 5.0137 2.4391C6.5037 2.4391 7.3737 3.9291 7.3737 6.6091C7.3737 9.3091 6.5037 10.8191 5.0137 10.8191ZM21.3937 25.9591C24.5037 25.9591 26.4037 23.4791 26.4037 19.5191C26.4037 15.5291 24.4837 13.1191 21.3937 13.1191C18.2937 13.1191 16.3837 15.5391 16.3837 19.5191C16.3837 23.4991 18.2837 25.9591 21.3937 25.9591ZM21.3937 23.7291C19.8937 23.7291 19.0437 22.2091 19.0437 19.5191C19.0437 16.8491 19.9037 15.3491 21.3937 15.3491C22.8737 15.3491 23.7337 16.8391 23.7337 19.5191C23.7337 22.2091 22.8837 23.7291 21.3937 23.7291Z',
+      viewBox: { width: 26.400390625, height: 26.138904257493387 },
+    },
+    semibold: {
+      name: 'percent',
+      path: 'M5.1237 25.9352C5.7937 26.3152 6.7437 26.2052 7.2437 25.4552L22.7637 2.3352C23.3237 1.5152 23.0537 0.6052 22.3437 0.1952C21.6937 -0.1748 20.8337 -0.0248 20.2937 0.7652L4.7537 23.8052C4.1937 24.6552 4.4337 25.5252 5.1237 25.9352ZM5.2337 13.2652C8.4737 13.2652 10.4837 10.7552 10.4837 6.7152C10.4837 2.6252 8.4637 0.1952 5.2337 0.1952C2.0237 0.1952 0.0037 2.6352 0.0037 6.7152C0.0037 10.7752 2.0137 13.2652 5.2337 13.2652ZM5.2337 10.8052C3.8137 10.8052 3.0237 9.3552 3.0237 6.7152C3.0237 4.1052 3.8237 2.6552 5.2337 2.6552C6.6537 2.6552 7.4637 4.0852 7.4637 6.7152C7.4637 9.3552 6.6737 10.8052 5.2337 10.8052ZM22.2537 25.9752C25.4937 25.9752 27.4937 23.4752 27.4937 19.4152C27.4937 15.3352 25.4837 12.9052 22.2537 12.9052C19.0437 12.9052 17.0237 15.3552 17.0237 19.4252C17.0237 23.4852 19.0337 25.9752 22.2537 25.9752ZM22.2537 23.5152C20.8337 23.5152 20.0437 22.0652 20.0437 19.4252C20.0437 16.8152 20.8337 15.3652 22.2537 15.3652C23.6837 15.3652 24.4837 16.8052 24.4837 19.4252C24.4837 22.0652 23.6837 23.5152 22.2537 23.5152Z',
+      viewBox: { width: 27.494140625, height: 26.15082614304101 },
+    },
+    bold: {
+      name: 'percent',
+      path: 'M5.9037 25.9163C6.6737 26.3663 7.7337 26.2063 8.2837 25.3863L23.4837 2.6363C24.0937 1.7363 23.8337 0.6763 23.0137 0.2163C22.2537 -0.2037 21.2837 -0.0137 20.7037 0.8563L5.4937 23.5263C4.8837 24.4463 5.1037 25.4363 5.9037 25.9163ZM5.5337 13.5563C8.9437 13.5563 11.0737 11.0063 11.0737 6.8363C11.0737 2.6363 8.9137 0.1763 5.5337 0.1763C2.1637 0.1763 0.0037 2.6463 0.0037 6.8463C0.0037 11.0263 2.1337 13.5563 5.5337 13.5563ZM5.5337 10.7863C4.1937 10.7863 3.4837 9.4163 3.4837 6.8463C3.4837 4.3063 4.2137 2.9463 5.5337 2.9463C6.8637 2.9463 7.5837 4.2863 7.5837 6.8463C7.5837 9.4163 6.8637 10.7863 5.5337 10.7863ZM23.4037 26.0263C26.8137 26.0263 28.9437 23.4763 28.9437 19.3063C28.9437 15.0863 26.7837 12.6263 23.4037 12.6263C20.0337 12.6263 17.8737 15.1063 17.8737 19.3063C17.8737 23.4863 20.0037 26.0263 23.4037 26.0263ZM23.4037 23.2563C22.0637 23.2563 21.3537 21.8863 21.3537 19.3063C21.3537 16.7563 22.0837 15.4063 23.4037 15.4063C24.7337 15.4063 25.4537 16.7463 25.4537 19.3063C25.4537 21.8863 24.7337 23.2563 23.4037 23.2563Z',
+      viewBox: { width: 28.943359375, height: 26.165545366983142 },
+    },
+    heavy: {
+      name: 'percent',
+      path: 'M7.0537 25.8919C7.9537 26.4319 9.1737 26.2219 9.7937 25.2919L24.5437 3.0619C25.2137 2.0519 24.9537 0.8019 23.9837 0.2619C23.0737 -0.2581 21.9537 0.0119 21.3137 0.9719L6.5637 23.1219C5.8637 24.1419 6.0837 25.3219 7.0537 25.8919ZM5.9637 14.0019C9.6137 14.0019 11.9237 11.3619 11.9237 7.0219C11.9237 2.6519 9.5837 0.1319 5.9637 0.1319C2.3537 0.1319 0.0037 2.6519 0.0037 7.0419C0.0037 11.3919 2.3237 14.0019 5.9637 14.0019ZM5.9637 10.7619C4.7537 10.7619 4.1537 9.5119 4.1537 7.0419C4.1537 4.5919 4.7737 3.3619 5.9637 3.3619C7.1637 3.3619 7.7637 4.5819 7.7637 7.0419C7.7637 9.5119 7.1637 10.7619 5.9637 10.7619ZM25.0637 26.0819C28.7237 26.0819 31.0237 23.4619 31.0237 19.1119C31.0237 14.7419 28.6837 12.2319 25.0637 12.2319C21.4537 12.2319 19.1037 14.7519 19.1037 19.1219C19.1037 23.4919 21.4237 26.0819 25.0637 26.0819ZM25.0637 22.8619C23.8737 22.8619 23.2537 21.6119 23.2537 19.1219C23.2537 16.6819 23.8737 15.4619 25.0637 15.4619C26.2637 15.4619 26.8637 16.6819 26.8637 19.1219C26.8637 21.6119 26.2637 22.8619 25.0637 22.8619Z',
+      viewBox: { width: 31.021484375, height: 26.18349944590129 },
+    },
+  },
 } as const;
diff --git a/src/entries/popup/pages/home/NFTs/NFTDetails.tsx b/src/entries/popup/pages/home/NFTs/NFTDetails.tsx
@@ -404,6 +404,28 @@ const NFTAccordionAboutSection = ({ nft }: { nft?: UniqueAsset | null }) => {
             value={nft?.floorPriceEth}
           />
         )}
+        {nft?.collection.total_quantity &&
+          nft.collection.distinct_owner_count && (
+            <>
+              {nft?.floorPriceEth && <Separator color="separatorTertiary" />}
+              <NFTInfoRow
+                symbol="person"
+                label={i18n.t('nfts.details.owners')}
+                value={nft.collection.total_quantity}
+              />
+              <NFTInfoRow
+                symbol="percent"
+                label={i18n.t('nfts.details.unique_owners')}
+                subValue={`(${Math.floor(
+                  (nft.collection.distinct_owner_count /
+                    nft.collection.total_quantity) *
+                    100,
+                )}%)`}
+                value={nft.collection.distinct_owner_count}
+              />
+              <Separator color="separatorTertiary" />
+            </>
+          )}
         {nft?.asset_contract.schema_name && (
           <NFTInfoRow
             symbol="info.circle"
@@ -979,12 +1001,14 @@ export const NFTInfoRow = ({
   label,
   onClick,
   value,
+  subValue,
   valueSymbol,
 }: {
   symbol: SymbolName;
   label: ReactNode;
   onClick?: () => void;
   value: ReactNode;
+  subValue?: string;
   valueSymbol?: SymbolName;
 }) => (
   <Box
@@ -1001,15 +1025,25 @@ export const NFTInfoRow = ({
     </Inline>
     <Box onClick={onClick} cursor="pointer">
       <Inline alignVertical="center" space="6px">
-        <TextOverflow
-          color="labelSecondary"
-          size="12pt"
-          weight="semibold"
-          cursor="text"
-          userSelect="all"
-        >
-          {value}
-        </TextOverflow>
+        <Inline space="2px">
+          <TextOverflow
+            color="labelSecondary"
+            size="12pt"
+            weight="semibold"
+            cursor="text"
+            userSelect="all"
+          >
+            {value}
+          </TextOverflow>
+          <Text
+            color="labelQuaternary"
+            size="12pt"
+            weight="semibold"
+            cursor="text"
+          >
+            {subValue}
+          </Text>
+        </Inline>
         {valueSymbol && (
           <Symbol
             size={14}

diff --git a/static/json/languages/en_US.json b/static/json/languages/en_US.json
@@ -1198,7 +1198,9 @@
       "download": "Download",
       "explorer": "Explorer",
       "view_collection": "View Collection",
-      "collection_website": "Collection Website"
+      "collection_website": "Collection Website",
+      "owners": "Owners",
+      "unique_owners": "Unique Owners"
     }
   },
   "points": {