tweaks

theme/components/Form.ts

@@ -58,7 +58,7 @@ function getFloatingVariantStylesForSize(size: 'md' | 'lg', props: StyleFunction
         label: activeLabelStyles,
         'input, textarea': activeInputStyles,
       },
-      '&[aria-active=true] label': activeLabelStyles,
+      '&[data-active=true] label': activeLabelStyles,
 
       // label styles
       label: FormLabel.sizes?.[size](props) || {},

ui/contractVerification/fields/ContractVerificationFieldCode.tsx

@@ -39,6 +39,7 @@ const ContractVerificationFieldCode = ({ isVyper }: Props) => {
         control={ control }
         render={ renderControl }
         rules={{ required: true }}
+        defaultValue=""
       />
       { isVyper ? null : (
         <>

ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx

@@ -39,8 +39,8 @@ const ContractVerificationFieldCompiler = ({ isVyper }: Props) => {
 
   const handleCheckboxChange = React.useCallback(() => {
     if (isNightly) {
-      const value = getValues('compiler');
-      value.includes('nightly') && resetField('compiler');
+      const field = getValues('compiler');
+      field.value.includes('nightly') && resetField('compiler', { defaultValue: null });
     }
     setIsNightly(prev => !prev);
   }, [ getValues, isNightly, resetField ]);

ui/contractVerification/fields/ContractVerificationFieldName.tsx

@@ -40,6 +40,7 @@ const ContractVerificationFieldName = ({ hint }: Props) => {
         control={ control }
         render={ renderControl }
         rules={{ required: true }}
+        defaultValue=""
       />
       { hint ? <span>{ hint }</span> : (
         <>

ui/contractVerification/fields/ContractVerificationFieldOptimization.tsx

@@ -33,8 +33,8 @@ const ContractVerificationFieldOptimization = () => {
         <Input
           { ...field }
           required
-          maxLength={ 255 }
           isDisabled={ formState.isSubmitting }
+          type="number"
         />
         <InputPlaceholder text="Optimization runs"/>
       </FormControl>
@@ -57,6 +57,7 @@ const ContractVerificationFieldOptimization = () => {
             control={ control }
             render={ renderInputControl }
             rules={{ required: true }}
+            defaultValue=""
           />
         </ContractVerificationFormRow>
       ) }

ui/contractVerification/types.ts

+import type { Option } from 'ui/shared/FancySelect/types';
+
 export type VerificationMethod = 'flatten_source_code' | 'standard_input' | 'sourcify' | 'multi_part_file' | 'vyper_contract'
 
 export interface ContractLibrary {
@@ -8,8 +10,8 @@ export interface FormFieldsFlattenSourceCode {
   method: 'flatten_source_code';
   is_yul: boolean;
   name: string;
-  compiler: string;
-  evm_version: string;
+  compiler: Option;
+  evm_version: Option;
   is_optimization_enabled: boolean;
   optimization_runs: string;
   code: string;
@@ -20,7 +22,7 @@ export interface FormFieldsFlattenSourceCode {
 export interface FormFieldsStandardInput {
   method: 'standard_input';
   name: string;
-  compiler: string;
+  compiler: Option;
   sources: Array<File>;
 }
 
@@ -31,8 +33,8 @@ export interface FormFieldsSourcify {
 
 export interface FormFieldsMultiPartFile {
   method: 'multi_part_file';
-  compiler: string;
-  evm_version: string;
+  compiler: Option;
+  evm_version: Option;
   is_optimization_enabled: boolean;
   optimization_runs: string;
   sources: Array<File>;
@@ -41,7 +43,7 @@ export interface FormFieldsMultiPartFile {
 export interface FormFieldsVyperContract {
   method: 'vyper_contract';
   name: string;
-  compiler: string;
+  compiler: Option;
   code: string;
   abi_encoded_args: string;
 }

ui/shared/FancySelect/FancySelect.tsx

@@ -2,7 +2,7 @@ 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';
-import type { FieldError } from 'react-hook-form';
+import type { FieldError, FieldErrorsImpl, Merge } from 'react-hook-form';
 
 import type { Option } from './types';
 
@@ -14,46 +14,18 @@ interface Props {
   options: OptionsOrGroups<Option, GroupBase<Option>>;
   placeholder: string;
   name: string;
-  onChange: (newValue: string) => void;
+  onChange: (newValue: SingleValue<Option> | MultiValue<Option>) => void;
   onBlur?: () => void;
   isDisabled?: boolean;
   isRequired?: boolean;
-  error?: FieldError;
-  value?: string;
+  error?: Merge<FieldError, FieldErrorsImpl<Option>> | undefined;
+  value?: SingleValue<Option> | MultiValue<Option>;
 }
 
-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 FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur, isDisabled, isRequired, error, value }: Props) => {
   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;
-    }
-
-    const _newValue = newValue as SingleValue<Option>;
-    if (!_newValue) {
-      return;
-    }
-
-    onChange(_newValue.value);
-  }, [ onChange ]);
-
-  const handleBlur = React.useCallback(() => {
-    onBlur?.();
-  }, [ onBlur ]);
-
   const styles = React.useMemo(() => ({
     menuPortal: (provided: CSSObjectWithLabel) => ({ ...provided, zIndex: menuZIndex }),
   }), [ menuZIndex ]);
@@ -67,7 +39,7 @@ const FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur
       isRequired={ isRequired }
       { ...(error ? { 'aria-invalid': true } : {}) }
       { ...(isDisabled ? { 'aria-disabled': true } : {}) }
-      { ...(value ? { 'aria-active': true } : {}) }
+      { ...(value ? { 'data-active': true } : {}) }
     >
       <Select
         menuPortalTarget={ window.document.body }
@@ -78,8 +50,8 @@ const FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur
         styles={ styles }
         chakraStyles={ chakraStyles }
         useBasicStyles
-        onChange={ handleChange }
-        onBlur={ handleBlur }
+        onChange={ onChange }
+        onBlur={ onBlur }
         isDisabled={ isDisabled }
         isRequired={ isRequired }
         isInvalid={ Boolean(error) }
@@ -94,4 +66,4 @@ const FancySelect = ({ size = 'md', options, placeholder, name, onChange, onBlur
   );
 };
 
-export default React.memo(FancySelect);
+export default React.memo(React.forwardRef(FancySelect));