created sequential token ID field set

Author: GWSzeto

apps/dashboard/src/components/contract-components/contract-deploy-form/modular-contract-default-modules-fieldset.tsx

@@ -6,6 +6,7 @@ import { FormErrorMessage, FormLabel } from "tw-components";
 import type { CustomContractDeploymentForm } from "./custom-contract";
 import { PrimarySaleFieldset } from "./primary-sale-fieldset";
 import { RoyaltyFieldset } from "./royalty-fieldset";
+import { SequentialTokenIdFieldset } from "./sequential-token-id-fieldset";
 
 export function getModuleInstallParams(mod: FetchDeployMetadataResult) {
   return (
@@ -67,6 +68,16 @@ function RenderModule(props: {
         <RenderPrimarySaleFieldset module={module} form={form} isTWPublisher />
       );
     }
+
+    if (showSequentialTokenIdFieldset(paramNames)) {
+      return (
+        <RenderSequentialTokenIdFieldset
+          module={module}
+          form={form}
+          isTWPublisher
+        />
+      );
+    }
   }
 
   return (
@@ -133,6 +144,26 @@ function RenderPrimarySaleFieldset(prosp: {
   );
 }
 
+function RenderSequentialTokenIdFieldset(prosp: {
+  module: FetchDeployMetadataResult;
+  form: CustomContractDeploymentForm;
+  isTWPublisher: boolean;
+}) {
+  const { module, form } = prosp;
+
+  const startTokenIdPath = `moduleData.${module.name}.startTokenId` as const;
+
+  return (
+    <SequentialTokenIdFieldset
+      isInvalid={!!form.getFieldState(startTokenIdPath, form.formState).error}
+      register={form.register(startTokenIdPath)}
+      errorMessage={
+        form.getFieldState(startTokenIdPath, form.formState).error?.message
+      }
+    />
+  );
+}
+
 function RenderRoyaltyFieldset(props: {
   module: FetchDeployMetadataResult;
   form: CustomContractDeploymentForm;
@@ -194,3 +225,7 @@ export function showRoyaltyFieldset(paramNames: string[]) {
 export function showPrimarySaleFiedset(paramNames: string[]) {
   return paramNames.length === 1 && paramNames.includes("primarySaleRecipient");
 }
+
+export function showSequentialTokenIdFieldset(paramNames: string[]) {
+  return paramNames.length === 1 && paramNames.includes("startTokenId");
+}

apps/dashboard/src/components/contract-components/contract-deploy-form/sequential-token-id-fieldset.tsx

@@ -0,0 +1,34 @@
+import { FormControl } from "@chakra-ui/react";
+import { SolidityInput } from "contract-ui/components/solidity-inputs";
+import type { UseFormRegisterReturn } from "react-hook-form";
+import { FormErrorMessage, FormHelperText, FormLabel } from "tw-components";
+import { Fieldset } from "./common";
+
+interface SequentialTokenIdFieldsetProps {
+  isInvalid: boolean;
+  register: UseFormRegisterReturn;
+  errorMessage: string | undefined;
+}
+
+export const SequentialTokenIdFieldset: React.FC<
+  SequentialTokenIdFieldsetProps
+> = (props) => {
+  return (
+    <Fieldset legend="Sequential Token ID">
+      <FormControl isRequired isInvalid={props.isInvalid}>
+        <FormLabel>Start Token ID</FormLabel>
+        <SolidityInput
+          solidityType="uint256"
+          variant="filled"
+          {...props.register}
+        />
+
+        <FormErrorMessage>{props.errorMessage}</FormErrorMessage>
+
+        <FormHelperText className="!text-sm text-muted-foreground">
+          The starting token ID for the NFT collection.
+        </FormHelperText>
+      </FormControl>
+    </Fieldset>
+  );
+};