disabled state for drag-and-drop area

ui/contractVerification/fields/ContractVerificationFieldSources.tsx

@@ -91,7 +91,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, title, hint }:
               rowGap={ 2 }
               w="100%"
             >
-              <DragAndDropArea onDrop={ onChange } p={{ base: 3, lg: 6 }}>
+              <DragAndDropArea onDrop={ onChange } p={{ base: 3, lg: 6 }} isDisabled={ formState.isSubmitting }>
                 { hasValue ? renderFiles(field.value) : renderUploadButton() }
               </DragAndDropArea>
             </Flex>
@@ -100,7 +100,7 @@ const ContractVerificationFieldSources = ({ fileTypes, multiple, title, hint }:
         { commonError?.message && <FieldError message={ commonError.type === 'required' ? 'Field is required' : commonError.message }/> }
       </>
     );
-  }, [ fileTypes, multiple, renderFiles, commonError, renderUploadButton ]);
+  }, [ fileTypes, multiple, commonError, formState.isSubmitting, renderFiles, renderUploadButton ]);
 
   const validateFileType = React.useCallback(async(value: FieldPathValue<FormFields, 'sources'>): Promise<ValidateResult> => {
     if (Array.isArray(value)) {

ui/shared/forms/DragAndDropArea.tsx

-import { chakra, Center } from '@chakra-ui/react';
+import { chakra, Center, useColorModeValue } from '@chakra-ui/react';
 import type { DragEvent } from 'react';
 import React from 'react';
 
@@ -8,20 +8,25 @@ interface Props {
   children: React.ReactNode;
   onDrop: (files: Array<File>) => void;
   className?: string;
+  isDisabled?: boolean;
 }
 
-const DragAndDropArea = ({ onDrop, children, className }: Props) => {
+const DragAndDropArea = ({ onDrop, children, className, isDisabled }: Props) => {
   const [ isDragOver, setIsDragOver ] = React.useState(false);
 
   const handleDrop = React.useCallback(async(event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
 
+    if (isDisabled) {
+      return;
+    }
+
     const fileEntries = await getAllFileEntries(event.dataTransfer.items);
     const files = await Promise.all(fileEntries.map(convertFileEntryToFile));
 
     onDrop(files);
     setIsDragOver(false);
-  }, [ onDrop ]);
+  }, [ isDisabled, onDrop ]);
 
   const handleDragOver = React.useCallback((event: DragEvent<HTMLDivElement>) => {
     event.preventDefault();
@@ -37,20 +42,31 @@ const DragAndDropArea = ({ onDrop, children, className }: Props) => {
     setIsDragOver(false);
   }, []);
 
+  const handleClick = React.useCallback((event: React.MouseEvent) => {
+    if (isDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, [ isDisabled ]);
+
+  const disabledBorderColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
+  const borderColor = isDragOver ? 'link_hovered' : 'link';
+
   return (
     <Center
       className={ className }
       w="100%"
       minH="120px"
       borderWidth="2px"
-      borderColor={ isDragOver ? 'link_hovered' : 'link' }
+      borderColor={ isDisabled ? disabledBorderColor : borderColor }
       _hover={{
-        borderColor: 'link_hovered',
+        borderColor: isDisabled ? disabledBorderColor : 'link_hovered',
       }}
       borderRadius="base"
       borderStyle="dashed"
       cursor="pointer"
       textAlign="center"
+      onClick={ handleClick }
       onDrop={ handleDrop }
       onDragOver={ handleDragOver }
       onDragEnter={ handleDragEnter }