defatul value for evm version field

ui/contractVerification/ContractVerificationForm.pw.tsx

@@ -92,7 +92,7 @@ test.describe('sourcify', () => {
   });
   testWithSocket.describe.configure({ mode: 'serial', timeout: 20_000 });
 
-  testWithSocket('with multiple contracts +@mobile', async({ mount, page, createSocket }) => {
+  testWithSocket('with multiple contracts', async({ mount, page, createSocket }) => {
     const component = await mount(
       <TestApp withSocket>
         <ContractVerificationForm config={ formConfig } hash={ hash }/>

ui/contractVerification/ContractVerificationForm.tsx

 import { Button, chakra, useUpdateEffect } from '@chakra-ui/react';
-import { useRouter } from 'next/router';
+import { route } from 'nextjs-routes';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm, FormProvider } from 'react-hook-form';
@@ -20,7 +20,7 @@ import ContractVerificationSourcify from './methods/ContractVerificationSourcify
 import ContractVerificationStandardInput from './methods/ContractVerificationStandardInput';
 import ContractVerificationVyperContract from './methods/ContractVerificationVyperContract';
 import ContractVerificationVyperMultiPartFile from './methods/ContractVerificationVyperMultiPartFile';
-import { prepareRequestBody, formatSocketErrors, DEFAULT_VALUES } from './utils';
+import { prepareRequestBody, formatSocketErrors, getDefaultValues } from './utils';
 
 const METHOD_COMPONENTS = {
   'flattened-code': <ContractVerificationFlattenSourceCode/>,
@@ -40,14 +40,13 @@ interface Props {
 const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Props) => {
   const formApi = useForm<FormFields>({
     mode: 'onBlur',
-    defaultValues: methodFromQuery ? DEFAULT_VALUES[methodFromQuery] : undefined,
+    defaultValues: methodFromQuery ? getDefaultValues(methodFromQuery, config) : undefined,
   });
   const { control, handleSubmit, watch, formState, setError, reset } = formApi;
   const submitPromiseResolver = React.useRef<(value: unknown) => void>();
 
   const apiFetch = useApiFetch();
   const toast = useToast();
-  const router = useRouter();
 
   const onFormSubmit: SubmitHandler<FormFields> = React.useCallback(async(data) => {
     const body = prepareRequestBody(data);
@@ -86,8 +85,8 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
       isClosable: true,
     });
 
-    router.push({ pathname: '/address/[hash]', query: { hash, tab: 'contract' } }, undefined, { shallow: false });
-  }, [ hash, router, setError, toast ]);
+    window.location.assign(route({ pathname: '/address/[hash]', query: { hash, tab: 'contract' } }));
+  }, [ hash, setError, toast ]);
 
   const handleSocketError = React.useCallback(() => {
     if (!formState.isSubmitting) {
@@ -129,7 +128,7 @@ const ContractVerificationForm = ({ method: methodFromQuery, config, hash }: Pro
 
   useUpdateEffect(() => {
     if (methodValue) {
-      reset(DEFAULT_VALUES[methodValue]);
+      reset(getDefaultValues(methodValue, config));
     }
   // !!! should run only when method is changed
   }, [ methodValue ]);

ui/contractVerification/fields/ContractVerificationFieldMethod.tsx

@@ -60,14 +60,14 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props
   const renderPopoverListItem = React.useCallback((method: SmartContractVerificationMethod) => {
     switch (method) {
       case 'flattened-code':
-        return <ListItem>Verification through flattened source code.</ListItem>;
+        return <ListItem key={ method }>Verification through flattened source code.</ListItem>;
       case 'multi-part':
-        return <ListItem>Verification of multi-part Solidity files.</ListItem>;
+        return <ListItem key={ method }>Verification of multi-part Solidity files.</ListItem>;
       case 'sourcify':
-        return <ListItem>Verification through <Link href="https://sourcify.dev/" target="_blank">Sourcify</Link>.</ListItem>;
+        return <ListItem key={ method }>Verification through <Link href="https://sourcify.dev/" target="_blank">Sourcify</Link>.</ListItem>;
       case 'standard-input':
         return (
-          <ListItem>
+          <ListItem key={ method }>
             <span>Verification using </span>
             <Link
               href="https://docs.soliditylang.org/en/latest/using-the-compiler.html#input-description"
@@ -79,9 +79,9 @@ const ContractVerificationFieldMethod = ({ control, isDisabled, methods }: Props
           </ListItem>
         );
       case 'vyper-code':
-        return <ListItem>Verification of Vyper contract.</ListItem>;
+        return <ListItem key={ method }>Verification of Vyper contract.</ListItem>;
       case 'vyper-multi-part':
-        return <ListItem>Verification of multi-part Vyper files.</ListItem>;
+        return <ListItem key={ method }>Verification of multi-part Vyper files.</ListItem>;
     }
   }, []);
 

ui/contractVerification/types.ts

@@ -15,8 +15,8 @@ export interface FormFieldsFlattenSourceCode {
   method: MethodOption;
   is_yul: boolean;
   name: string;
-  compiler: Option;
-  evm_version: Option;
+  compiler: Option | null;
+  evm_version: Option | null;
   is_optimization_enabled: boolean;
   optimization_runs: string;
   code: string;
@@ -28,7 +28,7 @@ export interface FormFieldsFlattenSourceCode {
 export interface FormFieldsStandardInput {
   method: MethodOption;
   name: string;
-  compiler: Option;
+  compiler: Option | null;
   sources: Array<File>;
   autodetect_constructor_args: boolean;
   constructor_args: string;
@@ -42,8 +42,8 @@ export interface FormFieldsSourcify {
 
 export interface FormFieldsMultiPartFile {
   method: MethodOption;
-  compiler: Option;
-  evm_version: Option;
+  compiler: Option | null;
+  evm_version: Option | null;
   is_optimization_enabled: boolean;
   optimization_runs: string;
   sources: Array<File>;
@@ -53,15 +53,15 @@ export interface FormFieldsMultiPartFile {
 export interface FormFieldsVyperContract {
   method: MethodOption;
   name: string;
-  compiler: Option;
+  compiler: Option | null;
   code: string;
   constructor_args: string;
 }
 
 export interface FormFieldsVyperMultiPartFile {
   method: MethodOption;
-  compiler: Option;
-  evm_version: Option;
+  compiler: Option | null;
+  evm_version: Option | null;
   sources: Array<File>;
 }
 

ui/contractVerification/utils.ts

@@ -10,7 +10,7 @@ import type {
   FormFieldsVyperContract,
   FormFieldsVyperMultiPartFile,
 } from './types';
-import type { SmartContractVerificationMethod, SmartContractVerificationError } from 'types/api/contract';
+import type { SmartContractVerificationMethod, SmartContractVerificationError, SmartContractVerificationConfig } from 'types/api/contract';
 
 import type { Params as FetchParams } from 'lib/hooks/useFetch';
 
@@ -32,7 +32,7 @@ export const METHOD_LABELS: Record<SmartContractVerificationMethod, string> = {
   'vyper-multi-part': 'Vyper (Multi-part files)',
 };
 
-export const DEFAULT_VALUES = {
+export const DEFAULT_VALUES: Record<SmartContractVerificationMethod, FormFields> = {
   'flattened-code': {
     method: {
       value: 'flattened-code' as const,
@@ -75,7 +75,7 @@ export const DEFAULT_VALUES = {
     compiler: null,
     evm_version: null,
     is_optimization_enabled: true,
-    optimization_runs: 200,
+    optimization_runs: '200',
     sources: [],
     libraries: [],
   },
@@ -100,6 +100,22 @@ export const DEFAULT_VALUES = {
   },
 };
 
+export function getDefaultValues(method: SmartContractVerificationMethod, config: SmartContractVerificationConfig) {
+  const defaultValues = DEFAULT_VALUES[method];
+
+  if ('evm_version' in defaultValues) {
+    if (method === 'flattened-code' || method === 'multi-part') {
+      defaultValues.evm_version = config.solidity_evm_versions.find((value) => value === 'default') ? { label: 'default', value: 'default' } : null;
+    }
+
+    if (method === 'vyper-multi-part') {
+      defaultValues.evm_version = config.vyper_evm_versions.find((value) => value === 'default') ? { label: 'default', value: 'default' } : null;
+    }
+  }
+
+  return defaultValues;
+}
+
 export function isValidVerificationMethod(method?: string): method is SmartContractVerificationMethod {
   return method && SUPPORTED_VERIFICATION_METHODS.includes(method) ? true : false;
 }
@@ -141,7 +157,7 @@ export function prepareRequestBody(data: FormFields): FetchParams['body'] {
       const _data = data as FormFieldsStandardInput;
 
       const body = new FormData();
-      body.set('compiler_version', _data.compiler?.value);
+      _data.compiler && body.set('compiler_version', _data.compiler.value);
       body.set('contract_name', _data.name);
       body.set('autodetect_constructor_args', String(Boolean(_data.autodetect_constructor_args)));
       body.set('constructor_args', _data.constructor_args);
@@ -163,8 +179,8 @@ export function prepareRequestBody(data: FormFields): FetchParams['body'] {
       const _data = data as FormFieldsMultiPartFile;
 
       const body = new FormData();
-      body.set('compiler_version', _data.compiler?.value);
-      body.set('evm_version', _data.evm_version?.value);
+      _data.compiler && body.set('compiler_version', _data.compiler.value);
+      _data.evm_version && body.set('evm_version', _data.evm_version.value);
       body.set('is_optimization_enabled', String(Boolean(_data.is_optimization_enabled)));
       _data.is_optimization_enabled && body.set('optimization_runs', _data.optimization_runs);
 
@@ -190,8 +206,8 @@ export function prepareRequestBody(data: FormFields): FetchParams['body'] {
       const _data = data as FormFieldsVyperMultiPartFile;
 
       const body = new FormData();
-      body.set('compiler_version', _data.compiler?.value);
-      body.set('evm_version', _data.evm_version?.value);
+      _data.compiler && body.set('compiler_version', _data.compiler.value);
+      _data.evm_version && body.set('evm_version', _data.evm_version.value);
       addFilesToFormData(body, _data.sources);
 
       return body;

ui/shared/FancySelect/FancySelect.tsx

@@ -25,7 +25,7 @@ interface AsyncSelectProps extends AsyncProps<Option, boolean, GroupBase<Option>
 
 type Props = RegularSelectProps | AsyncSelectProps;
 
-const FancySelect = (props: Props) => {
+const FancySelect = (props: Props, ref: React.LegacyRef<HTMLDivElement>) => {
   const menuZIndex = useToken('zIndices', 'dropdown');
   const { colorMode } = useColorMode();
 
@@ -42,6 +42,7 @@ const FancySelect = (props: Props) => {
       variant="floating"
       size={ props.size || 'md' }
       isRequired={ props.isRequired }
+      ref={ ref }
       { ...(props.error ? { 'aria-invalid': true } : {}) }
       { ...(props.isDisabled ? { 'aria-disabled': true } : {}) }
       { ...(props.value ? { 'data-active': true } : {}) }