evm version and compiler

theme/components/Checkbox.ts

@@ -2,6 +2,7 @@ import { checkboxAnatomy as parts } from '@chakra-ui/anatomy';
 import {
   createMultiStyleConfigHelpers,
   defineStyle,
+  cssVar,
 } from '@chakra-ui/styled-system';
 import { mode } from '@chakra-ui/theme-tools';
 import { runIfFn } from '@chakra-ui/utils';
@@ -9,6 +10,8 @@ import { runIfFn } from '@chakra-ui/utils';
 const { definePartsStyle, defineMultiStyleConfig } =
   createMultiStyleConfigHelpers(parts.keys);
 
+const $size = cssVar('checkbox-size');
+
 const baseStyleControl = defineStyle((props) => {
   const { colorScheme: c } = props;
 
@@ -28,6 +31,24 @@ const baseStyleControl = defineStyle((props) => {
   };
 });
 
+const sizes = {
+  sm: definePartsStyle({
+    control: { [$size.variable]: 'sizes.3' },
+    label: { fontSize: 'sm' },
+    icon: { fontSize: '3xs' },
+  }),
+  md: definePartsStyle({
+    control: { [$size.variable]: 'sizes.4' },
+    label: { fontSize: 'md' },
+    icon: { fontSize: '2xs' },
+  }),
+  lg: definePartsStyle({
+    control: { [$size.variable]: 'sizes.5' },
+    label: { fontSize: 'md' },
+    icon: { fontSize: '2xs' },
+  }),
+};
+
 const baseStyleLabel = defineStyle({
   _disabled: { opacity: 0.2 },
 });
@@ -39,6 +60,7 @@ const baseStyle = definePartsStyle((props) => ({
 
 const Checkbox = defineMultiStyleConfig({
   baseStyle,
+  sizes,
 });
 
 export default Checkbox;

theme/components/Radio.ts

@@ -21,8 +21,24 @@ const baseStyle = definePartsStyle({
   container: baseStyleContainer,
 });
 
+const sizes = {
+  md: definePartsStyle({
+    control: { w: '4', h: '4' },
+    label: { fontSize: 'md' },
+  }),
+  lg: definePartsStyle({
+    control: { w: '5', h: '5' },
+    label: { fontSize: 'md' },
+  }),
+  sm: definePartsStyle({
+    control: { width: '3', height: '3' },
+    label: { fontSize: 'sm' },
+  }),
+};
+
 const Radio = defineMultiStyleConfig({
   baseStyle,
+  sizes,
 });
 
 export default Radio;

theme/components/Select.ts

+import { selectAnatomy as parts } from '@chakra-ui/anatomy';
+import {
+  createMultiStyleConfigHelpers,
+  defineStyle,
+} from '@chakra-ui/styled-system';
+
+import Input from './Input';
+
+const { defineMultiStyleConfig } =
+  createMultiStyleConfigHelpers(parts.keys);
+
+const iconSpacing = defineStyle({
+  paddingInlineEnd: '8',
+});
+
+const sizes = {
+  lg: {
+    ...Input.sizes?.lg,
+    field: {
+      ...Input.sizes?.lg.field,
+      ...iconSpacing,
+    },
+  },
+  md: {
+    ...Input.sizes?.md,
+    field: {
+      ...Input.sizes?.md.field,
+      ...iconSpacing,
+    },
+  },
+  sm: {
+    ...Input.sizes?.sm,
+    field: {
+      ...Input.sizes?.sm.field,
+      ...iconSpacing,
+    },
+  },
+};
+
+const Select = defineMultiStyleConfig({
+  sizes,
+  defaultProps: {
+    size: 'sm',
+  },
+});
+
+export default Select;

theme/components/index.ts

@@ -11,6 +11,7 @@ import Link from './Link';
 import Modal from './Modal';
 import Popover from './Popover';
 import Radio from './Radio';
+import Select from './Select';
 import Skeleton from './Skeleton';
 import Spinner from './Spinner';
 import Switch from './Switch';
@@ -35,6 +36,7 @@ const components = {
   Modal,
   Popover,
   Radio,
+  Select,
   Skeleton,
   Spinner,
   Switch,

ui/contractVerification/fields/ContractVerificationEvmVersion.tsx

+import { GridItem, Link, Select } from '@chakra-ui/react';
+import React from 'react';
+import type { ControllerRenderProps, Control } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+const VERSIONS = [
+  'default',
+  'london',
+  'berlin',
+];
+
+interface Props {
+  control: Control<FormFields>;
+}
+
+const ContractVerificationEvmVersion = ({ control }: Props) => {
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'evm_version'>}) => {
+    return (
+      <Select
+        { ...field }
+        size={{ base: 'md', lg: 'lg' }}
+        placeholder="EVM Version"
+      >
+        { VERSIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
+      </Select>
+    );
+  }, [ ]);
+
+  return (
+    <>
+      <GridItem>
+        <Controller
+          name="evm_version"
+          control={ control }
+          render={ renderControl }
+          rules={{ required: true }}
+        />
+      </GridItem>
+      <GridItem fontSize="sm">
+        <span>The EVM version the contract is written for. If the bytecode does not match the version, we try to verify using the latest EVM version. </span>
+        <Link href="https://forum.poa.network/t/smart-contract-verification-evm-version-details/2318" target="_blank">EVM version details</Link>
+      </GridItem>
+    </>
+  );
+};
+
+export default React.memo(ContractVerificationEvmVersion);

ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx

+import { Code, GridItem, Select, Checkbox } from '@chakra-ui/react';
+import React from 'react';
+import type { ControllerRenderProps, Control } from 'react-hook-form';
+import { Controller } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+const COMPILERS = [
+  'v0.8.17+commit.8df45f5f',
+  'v0.8.16+commit.07a7930e',
+  'v0.8.15+commit.e14f2714',
+];
+
+const COMPILERS_NIGHTLY = [
+  'v0.8.18-nightly.2022.11.23+commit.eb2f874e',
+  'v0.8.17-nightly.2022.8.24+commit.22a0c46e',
+  'v0.8.16-nightly.2022.7.6+commit.b6f11b33',
+];
+
+interface Props {
+  control: Control<FormFields>;
+}
+
+const ContractVerificationFieldCompiler = ({ control }: Props) => {
+  const [ isNightly, setIsNightly ] = React.useState(false);
+
+  const handleCheckboxChange = React.useCallback(() => {
+    setIsNightly(prev => !prev);
+  }, []);
+
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'compiler'>}) => {
+    return (
+      <Select
+        { ...field }
+        size={{ base: 'md', lg: 'lg' }}
+        placeholder="Compiler"
+      >
+        { [ ...COMPILERS, ...(isNightly ? COMPILERS_NIGHTLY : []) ].map((option) => <option key={ option } value={ option }>{ option }</option>) }
+      </Select>
+    );
+  }, [ isNightly ]);
+
+  return (
+    <>
+      <GridItem>
+        <Controller
+          name="compiler"
+          control={ control }
+          render={ renderControl }
+          rules={{ required: true }}
+        />
+        <Checkbox
+          size="lg"
+          mt={ 3 }
+          onChange={ handleCheckboxChange }
+        >
+          Include nightly builds
+        </Checkbox>
+      </GridItem>
+      <GridItem fontSize="sm">
+        <span>The compiler version is specified in </span>
+        <Code>pragma solidity X.X.X</Code>
+        <span>. Use the compiler version rather than the nightly build. If using the Solidity compiler, run </span>
+        <Code>solc —version</Code>
+        <span> to check.</span>
+      </GridItem>
+    </>
+  );
+};
+
+export default React.memo(ContractVerificationFieldCompiler);

