From 8973174ad5499ea9d62e057e35eaeaf37fe68db8 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Fri, 11 Jul 2025 20:38:47 +0000
Subject: [PATCH] Dashboard: Fix erc20 asset page crash when number of tokens
 claimed is a fraction (#7597)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on updating the `SupplyClaimedProgress` component to use `claimedSupplyTokens` and `totalSupplyTokens` as `number` types instead of `bigint`, along with minor adjustments in related components and UI elements.

### Detailed summary
- Changed `enable-background` to `enableBackground` in `DiscordIcon.tsx`.
- Updated `SupplyClaimedProgress` props from `claimedSupply` and `totalSupply` (bigint) to `claimedSupplyTokens` and `totalSupplyTokens` (number).
- Adjusted calculations and conditions in `SupplyClaimedProgress` for new props.
- Modified test cases in stories to reflect new prop types.
- Updated UI elements to display supply values correctly based on the new number type.

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

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **Refactor**
  * Updated supply progress components and related usage to use number types instead of bigints, with new prop names for clarity.
  * Improved handling and display of "unlimited" supply scenarios in supply progress components.
  * Adjusted percentage calculation and formatting for claimed supply progress.

* **Style**
  * Corrected SVG attribute naming in the Discord icon to ensure proper rendering.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 .../src/@/icons/brand-icons/DiscordIcon.tsx   |  2 +-
 .../supply-claimed-progress.stories.tsx       | 41 ++++++++++++++++---
 .../_components/supply-claimed-progress.tsx   | 24 +++++------
 .../claim-tokens/claim-tokens-ui.tsx          |  6 +--
 .../buy-edition-drop.client.tsx               |  9 +++-
 .../buy-nft-drop/buy-nft-drop-ui.client.tsx   |  6 ++-
 6 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/apps/dashboard/src/@/icons/brand-icons/DiscordIcon.tsx b/apps/dashboard/src/@/icons/brand-icons/DiscordIcon.tsx
index 38f5403eb20..3de6f7e92cf 100644
--- a/apps/dashboard/src/@/icons/brand-icons/DiscordIcon.tsx
+++ b/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}
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.stories.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.stories.tsx
index 8dd2e7fb88e..9edc3198f93 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.stories.tsx
+++ b/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>
   );
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.tsx
index 6ecc3eb7c71..c1a81bc96bf 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.tsx
+++ b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/_components/supply-claimed-progress.tsx
@@ -3,16 +3,16 @@ 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>
@@ -20,29 +20,29 @@ export function SupplyClaimedProgress(props: {
   }
 
   // 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>
   );
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
index 6e3c8784764..4db3e3c1b0f 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.tsx
+++ b/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,
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-edition-drop/buy-edition-drop.client.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-edition-drop/buy-edition-drop.client.tsx
index 14f22c2bf4a..199f7f1b436 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-edition-drop/buy-edition-drop.client.tsx
+++ b/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" />
diff --git a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.client.tsx b/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.client.tsx
index 4150a45917d..b5aa723ad3c 100644
--- a/apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/nft/overview/buy-nft-drop/buy-nft-drop-ui.client.tsx
+++ b/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">