[Dashboard] Fix NFT supply info (#5309)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `SupplyCards` component by updating how supply data is fetched and displayed, specifically by introducing the `startTokenId` and refining the calculation of unclaimed supply.

### Detailed summary
- Added `startTokenId` to the imports from `thirdweb/extensions/erc721`.
- Changed `claimedSupplyQuery` to `nextTokenIdQuery`.
- Introduced `startTokenIdQuery` for calculating the real total supply.
- Updated unclaimed supply calculation to use `realTotalSupply`.
- Adjusted loading states and displayed values for total supply and unclaimed supply.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

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";
 
@@ -11,35 +16,44 @@ interface SupplyCardsProps {
 }
 
 export const SupplyCards: React.FC<SupplyCardsProps> = ({ contract }) => {
-  const claimedSupplyQuery = useReadContract(totalSupply, {
+  const nextTokenIdQuery = useReadContract(nextTokenIdToMint, {
     contract,
   });
-  const totalSupplyQuery = useReadContract(nextTokenIdToMint, {
+
+  const totalSupplyQuery = useReadContract(totalSupply, {
     contract,
   });
 
-  const unclaimedSupply = (
-    (totalSupplyQuery?.data || 0n) - (claimedSupplyQuery?.data || 0n)
-  ).toString();
+  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],
+  );
 
   return (
     <div className="flex flex-col gap-3 md:flex-row md:gap-6">
       <Card as={Stat}>
         <StatLabel mb={{ base: 1, md: 0 }}>Total Supply</StatLabel>
-        <Skeleton isLoaded={totalSupplyQuery.isSuccess}>
-          <StatNumber>{totalSupplyQuery?.data?.toString()}</StatNumber>
+        <Skeleton isLoaded={nextTokenIdQuery.isSuccess}>
+          <StatNumber>{realTotalSupply.toString()}</StatNumber>
         </Skeleton>
       </Card>
       <Card as={Stat}>
         <StatLabel mb={{ base: 1, md: 0 }}>Claimed Supply</StatLabel>
-        <Skeleton isLoaded={claimedSupplyQuery.isSuccess}>
-          <StatNumber>{claimedSupplyQuery?.data?.toString()}</StatNumber>
+        <Skeleton isLoaded={totalSupplyQuery.isSuccess}>
+          <StatNumber>{totalSupplyQuery?.data?.toString()}</StatNumber>
         </Skeleton>
       </Card>
       <Card as={Stat}>
         <StatLabel mb={{ base: 1, md: 0 }}>Unclaimed Supply</StatLabel>
         <Skeleton
-          isLoaded={totalSupplyQuery.isSuccess && claimedSupplyQuery.isSuccess}
+          isLoaded={totalSupplyQuery.isSuccess && nextTokenIdQuery.isSuccess}
         >
           <StatNumber>{unclaimedSupply}</StatNumber>
         </Skeleton>