feat: validate evm verify form options

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
 - [#1226](https://github.com/alleslabs/celatone-frontend/pull/1226) Show nonce on EVM tx details
 - [#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)

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}>

src/lib/pages/evm-contract-details/components/evm-contract-details-contract-info/ContractLibrary.tsx → 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 (

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"

src/lib/pages/evm-contract-verify/components/ContractLibrary.tsx

@@ -0,0 +1,54 @@
+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"
+        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"
+        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"}
+      />
+    </>
+  );
+};

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>