Pass the file path when verifying a multi-part contract (#2208)

Fixes #2207

ui/contractVerification/fields/ContractVerificationFieldSources.tsx

@@ -18,13 +18,14 @@ type FileTypes = '.sol' | '.yul' | '.json' | '.vy'
 interface Props {
   name?: 'sources' | 'interfaces';
   fileTypes: Array<FileTypes>;
+  fullFilePath?: boolean;
   multiple?: boolean;
   required?: boolean;
   title: string;
   hint: string | React.ReactNode;
 }
 
-const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title, hint, name = 'sources' }: Props) => {
+const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title, hint, name = 'sources', fullFilePath }: Props) => {
   const { setValue, getValues, control, formState, clearErrors } = useFormContext<FormFields>();
 
   const error = (() => {
@@ -114,7 +115,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
               rowGap={ 2 }
               w="100%"
             >
-              <DragAndDropArea onDrop={ onChange } p={{ base: 3, lg: 6 }} isDisabled={ formState.isSubmitting }>
+              <DragAndDropArea onDrop={ onChange } fullFilePath={ fullFilePath } p={{ base: 3, lg: 6 }} isDisabled={ formState.isSubmitting }>
                 { hasValue ? renderFiles(field.value) : renderUploadButton() }
               </DragAndDropArea>
             </Flex>
@@ -123,7 +124,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, required, title
         { errorElement }
       </>
     );
-  }, [ fileTypes, multiple, commonError, formState.isSubmitting, renderFiles, renderUploadButton ]);
+  }, [ fileTypes, multiple, commonError, formState.isSubmitting, renderFiles, renderUploadButton, fullFilePath ]);
 
   const validateFileType = React.useCallback(async(value: FieldPathValue<FormFields, typeof name>): Promise<ValidateResult> => {
     if (Array.isArray(value)) {

ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx

@@ -18,6 +18,7 @@ const ContractVerificationMultiPartFile = () => {
       <ContractVerificationFieldSources
         fileTypes={ FILE_TYPES }
         multiple
+        fullFilePath
         required
         title="Sources *.sol or *.yul files"
         hint="Upload all Solidity or Yul contract source files."

ui/contractVerification/methods/ContractVerificationVyperMultiPartFile.tsx

@@ -37,6 +37,7 @@ const ContractVerificationVyperMultiPartFile = () => {
         name="interfaces"
         fileTypes={ INTERFACE_TYPES }
         multiple
+        fullFilePath
         title="Interfaces (.vy or .json)"
         hint={ interfacesHint }
       />

ui/shared/forms/DragAndDropArea.tsx

@@ -9,9 +9,10 @@ interface Props {
   onDrop: (files: Array<File>) => void;
   className?: string;
   isDisabled?: boolean;
+  fullFilePath?: boolean;
 }
 
-const DragAndDropArea = ({ onDrop, children, className, isDisabled }: Props) => {
+const DragAndDropArea = ({ onDrop, children, className, isDisabled, fullFilePath }: Props) => {
   const [ isDragOver, setIsDragOver ] = React.useState(false);
 
   const handleDrop = React.useCallback(async(event: DragEvent<HTMLDivElement>) => {
@@ -22,11 +23,11 @@ const DragAndDropArea = ({ onDrop, children, className, isDisabled }: Props) =>
     }
 
     const fileEntries = await getAllFileEntries(event.dataTransfer.items);
-    const files = await Promise.all(fileEntries.map(convertFileEntryToFile));
+    const files = await Promise.all(fileEntries.map((fileEntry) => convertFileEntryToFile(fileEntry, fullFilePath)));
 
     onDrop(files);
     setIsDragOver(false);
-  }, [ isDisabled, onDrop ]);
+  }, [ isDisabled, onDrop, fullFilePath ]);
 
   const handleDragOver = React.useCallback((event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();

ui/shared/forms/utils/files.ts

+import stripLeadingSlash from 'lib/stripLeadingSlash';
+
 // Function to get all files in drop directory
 export async function getAllFileEntries(dataTransferItemList: DataTransferItemList): Promise<Array<FileSystemFileEntry>> {
   const fileEntries: Array<FileSystemFileEntry> = [];
@@ -54,11 +56,13 @@ async function readEntriesPromise(directoryReader: DirectoryReader): Promise<Arr
   } catch (err) {}
 }
 
-export function convertFileEntryToFile(entry: FileSystemFileEntry): Promise<File> {
+export function convertFileEntryToFile(entry: FileSystemFileEntry, fullFilePath?: boolean): Promise<File> {
   return new Promise((resolve) => {
     entry.file(async(file: File) => {
-    //   const newFile = new File([ file ], entry.fullPath, { lastModified: file.lastModified, type: file.type });
-      resolve(file);
+      const newFile = fullFilePath ?
+        new File([ file ], stripLeadingSlash(entry.fullPath), { lastModified: file.lastModified, type: file.type }) :
+        file;
+      resolve(newFile);
     });
   });
 }