From dc1dc5096f3ef223b9fd3bd209db4d3ad86ea788 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 11 Feb 2025 00:22:33 +0700
Subject: [PATCH 1/2] feat: validate evm verify form options

---
 CHANGELOG.md                                  |   1 +
 .../components/ContractLibraries.tsx          |  55 ++-----
 .../components/ContractLibrary.tsx            |  56 +++++++
 .../components/OptimizerConfiguration.tsx     |   9 +-
 .../EvmContractVerifySolidityContractCode.tsx |   2 +-
 src/lib/pages/evm-contract-verify/index.tsx   | 141 +++++++++++++-----
 src/lib/services/types/verification/evm.ts    |  85 +++++++----
 7 files changed, 231 insertions(+), 118 deletions(-)
 create mode 100644 src/lib/pages/evm-contract-verify/components/ContractLibrary.tsx

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4e64af976..358eed71a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1225](https://github.com/alleslabs/celatone-frontend/pull/1225) Validate EVM Verification form options
 - [#1223](https://github.com/alleslabs/celatone-frontend/pull/1223) Support Vyper on EVM contract details
 - [#1220](https://github.com/alleslabs/celatone-frontend/pull/1220) Add EVM contract verification for Solidity with contract code (flattened method)
 - [#1219](https://github.com/alleslabs/celatone-frontend/pull/1219) Add tooltip to full editor sidebar
diff --git a/src/lib/pages/evm-contract-verify/components/ContractLibraries.tsx b/src/lib/pages/evm-contract-verify/components/ContractLibraries.tsx
index 5b6229144..6ce3c73fa 100644
--- a/src/lib/pages/evm-contract-verify/components/ContractLibraries.tsx
+++ b/src/lib/pages/evm-contract-verify/components/ContractLibraries.tsx
@@ -1,18 +1,16 @@
 import { Button, Checkbox, Grid, Heading, Stack, Text } from "@chakra-ui/react";
-import { useExampleAddresses } from "lib/app-provider";
-import { ControllerInput } from "lib/components/forms";
 import { CustomIcon } from "lib/components/icon";
-import { truncate } from "lib/utils";
 import {
   ArrayPath,
   Control,
   FieldArray,
+  FieldArrayPath,
   FieldPath,
   FieldValues,
   useController,
   useFieldArray,
-  useWatch,
 } from "react-hook-form";
+import { ContractLibrary } from "./ContractLibrary";
 
 interface ContractLibrariesProps<T extends FieldValues> {
   control: Control<T>;
@@ -23,21 +21,14 @@ export const ContractLibraries = <T extends FieldValues>({
   control,
   name,
 }: ContractLibrariesProps<T>) => {
-  const { evmContract: exampleContractAddress } = useExampleAddresses();
-
   const { field } = useController({
     control,
-    name: `${name}.contractLibraries` as FieldPath<T>,
-  });
-
-  const contractLibraries = useWatch({
-    control,
-    name: `${name}.contractLibraries` as FieldPath<T>,
+    name: `${name}.contractLibraries.enabled` as FieldPath<T>,
   });
 
   const { fields, append, remove } = useFieldArray({
     control,
-    name: `${name}.contractLibraries.value` as ArrayPath<T>,
+    name: `${name}.contractLibraries.value` as FieldArrayPath<T>,
   });
 
   return (
@@ -53,10 +44,8 @@ export const ContractLibraries = <T extends FieldValues>({
       </Stack>
       <Checkbox
         p={2}
-        isChecked={contractLibraries.enabled}
-        onChange={(e) =>
-          field.onChange({ ...field.value, enabled: e.target.checked })
-        }
+        isChecked={field.value}
+        onChange={(e) => field.onChange(e.target.checked)}
       >
         <Text>Have contract libraries</Text>
       </Checkbox>
@@ -66,35 +55,13 @@ export const ContractLibraries = <T extends FieldValues>({
         px={3}
         bgColor="gray.900"
         borderRadius="md"
-        display={contractLibraries.enabled ? "flex" : "none"}
+        display={field.value ? "flex" : "none"}
       >
-        {fields.map((field, index) => (
-          <Grid key={field.id} gridTemplateColumns="1fr 2fr auto" gap={4}>
-            <ControllerInput
-              label="Library Name"
-              isRequired
-              rules={{
-                required: "",
-              }}
-              placeholder="ex. simple_math"
-              name={
-                `${name}.contractLibraries.value.${index}.name` as FieldPath<T>
-              }
-              control={control}
-              variant="fixed-floating"
-            />
-            <ControllerInput
-              label="Contract Library Address"
-              isRequired
-              rules={{
-                required: "",
-              }}
-              placeholder={`ex. ${truncate(exampleContractAddress)}`}
-              name={
-                `${name}.contractLibraries.value.${index}.address` as FieldPath<T>
-              }
+        {fields.map(({ id }, index) => (
+          <Grid key={id} gridTemplateColumns="1fr 2fr auto" gap={4}>
+            <ContractLibrary<T>
               control={control}
-              variant="fixed-floating"
+              name={`${name}.contractLibraries.value.${index}` as FieldPath<T>}
             />
             <Button
               variant="outline-gray"
diff --git a/src/lib/pages/evm-contract-verify/components/ContractLibrary.tsx b/src/lib/pages/evm-contract-verify/components/ContractLibrary.tsx
new file mode 100644
index 000000000..47c725e43
--- /dev/null
+++ b/src/lib/pages/evm-contract-verify/components/ContractLibrary.tsx
@@ -0,0 +1,56 @@
+import { useExampleAddresses } from "lib/app-provider";
+import { ControllerInput } from "lib/components/forms";
+import { truncate } from "lib/utils";
+import {
+  Control,
+  FieldPath,
+  FieldValues,
+  useController,
+} from "react-hook-form";
+
+interface ContractLibraryProps<T extends FieldValues> {
+  control: Control<T>;
+  name: FieldPath<T>;
+}
+
+export const ContractLibrary = <T extends FieldValues>({
+  control,
+  name,
+}: ContractLibraryProps<T>) => {
+  const { evmContract: exampleContractAddress } = useExampleAddresses();
+  const { field } = useController({
+    control,
+    name,
+  });
+
+  return (
+    <>
+      <ControllerInput
+        label="Library Name"
+        isRequired
+        rules={{
+          required: "",
+        }}
+        placeholder="ex. simple_math"
+        name={`${name}.name` as FieldPath<T>}
+        control={control}
+        variant="fixed-floating"
+        labelBgColor="gray.900"
+        error={field.value.name !== "" ? "" : "Required"}
+      />
+      <ControllerInput
+        label="Contract Library Address"
+        isRequired
+        rules={{
+          required: "",
+        }}
+        placeholder={`ex. ${truncate(exampleContractAddress)}`}
+        name={`${name}.address` as FieldPath<T>}
+        control={control}
+        variant="fixed-floating"
+        labelBgColor="gray.900"
+        error={field.value.address !== "" ? "" : "Required"}
+      />
+    </>
+  );
+};
diff --git a/src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx b/src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx
index 532a20a3f..91698884c 100644
--- a/src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx
+++ b/src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx
@@ -22,7 +22,7 @@ export const OptimizerConfiguration = <T extends FieldValues>({
     name: `${name}.optimizerConfig` as FieldPath<T>,
   });
 
-  const { enabled } = useWatch({
+  const { enabled, runs } = useWatch({
     control,
     name: `${name}.optimizerConfig` as FieldPath<T>,
   });
@@ -55,6 +55,13 @@ export const OptimizerConfiguration = <T extends FieldValues>({
             isDisabled={!enabled}
             control={control}
             size="md"
+            status={
+              enabled && runs === ""
+                ? {
+                    state: "error",
+                  }
+                : undefined
+            }
           />
         </Flex>
       </Flex>
diff --git a/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityContractCode.tsx b/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityContractCode.tsx
index 6feb9edb0..bd8061dc1 100644
--- a/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityContractCode.tsx
+++ b/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityContractCode.tsx
@@ -55,7 +55,7 @@ export const EvmContractVerifySolidityContractCode = ({
       />
       <ContractLibraries<EvmContractVerifyForm>
         control={control}
-        name="verifyForm.solidityContractCode"
+        name="verifyForm.solidityContractCode.contractLibraries"
       />
     </Stack>
   );
diff --git a/src/lib/pages/evm-contract-verify/index.tsx b/src/lib/pages/evm-contract-verify/index.tsx
index ba23abe27..c26b47383 100644
--- a/src/lib/pages/evm-contract-verify/index.tsx
+++ b/src/lib/pages/evm-contract-verify/index.tsx
@@ -1,16 +1,4 @@
-import {
-  CELATONE_QUERY_KEYS,
-  useCelatoneApp,
-  useEvmConfig,
-  useExampleAddresses,
-  useMobile,
-} from "lib/app-provider";
-import { useRouter } from "next/router";
-import { useEffect, useMemo } from "react";
 import { track } from "@amplitude/analytics-browser";
-import { AmpEvent } from "lib/amplitude";
-import PageContainer from "lib/components/PageContainer";
-import { CelatoneSeo } from "lib/components/Seo";
 import {
   Divider,
   Grid,
@@ -20,43 +8,62 @@ import {
   Text,
   useDisclosure,
 } from "@chakra-ui/react";
-import { EvmContractVerifyTop } from "./components/EvmContractVerifyTop";
-import { ContractLicenseInfoAccordion } from "./components/ContractLicenseInfoAccordion";
-import { EvmContractFooter } from "./components/EvmContractVerifyFooter";
-import { ControllerInput, SelectInput } from "lib/components/forms";
-import { useForm } from "react-hook-form";
-import { zEvmContractVerifyQueryParams } from "./types";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { NoMobile } from "lib/components/modal";
-import { isHex20Bytes, truncate } from "lib/utils";
-import { EvmContractVerifyOptions } from "./components/EvmContractVerifyOptions";
-import { EvmContractVerifyForms } from "./components/EvmContractVerifyForms";
-import {
-  formatEvmOptions,
-  getEvmContractVerifyFormDefaultValue,
-  getLicenseTypeOptions,
-  PROGRAMMING_LANGUAGE_OPTIONS,
-} from "./helpers";
-import { HarthatInfoAccordion } from "./components/HardhatInfoAccordion";
-import { FoundryInfoAccordion } from "./components/FoundryInfoAccordion";
-import { ErrorFetching, InvalidState } from "lib/components/state";
-import { HexAddr20, Option } from "lib/types";
+import { useQueryClient } from "@tanstack/react-query";
+import { AmpEvent } from "lib/amplitude";
 import {
-  useEvmVerifyConfig,
-  useEvmVerifyInfo,
-  useSubmitEvmVerify,
-} from "lib/services/verification/evm";
+  CELATONE_QUERY_KEYS,
+  useCelatoneApp,
+  useEvmConfig,
+  useExampleAddresses,
+  useMobile,
+} from "lib/app-provider";
+import { ControllerInput, SelectInput } from "lib/components/forms";
 import { Loading } from "lib/components/Loading";
+import { NoMobile } from "lib/components/modal";
+import { EvmVerifyStatusModal } from "lib/components/modal/evm-verify-status";
+import PageContainer from "lib/components/PageContainer";
+import { CelatoneSeo } from "lib/components/Seo";
+import { ErrorFetching, InvalidState } from "lib/components/state";
 import {
   EvmContractVerifyForm,
   EvmProgrammingLanguage,
   EvmVerifyConfig,
   EvmVerifyOptions,
+  zEvmContractVerifyBase,
   zEvmContractVerifyForm,
+  zEvmContractVerifySolidityOptionContractCodeForm,
+  zEvmContractVerifySolidityOptionJsonInputForm,
+  zEvmContractVerifySolidityOptionUploadFilesForm,
+  zEvmContractVerifyVyperOptionContractCodeForm,
+  zEvmContractVerifyVyperOptionJsonInputForm,
+  zEvmContractVerifyVyperOptionUploadFileForm,
 } from "lib/services/types";
-import { EvmVerifyStatusModal } from "lib/components/modal/evm-verify-status";
+import {
+  useEvmVerifyConfig,
+  useEvmVerifyInfo,
+  useSubmitEvmVerify,
+} from "lib/services/verification/evm";
+import { HexAddr20, Option } from "lib/types";
+import { isHex20Bytes, truncate } from "lib/utils";
+import { useRouter } from "next/router";
+import { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
+import { ContractLicenseInfoAccordion } from "./components/ContractLicenseInfoAccordion";
 import { EvmContractVerifyModal } from "./components/evm-contract-verify-modal";
-import { useQueryClient } from "@tanstack/react-query";
+import { EvmContractFooter } from "./components/EvmContractVerifyFooter";
+import { EvmContractVerifyForms } from "./components/EvmContractVerifyForms";
+import { EvmContractVerifyOptions } from "./components/EvmContractVerifyOptions";
+import { EvmContractVerifyTop } from "./components/EvmContractVerifyTop";
+import { FoundryInfoAccordion } from "./components/FoundryInfoAccordion";
+import { HarthatInfoAccordion } from "./components/HardhatInfoAccordion";
+import {
+  formatEvmOptions,
+  getEvmContractVerifyFormDefaultValue,
+  getLicenseTypeOptions,
+  PROGRAMMING_LANGUAGE_OPTIONS,
+} from "./helpers";
+import { zEvmContractVerifyQueryParams } from "./types";
 
 interface EvmContractVerifyBodyProps {
   contractAddress: Option<HexAddr20>;
@@ -121,18 +128,70 @@ export const EvmContractVerifyBody = ({
 
   // TODO
   const isFormDisabled = () => {
-    return false;
+    const isEvmContractVerifyBaseSuccess =
+      zEvmContractVerifyBase.safeParse({
+        contractAddress,
+        licenseType,
+        language,
+        compilerVersion,
+        option,
+      }).success &&
+      language !== undefined &&
+      option !== undefined;
+
+    let isEvmOptionSuccess = false;
+    if (isVerifyByExternals) isEvmOptionSuccess = true;
+    else {
+      isEvmOptionSuccess = licenseType !== undefined && compilerVersion !== "";
+      if (option === EvmVerifyOptions.SolidityUploadFiles)
+        isEvmOptionSuccess =
+          isEvmOptionSuccess &&
+          zEvmContractVerifySolidityOptionUploadFilesForm.safeParse(
+            verifyForm.solidityUploadFiles
+          ).success;
+      if (option === EvmVerifyOptions.SolidityContractCode)
+        isEvmOptionSuccess =
+          isEvmOptionSuccess &&
+          zEvmContractVerifySolidityOptionContractCodeForm.safeParse(
+            verifyForm.solidityContractCode
+          ).success;
+      if (option === EvmVerifyOptions.SolidityJsonInput)
+        isEvmOptionSuccess =
+          isEvmOptionSuccess &&
+          zEvmContractVerifySolidityOptionJsonInputForm.safeParse(
+            verifyForm.solidityJsonInput
+          ).success;
+      if (option === EvmVerifyOptions.VyperUploadFile)
+        isEvmOptionSuccess =
+          isEvmOptionSuccess &&
+          zEvmContractVerifyVyperOptionUploadFileForm.safeParse(
+            verifyForm.vyperUploadFile
+          ).success;
+      if (option === EvmVerifyOptions.VyperContractCode)
+        isEvmOptionSuccess =
+          isEvmOptionSuccess &&
+          zEvmContractVerifyVyperOptionContractCodeForm.safeParse(
+            verifyForm.vyperContractCode
+          ).success;
+      if (option === EvmVerifyOptions.VyperJsonInput)
+        isEvmOptionSuccess =
+          isEvmOptionSuccess &&
+          zEvmContractVerifyVyperOptionJsonInputForm.safeParse(
+            verifyForm.vyperJsonInput
+          ).success;
+    }
+
+    return !isEvmContractVerifyBaseSuccess || !isEvmOptionSuccess;
   };
 
   const handleSubmit = () => {
-    if (!option || !language || !licenseType) return;
-
     // open modal for either verification status or verification result
     onOpen();
 
     // if verify by tools, don't need to submit verification
     if (isVerifyByExternals) return;
 
+    if (!option || !language || !licenseType) return;
     mutate(
       {
         option,
diff --git a/src/lib/services/types/verification/evm.ts b/src/lib/services/types/verification/evm.ts
index 800613baa..84e31ea03 100644
--- a/src/lib/services/types/verification/evm.ts
+++ b/src/lib/services/types/verification/evm.ts
@@ -37,43 +37,66 @@ export enum EvmVerifyOptions {
 }
 
 // MARK - Shared Components
-const zEvmOptimizerConfig = z.object({
-  enabled: z.boolean(),
-  runs: z.string(),
-});
+const zEvmOptimizerConfig = z
+  .object({
+    enabled: z.boolean(),
+    runs: z.string(),
+  })
+  .refine(({ enabled, runs }) => !enabled || runs !== "");
 export type EvmOptimizerConfig = z.infer<typeof zEvmOptimizerConfig>;
 
-const zConstructorArgs = z.object({
-  enabled: z.boolean(),
-  value: z.string(),
-});
+const zConstructorArgs = z
+  .object({
+    enabled: z.boolean(),
+    value: z.string(),
+  })
+  .refine(({ enabled, value }) => !enabled || value !== "");
 
-const zEvmTargetVersion = z.string();
+const zEvmTargetVersion = z.string().refine((val) => val !== "");
 
 const zContractLibrary = z.object({
   name: z.string(),
   address: zHexAddr20,
 });
 
-const zContractLibraries = z.object({
-  enabled: z.boolean(),
-  value: z.array(zContractLibrary),
-});
+const zContractLibraries = z
+  .object({
+    enabled: z.boolean(),
+    value: z.array(zContractLibrary),
+  })
+  .refine(
+    ({ enabled, value }) =>
+      !enabled ||
+      value.every((item) => item.name !== "" && isHex20Bytes(item.address))
+  );
+
+const zFile = z
+  .instanceof(File)
+  .optional()
+  .superRefine((file, ctx) => {
+    if (file === undefined)
+      ctx.addIssue({
+        code: z.ZodIssueCode.custom,
+        message: "File is required",
+      });
+  });
 
 // MARK - Solidity
-const zEvmContractVerifySolidityOptionUploadFilesForm = z.object({
-  files: z.array(
-    z.object({
-      file: z.instanceof(File),
-    })
-  ),
+export const zEvmContractVerifySolidityOptionUploadFilesForm = z.object({
+  files: z
+    .array(
+      z.object({
+        file: z.instanceof(File),
+      })
+    )
+    .refine((val) => val.length > 0),
   constructorArgs: zConstructorArgs,
   optimizerConfig: zEvmOptimizerConfig,
   evmVersion: zEvmTargetVersion,
   contractLibraries: zContractLibraries,
 });
 
-const zEvmContractVerifySolidityOptionContractCodeForm = z.object({
+export const zEvmContractVerifySolidityOptionContractCodeForm = z.object({
   contractCode: z.string(),
   constructorArgs: zConstructorArgs,
   evmVersion: zEvmTargetVersion,
@@ -81,32 +104,32 @@ const zEvmContractVerifySolidityOptionContractCodeForm = z.object({
   contractLibraries: zContractLibraries,
 });
 
-const zEvmContractVerifySolidityOptionJsonInputForm = z.object({
-  jsonFile: z.instanceof(File).optional(),
+export const zEvmContractVerifySolidityOptionJsonInputForm = z.object({
+  jsonFile: zFile,
   constructorArgs: zConstructorArgs,
 });
 
 // MARK - Vyper
-const zEvmContractVerifyVyperOptionUploadFileForm = z.object({
-  file: z.instanceof(File).optional(),
+export const zEvmContractVerifyVyperOptionUploadFileForm = z.object({
+  file: zFile,
   constructorArgs: zConstructorArgs,
   evmVersion: zEvmTargetVersion,
 });
 
-const zEvmContractVerifyVyperOptionContractCodeForm = z.object({
-  contractName: z.string(),
-  contractCode: z.string(),
+export const zEvmContractVerifyVyperOptionContractCodeForm = z.object({
+  contractName: z.string().refine((val) => val !== ""),
+  contractCode: z.string().refine((val) => val !== ""),
   constructorArgs: zConstructorArgs,
   evmVersion: zEvmTargetVersion,
 });
 
-const zEvmContractVerifyVyperOptionJsonInputForm = z.object({
-  jsonFile: z.instanceof(File).optional(),
+export const zEvmContractVerifyVyperOptionJsonInputForm = z.object({
+  jsonFile: zFile,
   constructorArgs: zConstructorArgs,
 });
 
 // MARK - Base for all verify forms
-const zEvmContractVerifyBase = z.object({
+export const zEvmContractVerifyBase = z.object({
   // TODO: refactor later
   contractAddress: zHexAddr20.superRefine((val, ctx) => {
     if (val === "")
@@ -121,9 +144,9 @@ const zEvmContractVerifyBase = z.object({
         message: "Invalid address",
       });
   }),
-  compilerVersion: z.string(),
   licenseType: z.nativeEnum(EvmVerifyLicenseType).optional(),
   language: z.nativeEnum(EvmProgrammingLanguage).optional(),
+  compilerVersion: z.string(),
   option: z.nativeEnum(EvmVerifyOptions).optional(),
 });
 

From f0cde4e50a8dcc4ef53e3f35131aedbe671f5332 Mon Sep 17 00:00:00 2001
From: songwongtp <16089160+songwongtp@users.noreply.github.com>
Date: Tue, 11 Feb 2025 10:41:48 +0700
Subject: [PATCH 2/2] fix: comment

---
 .../evm-contract-details-contract-info/ContractCode.tsx     | 4 ++--
 .../{ContractLibrary.tsx => ContractLibraryList.tsx}        | 6 ++++--
 .../evm-contract-verify/components/ContractLibrary.tsx      | 2 --
 .../solidity/EvmContractVerifySolidityContractCode.tsx      | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)
 rename src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/{ContractLibrary.tsx => ContractLibraryList.tsx} (93%)

diff --git a/src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractCode.tsx b/src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractCode.tsx
index 778bb6b64..2b231a8f6 100644
--- a/src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractCode.tsx
+++ b/src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractCode.tsx
@@ -14,7 +14,7 @@ import {
   EvmVerifyInfoSourceFile,
 } from "lib/services/types";
 import { findAndDecodeEvmConstructorArgs } from "lib/utils";
-import { ContractLibrary } from "./ContractLibrary";
+import { ContractLibraryList } from "./ContractLibraryList";
 
 interface ContractCodeProps {
   sourceFiles: EvmVerifyInfoSourceFile[];
@@ -74,7 +74,7 @@ export const ContractCode = ({
             </Heading>
             <Badge>{libraries.length}</Badge>
           </Flex>
-          <ContractLibrary libraries={libraries} />
+          <ContractLibraryList libraries={libraries} />
         </Stack>
       )}
       <Stack gap={4}>
diff --git a/src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractLibrary.tsx b/src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractLibraryList.tsx
similarity index 93%
rename from src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractLibrary.tsx
rename to src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractLibraryList.tsx
index 18e74ce3e..65f9f5110 100644
--- a/src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractLibrary.tsx
+++ b/src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractLibraryList.tsx
@@ -4,13 +4,15 @@ import { Fragment } from "react";
 import { ExplorerLink } from "lib/components/ExplorerLink";
 import { useMobile } from "lib/app-provider";
 
-interface ContractLibraryProps {
+interface ContractLibraryListProps {
   libraries: EvmVerifyInfoLibraries;
 }
 
 const templateColumns = "20px minmax(100px, 120px) auto";
 
-export const ContractLibrary = ({ libraries }: ContractLibraryProps) => {
+export const ContractLibraryList = ({
+  libraries,
+}: ContractLibraryListProps) => {
   const isMobile = useMobile();
 
   return (
diff --git a/src/lib/pages/evm-contract-verify/components/ContractLibrary.tsx b/src/lib/pages/evm-contract-verify/components/ContractLibrary.tsx
index 47c725e43..14d74f8d0 100644
--- a/src/lib/pages/evm-contract-verify/components/ContractLibrary.tsx
+++ b/src/lib/pages/evm-contract-verify/components/ContractLibrary.tsx
@@ -27,7 +27,6 @@ export const ContractLibrary = <T extends FieldValues>({
     <>
       <ControllerInput
         label="Library Name"
-        isRequired
         rules={{
           required: "",
         }}
@@ -40,7 +39,6 @@ export const ContractLibrary = <T extends FieldValues>({
       />
       <ControllerInput
         label="Contract Library Address"
-        isRequired
         rules={{
           required: "",
         }}
diff --git a/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityContractCode.tsx b/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityContractCode.tsx
index bd8061dc1..6feb9edb0 100644
--- a/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityContractCode.tsx
+++ b/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityContractCode.tsx
@@ -55,7 +55,7 @@ export const EvmContractVerifySolidityContractCode = ({
       />
       <ContractLibraries<EvmContractVerifyForm>
         control={control}
-        name="verifyForm.solidityContractCode.contractLibraries"
+        name="verifyForm.solidityContractCode"
       />
     </Stack>
   );