file removal and standard input method

ui/contractVerification/ContractVerificationForm.tsx

 import { Button, chakra } from '@chakra-ui/react';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
-import { useForm } from 'react-hook-form';
+import { useForm, FormProvider } from 'react-hook-form';
 
 import type { FormFields } from './types';
 
@@ -13,7 +13,8 @@ import ContractVerificationStandardInput from './methods/ContractVerificationSta
 import ContractVerificationVyperContract from './methods/ContractVerificationVyperContract';
 
 const ContractVerificationForm = () => {
-  const { control, handleSubmit, watch } = useForm<FormFields>();
+  const formApi = useForm<FormFields>();
+  const { control, handleSubmit, watch } = formApi;
 
   const onFormSubmit: SubmitHandler<FormFields> = React.useCallback((data) => {
     // eslint-disable-next-line no-console
@@ -33,6 +34,7 @@ const ContractVerificationForm = () => {
   const content = methods[method] || null;
 
   return (
+    <FormProvider { ...formApi }>
       <chakra.form
         noValidate
         onSubmit={ handleSubmit(onFormSubmit) }
@@ -51,6 +53,7 @@ const ContractVerificationForm = () => {
           </Button>
         ) }
       </chakra.form>
+    </FormProvider>
   );
 };
 

ui/contractVerification/fields/ContractVerificationFieldSources.tsx

 import { GridItem, Text, Button, Box } from '@chakra-ui/react';
 import React from 'react';
 import type { ControllerRenderProps, Control } from 'react-hook-form';
-import { Controller } from 'react-hook-form';
+import { Controller, useFormContext } from 'react-hook-form';
 
 import type { FormFields } from '../types';
 
@@ -10,32 +10,56 @@ import FileSnippet from 'ui/shared/forms/FileSnippet';
 
 interface Props {
   control: Control<FormFields>;
+  accept?: string;
+  multiple?: boolean;
+  title: string;
 }
 
-const ContractVerificationFieldSources = ({ control }: Props) => {
+const ContractVerificationFieldSources = ({ control, accept, multiple, title }: Props) => {
+  const { setValue, getValues } = useFormContext();
+
+  const handleFileRemove = React.useCallback((index?: number) => {
+    if (index === undefined) {
+      return;
+    }
+
+    const value = getValues('sources').slice();
+    value.splice(index, 1);
+    setValue('sources', value);
+
+  }, [ getValues, setValue ]);
+
   const renderFiles = React.useCallback((files: Array<File>) => {
     return (
       <Box display="grid" gridTemplateColumns={{ base: '1fr', lg: '1fr 1fr' }} columnGap={ 3 } rowGap={ 3 }>
-        { files.map((file, index) => <FileSnippet key={ file.name + index } file={ file } maxW="initial"/>) }
+        { files.map((file, index) => (
+          <FileSnippet
+            key={ file.name + file.lastModified }
+            file={ file }
+            maxW="initial"
+            onRemove={ handleFileRemove }
+            index={ index }
+          />
+        )) }
       </Box>
     );
-  }, []);
+  }, [ handleFileRemove ]);
 
   const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'sources'>}) => (
     <>
-      <FileInput<FormFields, 'sources'> accept=".sol,.yul" multiple field={ field }>
+      <FileInput<FormFields, 'sources'> accept={ accept } multiple={ multiple } field={ field }>
         <Button variant="outline" size="sm" display={ field.value && field.value.length > 0 ? 'none' : 'block' }>
-          Upload file
+          Upload file{ multiple ? 's' : '' }
         </Button>
       </FileInput>
       { field.value && field.value.length > 0 && renderFiles(field.value) }
     </>
-  ), [ renderFiles ]);
+  ), [ accept, multiple, renderFiles ]);
 
   return (
     <>
       <GridItem mt="30px">
-        <Text fontWeight={ 500 } mb={ 4 }>Sources *.sol or *.yul files</Text>
+        <Text fontWeight={ 500 } mb={ 4 }>{ title }</Text>
         <Controller
           name="sources"
           control={ control }

ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx

@@ -20,7 +20,7 @@ const ContractVerificationMultiPartFile = ({ control }: Props) => {
       <ContractVerificationFieldCompiler control={ control }/>
       <ContractVerificationFieldEvmVersion control={ control }/>
       <ContractVerificationFieldOptimization control={ control }/>
-      <ContractVerificationFieldSources control={ control }/>
+      <ContractVerificationFieldSources control={ control } accept=".sol,.yul" multiple title="Sources *.sol or *.yul files"/>
       <ContractVerificationFieldLibraries control={ control }/>
     </ContractVerificationMethod>
   );

ui/contractVerification/methods/ContractVerificationStandardInput.tsx

@@ -4,6 +4,10 @@ import type { Control } from 'react-hook-form';
 import type { FormFields } from '../types';
 
 import ContractVerificationMethod from '../ContractVerificationMethod';
+import ContractVerificationFieldCompiler from '../fields/ContractVerificationFieldCompiler';
+import ContractVerificationFieldConstArgs from '../fields/ContractVerificationFieldConstArgs';
+import ContractVerificationFieldName from '../fields/ContractVerificationFieldName';
+import ContractVerificationFieldSources from '../fields/ContractVerificationFieldSources';
 
 interface Props {
   control: Control<FormFields>;
@@ -13,7 +17,10 @@ interface Props {
 const ContractVerificationStandardInput = ({ control }: Props) => {
   return (
     <ContractVerificationMethod title="New Smart Contract Verification">
-      ContractVerificationStandardInput
+      <ContractVerificationFieldName control={ control }/>
+      <ContractVerificationFieldCompiler control={ control }/>
+      <ContractVerificationFieldSources control={ control } accept=".json" title="Standard Input JSON"/>
+      <ContractVerificationFieldConstArgs control={ control }/>
     </ContractVerificationMethod>
   );
 };

ui/contractVerification/types.ts

@@ -20,6 +20,8 @@ export interface FormFieldsFlattenSourceCode {
 export interface FormFieldsStandardInput {
   method: 'standard_input';
   name: string;
+  compiler: string;
+  sources: Array<File>;
 }
 
 export interface FormFieldsSourcify {