diff --git a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/supply-cards.tsx b/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/supply-cards.tsx index 8c69caa4171..feb071fa39e 100644 --- a/apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/nfts/components/supply-cards.tsx +++ b/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 = ({ 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 (
Total Supply - - {totalSupplyQuery?.data?.toString()} + + {realTotalSupply.toString()} Claimed Supply - - {claimedSupplyQuery?.data?.toString()} + + {totalSupplyQuery?.data?.toString()} Unclaimed Supply {unclaimedSupply}