FRO-753: Feat: Verify Contract Solidity Upload Files

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Features
 
+- [#1201](https://github.com/alleslabs/celatone-frontend/pull/1201) Add EVM contract verification with upload files
 - [#1200](https://github.com/alleslabs/celatone-frontend/pull/1200) Add EVM contract verification with contract code
 - [#1199](https://github.com/alleslabs/celatone-frontend/pull/1199) Add EVM contract verification with Hardhat
 - [#1198](https://github.com/alleslabs/celatone-frontend/pull/1198) Add EVM contract verification with Foundry

src/lib/components/dropzone/config.ts

@@ -1,6 +1,13 @@
 import type { Accept } from "react-dropzone";
 
-export type DropzoneFileType = "wasm" | "json" | "mv" | "move" | "toml" | "vy";
+export type DropzoneFileType =
+  | "wasm"
+  | "json"
+  | "mv"
+  | "move"
+  | "toml"
+  | "vy"
+  | "sol";
 
 export interface DropzoneConfig {
   accept: Accept;
@@ -46,4 +53,10 @@ export const DROPZONE_CONFIG: { [key in DropzoneFileType]: DropzoneConfig } = {
       rawFileType: ".vy",
     },
   },
+  sol: {
+    accept: { "application/octet-stream": [".sol"] },
+    text: {
+      rawFileType: ".sol",
+    },
+  },
 };

src/lib/components/dropzone/index.tsx

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

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

@@ -35,7 +35,7 @@ export const EvmContractVerifyForms = ({
       return <EvmContractVerifyVyperJsonInput control={control} />;
     // Solidity
     case VerifyOptions.SolidityUploadFiles:
-      return <EvmContractVerifySolidityUploadFiles />;
+      return <EvmContractVerifySolidityUploadFiles control={control} />;
     case VerifyOptions.SolidityContractCode:
       return <EvmContractVerifySolidityContractCode control={control} />;
     case VerifyOptions.SolidityJsonInput:

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

@@ -0,0 +1,51 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Text,
+} from "@chakra-ui/react";
+import { UserDocsLink } from "lib/components/UserDocsLink";
+
+export const FoundryInfoAccordion = () => (
+  <Accordion
+    allowToggle
+    defaultIndex={[0]}
+    variant="transparent"
+    position="sticky"
+    top={0}
+  >
+    <AccordionItem>
+      <AccordionButton>
+        <Text
+          variant="body2"
+          fontWeight={700}
+          color="text.main"
+          textAlign="start"
+        >
+          What is Foundry?
+        </Text>
+        <AccordionIcon color="gray.600" ml="auto" />
+      </AccordionButton>
+      <AccordionPanel
+        bg="transparent"
+        py={3}
+        px={0}
+        borderY="1px solid"
+        borderColor="gray.700"
+      >
+        <Text variant="body2" color="text.dark" p={1}>
+          Foundry is a framework that generates and submits contract metadata,
+          ensuring accurate verification by matching the deployed bytecode.
+        </Text>
+      </AccordionPanel>
+      <UserDocsLink
+        mt={3}
+        cta="See how to verify contract via Foundry"
+        // TODO: Update link
+        href="#"
+      />
+    </AccordionItem>
+  </Accordion>
+);

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

@@ -0,0 +1,51 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Text,
+} from "@chakra-ui/react";
+import { UserDocsLink } from "lib/components/UserDocsLink";
+
+export const HarthatInfoAccordion = () => (
+  <Accordion
+    allowToggle
+    defaultIndex={[0]}
+    variant="transparent"
+    position="sticky"
+    top={0}
+  >
+    <AccordionItem>
+      <AccordionButton>
+        <Text
+          variant="body2"
+          fontWeight={700}
+          color="text.main"
+          textAlign="start"
+        >
+          What is Hardhat?
+        </Text>
+        <AccordionIcon color="gray.600" ml="auto" />
+      </AccordionButton>
+      <AccordionPanel
+        bg="transparent"
+        py={3}
+        px={0}
+        borderY="1px solid"
+        borderColor="gray.700"
+      >
+        <Text variant="body2" color="text.dark" p={1}>
+          Hardhat simplifies contract verification by generating metadata during
+          compilation and automating the process through plugins.
+        </Text>
+      </AccordionPanel>
+      <UserDocsLink
+        mt={3}
+        cta="See how to verify contract via Hardhat"
+        // TODO: Update link
+        href="#"
+      />
+    </AccordionItem>
+  </Accordion>
+);

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

@@ -1,3 +1,55 @@
-export const EvmContractVerifySolidityUploadFiles = () => {
-  return <div>TODO: EvmContractVerifySolidityUploadFiles</div>;
+import { Heading, Stack } from "@chakra-ui/react";
+import { Control, useFieldArray } from "react-hook-form";
+import { EvmContractVerifyForm } from "../../types";
+import { ConstructorArgs } from "../ConstructorArgs";
+import { EvmVersionToTarget } from "../EvmVersionToTarget";
+import { OptimizerConfiguration } from "../OptimizerConfiguration";
+import { ContractLibraries } from "../ContractLibraries";
+import { DropZone } from "lib/components/dropzone";
+import { UploadCard } from "lib/components/upload";
+
+interface EvmContractVerifySolidityUploadFilesProps {
+  control: Control<EvmContractVerifyForm>;
+}
+
+export const EvmContractVerifySolidityUploadFiles = ({
+  control,
+}: EvmContractVerifySolidityUploadFilesProps) => {
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: "verifyForm.solidityUploadFiles.files",
+  });
+
+  return (
+    <Stack spacing={12}>
+      <Stack spacing={4}>
+        <Heading as="h6" variant="h6">
+          Upload File(s)
+        </Heading>
+        {fields.map((field, index) => (
+          <UploadCard file={field.file} deleteFile={() => remove(index)} />
+        ))}
+        <DropZone
+          setFiles={(files) => append(files.map((file) => ({ file })))}
+          fileType={["sol"]}
+        />
+      </Stack>
+      <ConstructorArgs<EvmContractVerifyForm>
+        control={control}
+        name="verifyForm.solidityUploadFiles"
+      />
+      <EvmVersionToTarget<EvmContractVerifyForm>
+        control={control}
+        name="verifyForm.solidityUploadFiles"
+      />
+      <OptimizerConfiguration<EvmContractVerifyForm>
+        control={control}
+        name="verifyForm.solidityUploadFiles"
+      />
+      <ContractLibraries<EvmContractVerifyForm>
+        control={control}
+        name="verifyForm.solidityUploadFiles"
+      />
+    </Stack>
+  );
 };

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

@@ -36,9 +36,11 @@ export const getEvmContractVerifyFormDefaultValue = (
   option: "",
   verifyForm: {
     solidityUploadFiles: {
+      files: [],
       constructorArgs: CONSTRUCTOR_ARGS_DEFAULT_VALUE,
       optimizerConfig: OPTIMIZER_CONFIG_DEFAULT_VALUE,
       evmVersion: EVM_VERSION_DEFAULT_VALUE,
+      contractLibraries: CONTRACT_LIBRARIES_DEFAULT_VALUE,
     },
     solidityContractCode: {
       contractCode: "",

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

@@ -31,6 +31,8 @@ import { isHex20Bytes, truncate } from "lib/utils";
 import { EvmContractVerifyOptions } from "./components/EvmContractVerifyOptions";
 import { EvmContractVerifyForms } from "./components/EvmContractVerifyForms";
 import { getEvmContractVerifyFormDefaultValue } from "./helper";
+import { HarthatInfoAccordion } from "./components/HardhatInfoAccordion";
+import { FoundryInfoAccordion } from "./components/FoundryInfoAccordion";
 
 export const EvmContractVerify = () => {
   useEvmConfig({ shouldRedirect: true });
@@ -57,7 +59,8 @@ export const EvmContractVerify = () => {
       String(contractAddressQueryParam)
     ),
   });
-  const { licenseType, contractAddress, language, compilerVersion } = watch();
+  const { licenseType, contractAddress, language, compilerVersion, option } =
+    watch();
 
   const { handleNext, handlePrevious, hasNext, hasPrevious } = useStepper(
     1,
@@ -239,12 +242,26 @@ export const EvmContractVerify = () => {
                 </Stack>
               </GridItem>
               {language && (
-                <GridItem colSpan={1} colStart={1}>
-                  <Stack gap={12}>
-                    <EvmContractVerifyOptions control={control} />
-                    <Divider />
-                    <EvmContractVerifyForms control={control} />
-                  </Stack>
+                <GridItem colSpan={2} colStart={1}>
+                  <Grid
+                    templateColumns="6fr 4fr"
+                    columnGap="32px"
+                    rowGap="24px"
+                  >
+                    <Stack gap={12}>
+                      <EvmContractVerifyOptions control={control} />
+                      <Divider />
+                      <EvmContractVerifyForms control={control} />
+                    </Stack>
+                    <GridItem maxHeight={0}>
+                      {option === VerifyOptions.SolidityHardhat && (
+                        <HarthatInfoAccordion />
+                      )}
+                      {option === VerifyOptions.SolidityFoundry && (
+                        <FoundryInfoAccordion />
+                      )}
+                    </GridItem>
+                  </Grid>
                 </GridItem>
               )}
             </Grid>

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

@@ -48,9 +48,15 @@ const zContractLibraries = z.object({
 
 // MARK - Solidity
 const zEvmContractVerifySolidityOptionUploadFilesForm = z.object({
+  files: z.array(
+    z.object({
+      file: z.instanceof(File),
+    })
+  ),
   constructorArgs: zConstructorArgs,
   optimizerConfig: zOptimizerConfig,
   evmVersion: zEvmVersion,
+  contractLibraries: zContractLibraries,
 });
 
 const zEvmContractVerifySolidityOptionContractCodeForm = z.object({