diff --git a/CHANGELOG.md b/CHANGELOG.md
index 456678ea4..95d8c56b8 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
- [#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)
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 = ({
{libraries.length}
-
+
)}
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/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 {
control: Control;
@@ -23,21 +21,14 @@ export const ContractLibraries = ({
control,
name,
}: ContractLibrariesProps) => {
- const { evmContract: exampleContractAddress } = useExampleAddresses();
-
const { field } = useController({
control,
- name: `${name}.contractLibraries` as FieldPath,
- });
-
- const contractLibraries = useWatch({
- control,
- name: `${name}.contractLibraries` as FieldPath,
+ name: `${name}.contractLibraries.enabled` as FieldPath,
});
const { fields, append, remove } = useFieldArray({
control,
- name: `${name}.contractLibraries.value` as ArrayPath,
+ name: `${name}.contractLibraries.value` as FieldArrayPath,
});
return (
@@ -53,10 +44,8 @@ export const ContractLibraries = ({
- field.onChange({ ...field.value, enabled: e.target.checked })
- }
+ isChecked={field.value}
+ onChange={(e) => field.onChange(e.target.checked)}
>
Have contract libraries
@@ -66,35 +55,13 @@ export const ContractLibraries = ({
px={3}
bgColor="gray.900"
borderRadius="md"
- display={contractLibraries.enabled ? "flex" : "none"}
+ display={field.value ? "flex" : "none"}
>
- {fields.map((field, index) => (
-
-
- }
- control={control}
- variant="fixed-floating"
- />
-
- }
+ {fields.map(({ id }, index) => (
+
+
control={control}
- variant="fixed-floating"
+ name={`${name}.contractLibraries.value.${index}` as FieldPath}
/>