feat: improve constructor args, add optimizer config

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

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>

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

@@ -1,19 +1,32 @@
-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",
   });
 
   return (
-    <Stack spacing={6}>
+    <Stack spacing={2}>
       <Stack spacing={1}>
         <Heading as="h6" variant="h6">
           Input Constructor Arguments
@@ -23,17 +36,31 @@ export const ConstructorArgs = ({ control }: ConstructorArgsProps) => {
         </Text>
       </Stack>
       <Checkbox
-        isChecked={field.value !== undefined}
-        onChange={(e) => field.onChange(e.target.checked ? "" : undefined)}
+        p={2}
+        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>
   );
 };

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,25 +14,26 @@ 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({
     control,
     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

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

@@ -0,0 +1,56 @@
+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";
+
+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={2}>
+      <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>
+      <Flex gap={4} pl={2} alignItems="center">
+        <Checkbox
+          isChecked={enabled}
+          onChange={(e) =>
+            field.onChange({ ...field.value, enabled: e.target.checked })
+          }
+        >
+          <Text>Optimization Enabled</Text>
+        </Checkbox>
+        <Flex gap={2} alignItems="center">
+          <Text color="text.disabled">Optimization Run:</Text>
+          <ControllerInput
+            width={125}
+            type="number"
+            name="verifyForm.form.optimizerConfig.runs"
+            isDisabled={!enabled}
+            control={control}
+            size="md"
+          />
+        </Flex>
+      </Flex>
+    </Stack>
+  );
+};

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)");
+};

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

src/lib/pages/evm-contract-verify/index.tsx

@@ -23,13 +23,13 @@ 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 });
   const isMobile = useMobile();
   const router = useRouter();
   const contractAddressQueryParam = router.query.contractAddress ?? "";
-  // TODO: add evm contract address
   const { contract: exampleContractAddress } = useExampleAddresses();
 
   useEffect(() => {
@@ -203,11 +203,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(

src/lib/pages/evm-contract-verify/types.ts

@@ -16,6 +16,20 @@ 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: " ",
+  }),
+});
+
+const zEvmVersion = z.string().optional();
+
 // MARK - Query Params
 export const zEvmContractVerifyQueryParams = z.object({
   contractAddress: zHexAddr20,
@@ -24,18 +38,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: zEvmVersion,
 });
 
 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 +65,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

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",