From 8d931472d83d1dbb3ef731070ae7f2b7689708d8 Mon Sep 17 00:00:00 2001
From: evilpeach <kanisorn.peach@gmail.com>
Date: Wed, 15 Jan 2025 17:05:55 +0700
Subject: [PATCH 1/2] feat: improve constructor args, add optimizer config

---
 CHANGELOG.md                                  |  1 +
 src/lib/components/forms/ControllerInput.tsx  | 10 ++-
 .../components/ConstructorArgs.tsx            | 49 +++++++++++----
 .../components/EvmContractVerifyOptions.tsx   | 14 +++--
 .../components/OptimizerConfiguration.tsx     | 56 +++++++++++++++++
 .../evm-contract-verify/components/helper.ts  | 63 +++++++++++++++++++
 .../EvmContractVerifySolidityUploadFiles.tsx  |  3 +
 src/lib/pages/evm-contract-verify/index.tsx   | 14 +++--
 src/lib/pages/evm-contract-verify/types.ts    | 28 ++++++---
 src/lib/styles/theme/components/input.ts      |  4 +-
 10 files changed, 209 insertions(+), 33 deletions(-)
 create mode 100644 src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx
 create mode 100644 src/lib/pages/evm-contract-verify/components/helper.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3cf51a537..9d815d0de 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
 
