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,
@@ -47,6 +48,7 @@ export type UpdateFormValues = {
 // TODO - add form validation with zod schema for mint form
 
 export type MintFormValues = NFTMetadataInputLimited & {
+  useNextTokenId: boolean;
   recipient: string;
   amount: number;
   supply: number;
@@ -292,6 +294,7 @@ function MintNFTSection(props: {
 }) {
   const form = useForm<MintFormValues>({
     values: {
+      useNextTokenId: false,
       supply: 1,
       customImage: "",
       customAnimationUrl: "",
@@ -313,6 +316,8 @@ function MintNFTSection(props: {
     });
   };
 
+  const useNextTokenId = form.watch("useNextTokenId");
+
   return (
     <Form {...form}>
       <form onSubmit={form.handleSubmit(onSubmit)}>
@@ -426,19 +431,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>