Update display value

Author: kien-ngo

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/hooks.ts

@@ -2,6 +2,7 @@ import {
   type BaseTransactionOptions,
   type ThirdwebClient,
   toTokens,
+  toUnits,
 } from "thirdweb";
 import type { OverrideEntry } from "thirdweb/dist/types/utils/extensions/drops/types";
 import type { Prettify } from "thirdweb/dist/types/utils/type-utils";
@@ -107,15 +108,41 @@ export async function getClaimPhasesInLegacyFormat(
 
 type PhaseInput = z.input<typeof LegacyClaimConditionInputSchema>;
 
-export function setClaimPhasesTx(
+export async function setClaimPhasesTx(
   baseOptions: BaseTransactionOptions<Options>,
   rawPhases: PhaseInput[],
 ) {
+  const tokenDecimals =
+    baseOptions.type === "erc20"
+      ? await ERC20Ext.decimals({
+          contract: baseOptions.contract,
+        }).catch(() => 0)
+      : 0;
   const phases = rawPhases.map((phase) => {
+    let _maxClaimable = toBigInt(phase.maxClaimableSupply);
+    if (typeof _maxClaimable === "bigint" && _maxClaimable !== maxUint256) {
+      _maxClaimable = toUnits(String(_maxClaimable), tokenDecimals);
+    }
+    let _maxClaimablePerWallet = toBigInt(phase.maxClaimablePerWallet);
+    if (
+      typeof _maxClaimablePerWallet === "bigint" &&
+      _maxClaimablePerWallet !== maxUint256
+    ) {
+      _maxClaimablePerWallet = toUnits(
+        String(_maxClaimablePerWallet),
+        tokenDecimals,
+      );
+    }
     return {
       startTime: toDate(phase.startTime),
-      maxClaimableSupply: toBigInt(phase.maxClaimableSupply),
-      maxClaimablePerWallet: toBigInt(phase.maxClaimablePerWallet),
+      maxClaimableSupply:
+        baseOptions.type === "erc20"
+          ? _maxClaimable
+          : toBigInt(phase.maxClaimableSupply),
+      maxClaimablePerWallet:
+        baseOptions.type === "erc20"
+          ? _maxClaimablePerWallet
+          : toBigInt(phase.maxClaimablePerWallet),
       merkleRootHash: phase.merkleRootHash as string | undefined,
       overrideList: phase.snapshot?.length
         ? snapshotToOverrides(phase.snapshot)

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/index.tsx

@@ -355,7 +355,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
     });
 
     try {
-      const tx = setClaimPhasesTx(
+      const tx = await setClaimPhasesTx(
         {
           contract,
           ...(isErc20

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/claim-conditions-form/phase.tsx

@@ -1,7 +1,8 @@
 import { AdminOnly } from "@3rdweb-sdk/react/components/roles/admin-only";
 import { Flex, SimpleGrid } from "@chakra-ui/react";
 import { ChevronDownIcon, ChevronUpIcon, XIcon } from "lucide-react";
-import type { ThirdwebContract } from "thirdweb";
+import { type ThirdwebContract, toTokens } from "thirdweb";
+import { maxUint256 } from "thirdweb/utils";
 import { Badge, Button, Card, Heading, Text } from "tw-components";
 import { ClaimConditionTypeData, useClaimConditionsFormContext } from ".";
 import { PricePreview } from "../price-preview";
@@ -34,6 +35,7 @@ export const ClaimConditionsPhase: React.FC<ClaimConditionsPhaseProps> = ({
     isActive,
     isMultiPhase,
     phaseIndex,
+    tokenDecimals,
   } = useClaimConditionsFormContext();
 
   const toggleEditing = () => {
@@ -102,7 +104,13 @@ export const ClaimConditionsPhase: React.FC<ClaimConditionsPhaseProps> = ({
               <Text fontWeight="bold">
                 {isErc20 ? "Tokens" : "NFTs"} to drop
               </Text>
-              <Text textTransform="capitalize">{field.maxClaimableSupply}</Text>
+              <Text textTransform="capitalize">
+                {isErc20 && field.maxClaimableSupply
+                  ? BigInt(field.maxClaimableSupply) === maxUint256
+                    ? "Unlimited"
+                    : toTokens(BigInt(field.maxClaimableSupply), tokenDecimals)
+                  : field.maxClaimableSupply}
+              </Text>
             </div>
             <PricePreview
               price={field.price}
@@ -117,7 +125,14 @@ export const ClaimConditionsPhase: React.FC<ClaimConditionsPhaseProps> = ({
                 <Text>Unlimited</Text>
               ) : (
                 <Text textTransform="capitalize">
-                  {field.maxClaimablePerWallet}
+                  {isErc20 && field.maxClaimablePerWallet
+                    ? BigInt(field.maxClaimablePerWallet) === maxUint256
+                      ? "Unlimited"
+                      : toTokens(
+                          BigInt(field.maxClaimablePerWallet),
+                          tokenDecimals,
+                        )
+                    : field.maxClaimablePerWallet}
                 </Text>
               )}
             </div>

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/_components/claim-conditions/quantity-input-with-unlimited.tsx

@@ -5,6 +5,7 @@ import {
   InputRightElement,
 } from "@chakra-ui/react";
 import { useEffect, useState } from "react";
+import { toTokens } from "thirdweb";
 import { Button } from "tw-components";
 
 interface QuantityInputWithUnlimitedProps
@@ -60,7 +61,13 @@ export const QuantityInputWithUnlimited: React.FC<
           if (value === "unlimited") {
             setStringValue("unlimited");
           } else if (!Number.isNaN(Number(value))) {
-            setStringValue(Number(Number(value).toFixed(decimals)).toString());
+            if (decimals) {
+              setStringValue(toTokens(BigInt(value), decimals));
+            } else {
+              setStringValue(
+                Number(Number(value).toFixed(decimals)).toString(),
+              );
+            }
           } else {
             setStringValue("0");
           }