Standard JSON input for Solidity and Vyper

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1197](https://github.com/alleslabs/celatone-frontend/pull/1197) Add EVM contract verification with standard JSON input both for Solidity and Vyper
 - [#1194](https://github.com/alleslabs/celatone-frontend/pull/1194) Add EVM contract verification with Vyper upload file method
 - [#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

src/lib/components/dropzone/config.ts

@@ -6,7 +6,8 @@ export type DropzoneFileType =
   | "mv"
   | "move"
   | "toml"
-  | "vy";
+  | "vy"
+  | "standard-json";
 
 export interface DropzoneConfig {
   accept: Accept;
@@ -59,4 +60,11 @@ export const DROPZONE_CONFIG: { [key in DropzoneFileType]: DropzoneConfig } = {
       rawFileType: ".vy",
     },
   },
+  "standard-json": {
+    accept: { "application/json": [".json"] },
+    text: {
+      prettyFileType: ".json file",
+      rawFileType: ".json",
+    },
+  },
 };

src/lib/components/dropzone/index.tsx

@@ -50,6 +50,7 @@ export function DropZone({
       toml: 1_000_000,
       // TODO - Revisit
       vy: 10_000_000,
+      "standard-json": 10_000_000,
     };
 
     const selectedSizes: number[] = [];

src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidity.tsx

@@ -26,7 +26,7 @@ const EvmContractVerifySolidityOptions = ({
     case VerificationOptions.ContractCode:
       return <EvmContractVerifySolidityContractCode />;
     case VerificationOptions.JsonInput:
-      return <EvmContractVerifySolidityJsonInput />;
+      return <EvmContractVerifySolidityJsonInput control={control} />;
     case VerificationOptions.Hardhat:
       return <EvmContractVerifySolidityHardhat />;
     case VerificationOptions.Foundry:

src/lib/pages/evm-contract-verify/components/solidity/EvmContractVerifySolidityJsonInput.tsx

@@ -1,3 +1,40 @@
-export const EvmContractVerifySolidityJsonInput = () => {
-  return <div>TODO: EvmContractVerifySolidityJsonInput</div>;
+import { Control, useController } from "react-hook-form";
+import { EvmContractVerifyForm } from "../../types";
+import { Heading, Stack } from "@chakra-ui/react";
+import { DropZone } from "lib/components/dropzone";
+import { UploadCard } from "lib/components/upload";
+import { ConstructorArgs } from "../ConstructorArgs";
+
+interface EvmContractVerifySolidityJsonInputProps {
+  control: Control<EvmContractVerifyForm>;
+}
+
+export const EvmContractVerifySolidityJsonInput = ({
+  control,
+}: EvmContractVerifySolidityJsonInputProps) => {
+  const {
+    field: { value, onChange },
+  } = useController({
+    control,
+    name: "verifyForm.form.jsonFile",
+  });
+
+  return (
+    <Stack spacing={12}>
+      <Stack spacing={4}>
+        <Heading as="h6" variant="h6">
+          Provide Standard JSON Input
+        </Heading>
+        {value ? (
+          <UploadCard file={value} deleteFile={() => onChange("")} />
+        ) : (
+          <DropZone
+            setFiles={(files) => onChange(files[0])}
+            fileType={["standard-json"]}
+          />
+        )}
+      </Stack>
+      <ConstructorArgs control={control} />
+    </Stack>
+  );
 };

src/lib/pages/evm-contract-verify/components/vyper/EvmContractVerifyVyperJsonInput.tsx

@@ -16,7 +16,7 @@ export const EvmContractVerifyVyperJsonInput = ({
     field: { value, onChange },
   } = useController({
     control,
-    name: "verifyForm.form.file",
+    name: "verifyForm.form.jsonFile",
   });
 
   return (
@@ -30,7 +30,7 @@ export const EvmContractVerifyVyperJsonInput = ({
         ) : (
           <DropZone
             setFiles={(files) => onChange(files[0])}
-            fileType={["schema"]}
+            fileType={["standard-json"]}
           />
         )}
       </Stack>

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

@@ -51,6 +51,7 @@ const zEvmContractVerifySolidityOptionContractCodeForm = z.object({
 
 const zEvmContractVerifySolidityOptionJsonInputForm = z.object({
   option: z.literal(VerificationOptions.JsonInput),
+  jsonFile: z.instanceof(File).optional(),
   constructorArgs: zConstructorArgs,
 });
 
@@ -80,6 +81,7 @@ const zEvmContractVerifyVyperOptionContractCodeForm = z.object({
 
 const zEvmContractVerifyVyperOptionJsonInputForm = z.object({
   option: z.literal(VerificationOptions.JsonInput),
+  jsonFile: z.instanceof(File).optional(),
   constructorArgs: zConstructorArgs,
 });