ui/contractVerification/fields/ContractVerificationFieldMethod.tsx

@@ -101,7 +101,7 @@ const ContractVerificationFieldMethod = ({ control, isDisabled }: Props) => {
       <RadioGroup defaultValue="add" colorScheme="blue" isDisabled={ isDisabled } { ...field }>
         <Stack spacing={ 4 }>
           { VERIFICATION_METHODS.map((method) => {
-            return <Radio key={ method } value={ method }>{ renderItem(method) }</Radio>;
+            return <Radio key={ method } value={ method } size="lg">{ renderItem(method) }</Radio>;
           }) }
         </Stack>
       </RadioGroup>

ui/contractVerification/fields/ContractVerificationFieldName.tsx

@@ -14,7 +14,7 @@ interface Props {
 const ContractVerificationFieldName = ({ control }: Props) => {
   const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'name'>}) => {
     return (
-      <FormControl variant="floating" id={ field.name } isRequired size="lg">
+      <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
         <Input
           { ...field }
           required

ui/contractVerification/methods/ContractVerificationFlattenSourceCode.tsx

@@ -4,6 +4,8 @@ import type { Control } from 'react-hook-form';
 import type { FormFields } from '../types';
 
 import ContractVerificationMethod from '../ContractVerificationMethod';
+import ContractVerificationEvmVersion from '../fields/ContractVerificationEvmVersion';
+import ContractVerificationFieldCompiler from '../fields/ContractVerificationFieldCompiler';
 import ContractVerificationFieldIsYul from '../fields/ContractVerificationFieldIsYul';
 import ContractVerificationFieldName from '../fields/ContractVerificationFieldName';
 
@@ -16,6 +18,8 @@ const ContractVerificationFlattenSourceCode = ({ control }: Props) => {
     <ContractVerificationMethod title="New Solidity/Yul Smart Contract Verification">
       <ContractVerificationFieldIsYul control={ control }/>
       <ContractVerificationFieldName control={ control }/>
+      <ContractVerificationFieldCompiler control={ control }/>
+      <ContractVerificationEvmVersion control={ control }/>
     </ContractVerificationMethod>
   );
 };

ui/contractVerification/types.ts

@@ -4,6 +4,8 @@ export interface FormFieldsFlattenSourceCode {
   method: 'flatten_source_code';
   is_yul: boolean;
   name: string;
+  compiler: string;
+  evm_version: string;
 }
 
 export interface FormFieldsStandardInput {