[BLD-71] SDK, Dashboard: Fix Supplies shown in ERC721 contract

.changeset/lemon-mammals-slide.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Update `getTotalClaimedSupply` and `getTotalUnclaimedSupply` erc721 extensions to consider `startTokenId` if the contract has `startTokenId` set.

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/supply-cards.tsx

@@ -1,10 +1,9 @@
 "use client";
-import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
 import {
-  nextTokenIdToMint,
-  startTokenId,
-  totalSupply,
+  getTotalClaimedSupply,
+  totalSupply as getTotalSupply,
+  getTotalUnclaimedSupply,
 } from "thirdweb/extensions/erc721";
 import { useReadContract } from "thirdweb/react";
 import { StatCard } from "../../overview/components/stat-card";
@@ -14,42 +13,34 @@ interface SupplyCardsProps {
 }
 
 export const SupplyCards: React.FC<SupplyCardsProps> = ({ contract }) => {
-  const nextTokenIdQuery = useReadContract(nextTokenIdToMint, {
+  const totalSupplyQuery = useReadContract(getTotalSupply, {
     contract,
   });
 
-  const totalSupplyQuery = useReadContract(totalSupply, {
+  const totalClaimedSupplyQuery = useReadContract(getTotalClaimedSupply, {
     contract,
   });
 
-  const startTokenIdQuery = useReadContract(startTokenId, { contract });
-
-  const realTotalSupply = useMemo(
-    () => (nextTokenIdQuery.data || 0n) - (startTokenIdQuery.data || 0n),
-    [nextTokenIdQuery.data, startTokenIdQuery.data],
-  );
-
-  const unclaimedSupply = useMemo(
-    () => (realTotalSupply - (totalSupplyQuery?.data || 0n)).toString(),
-    [realTotalSupply, totalSupplyQuery.data],
-  );
+  const totalUnClaimedSupplyQuery = useReadContract(getTotalUnclaimedSupply, {
+    contract,
+  });
 
   return (
     <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
       <StatCard
-        isPending={nextTokenIdQuery.isPending}
+        isPending={totalSupplyQuery.isPending}
         label="Total Supply"
-        value={realTotalSupply.toString()}
+        value={totalSupplyQuery.data?.toString() || "N/A"}
       />
       <StatCard
-        isPending={totalSupplyQuery.isPending}
+        isPending={totalClaimedSupplyQuery.isPending}
         label="Claimed Supply"
-        value={totalSupplyQuery?.data?.toString() || "N/A"}
+        value={totalClaimedSupplyQuery.data?.toString() || "N/A"}
       />
       <StatCard
-        isPending={totalSupplyQuery.isPending || nextTokenIdQuery.isPending}
+        isPending={totalUnClaimedSupplyQuery.isPending}
         label="Unclaimed Supply"
-        value={unclaimedSupply}
+        value={totalUnClaimedSupplyQuery.data?.toString() || "N/A"}
       />
     </div>
   );

packages/thirdweb/src/extensions/erc721/read/getTotalClaimedSupply.ts

@@ -1,5 +1,6 @@
 import type { BaseTransactionOptions } from "../../../transaction/types.js";
 import { nextTokenIdToClaim } from "../__generated__/IDrop/read/nextTokenIdToClaim.js";
+import { startTokenId } from "../__generated__/IERC721A/read/startTokenId.js";
 
 /**
  * Retrieves the total claimed supply of ERC721 tokens.
@@ -20,5 +21,10 @@ import { nextTokenIdToClaim } from "../__generated__/IDrop/read/nextTokenIdToCla
 export async function getTotalClaimedSupply(
   options: BaseTransactionOptions,
 ): Promise<bigint> {
-  return nextTokenIdToClaim(options);
+  const [startTokenId_, nextTokenIdToClaim_] = await Promise.all([
+    startTokenId(options).catch(() => 0n),
+    nextTokenIdToClaim(options),
+  ]);
+
+  return nextTokenIdToClaim_ - startTokenId_;
 }

packages/thirdweb/src/extensions/erc721/read/getTotalUnclaimedSupply.ts

@@ -1,4 +1,5 @@
 import type { BaseTransactionOptions } from "../../../transaction/types.js";
+import { startTokenId } from "../__generated__/IERC721A/read/startTokenId.js";
 import { nextTokenIdToMint } from "../__generated__/IERC721Enumerable/read/nextTokenIdToMint.js";
 import { getTotalClaimedSupply } from "./getTotalClaimedSupply.js";
 
@@ -19,9 +20,12 @@ import { getTotalClaimedSupply } from "./getTotalClaimedSupply.js";
 export async function getTotalUnclaimedSupply(
   options: BaseTransactionOptions,
 ): Promise<bigint> {
-  const [nextTokenIdToMint_, totalClaimedSupply_] = await Promise.all([
-    nextTokenIdToMint(options),
-    getTotalClaimedSupply(options),
-  ]);
-  return nextTokenIdToMint_ - totalClaimedSupply_;
+  const [startTokenId_, nextTokenIdToMint_, totalClaimedSupply_] =
+    await Promise.all([
+      startTokenId(options).catch(() => 0n),
+      nextTokenIdToMint(options),
+      getTotalClaimedSupply(options),
+    ]);
+
+  return nextTokenIdToMint_ - startTokenId_ - totalClaimedSupply_;
 }