+- [#1193](https://github.com/alleslabs/celatone-frontend/pull/1193) Add optimizer configuration to EVM contract verify page, fix constructor args, and Zod type
 - [#1188](https://github.com/alleslabs/celatone-frontend/pull/1188) Add request and simulate evm tx
 - [#1192](https://github.com/alleslabs/celatone-frontend/pull/1192) Add fixed bytes hex address util
 - [#1189](https://github.com/alleslabs/celatone-frontend/pull/1189) Add constructor args to EVM contract verify page
diff --git a/src/lib/components/forms/ControllerInput.tsx b/src/lib/components/forms/ControllerInput.tsx
index b33f640fc..823b4ee13 100644
--- a/src/lib/components/forms/ControllerInput.tsx
+++ b/src/lib/components/forms/ControllerInput.tsx
@@ -172,9 +172,13 @@ export const ControllerInput = <T extends FieldValues>({
           {isError && (
             <FormErrorMessage className="error-text">{error}</FormErrorMessage>
           )}
-          <FormHelperText className="helper-text">
-            {status?.message ? getResponseMsg(status, helperText) : helperText}
-          </FormHelperText>
+          {(status?.message || helperText) && (
+            <FormHelperText className="helper-text">
+              {status?.message
+                ? getResponseMsg(status, helperText)
+                : helperText}
+            </FormHelperText>
+          )}
         </Flex>
         {helperAction}
       </Flex>
diff --git a/src/lib/pages/evm-contract-verify/components/ConstructorArgs.tsx b/src/lib/pages/evm-contract-verify/components/ConstructorArgs.tsx
index fd10d2776..5becbeadd 100644
--- a/src/lib/pages/evm-contract-verify/components/ConstructorArgs.tsx
+++ b/src/lib/pages/evm-contract-verify/components/ConstructorArgs.tsx
@@ -1,13 +1,26 @@
-import { Checkbox, Heading, Stack, Text, Textarea } from "@chakra-ui/react";
-import { Control, useController } from "react-hook-form";
+import { Box, Checkbox, Heading, Stack, Text } from "@chakra-ui/react";
+import { Control, useController, useWatch } from "react-hook-form";
 import { EvmContractVerifyForm } from "../types";
+import { ControllerTextarea } from "lib/components/forms";
 
 interface ConstructorArgsProps {
   control: Control<EvmContractVerifyForm>;
 }
 
 export const ConstructorArgs = ({ control }: ConstructorArgsProps) => {
-  const { field } = useController({
+  const { field: fieldEnabled } = useController({
+    control,
+    name: "verifyForm.form.constructorArgs.enabled",
+  });
+
+  const {
+    fieldState: { error },
+  } = useController({
+    control,
+    name: "verifyForm.form.constructorArgs.value",
+  });
+
+  const constructorArgs = useWatch({
     control,
     name: "verifyForm.form.constructorArgs",
   });
@@ -23,17 +36,31 @@ export const ConstructorArgs = ({ control }: ConstructorArgsProps) => {
         </Text>
       </Stack>
       <Checkbox
-        isChecked={field.value !== undefined}
-        onChange={(e) => field.onChange(e.target.checked ? "" : undefined)}
+        pl={3}
+        isChecked={constructorArgs.enabled}
+        onChange={(e) => fieldEnabled.onChange(e.target.checked)}
       >
         <Text>Have constructor arguments</Text>
       </Checkbox>
-      <Textarea
-        visibility={field.value === undefined ? "hidden" : "visible"}
-        placeholder="ex.000000000000000000000000c005dc82818d67af737725bd4bf75435d065d239"
-        value={field.value}
-        onChange={(e) => field.onChange(e.target.value)}
-      />
+      <Box
+        py={4}
+        px={3}
+        bgColor="gray.900"
+        borderRadius="md"
+        display={fieldEnabled.value ? "block" : "none"}
+      >
+        <ControllerTextarea
+          backgroundColor="gray.900"
+          name="verifyForm.form.constructorArgs.value"
+          control={control}
+          isRequired
+          label="Constructor Arguments"
+          placeholder="ex.000000000000000000000000c005dc82818d67af737725bd4bf75435d065d239"
+          variant="fixed-floating"
+          labelBgColor="gray.900"
+          error={error?.message}
+        />
+      </Box>
     </Stack>
   );
 };
diff --git a/src/lib/pages/evm-contract-verify/components/EvmContractVerifyOptions.tsx b/src/lib/pages/evm-contract-verify/components/EvmContractVerifyOptions.tsx
index 4a9819a25..7276f5daf 100644
--- a/src/lib/pages/evm-contract-verify/components/EvmContractVerifyOptions.tsx
+++ b/src/lib/pages/evm-contract-verify/components/EvmContractVerifyOptions.tsx
@@ -5,6 +5,7 @@ import {
   EvmProgrammingLanguage,
   VerificationOptions,
 } from "../types";
+import { getVerifyFormInitialValue } from "./helper";
 
 interface EvmContractVerifyVyperProps {
   control: Control<EvmContractVerifyForm>;
@@ -13,9 +14,9 @@ interface EvmContractVerifyVyperProps {
 export const EvmContractVerifyOptions = ({
   control,
 }: EvmContractVerifyVyperProps) => {
-  const { field: verifyFormOptionField } = useController({
+  const { field } = useController({
     control,
-    name: "verifyForm.form.option",
+    name: "verifyForm.form",
   });
 
   const [language, verifyFormOption] = useWatch({
@@ -23,15 +24,16 @@ export const EvmContractVerifyOptions = ({
     name: ["verifyForm.language", "verifyForm.form.option"],
   });
 
+  const handleOptionChange = (nextVal: VerificationOptions) => {
+    field.onChange(getVerifyFormInitialValue(language, nextVal));
+  };
+
   return (
     <Stack spacing={6}>
       <Heading as="h6" variant="h6">
         Select Verification Option
       </Heading>
-      <RadioGroup
-        onChange={(nextVal) => verifyFormOptionField.onChange(nextVal)}
-        value={verifyFormOption}
-      >
+      <RadioGroup onChange={handleOptionChange} value={verifyFormOption}>
         <Grid gridTemplateColumns="repeat(3, 1fr)" gap={4}>
           {language === EvmProgrammingLanguage.Solidity && (
             <Radio
diff --git a/src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx b/src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx
new file mode 100644
index 000000000..5fa0ace35
--- /dev/null
+++ b/src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx
@@ -0,0 +1,56 @@
+import { Checkbox, Heading, HStack, Stack, Text } from "@chakra-ui/react";
+import { Control, useController, useWatch } from "react-hook-form";
+import { EvmContractVerifyForm } from "../types";
+import { ControllerInput } from "lib/components/forms";
+
+interface OptimizerConfigurationProps {
+  control: Control<EvmContractVerifyForm>;
+}
+
+export const OptimizerConfiguration = ({
+  control,
+}: OptimizerConfigurationProps) => {
+  const { field } = useController({
+    control,
+    name: "verifyForm.form.optimizerConfig",
+  });
+
+  const enabled = useWatch({
+    control,
+    name: "verifyForm.form.optimizerConfig.enabled",
+  });
+
+  return (
+    <Stack spacing={6}>
+      <Stack spacing={1}>
+        <Heading as="h6" variant="h6">
+          Optimization Configuration
+        </Heading>
+        <Text variant="body2" color="text.dark">
+          Provide optimization settings for the contract
+        </Text>
+      </Stack>
+      <HStack spacing={4} pl={3}>
+        <Checkbox
+          isChecked={enabled}
+          onChange={(e) =>
+            field.onChange({ ...field.value, enabled: e.target.checked })
+          }
+        >
+          <Text>Optimization Enabled</Text>
+        </Checkbox>
+        <HStack spacing={2}>
+          <Text color="text.disabled">Optimization Run:</Text>
+          <ControllerInput
+            width={125}
+            type="number"
+            name="verifyForm.form.optimizerConfig.runs"
+            isDisabled={!enabled}
+            control={control}
+            size="sm"
+          />
+        </HStack>
+      </HStack>
+    </Stack>
+  );
+};
diff --git a/src/lib/pages/evm-contract-verify/components/helper.ts b/src/lib/pages/evm-contract-verify/components/helper.ts
new file mode 100644
index 000000000..c477aa940
--- /dev/null
+++ b/src/lib/pages/evm-contract-verify/components/helper.ts
@@ -0,0 +1,63 @@
+import { EvmProgrammingLanguage, VerificationOptions } from "../types";
+
+export const getVerifyFormInitialValue = (
+  language: EvmProgrammingLanguage,
+  verificationOption: VerificationOptions
+) => {
+  const constructorArgs = {
+    enabled: false,
+    value: "",
+  };
+
+  const optimizerConfig = {
+    enabled: false,
+    runs: 200,
+  };
+
+  if (language === EvmProgrammingLanguage.Solidity) {
+    switch (verificationOption) {
+      case VerificationOptions.UploadFiles:
+        return {
+          option: verificationOption,
+          constructorArgs,
+          optimizerConfig,
+          evmVersion: undefined,
+        };
+      case VerificationOptions.ContractCode:
+        return {
+          option: verificationOption,
+          constructorArgs,
+          optimizerConfig,
+        };
+      case VerificationOptions.JsonInput:
+        return {
+          option: verificationOption,
+          constructorArgs,
+        };
+      default:
+        throw new Error("Invalid verification option for Solidity");
+    }
+  } else if (language === EvmProgrammingLanguage.Vyper) {
+    switch (verificationOption) {
+      case VerificationOptions.UploadFile:
+        return {
+          option: verificationOption,
+          constructorArgs,
+        };
+      case VerificationOptions.ContractCode:
+        return {
+          option: verificationOption,
+          constructorArgs,
+        };
+      case VerificationOptions.JsonInput:
+        return {
+          option: verificationOption,
+          constructorArgs,
+        };
+      default:
+        throw new Error("Invalid verification option for Vyper");
+    }
+  }
+
+  throw new Error("Invalid language (getVerifyFormInitialValue)");
+};
diff --git a/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityUploadFiles.tsx b/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityUploadFiles.tsx
index 2cb0d71d4..74bdbd38b 100644
--- a/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityUploadFiles.tsx
+++ b/src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityUploadFiles.tsx
@@ -1,6 +1,7 @@
 import { EvmContractVerifyForm } from "../../types";
 import { Control } from "react-hook-form";
 import { ConstructorArgs } from "../ConstructorArgs";
+import { OptimizerConfiguration } from "../OptimizerConfiguration";
 
 interface EvmContractVerifySolidityUploadFilesProps {
   control: Control<EvmContractVerifyForm>;
@@ -15,6 +16,8 @@ export const EvmContractVerifySolidityUploadFiles = ({
       <br />
       <br />
       <ConstructorArgs control={control} />
+      <br />
+      <OptimizerConfiguration control={control} />
     </div>
   );
 };
diff --git a/src/lib/pages/evm-contract-verify/index.tsx b/src/lib/pages/evm-contract-verify/index.tsx
index 35ff52bb8..a2594d562 100644
--- a/src/lib/pages/evm-contract-verify/index.tsx
+++ b/src/lib/pages/evm-contract-verify/index.tsx
@@ -23,6 +23,7 @@ import { isHex20Bytes, truncate } from "lib/utils";
 import { EvmContractVerifySolidity } from "./components/solidity/EvmContractVerifySolidity";
 import { EvmContractVerifyVyper } from "./components/vyper/EvmContractVerifyVyper";
 import { NoMobile } from "lib/components/modal";
+import { getVerifyFormInitialValue } from "./components/helper";
 
 export const EvmContractVerify = () => {
   useEvmConfig({ shouldRedirect: true });
@@ -203,11 +204,14 @@ export const EvmContractVerify = () => {
                         setValue("verifyForm.language", selectedOption.value);
                         setValue("compilerVersion", "");
                         setValue(
-                          "verifyForm.form.option",
-                          selectedOption.value ===
-                            EvmProgrammingLanguage.Solidity
-                            ? VerificationOptions.UploadFiles
-                            : VerificationOptions.UploadFile
+                          "verifyForm.form",
+                          getVerifyFormInitialValue(
+                            selectedOption.value,
+                            selectedOption.value ===
+                              EvmProgrammingLanguage.Solidity
+                              ? VerificationOptions.UploadFiles
+                              : VerificationOptions.UploadFile
+                          )
                         );
                       }}
                       value={programmingLangaugeOptions.find(
diff --git a/src/lib/pages/evm-contract-verify/types.ts b/src/lib/pages/evm-contract-verify/types.ts
index 772dfd6b6..964580801 100644
--- a/src/lib/pages/evm-contract-verify/types.ts
+++ b/src/lib/pages/evm-contract-verify/types.ts
@@ -16,6 +16,18 @@ export enum VerificationOptions {
   Foundry = "foundry",
 }
 
+const zOptimizerConfig = z.object({
+  enabled: z.boolean(),
+  runs: z.number().nonnegative(),
+});
+
+const zConstructorArgs = z.object({
+  enabled: z.boolean(),
+  value: z.string().refine((val) => val !== "", {
+    message: " ",
+  }),
+});
+
 // MARK - Query Params
 export const zEvmContractVerifyQueryParams = z.object({
   contractAddress: zHexAddr20,
@@ -24,18 +36,20 @@ export const zEvmContractVerifyQueryParams = z.object({
 // MARK - Solidity
 const zEvmContractVerifySolidityOptionUploadFilesForm = z.object({
   option: z.literal(VerificationOptions.UploadFiles),
-  constructorArgs: z.string().optional(),
-  evmVersion: z.string(),
+  constructorArgs: zConstructorArgs,
+  optimizerConfig: zOptimizerConfig,
+  evmVersion: z.string().optional(),
 });
 
 const zEvmContractVerifySolidityOptionContractCodeForm = z.object({
   option: z.literal(VerificationOptions.ContractCode),
-  constructorArgs: z.string().optional(),
+  constructorArgs: zConstructorArgs,
+  optimizerConfig: zOptimizerConfig,
 });
 
 const zEvmContractVerifySolidityOptionJsonInputForm = z.object({
   option: z.literal(VerificationOptions.JsonInput),
-  constructorArgs: z.string().optional(),
+  constructorArgs: zConstructorArgs,
 });
 
 const zEvmContractVerifySolidityOptionHardhatForm = z.object({
@@ -49,17 +63,17 @@ const zEvmContractVerifySolidityOptionFoundryForm = z.object({
 // MARK - Vyper
 const zEvmContractVerifyVyperOptionUploadFileForm = z.object({
   option: z.literal(VerificationOptions.UploadFile),
-  constructorArgs: z.string().optional(),
+  constructorArgs: zConstructorArgs,
 });
 
 const zEvmContractVerifyVyperOptionContractCodeForm = z.object({
   option: z.literal(VerificationOptions.ContractCode),
-  constructorArgs: z.string().optional(),
+  constructorArgs: zConstructorArgs,
 });
 
 const zEvmContractVerifyVyperOptionJsonInputForm = z.object({
   option: z.literal(VerificationOptions.JsonInput),
-  constructorArgs: z.string().optional(),
+  constructorArgs: zConstructorArgs,
 });
 
 // MARK - Union of options by language
diff --git a/src/lib/styles/theme/components/input.ts b/src/lib/styles/theme/components/input.ts
index 20a01eaaa..5a4f1c4ab 100644
--- a/src/lib/styles/theme/components/input.ts
+++ b/src/lib/styles/theme/components/input.ts
@@ -21,8 +21,10 @@ export const Input: ComponentStyleConfig = {
           borderWidth: "2px",
         },
         _disabled: {
-          borderStyle: "dashed",
           color: "text.disabled",
+          opacity: 0.8,
+          backgroundColor: "gray.900",
+          pointerEvents: "none",
         },
         _invalid: {
           borderColor: "error.main",

From 2aed544c09f53c388fb6b8e3769ef083a963b1a0 Mon Sep 17 00:00:00 2001
From: Poafs1 <prach@alleslabs.com>
Date: Wed, 15 Jan 2025 17:51:32 +0700
Subject: [PATCH 2/2] fix: pr comments

---
 .../components/ConstructorArgs.tsx                 |  4 ++--
 .../components/OptimizerConfiguration.tsx          | 14 +++++++-------
 src/lib/pages/evm-contract-verify/index.tsx        |  1 -
 src/lib/pages/evm-contract-verify/types.ts         |  4 +++-
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/lib/pages/evm-contract-verify/components/ConstructorArgs.tsx b/src/lib/pages/evm-contract-verify/components/ConstructorArgs.tsx
index 5becbeadd..af47ead02 100644
--- a/src/lib/pages/evm-contract-verify/components/ConstructorArgs.tsx
+++ b/src/lib/pages/evm-contract-verify/components/ConstructorArgs.tsx
@@ -26,7 +26,7 @@ export const ConstructorArgs = ({ control }: ConstructorArgsProps) => {
   });
 
   return (
-    <Stack spacing={6}>
+    <Stack spacing={2}>
       <Stack spacing={1}>
         <Heading as="h6" variant="h6">
           Input Constructor Arguments
@@ -36,7 +36,7 @@ export const ConstructorArgs = ({ control }: ConstructorArgsProps) => {
         </Text>
       </Stack>
       <Checkbox
-        pl={3}
+        p={2}
         isChecked={constructorArgs.enabled}
         onChange={(e) => fieldEnabled.onChange(e.target.checked)}
       >
diff --git a/src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx b/src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx
index 5fa0ace35..130dee2b5 100644
--- a/src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx
+++ b/src/lib/pages/evm-contract-verify/components/OptimizerConfiguration.tsx
@@ -1,4 +1,4 @@
-import { Checkbox, Heading, HStack, Stack, Text } from "@chakra-ui/react";
+import { Checkbox, Flex, Heading, Stack, Text } from "@chakra-ui/react";
 import { Control, useController, useWatch } from "react-hook-form";
 import { EvmContractVerifyForm } from "../types";
 import { ControllerInput } from "lib/components/forms";
@@ -21,7 +21,7 @@ export const OptimizerConfiguration = ({
   });
 
   return (
-    <Stack spacing={6}>
+    <Stack spacing={2}>
       <Stack spacing={1}>
         <Heading as="h6" variant="h6">
           Optimization Configuration
@@ -30,7 +30,7 @@ export const OptimizerConfiguration = ({
           Provide optimization settings for the contract
         </Text>
       </Stack>
-      <HStack spacing={4} pl={3}>
+      <Flex gap={4} pl={2} alignItems="center">
         <Checkbox
           isChecked={enabled}
           onChange={(e) =>
@@ -39,7 +39,7 @@ export const OptimizerConfiguration = ({
         >
           <Text>Optimization Enabled</Text>
         </Checkbox>
-        <HStack spacing={2}>
+        <Flex gap={2} alignItems="center">
           <Text color="text.disabled">Optimization Run:</Text>
           <ControllerInput
             width={125}
@@ -47,10 +47,10 @@ export const OptimizerConfiguration = ({
             name="verifyForm.form.optimizerConfig.runs"
             isDisabled={!enabled}
             control={control}
-            size="sm"
+            size="md"
           />
-        </HStack>
-      </HStack>
+        </Flex>
+      </Flex>
     </Stack>
   );
 };
diff --git a/src/lib/pages/evm-contract-verify/index.tsx b/src/lib/pages/evm-contract-verify/index.tsx
index a2594d562..fc90ecf21 100644
--- a/src/lib/pages/evm-contract-verify/index.tsx
+++ b/src/lib/pages/evm-contract-verify/index.tsx
@@ -30,7 +30,6 @@ export const EvmContractVerify = () => {
   const isMobile = useMobile();
   const router = useRouter();
   const contractAddressQueryParam = router.query.contractAddress ?? "";
-  // TODO: add evm contract address
   const { contract: exampleContractAddress } = useExampleAddresses();
 
   useEffect(() => {
diff --git a/src/lib/pages/evm-contract-verify/types.ts b/src/lib/pages/evm-contract-verify/types.ts
index 964580801..6fab8981b 100644
--- a/src/lib/pages/evm-contract-verify/types.ts
+++ b/src/lib/pages/evm-contract-verify/types.ts
@@ -28,6 +28,8 @@ const zConstructorArgs = z.object({
   }),
 });
 
+const zEvmVersion = z.string().optional();
+
 // MARK - Query Params
 export const zEvmContractVerifyQueryParams = z.object({
   contractAddress: zHexAddr20,
@@ -38,7 +40,7 @@ const zEvmContractVerifySolidityOptionUploadFilesForm = z.object({
   option: z.literal(VerificationOptions.UploadFiles),
   constructorArgs: zConstructorArgs,
   optimizerConfig: zOptimizerConfig,
-  evmVersion: z.string().optional(),
+  evmVersion: zEvmVersion,
 });
 
 const zEvmContractVerifySolidityOptionContractCodeForm = z.object({