[TOOL-4867] Fix Coin asset page crashing on maxUint256 as maxClaimableSupply

Author: MananTank

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.stories.tsx

@@ -1,6 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/nextjs";
-import { maxUint256 } from "thirdweb/utils";
-import { BadgeContainer } from "../../../../../../../../@/storybook/utils";
+import { BadgeContainer } from "@/storybook/utils";
 import { SupplyClaimedProgress } from "./supply-claimed-progress";
 
 const meta = {
@@ -19,7 +18,7 @@ function StoryVariants() {
   return (
     <div className="container max-w-md space-y-10 py-10">
       <BadgeContainer label="10 / Unlimited Supply">
-        <SupplyClaimedProgress claimedSupply={10n} totalSupply={maxUint256} />
+        <SupplyClaimedProgress claimedSupply={10n} totalSupply="unlimited" />
       </BadgeContainer>
 
       <BadgeContainer label="500/1000 Supply">

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.tsx

@@ -1,14 +1,13 @@
 import { InfinityIcon } from "lucide-react";
-import { maxUint256 } from "thirdweb/utils";
 import { Progress } from "@/components/ui/progress";
 import { supplyFormatter } from "../nft/format";
 
 export function SupplyClaimedProgress(props: {
   claimedSupply: bigint;
-  totalSupply: bigint;
+  totalSupply: bigint | "unlimited";
 }) {
   // if total supply is unlimited
-  if (props.totalSupply === maxUint256) {
+  if (props.totalSupply === "unlimited") {
     return (
       <p className="flex items-center justify-between gap-2">
         <span className="font-medium text-sm">Claimed Supply </span>

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx

@@ -26,7 +26,7 @@ import {
   getApprovalForTransaction,
 } from "thirdweb/extensions/erc20";
 import { useActiveAccount, useSendTransaction } from "thirdweb/react";
-import { getClaimParams } from "thirdweb/utils";
+import { getClaimParams, maxUint256 } from "thirdweb/utils";
 import {
   reportAssetBuyFailed,
   reportAssetBuySuccessful,
@@ -328,9 +328,16 @@ export function TokenDropClaim(props: {
             claimedSupply={BigInt(
               toTokens(props.claimCondition.supplyClaimed, props.decimals),
             )}
-            totalSupply={BigInt(
-              toTokens(props.claimCondition.maxClaimableSupply, props.decimals),
-            )}
+            totalSupply={
+              props.claimCondition.maxClaimableSupply === maxUint256
+                ? "unlimited"
+                : BigInt(
+                    toTokens(
+                      props.claimCondition.maxClaimableSupply,
+                      props.decimals,
+                    ),
+                  )
+            }
           />
 
           <div className="h-4" />