implemented functionality of Claimable

Author: GWSzeto

apps/dashboard/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "format": "biome format ./src --write",

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

@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/accordion";
 import { Alert, AlertTitle } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
+import { Checkbox, CheckboxWithLabel } from "@/components/ui/checkbox";
 import {
   Form,
   FormControl,
@@ -28,7 +29,7 @@ import { CircleAlertIcon } from "lucide-react";
 import { useCallback } from "react";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { sendAndConfirmTransaction } from "thirdweb";
+import { PreparedTransaction, sendAndConfirmTransaction } from "thirdweb";
 import { isAddress } from "thirdweb";
 import { MintableERC721, MintableERC1155 } from "thirdweb/modules";
 import { useReadContract } from "thirdweb/react";
@@ -46,7 +47,8 @@ export type UpdateFormValues = {
 
 // TODO - add form validation with zod schema for mint form
 
-export type MintFormValues = NFTMetadataInputLimited & {
+export type MintFormValues = NFTMetadat||aInputLimited & {
+  useNextTokenId: boolean;
   recipient: string;
   amount: number;
   supply: number;
@@ -79,20 +81,25 @@ function MintableModule(props: ModuleInstanceProps) {
       if (!ownerAccount) {
         throw new Error("Not an owner account");
       }
-
-      const mintTx = isErc721
-        ? MintableERC721.mintWithRole({
+      
+      let mintTx: PreparedTransaction;
+      if (isErc721) {
+       mintTx = MintableERC721.mintWithRole({ 
             contract,
             to: values.recipient,
             nfts: [nft],
           })
-        : MintableERC1155.mintWithRole({
+      } else if (values.useNextTokenId || values.tokenId) {
+        mintTx = MintableERC1155.mintWithRole({
             contract,
             to: values.recipient,
             amount: BigInt(values.amount),
-            tokenId: values.tokenId ? BigInt(values.tokenId) : undefined,
+            tokenId: values.useNextTokenId ? undefined : BigInt(values.tokenId),
             nft,
           });
+      } else {
+        throw new Error("Invalid token ID");
+      }
 
       await sendAndConfirmTransaction({
         account: ownerAccount,
@@ -292,6 +299,7 @@ function MintNFTSection(props: {
 }) {
   const form = useForm<MintFormValues>({
     values: {
+      useNextTokenId: false,
       supply: 1,
       customImage: "",
       customAnimationUrl: "",
@@ -313,6 +321,8 @@ function MintNFTSection(props: {
     });
   };
 
+  const useNextTokenId = form.watch("useNextTokenId");
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -426,19 +436,39 @@ function MintNFTSection(props: {
               />
             )}
 
-            {!props.isErc721 && !props.isSequentialTokenIdInstalled && (
-              <FormField
-                control={form.control}
-                name="tokenId"
-                render={({ field }) => (
-                  <FormItem className="flex-1">
-                    <FormLabel>Token ID</FormLabel>
-                    <FormControl>
-                      <Input {...field} />
-                    </FormControl>
-                  </FormItem>
-                )}
-              />
+            {!props.isErc721 && (
+              <div className="relative flex-1">
+                <FormField
+                  control={form.control}
+                  name="tokenId"
+                  render={({ field }) => (
+                    <FormItem className="flex-1">
+                      <FormLabel>Token ID</FormLabel>
+                      <FormControl>
+                        <Input {...field} disabled={useNextTokenId} />
+                      </FormControl>
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="useNextTokenId"
+                  render={({ field }) => (
+                    <FormItem className="absolute top-0 right-0 flex items-center gap-2">
+                      <CheckboxWithLabel>
+                        <Checkbox
+                          className="mt-0"
+                          checked={field.value}
+                          onCheckedChange={field.onChange}
+                        />
+                        Use next token ID
+                      </CheckboxWithLabel>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+              </div>
             )}
           </div>