reset invalid compiler options; disable libraries after form submit

ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx

@@ -28,7 +28,7 @@ interface Props {
 
 const ContractVerificationFieldCompiler = ({ isVyper }: Props) => {
   const [ isNightly, setIsNightly ] = React.useState(false);
-  const { formState, control } = useFormContext<FormFields>();
+  const { formState, control, getValues, resetField } = useFormContext<FormFields>();
   const isMobile = useIsMobile();
 
   const options = React.useMemo(() => (
@@ -38,8 +38,12 @@ const ContractVerificationFieldCompiler = ({ isVyper }: Props) => {
   ), [ isNightly ]);
 
   const handleCheckboxChange = React.useCallback(() => {
+    if (isNightly) {
+      const value = getValues('compiler');
+      value.includes('nightly') && resetField('compiler');
+    }
     setIsNightly(prev => !prev);
-  }, []);
+  }, [ getValues, isNightly, resetField ]);
 
   const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'compiler'>}) => {
     const error = 'compiler' in formState.errors ? formState.errors.compiler : undefined;

ui/contractVerification/fields/ContractVerificationFieldLibraries.tsx

@@ -39,6 +39,7 @@ const ContractVerificationFieldLibraries = () => {
           size="lg"
           onChange={ handleCheckboxChange }
           mt={ 9 }
+          isDisabled={ formState.isSubmitting }
         >
           Add contract libraries
         </Checkbox>
@@ -52,6 +53,7 @@ const ContractVerificationFieldLibraries = () => {
           onAddFieldClick={ handleAddFieldClick }
           onRemoveFieldClick={ handleRemoveFieldClick }
           error={ 'libraries' in formState.errors ? formState.errors.libraries?.[index] : undefined }
+          isDisabled={ formState.isSubmitting }
         />
       )) }
     </>

ui/contractVerification/fields/ContractVerificationFieldLibraryItem.tsx

@@ -24,9 +24,10 @@ interface Props {
   };
   onAddFieldClick: (index: number) => void;
   onRemoveFieldClick: (index: number) => void;
+  isDisabled?: boolean;
 }
 
-const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, onAddFieldClick, onRemoveFieldClick, error }: Props) => {
+const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, onAddFieldClick, onRemoveFieldClick, error, isDisabled }: Props) => {
   const ref = React.useRef<HTMLDivElement>(null);
 
   const renderNameControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, `libraries.${ number }.name`>}) => {
@@ -36,12 +37,13 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
           { ...field }
           required
           isInvalid={ Boolean(error?.name) }
+          isDisabled={ isDisabled }
           maxLength={ 255 }
         />
         <InputPlaceholder text="Library name (.sol file)" error={ error?.name }/>
       </FormControl>
     );
-  }, [ error?.name ]);
+  }, [ error?.name, isDisabled ]);
 
   const renderAddressControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, `libraries.${ number }.address`>}) => {
     return (
@@ -49,12 +51,13 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
         <Input
           { ...field }
           isInvalid={ Boolean(error?.address) }
+          isDisabled={ isDisabled }
           required
         />
         <InputPlaceholder text="Library address (0x...)" error={ error?.address }/>
       </FormControl>
     );
-  }, [ error?.address ]);
+  }, [ error?.address, isDisabled ]);
 
   const handleAddButtonClick = React.useCallback(() => {
     onAddFieldClick(index);
@@ -82,6 +85,7 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
                 h="30px"
                 onClick={ handleRemoveButtonClick }
                 icon={ <Icon as={ minusIcon } w="20px" h="20px"/> }
+                isDisabled={ isDisabled }
               />
             ) }
             { fieldsLength < LIMIT && (
@@ -92,6 +96,7 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
                 h="30px"
                 onClick={ handleAddButtonClick }
                 icon={ <Icon as={ plusIcon } w="20px" h="20px"/> }
+                isDisabled={ isDisabled }
               />
             ) }
           </Flex>

ui/shared/FancySelect/FancySelect.tsx

-import { FormControl, useBoolean, useToken, useColorMode } from '@chakra-ui/react';
+import { FormControl, useToken, useColorMode } from '@chakra-ui/react';
 import type { Size, CSSObjectWithLabel, OptionsOrGroups, GroupBase, SingleValue, MultiValue } from 'chakra-react-select';
 import { Select } from 'chakra-react-select';
 import React from 'react';
@@ -19,15 +19,25 @@ interface Props {
   isDisabled?: boolean;
   isRequired?: boolean;
   error?: FieldError;
+  value?: string;
 }
 
-const FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur, isDisabled, isRequired, error }: Props) => {
-  const [ hasValue, setHasValue ] = useBoolean(false);
+const FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur, isDisabled, isRequired, error, value: valueFromProps }: Props) => {
+  const [ value, setValue ] = React.useState<SingleValue<Option> | MultiValue<Option>>();
 
   const menuZIndex = useToken('zIndices', 'dropdown');
   const { colorMode } = useColorMode();
 
+  React.useEffect(() => {
+    if (!valueFromProps && value) {
+      setValue(null);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ valueFromProps ]);
+
   const handleChange = React.useCallback((newValue: SingleValue<Option> | MultiValue<Option>) => {
+    setValue(newValue);
+
     if (Array.isArray(newValue)) {
       return;
     }
@@ -37,9 +47,8 @@ const FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur
       return;
     }
 
-    setHasValue.on();
     onChange(_newValue.value);
-  }, [ setHasValue, onChange ]);
+  }, [ onChange ]);
 
   const handleBlur = React.useCallback(() => {
     onBlur?.();
@@ -58,7 +67,7 @@ const FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur
       isRequired={ isRequired }
       { ...(error ? { 'aria-invalid': true } : {}) }
       { ...(isDisabled ? { 'aria-disabled': true } : {}) }
-      { ...(hasValue ? { 'aria-active': true } : {}) }
+      { ...(value ? { 'aria-active': true } : {}) }
     >
       <Select
         menuPortalTarget={ window.document.body }
@@ -74,6 +83,7 @@ const FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur
         isDisabled={ isDisabled }
         isRequired={ isRequired }
         isInvalid={ Boolean(error) }
+        value={ value }
       />
       <InputPlaceholder
         text={ placeholder }