updated claim conditinos

Author: GWSzeto

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/Claimable.tsx

@@ -128,12 +128,18 @@ function ClaimableModule(props: ModuleInstanceProps) {
     claimConditionQuery.data &&
     claimConditionQuery.data?.currency !== ZERO_ADDRESS;
 
-  const tokenDecimalsQuery = useReadContract(decimals, {
+  const currencyDecimalsQuery = useReadContract(decimals, {
     contract: currencyContract,
     queryOptions: {
       enabled: shouldFetchTokenDecimals,
     },
   });
+  const tokenDecimalsQuery = useReadContract(decimals, {
+    contract: contract,
+    queryOptions: {
+      enabled: props.contractInfo.name === "ClaimableERC20",
+    },
+  });
 
   const mint = useCallback(
     async (values: MintFormValues) => {
@@ -258,17 +264,18 @@ function ClaimableModule(props: ModuleInstanceProps) {
           // claim conditions data is present
           claimConditionQuery.data &&
           // token decimals is fetched if it should be fetched
-          (shouldFetchTokenDecimals ? tokenDecimalsQuery.isFetched : true)
+          (shouldFetchTokenDecimals ? currencyDecimalsQuery.isFetched : true)
             ? {
                 claimCondition: claimConditionQuery.data,
+                currencyDecimals: currencyDecimalsQuery.data,
                 tokenDecimals: tokenDecimalsQuery.data,
               }
             : undefined,
         setClaimCondition,
         tokenId,
         isLoading:
           claimConditionQuery.isLoading ||
-          (!!shouldFetchTokenDecimals && tokenDecimalsQuery.isLoading),
+          (!!shouldFetchTokenDecimals && currencyDecimalsQuery.isLoading),
       }}
       isOwnerAccount={!!ownerAccount}
       name={props.contractInfo.name}
@@ -310,6 +317,7 @@ export function ClaimableModuleUI(
       data:
         | {
             claimCondition: ClaimConditionValue;
+            currencyDecimals: number | undefined;
             tokenDecimals: number | undefined;
           }
         | undefined;
@@ -358,9 +366,8 @@ export function ClaimableModuleUI(
 
               <div className="h-6" />
 
-              {props.isValidTokenId &&
-                props.claimConditionSection.data &&
-                !props.claimConditionSection.isLoading && (
+              {props.name !== "ClaimableERC1155" || props.isValidTokenId ? (
+                props.claimConditionSection.data ? (
                   <ClaimConditionSection
                     isOwnerAccount={props.isOwnerAccount}
                     claimCondition={
@@ -370,16 +377,18 @@ export function ClaimableModuleUI(
                     name={props.name}
                     chainId={props.contractChainId}
                     noClaimConditionSet={props.noClaimConditionSet}
+                    currencyDecimals={
+                      props.claimConditionSection.data?.currencyDecimals
+                    }
                     tokenDecimals={
                       props.claimConditionSection.data?.tokenDecimals
                     }
                     tokenId={props.claimConditionSection.tokenId}
                   />
-                )}
-              {props.isValidTokenId &&
-                props.claimConditionSection.isLoading && (
+                ) : (
                   <Skeleton className="h-[350px]" />
-                )}
+                )
+              ) : null}
             </AccordionContent>
           </AccordionItem>
 
@@ -453,7 +462,8 @@ function ClaimConditionSection(props: {
   isOwnerAccount: boolean;
   name: string;
   chainId: number;
-  tokenDecimals?: number;
+  currencyDecimals?: number;
+  tokenDecimals?: number | undefined;
   tokenId: string;
   noClaimConditionSet: boolean;
 }) {
@@ -473,18 +483,28 @@ function ClaimConditionSection(props: {
           : claimCondition?.currency,
       // default case is zero state, so 0 // 10 ** 18 still results in 0
       pricePerToken: Number(
-        toTokens(claimCondition?.pricePerUnit, props.tokenDecimals || 18),
+        toTokens(claimCondition?.pricePerUnit, props.currencyDecimals || 18),
       ),
       maxClaimableSupply:
         claimCondition?.availableSupply.toString() === "0" ||
         claimCondition?.availableSupply.toString() === MAX_UINT_256
           ? ""
-          : claimCondition?.availableSupply.toString() || "",
+          : props.name === "ClaimableERC20"
+            ? toTokens(
+                claimCondition?.availableSupply,
+                props.tokenDecimals || 18,
+              )
+            : claimCondition?.availableSupply.toString() || "",
       maxClaimablePerWallet:
         claimCondition?.maxMintPerWallet.toString() === "0" ||
         claimCondition?.maxMintPerWallet.toString() === MAX_UINT_256
           ? ""
-          : claimCondition?.maxMintPerWallet.toString() || "",
+          : props.name === "ClaimableERC20"
+            ? toTokens(
+                claimCondition?.maxMintPerWallet,
+                props.tokenDecimals || 18,
+              )
+            : claimCondition?.maxMintPerWallet.toString() || "",
       startTime: claimCondition?.startTimestamp
         ? fromUnixTime(claimCondition?.startTimestamp)
         : defaultStartDate,

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx

@@ -176,6 +176,7 @@ function Component() {
                   ? undefined
                   : {
                       claimCondition,
+                      currencyDecimals: 18,
                       tokenDecimals: 18,
                     },
               isLoading: false,