fix(components): contract address controller input validation

CHANGELOG.md

@@ -50,6 +50,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Bug fixes
 
+- [#1191](https://github.com/alleslabs/celatone-frontend/pull/1191) Fix contract address form validation
 - [#1190](https://github.com/alleslabs/celatone-frontend/pull/1190) Fix EVM contract details verify boarding and verification page
 
 ## v1.9.3

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

@@ -38,7 +38,9 @@ export const EvmContractFooter = ({
       borderColor: "gray.700",
       display: "grid",
       gridTemplateColumns: "6fr 4fr",
-      px: "96px",
+      pl: 12,
+      gap: 0,
+      pr: 24,
       "> div": {
         width: "100%",
       },

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

@@ -37,18 +37,22 @@ export const EvmContractVerify = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [router.isReady]);
 
-  const { control, watch, handleSubmit, setValue } =
-    useForm<EvmContractVerifyForm>({
-      resolver: zodResolver(zEvmContractVerifyForm),
-      mode: "all",
-      reValidateMode: "onChange",
-      defaultValues: {
-        contractAddress: isHexWalletAddress(String(contractAddressQueryParam))
-          ? contractAddressQueryParam
-          : "",
-        compilerVersion: "",
-      },
-    });
+  const {
+    control,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<EvmContractVerifyForm>({
+    resolver: zodResolver(zEvmContractVerifyForm),
+    mode: "all",
+    reValidateMode: "onChange",
+    defaultValues: {
+      contractAddress: isHexWalletAddress(String(contractAddressQueryParam))
+        ? contractAddressQueryParam
+        : "",
+      compilerVersion: "",
+    },
+  });
   const { licenseType, contractAddress, language, compilerVersion } = watch();
 
   const { handleNext, handlePrevious, hasNext, hasPrevious } = useStepper(
@@ -153,6 +157,7 @@ export const EvmContractVerify = () => {
                           ? "success"
                           : "init",
                       }}
+                      error={errors.contractAddress?.message}
                     />
                   </GridItem>
                   <GridItem colSpan={1} colStart={1}>

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

@@ -1,5 +1,6 @@
 import { zHexAddr20 } from "lib/types";
-import { z } from "zod";
+import { isHexWalletAddress } from "lib/utils";
+import { z, ZodIssueCode } from "zod";
 
 export enum EvmProgrammingLanguage {
   Solidity = "solidity",
@@ -67,7 +68,19 @@ export const zEvmContractVerifyOptionForm = z.union([
 ]);
 
 export const zEvmContractAddressAndLicenseForm = z.object({
-  contractAddress: zHexAddr20,
+  contractAddress: zHexAddr20.superRefine((val, ctx) => {
+    if (val === "")
+      ctx.addIssue({
+        code: ZodIssueCode.custom,
+        message: " ",
+      });
+
+    if (!isHexWalletAddress(val))
+      ctx.addIssue({
+        code: ZodIssueCode.custom,
+        message: "Invalid address",
+      });
+  }),
   licenseType: z.string().refine((val) => val !== ""),
   language: z.nativeEnum(EvmProgrammingLanguage),
   compilerVersion: z.string().refine((val) => val !== ""),