[Dashboard] Fix NFT supply info

Author: kien-ngo

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

@@ -1,8 +1,13 @@
 "use client";
 
 import { Skeleton, Stat, StatLabel, StatNumber } from "@chakra-ui/react";
+import { useMemo } from "react";
 import type { ThirdwebContract } from "thirdweb";
-import { nextTokenIdToMint, totalSupply } from "thirdweb/extensions/erc721";
+import {
+  nextTokenIdToMint,
+  startTokenId,
+  totalSupply,
+} from "thirdweb/extensions/erc721";
 import { useReadContract } from "thirdweb/react";
 import { Card } from "tw-components";
 
@@ -18,9 +23,17 @@ export const SupplyCards: React.FC<SupplyCardsProps> = ({ contract }) => {
     contract,
   });
 
-  const unclaimedSupply = (
-    (totalSupplyQuery?.data || 0n) - (claimedSupplyQuery?.data || 0n)
-  ).toString();
+  const startTokenIdQuery = useReadContract(startTokenId, { contract });
+
+  const unclaimedSupply = useMemo(
+    () =>
+      (
+        (totalSupplyQuery?.data || 0n) -
+        (claimedSupplyQuery?.data || 0n) -
+        (startTokenIdQuery.data || 0n)
+      ).toString(),
+    [totalSupplyQuery.data, claimedSupplyQuery.data, startTokenIdQuery.data],
+  );
 
   return (
     <div className="flex flex-col gap-3 md:flex-row md:gap-6">