updated to address comments in PR

Author: GWSzeto

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

@@ -8,7 +8,7 @@ import {
   AccordionItem,
   AccordionTrigger,
 } from "@/components/ui/accordion";
-import { Alert, AlertTitle } from "@/components/ui/alert";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import {
   Form,
@@ -38,6 +38,7 @@ import {
 } from "react";
 import { useFieldArray, useForm } from "react-hook-form";
 import {
+  NATIVE_TOKEN_ADDRESS,
   type PreparedTransaction,
   ZERO_ADDRESS,
   getContract,
@@ -64,12 +65,15 @@ export type ClaimConditionValue = {
   auxData: string;
 };
 
+const positiveIntegerRegex = /^[0-9]\d*$/;
+
 function ClaimableModule(props: ModuleInstanceProps) {
   const { contract, ownerAccount } = props;
   const account = useActiveAccount();
   const [tokenId, setTokenId] = useState<string>("");
 
   const isErc721 = props.contractInfo.name === "ClaimableERC721";
+  const isValidTokenId = positiveIntegerRegex.test(tokenId);
 
   const primarySaleRecipientQuery = useReadContract(
     isErc721 ? ClaimableERC721.getSaleConfig : ClaimableERC1155.getSaleConfig,
@@ -83,14 +87,24 @@ function ClaimableModule(props: ModuleInstanceProps) {
       ? ClaimableERC721.getClaimCondition
       : ClaimableERC1155.getClaimCondition,
     {
-      tokenId: BigInt(tokenId),
+      tokenId: positiveIntegerRegex.test(tokenId) ? BigInt(tokenId) : 0n,
       contract: contract,
       queryOptions: {
-        enabled: isErc721 || !!tokenId,
+        enabled: isErc721 || (!!tokenId && isValidTokenId),
       },
     },
   );
 
+  const noClaimConditionSet =
+    claimConditionQuery.data?.availableSupply === 0n &&
+    claimConditionQuery.data?.allowlistMerkleRoot ===
+      "0x0000000000000000000000000000000000000000000000000000000000000000" &&
+    claimConditionQuery.data?.pricePerUnit === 0n &&
+    claimConditionQuery.data?.currency === ZERO_ADDRESS &&
+    claimConditionQuery.data?.maxMintPerWallet === 0n &&
+    claimConditionQuery.data?.startTimestamp === 0 &&
+    claimConditionQuery.data?.endTimestamp === 0;
+
   const currencyContract = getContract({
     address: claimConditionQuery.data?.currency || "",
     chain: props.contract.chain,
@@ -229,6 +243,8 @@ function ClaimableModule(props: ModuleInstanceProps) {
       isErc721={isErc721}
       contractChainId={props.contract.chain.id}
       setTokenId={setTokenId}
+      isValidTokenId={isValidTokenId}
+      noClaimConditionSet={noClaimConditionSet}
       mintSection={{
         mint,
       }}
@@ -242,6 +258,8 @@ export function ClaimableModuleUI(
     isErc721: boolean;
     contractChainId: number;
     setTokenId: Dispatch<SetStateAction<string>>;
+    isValidTokenId: boolean;
+    noClaimConditionSet: boolean;
     primarySaleRecipientSection: {
       setPrimarySaleRecipient: (
         values: PrimarySaleRecipientFormValues,
@@ -300,7 +318,12 @@ export function ClaimableModuleUI(
                     <Input onChange={(e) => props.setTokenId(e.target.value)} />
                   </div>
 
-                  {!props.claimConditionSection.tokenId && (
+                  {!(
+                    props.claimConditionSection.tokenId &&
+                    positiveIntegerRegex.test(
+                      props.claimConditionSection.tokenId,
+                    )
+                  ) && (
                     <Alert variant="warning">
                       <CircleAlertIcon className="size-5 max-sm:hidden" />
                       <AlertTitle className="max-sm:!pl-0">
@@ -313,7 +336,8 @@ export function ClaimableModuleUI(
 
               <div className="h-6" />
 
-              {props.claimConditionSection.data &&
+              {props.isValidTokenId &&
+                props.claimConditionSection.data &&
                 !props.claimConditionSection.isLoading && (
                   <ClaimConditionSection
                     isOwnerAccount={props.isOwnerAccount}
@@ -323,15 +347,17 @@ export function ClaimableModuleUI(
                     update={props.claimConditionSection.setClaimCondition}
                     isErc721={props.isErc721}
                     chainId={props.contractChainId}
+                    noClaimConditionSet={props.noClaimConditionSet}
                     tokenDecimals={
                       props.claimConditionSection.data?.tokenDecimals
                     }
                     tokenId={props.claimConditionSection.tokenId}
                   />
                 )}
-              {props.claimConditionSection.isLoading && (
-                <Skeleton className="h-[350px]" />
-              )}
+              {props.isValidTokenId &&
+                props.claimConditionSection.isLoading && (
+                  <Skeleton className="h-[350px]" />
+                )}
             </AccordionContent>
           </AccordionItem>
 
@@ -407,6 +433,7 @@ function ClaimConditionSection(props: {
   chainId: number;
   tokenDecimals?: number;
   tokenId: string;
+  noClaimConditionSet: boolean;
 }) {
   const { idToChain } = useAllChainsData();
   const chain = idToChain.get(props.chainId);
@@ -418,14 +445,12 @@ function ClaimConditionSection(props: {
       tokenId,
       currencyAddress:
         claimCondition?.currency === ZERO_ADDRESS
-          ? ""
+          ? NATIVE_TOKEN_ADDRESS // default to the native token address
           : claimCondition?.currency,
-      pricePerToken:
-        claimCondition?.pricePerUnit &&
-        claimCondition?.currency !== ZERO_ADDRESS &&
-        props.tokenDecimals
-          ? Number(toTokens(claimCondition?.pricePerUnit, props.tokenDecimals))
-          : 0,
+      // default case is zero state, so 0 // 10 ** 18 still results in 0
+      pricePerToken: Number(
+        toTokens(claimCondition?.pricePerUnit, props.tokenDecimals || 18),
+      ),
       maxClaimableSupply:
         claimCondition?.availableSupply.toString() === "0" ||
         claimCondition?.availableSupply.toString() === MAX_UINT_256
@@ -475,6 +500,17 @@ function ClaimConditionSection(props: {
 
   return (
     <div className="flex flex-col gap-6">
+      {props.noClaimConditionSet && (
+        <Alert variant="warning">
+          <CircleAlertIcon className="size-5 max-sm:hidden" />
+          <AlertTitle>No Claim Condition Set</AlertTitle>
+          <AlertDescription>
+            You have not set a claim condition for this token. You can set a
+            claim condition by clicking the "Set Claim Condition" button.
+          </AlertDescription>
+        </Alert>
+      )}
+
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)}>
           <div className="flex flex-col gap-6">

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

@@ -48,7 +48,7 @@ const testAddress1 = "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37";
 const claimCondition = {
   availableSupply: BigInt(100),
   maxMintPerWallet: BigInt(10),
-  pricePerUnit: 10n,
+  pricePerUnit: 10000000000000000000n,
   // we get checksummed NATIVE_TOKEN_ADDRESS from claim condition query for native token
   currency: checksumAddress(NATIVE_TOKEN_ADDRESS),
   // last week
@@ -65,6 +65,7 @@ function Component() {
   const [isPrimarySaleRecipientLoading, setIsPrimarySaleRecipientLoading] =
     useState(false);
   const [tokenId, setTokenId] = useState("");
+  const [noClaimConditionSet, setNoClaimConditionSet] = useState(false);
 
   async function updatePrimarySaleRecipientStub(
     values: PrimarySaleRecipientFormValues,
@@ -137,6 +138,13 @@ function Component() {
               id="isPrimarySaleRecipientLoading"
               label="Primary Sale Recipient Section Loading"
             />
+
+            <CheckboxWithLabel
+              value={noClaimConditionSet}
+              onChange={setNoClaimConditionSet}
+              id="noClaimConditionSet"
+              label="No Claim Condition Set"
+            />
           </div>
 
           <ClaimableModuleUI
@@ -173,6 +181,8 @@ function Component() {
             isErc721={isErc721}
             contractChainId={1}
             setTokenId={setTokenId}
+            isValidTokenId={true}
+            noClaimConditionSet={noClaimConditionSet}
           />
 
           <Toaster richColors />