[Dashboard] Fix ERC20 claim conditions

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";
@@ -114,8 +116,14 @@ export function setClaimPhasesTx(
   const phases = rawPhases.map((phase) => {
     return {
       startTime: toDate(phase.startTime),
-      maxClaimableSupply: toBigInt(phase.maxClaimableSupply),
-      maxClaimablePerWallet: toBigInt(phase.maxClaimablePerWallet),
+      maxClaimableSupply: toBigInt(
+        phase.maxClaimableSupply,
+        baseOptions.type === "erc20" ? baseOptions.decimals : undefined,
+      ),
+      maxClaimablePerWallet: toBigInt(
+        phase.maxClaimablePerWallet,
+        baseOptions.type === "erc20" ? baseOptions.decimals : undefined,
+      ),
       merkleRootHash: phase.merkleRootHash as string | undefined,
       overrideList: phase.snapshot?.length
         ? snapshotToOverrides(phase.snapshot)
@@ -175,13 +183,24 @@ 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);
+  }
+
+  // Will cause issue if trying to convert a non-integer string or number
+  // thankfully the decimals logic above prevents it
   return BigInt(value);
 }
 

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

@@ -26,10 +26,12 @@ import {
   useFieldArray,
   useForm,
 } from "react-hook-form";
+import { toast } from "sonner";
 import {
   NATIVE_TOKEN_ADDRESS,
   type ThirdwebContract,
   ZERO_ADDRESS,
+  toTokens,
 } from "thirdweb";
 import { decimals } from "thirdweb/extensions/erc20";
 import {
@@ -152,7 +154,7 @@ interface ClaimsConditionFormContextData {
   field: ControlledField;
   phaseIndex: number;
   formDisabled: boolean;
-  tokenDecimals: number;
+  tokenDecimals: number | undefined;
   isMultiPhase: boolean;
   isActive: boolean;
   dropType: DropType;
@@ -210,7 +212,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 +220,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 +260,10 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
       );
   }, [claimConditionsQuery.data, isMultiPhase]);
 
-  const isFetchingData = claimConditionsQuery.isFetching || sendTx.isPending;
+  const isFetchingData =
+    claimConditionsQuery.isFetching ||
+    sendTx.isPending ||
+    (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,14 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
     );
   }
 
+  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}>
@@ -488,6 +504,30 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                   },
             );
 
+            // With v5, the value of `maxClaimablePerWallet` & `maxClaimableSupply` for ERC20 claim cont.  will already be converted to wei
+            // so we have to convert them back to token (`toTokens`) to make it human-readable
+            if (isErc20 && tokenDecimals.data) {
+              if (
+                field.maxClaimableSupply !== undefined &&
+                field.maxClaimableSupply !== "unlimited"
+              ) {
+                field.maxClaimableSupply = toTokens(
+                  BigInt(field.maxClaimableSupply),
+                  tokenDecimals.data,
+                );
+              }
+
+              if (
+                field.maxClaimablePerWallet !== undefined &&
+                field.maxClaimablePerWallet !== "unlimited"
+              ) {
+                field.maxClaimablePerWallet = toTokens(
+                  BigInt(field.maxClaimablePerWallet),
+                  tokenDecimals.data,
+                );
+              }
+            }
+
             return (
               <Fragment key={`snapshot_${field.id}_${index}`}>
                 <SnapshotUpload
@@ -508,7 +548,7 @@ export const ClaimConditionsForm: React.FC<ClaimConditionsFormProps> = ({
                     phaseIndex: index,
                     formDisabled: !canEditForm,
                     isErc20,
-                    tokenDecimals: tokenDecimalsData,
+                    tokenDecimals: tokenDecimals.data,
                     dropType,
                     setOpenSnapshotIndex,
                     isAdmin,

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

@@ -35,7 +35,6 @@ export const ClaimConditionsPhase: React.FC<ClaimConditionsPhaseProps> = ({
     isMultiPhase,
     phaseIndex,
   } = useClaimConditionsFormContext();
-
   const toggleEditing = () => {
     form.setValue(`phases.${phaseIndex}.isEditing`, !field.isEditing);
   };

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

@@ -4,7 +4,7 @@ import {
   type InputProps,
   InputRightElement,
 } from "@chakra-ui/react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Button } from "tw-components";
 
 interface QuantityInputWithUnlimitedProps
@@ -30,14 +30,6 @@ export const QuantityInputWithUnlimited: React.FC<
     Number.isNaN(Number(value)) ? "0" : value.toString(),
   );
 
-  // FIXME: this needs a re-work
-  // eslint-disable-next-line no-restricted-syntax
-  useEffect(() => {
-    if (value !== undefined) {
-      setStringValue(value.toString());
-    }
-  }, [value]);
-
   const updateValue = (_value: string) => {
     if (_value === "") {
       onChange(_value);