update

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";
@@ -42,6 +43,7 @@ type CombinedClaimCondition = Prettify<
 type Options =
   | {
       type: "erc20";
+      decimals?: number;
     }
   | {
       type: "erc721";
@@ -91,12 +93,24 @@ export async function getClaimPhasesInLegacyFormat(
         startTime: new Date(Number(condition.startTimestamp * 1000n)),
         currencyAddress: condition.currency,
         price: condition.pricePerToken,
-        maxClaimableSupply: toUnlimited(condition.maxClaimableSupply),
+        // This value from ERC20Ext.getClaimConditions is in wei
+        // so we have to convert it using toTokens for readability
+        // (when user updates this value, we convert it back to wei - see `function setClaimPhasesTx`)
+        maxClaimableSupply: toUnlimited(
+          condition.maxClaimableSupply,
+          options.type === "erc20" ? currencyMetadata.decimals : undefined,
+        ),
         currencyMetadata,
         currentMintSupply: (
           condition.maxClaimableSupply - condition.supplyClaimed
         ).toString(),
-        maxClaimablePerWallet: toUnlimited(condition.quantityLimitPerWallet),
+        // This value from ERC20Ext.getClaimConditions is in wei
+        // so we have to convert it using toTokens for readability
+        // (when user updates this value, we convert it back to wei - see `function setClaimPhasesTx`)
+        maxClaimablePerWallet: toUnlimited(
+          condition.quantityLimitPerWallet,
+          options.type === "erc20" ? currencyMetadata.decimals : undefined,
+        ),
         merkleRootHash: condition.merkleRoot,
         metadata,
         snapshot,
@@ -114,8 +128,18 @@ export function setClaimPhasesTx(
   const phases = rawPhases.map((phase) => {
     return {
       startTime: toDate(phase.startTime),
-      maxClaimableSupply: toBigInt(phase.maxClaimableSupply),
-      maxClaimablePerWallet: toBigInt(phase.maxClaimablePerWallet),
+      // The input from client-side is non-wei, but the extension is expecting value in wei
+      // so we need to convert it using toUnits
+      maxClaimableSupply: toBigInt(
+        phase.maxClaimableSupply,
+        baseOptions.type === "erc20" ? baseOptions.decimals : undefined,
+      ),
+      // The input from client-side is non-wei, but the ERC20 extension is expecting value in wei
+      // so we need to convert it using toUnits
+      maxClaimablePerWallet: toBigInt(
+        phase.maxClaimablePerWallet,
+        baseOptions.type === "erc20" ? baseOptions.decimals : undefined,
+      ),
       merkleRootHash: phase.merkleRootHash as string | undefined,
       overrideList: phase.snapshot?.length
         ? snapshotToOverrides(phase.snapshot)
@@ -175,18 +199,33 @@ function toDate(timestamp: number | Date | undefined) {
   }
   return new Date(timestamp);
 }
-function toBigInt(value: string | number | undefined) {
+function toBigInt(
+  value: string | number | undefined,
+  decimals?: number,
+): bigint | undefined {
   if (value === undefined) {
     return undefined;
   }
   if (value === "unlimited") {
     return maxUint256;
   }
+  // The ERC20Claim condition extension in v5 does not convert to wei for us
+  // so we have to, manually
+  if (decimals) {
+    return toUnits(value.toString(), decimals);
+  }
+
   return BigInt(value);
 }
 
-function toUnlimited(value: bigint) {
-  return value === maxUint256 ? "unlimited" : value.toString();
+function toUnlimited(value: bigint, decimals?: number) {
+  if (value === maxUint256) {
+    return "unlimited";
+  }
+  if (decimals) {
+    return toTokens(value, decimals);
+  }
+  return value.toString();
 }
 
 async function fetchSnapshot(

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

@@ -26,6 +26,7 @@ import {
   useFieldArray,
   useForm,
 } from "react-hook-form";
+import { toast } from "sonner";
 import {
   NATIVE_TOKEN_ADDRESS,
   type ThirdwebContract,
@@ -152,7 +153,7 @@ interface ClaimsConditionFormContextData {
   field: ControlledField;
   phaseIndex: number;
   formDisabled: boolean;
-  tokenDecimals: number;
+  tokenDecimals: number | undefined;
   isMultiPhase: boolean;
   isActive: boolean;
   dropType: DropType;
@@ -210,7 +211,6 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
       enabled: isErc20,
     },
   });
-  const tokenDecimalsData = tokenDecimals.data ?? 0;
   const saveClaimPhaseNotification = useTxNotifications(
     "Saved claim phases",
     "Failed to save claim phases",
@@ -219,7 +219,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
   const claimConditionsQuery = useReadContract(getClaimPhasesInLegacyFormat, {
     contract,
     ...(isErc20
-      ? { type: "erc20" }
+      ? { type: "erc20", decimals: tokenDecimals.data }
       : isErc721
         ? { type: "erc721" }
         : { type: "erc1155", tokenId: BigInt(tokenId || 0) }),
@@ -259,7 +259,11 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
       );
   }, [claimConditionsQuery.data, isMultiPhase]);
 
-  const isFetchingData = claimConditionsQuery.isFetching || sendTx.isPending;
+  const isFetchingData =
+    claimConditionsQuery.isFetching ||
+    sendTx.isPending ||
+    // Need to make sure the tokenDecimals.data is present when interacting with ERC20 claim conditions
+    (isErc20 && tokenDecimals.isLoading);
 
   const canEditForm = isAdmin && !isFetchingData;
 
@@ -353,13 +357,17 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
       action: "set-claim-conditions",
       label: "attempt",
     });
-
+    if (isErc20 && !tokenDecimals.data) {
+      return toast.error(
+        `Could not fetch token decimals for contract ${contract.address}`,
+      );
+    }
     try {
       const tx = setClaimPhasesTx(
         {
           contract,
           ...(isErc20
-            ? { type: "erc20" }
+            ? { type: "erc20", decimals: tokenDecimals.data }
             : isErc721
               ? { type: "erc721" }
               : { type: "erc1155", tokenId: BigInt(tokenId || 0) }),
@@ -453,6 +461,15 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
     );
   }
 
+  // Do not proceed if fails to load the tokenDecimals.data - for ERC20 drop contracts specifically
+  if (isErc20 && tokenDecimals.data === undefined) {
+    return (
+      <div className="flex h-[400px] w-full items-center justify-center rounded-lg border border-border">
+        Failed to load token decimals
+      </div>
+    );
+  }
+
   return (
     <>
       <Flex onSubmit={handleFormSubmit} direction="column" as="form" gap={10}>
@@ -508,7 +525,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                     phaseIndex: index,
                     formDisabled: !canEditForm,
                     isErc20,
-                    tokenDecimals: tokenDecimalsData,
+                    tokenDecimals: tokenDecimals.data,
                     dropType,
                     setOpenSnapshotIndex,
                     isAdmin,