Merge pull request #1196 from alleslabs/feature/vyper-contract-code

FRO-763: Verify Contract - Vyper - Contract Code
alleslabs · Jan 16, 2025 · 105d6b2 · 105d6b2
2 parents 345a868 + 58c4840
commit 105d6b2
Show file tree

Hide file tree

Showing 6 changed files with 84 additions and 11 deletions.
diff --git a/src/lib/components/forms/ControllerTextarea.tsx b/src/lib/components/forms/ControllerTextarea.tsx
@@ -39,20 +39,31 @@ export const ControllerTextarea = <T extends FieldValues>({
     name,
     control,
   });
-  const { field } = useController<T>({ name, control, rules });
+  const {
+    field,
+    fieldState: { isDirty, isTouched },
+  } = useController<T>({ name, control, rules });
   const isError = Boolean(error);
   const isRequired = "required" in rules;
   return (
     <FormControl
       size="md"
-      isInvalid={isError}
+      isInvalid={isError && (isDirty || isTouched)}
       isRequired={isRequired}
       sx={{ "> div": { marginTop: "1 !important" } }}
       {...componentProps}
       {...field}
     >
       {label && (
-        <FormLabel className="textarea-label" bgColor={labelBgColor}>
+        <FormLabel
+          requiredIndicator={
+            <Text as="span" color="error.main" pl={1}>
+              * (Required)
+            </Text>
+          }
+          className="textarea-label"
+          bgColor={labelBgColor}
+        >
           {label}
         </FormLabel>
       )}

diff --git a/src/lib/pages/evm-contract-verify/components/vyper/EvmContractVerifyVyper.tsx b/src/lib/pages/evm-contract-verify/components/vyper/EvmContractVerifyVyper.tsx
@@ -22,7 +22,7 @@ const EvmContractVerifyVyperOptions = ({
     case VerificationOptions.UploadFile:
       return <EvmContractVerifyVyperUploadFile control={control} />;
     case VerificationOptions.ContractCode:
-      return <EvmContractVerifyVyperContractCode />;
+      return <EvmContractVerifyVyperContractCode control={control} />;
     case VerificationOptions.JsonInput:
       return <EvmContractVerifyVyperJsonInput control={control} />;
     default:

diff --git a/src/lib/pages/evm-contract-verify/components/vyper/EvmContractVerifyVyperContractCode.tsx b/src/lib/pages/evm-contract-verify/components/vyper/EvmContractVerifyVyperContractCode.tsx
@@ -1,3 +1,59 @@
-export const EvmContractVerifyVyperContractCode = () => {
-  return <div>TODO: EvmContractVerifyVyperContractCode</div>;
+import { Control, useController } from "react-hook-form";
+import { EvmContractVerifyForm } from "../../types";
+import { Heading, Stack } from "@chakra-ui/react";
+import { ConstructorArgs } from "../ConstructorArgs";
+import { EvmVersionToTarget } from "../EvmVersionToTarget";
+import { ControllerInput, ControllerTextarea } from "lib/components/forms";
+
+interface EvmContractVerifyVyperContractCodeProps {
+  control: Control<EvmContractVerifyForm>;
+}
+
+export const EvmContractVerifyVyperContractCode = ({
+  control,
+}: EvmContractVerifyVyperContractCodeProps) => {
+  const {
+    fieldState: { error: contractNameError },
+  } = useController({
+    control,
+    name: "verifyForm.form.contractName",
+  });
+
+  const {
+    fieldState: { error: contractCodeError },
+  } = useController({
+    control,
+    name: "verifyForm.form.contractCode",
+  });
+
+  return (
+    <Stack spacing={12}>
+      <Stack spacing={6}>
+        <Heading as="h6" variant="h6">
+          Provide Contract Code
+        </Heading>
+        <ControllerInput
+          label="Contract Name"
+          placeholder="Provide contract name"
+          name="verifyForm.form.contractName"
+          isRequired
+          control={control}
+          variant="fixed-floating"
+          error={contractNameError?.message}
+        />
+        <ControllerTextarea
+          label="Contract Code"
+          placeholder="Provide contract source code here"
+          name="verifyForm.form.contractCode"
+          isRequired
+          control={control}
+          variant="fixed-floating"
+          error={contractCodeError?.message}
+          height="400px"
+        />
+      </Stack>
+      <ConstructorArgs control={control} />
+      <EvmVersionToTarget control={control} />
+    </Stack>
+  );
 };
diff --git a/src/lib/pages/evm-contract-verify/helper.ts b/src/lib/pages/evm-contract-verify/helper.ts
@@ -14,14 +14,16 @@ export const getVerifyFormInitialValue = (
     runs: 200,
   };
 
+  const evmVersionConfig = "default";
+
   if (language === EvmProgrammingLanguage.Solidity) {
     switch (verificationOption) {
       case VerificationOptions.UploadFiles:
         return {
           option: verificationOption,
           constructorArgs,
           optimizerConfig,
-          evmVersion: "default",
+          evmVersion: evmVersionConfig,
         };
       case VerificationOptions.ContractCode:
         return {
@@ -44,12 +46,15 @@ export const getVerifyFormInitialValue = (
           option: verificationOption,
           file: undefined,
           constructorArgs,
-          evmVersion: "default",
+          evmVersion: evmVersionConfig,
         };
       case VerificationOptions.ContractCode:
         return {
           option: verificationOption,
+          contractName: "",
+          contractCode: "",
           constructorArgs,
+          evmVersion: evmVersionConfig,
         };
       case VerificationOptions.JsonInput:
         return {

diff --git a/src/lib/pages/evm-contract-verify/index.tsx b/src/lib/pages/evm-contract-verify/index.tsx
@@ -145,9 +145,7 @@ export const EvmContractVerify = () => {
                   <GridItem colSpan={1}>
                     <ControllerInput
                       label="Contract Address"
-                      rules={{
-                        required: "",
-                      }}
+                      isRequired
                       placeholder={`ex. ${truncate(exampleContractAddress)}`}
                       name="contractAddress"
                       control={control}

diff --git a/src/lib/pages/evm-contract-verify/types.ts b/src/lib/pages/evm-contract-verify/types.ts
@@ -72,7 +72,10 @@ const zEvmContractVerifyVyperOptionUploadFileForm = z.object({
 
 const zEvmContractVerifyVyperOptionContractCodeForm = z.object({
   option: z.literal(VerificationOptions.ContractCode),
+  contractName: z.string().refine((val) => val !== "", { message: " " }),
+  contractCode: z.string().refine((val) => val !== "", { message: " " }),
   constructorArgs: zConstructorArgs,
+  evmVersion: zEvmVersion,
 });
 
 const zEvmContractVerifyVyperOptionJsonInputForm = z.object({