Dashboard: Fix erc20 asset page crash when number of tokens claimed is a fraction

apps/dashboard/src/@/icons/brand-icons/DiscordIcon.tsx

@@ -3,7 +3,7 @@ import type { SVGProps } from "react";
 export function DiscordIcon(props: SVGProps<SVGSVGElement>) {
   return (
     <svg
-      enable-background="new 0 0 100 100"
+      enableBackground="new 0 0 100 100"
       viewBox="0 0 100 100"
       xmlns="http://www.w3.org/2000/svg"
       {...props}

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

@@ -17,28 +17,57 @@ export const Variants: Story = {
 function StoryVariants() {
   return (
     <div className="container max-w-md space-y-10 py-10">
+      <BadgeContainer label="5.5 / Unlimited Supply">
+        <SupplyClaimedProgress
+          claimedSupplyTokens={5.5}
+          totalSupplyTokens="unlimited"
+        />
+      </BadgeContainer>
+
       <BadgeContainer label="10 / Unlimited Supply">
-        <SupplyClaimedProgress claimedSupply={10n} totalSupply="unlimited" />
+        <SupplyClaimedProgress
+          claimedSupplyTokens={10}
+          totalSupplyTokens="unlimited"
+        />
       </BadgeContainer>
 
       <BadgeContainer label="500/1000 Supply">
-        <SupplyClaimedProgress claimedSupply={500n} totalSupply={1000n} />
+        <SupplyClaimedProgress
+          claimedSupplyTokens={500}
+          totalSupplyTokens={1000}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="123.45/1000 Supply">
+        <SupplyClaimedProgress
+          claimedSupplyTokens={123.45}
+          totalSupplyTokens={1000}
+        />
       </BadgeContainer>
 
       <BadgeContainer label="10/1M Supply">
-        <SupplyClaimedProgress claimedSupply={10n} totalSupply={1000000n} />
+        <SupplyClaimedProgress
+          claimedSupplyTokens={10}
+          totalSupplyTokens={1000000}
+        />
       </BadgeContainer>
 
       <BadgeContainer label="0/1M Supply">
-        <SupplyClaimedProgress claimedSupply={0n} totalSupply={1000000n} />
+        <SupplyClaimedProgress
+          claimedSupplyTokens={0}
+          totalSupplyTokens={1000000}
+        />
       </BadgeContainer>
 
       <BadgeContainer label="10/10 Supply">
-        <SupplyClaimedProgress claimedSupply={10n} totalSupply={10n} />
+        <SupplyClaimedProgress
+          claimedSupplyTokens={10}
+          totalSupplyTokens={10}
+        />
       </BadgeContainer>
 
       <BadgeContainer label="0 Supply - don't show anything">
-        <SupplyClaimedProgress claimedSupply={0n} totalSupply={0n} />
+        <SupplyClaimedProgress claimedSupplyTokens={0} totalSupplyTokens={0} />
       </BadgeContainer>
     </div>
   );

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

@@ -3,46 +3,46 @@ import { Progress } from "@/components/ui/progress";
 import { supplyFormatter } from "../nft/format";
 
 export function SupplyClaimedProgress(props: {
-  claimedSupply: bigint;
-  totalSupply: bigint | "unlimited";
+  claimedSupplyTokens: number;
+  totalSupplyTokens: number | "unlimited";
 }) {
   // if total supply is unlimited
-  if (props.totalSupply === "unlimited") {
+  if (props.totalSupplyTokens === "unlimited") {
     return (
       <p className="flex items-center justify-between gap-2">
         <span className="font-medium text-sm">Claimed Supply </span>
         <span className="flex items-center gap-1 font-bold text-sm">
-          {supplyFormatter.format(props.claimedSupply)} /{" "}
+          {supplyFormatter.format(props.claimedSupplyTokens)} /{" "}
           <InfinityIcon aria-label="Unlimited" className="size-4" />
         </span>
       </p>
     );
   }
 
   // if total supply is 0 - don't show anything
-  if (props.totalSupply === 0n) {
+  if (props.totalSupplyTokens === 0) {
     return null;
   }
 
   // multiply by 10k to have precision up to 2 decimal places in percentage value
-  const soldFractionTimes10KBigInt =
-    (props.claimedSupply * 10000n) / props.totalSupply;
 
-  const soldPercentage = Number(soldFractionTimes10KBigInt) / 100;
+  const soldPercentage =
+    (props.claimedSupplyTokens / props.totalSupplyTokens) * 100;
+
+  const percentToShow = soldPercentage.toFixed(2);
 
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
         <span className="font-medium text-sm">Supply Claimed</span>
         <span className="font-bold text-sm">
-          {supplyFormatter.format(props.claimedSupply)} /{" "}
-          {supplyFormatter.format(props.totalSupply)}
+          {supplyFormatter.format(props.claimedSupplyTokens)} /{" "}
+          {supplyFormatter.format(props.totalSupplyTokens)}
         </span>
       </div>
       <Progress className="h-2.5" value={soldPercentage} />
       <p className="font-medium text-muted-foreground text-xs">
-        {soldPercentage === 0 && props.claimedSupply !== 0n && "~"}
-        {soldPercentage.toFixed(2)}% Sold
+        {percentToShow === "0.00" ? "~0.00%" : `${percentToShow}%`} Sold
       </p>
     </div>
   );

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

@@ -325,13 +325,13 @@ export function TokenDropClaim(props: {
           <div className="h-4" />
 
           <SupplyClaimedProgress
-            claimedSupply={BigInt(
+            claimedSupplyTokens={Number(
               toTokens(props.claimCondition.supplyClaimed, props.decimals),
             )}
-            totalSupply={
+            totalSupplyTokens={
               props.claimCondition.maxClaimableSupply === maxUint256
                 ? "unlimited"
-                : BigInt(
+                : Number(
                     toTokens(
                       props.claimCondition.maxClaimableSupply,
                       props.decimals,

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-edition-drop/buy-edition-drop.client.tsx

@@ -10,6 +10,7 @@ import type { ChainMetadata } from "thirdweb/chains";
 import { getApprovalForTransaction } from "thirdweb/extensions/erc20";
 import { claimTo } from "thirdweb/extensions/erc1155";
 import { useActiveAccount, useSendAndConfirmTransaction } from "thirdweb/react";
+import { maxUint256 } from "thirdweb/utils";
 import * as z from "zod";
 import {
   reportAssetBuyFailed,
@@ -225,8 +226,12 @@ export function BuyEditionDrop(props: BuyEditionDropProps) {
 
         {claimCondition.data ? (
           <SupplyClaimedProgress
-            claimedSupply={claimCondition.data.supplyClaimed}
-            totalSupply={claimCondition.data.maxClaimableSupply}
+            claimedSupplyTokens={Number(claimCondition.data.supplyClaimed)}
+            totalSupplyTokens={
+              claimCondition.data.maxClaimableSupply === maxUint256
+                ? "unlimited"
+                : Number(claimCondition.data.maxClaimableSupply)
+            }
           />
         ) : (
           <Skeleton className="h-[62px] w-full" />

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.client.tsx

@@ -231,8 +231,10 @@ export function BuyNFTDropUI(props: BuyNFTDropUIProps) {
         )}
 
         <SupplyClaimedProgress
-          claimedSupply={BigInt(props.totalNFTs) - props.totalUnclaimedSupply}
-          totalSupply={BigInt(props.totalNFTs)}
+          claimedSupplyTokens={Number(
+            BigInt(props.totalNFTs) - props.totalUnclaimedSupply,
+          )}
+          totalSupplyTokens={Number(props.totalNFTs)}
         />
 
         <div className="flex flex-col gap-1.5 rounded-lg bg-muted/50 p-3">