form reset when method is changed

ui/contractVerification/ContractVerificationForm.tsx

@@ -1,4 +1,4 @@
-import { Button, chakra } from '@chakra-ui/react';
+import { Button, chakra, useUpdateEffect } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
@@ -21,7 +21,7 @@ import ContractVerificationSourcify from './methods/ContractVerificationSourcify
 import ContractVerificationStandardInput from './methods/ContractVerificationStandardInput';
 import ContractVerificationVyperContract from './methods/ContractVerificationVyperContract';
 import ContractVerificationVyperMultiPartFile from './methods/ContractVerificationVyperMultiPartFile';
-import { prepareRequestBody, formatSocketErrors, METHOD_LABELS } from './utils';
+import { prepareRequestBody, formatSocketErrors, DEFAULT_VALUES } from './utils';
 
 const METHOD_COMPONENTS = {
   'flattened-code': <ContractVerificationFlattenSourceCode/>,
@@ -41,14 +41,9 @@ interface Props {
 const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Props) => {
   const formApi = useForm<FormFields>({
     mode: 'onBlur',
-    defaultValues: {
-      method: methodFromQuery ? {
-        value: methodFromQuery,
-        label: METHOD_LABELS[methodFromQuery],
-      } : undefined,
-    },
+    defaultValues: methodFromQuery ? DEFAULT_VALUES[methodFromQuery] : undefined,
   });
-  const { control, handleSubmit, watch, formState, setError } = formApi;
+  const { control, handleSubmit, watch, formState, setError, reset } = formApi;
   const submitPromiseResolver = React.useRef<(value: unknown) => void>();
 
   const apiFetch = useApiFetch();
@@ -129,6 +124,14 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
 
   const method = watch('method');
   const content = METHOD_COMPONENTS[method?.value] || null;
+  const methodValue = method?.value;
+
+  useUpdateEffect(() => {
+    if (methodValue) {
+      reset(DEFAULT_VALUES[methodValue]);
+    }
+  // !!! should run only when method is changed
+  }, [ methodValue ]);
 
   return (
     <FormProvider { ...formApi }>

ui/contractVerification/fields/ContractVerificationFieldAutodetectArgs.tsx

@@ -34,7 +34,6 @@ const ContractVerificationFieldAutodetectArgs = () => {
           name="autodetect_constructor_args"
           control={ control }
           render={ renderControl }
-          defaultValue={ true }
         />
       </ContractVerificationFormRow>
       { !isOn && <ContractVerificationFieldConstructorArgs/> }

ui/contractVerification/fields/ContractVerificationFieldCode.tsx

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

ui/contractVerification/fields/ContractVerificationFieldLibraries.tsx

@@ -1,4 +1,4 @@
-import { Checkbox } from '@chakra-ui/react';
+import { Checkbox, useUpdateEffect } from '@chakra-ui/react';
 import React from 'react';
 import { useFieldArray, useFormContext } from 'react-hook-form';
 
@@ -8,13 +8,21 @@ import ContractVerificationFormRow from '../ContractVerificationFormRow';
 import ContractVerificationFieldLibraryItem from './ContractVerificationFieldLibraryItem';
 
 const ContractVerificationFieldLibraries = () => {
-  const { formState, control } = useFormContext<FormFields>();
+  const { formState, control, getValues } = useFormContext<FormFields>();
   const { fields, append, remove, insert } = useFieldArray({
     name: 'libraries',
     control,
   });
   const [ isEnabled, setIsEnabled ] = React.useState(fields.length > 0);
 
+  const value = getValues('libraries');
+
+  useUpdateEffect(() => {
+    if (!value || value.length === 0) {
+      setIsEnabled(false);
+    }
+  }, [ value ]);
+
   const handleCheckboxChange = React.useCallback(() => {
     if (!isEnabled) {
       append({ name: '', address: '' });

ui/contractVerification/fields/ContractVerificationFieldName.tsx

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

ui/contractVerification/fields/ContractVerificationFieldOptimization.tsx

@@ -55,7 +55,6 @@ const ContractVerificationFieldOptimization = () => {
           name="is_optimization_enabled"
           control={ control }
           render={ renderCheckboxControl }
-          defaultValue={ true }
         />
         { isEnabled && (
           <Controller
@@ -63,7 +62,6 @@ const ContractVerificationFieldOptimization = () => {
             control={ control }
             render={ renderInputControl }
             rules={{ required: true }}
-            defaultValue="200"
           />
         ) }
       </Flex>

ui/contractVerification/utils.ts

@@ -32,6 +32,74 @@ export const METHOD_LABELS: Record<SmartContractVerificationMethod, string> = {
   'vyper-multi-part': 'Vyper (Multi-part files)',
 };
 
+export const DEFAULT_VALUES = {
+  'flattened-code': {
+    method: {
+      value: 'flattened-code' as const,
+      label: METHOD_LABELS['flattened-code'],
+    },
+    is_yul: false,
+    name: '',
+    compiler: null,
+    evm_version: null,
+    is_optimization_enabled: true,
+    optimization_runs: '200',
+    code: '',
+    autodetect_constructor_args: true,
+    constructor_args: '',
+    libraries: [],
+  },
+  'standard-input': {
+    method: {
+      value: 'standard-input' as const,
+      label: METHOD_LABELS['standard-input'],
+    },
+    name: '',
+    compiler: null,
+    sources: [],
+    autodetect_constructor_args: true,
+    constructor_args: '',
+  },
+  sourcify: {
+    method: {
+      value: 'sourcify' as const,
+      label: METHOD_LABELS.sourcify,
+    },
+    sources: [],
+  },
+  'multi-part': {
+    method: {
+      value: 'multi-part' as const,
+      label: METHOD_LABELS['multi-part'],
+    },
+    compiler: null,
+    evm_version: null,
+    is_optimization_enabled: true,
+    optimization_runs: 200,
+    sources: [],
+    libraries: [],
+  },
+  'vyper-code': {
+    method: {
+      value: 'vyper-code' as const,
+      label: METHOD_LABELS['vyper-code'],
+    },
+    name: '',
+    compiler: null,
+    code: '',
+    constructor_args: '',
+  },
+  'vyper-multi-part': {
+    method: {
+      value: 'vyper-multi-part' as const,
+      label: METHOD_LABELS['vyper-multi-part'],
+    },
+    compiler: null,
+    evm_version: null,
+    sources: [],
+  },
+};
+
 export function isValidVerificationMethod(method?: string): method is SmartContractVerificationMethod {
   return method && SUPPORTED_VERIFICATION_METHODS.includes(method as SmartContractVerificationMethod) ? true : false;
 }