methods sections + yul and name fields

ui/contractVerification/ContractVerificationForm.tsx

@@ -5,20 +5,33 @@ import { useForm } from 'react-hook-form';
 
 import type { FormFields } from './types';
 
-import ContractVerificationFieldMethod from './ContractVerificationFieldMethod';
+import ContractVerificationFieldMethod from './fields/ContractVerificationFieldMethod';
+import ContractVerificationFlattenSourceCode from './methods/ContractVerificationFlattenSourceCode';
+import ContractVerificationMultiPartFile from './methods/ContractVerificationMultiPartFile';
+import ContractVerificationSourcify from './methods/ContractVerificationSourcify';
+import ContractVerificationStandardInput from './methods/ContractVerificationStandardInput';
+import ContractVerificationVyperContract from './methods/ContractVerificationVyperContract';
 
 const ContractVerificationForm = () => {
-  const { control, handleSubmit } = useForm<FormFields>({
-    defaultValues: {
-      method: 'flatten_source_code',
-    },
-  });
+  const { control, handleSubmit, watch } = useForm<FormFields>();
 
   const onFormSubmit: SubmitHandler<FormFields> = React.useCallback((data) => {
     // eslint-disable-next-line no-console
     console.log('__>__', data);
   }, []);
 
+  const methods = React.useMemo(() => ({
+    flatten_source_code: <ContractVerificationFlattenSourceCode control={ control }/>,
+    standard_input: <ContractVerificationStandardInput control={ control }/>,
+    sourcify: <ContractVerificationSourcify control={ control }/>,
+    multi_part_file: <ContractVerificationMultiPartFile control={ control }/>,
+    vyper_contract: <ContractVerificationVyperContract control={ control }/>,
+  }), [ control ]);
+
+  const method = watch('method');
+
+  const content = methods[method] || null;
+
   return (
     <chakra.form
       noValidate
@@ -26,6 +39,8 @@ const ContractVerificationForm = () => {
       mt={ 12 }
     >
       <ContractVerificationFieldMethod control={ control }/>
+      { content }
+      { Boolean(method) && (
         <Button
           variant="solid"
           size="lg"
@@ -34,6 +49,7 @@ const ContractVerificationForm = () => {
         >
         Verify & publish
         </Button>
+      ) }
     </chakra.form>
   );
 };

ui/contractVerification/ContractVerificationMethod.tsx

+import { Grid, Text } from '@chakra-ui/react';
+import React from 'react';
+
+interface Props {
+  title: string;
+  children: React.ReactNode;
+}
+
+const ContractVerificationMethod = ({ title, children }: Props) => {
+  return (
+    <section>
+      <Text variant="secondary" mt={ 12 } mb={ 5 } fontSize="sm">{ title }</Text>
+      <Grid columnGap="30px" rowGap={{ base: 2, lg: 4 }} templateColumns={{ base: '1fr', lg: 'minmax(auto, 680px) minmax(0, 340px)' }}>
+        { children }
+      </Grid>
+    </section>
+  );
+};
+
+export default React.memo(ContractVerificationMethod);

ui/contractVerification/fields/ContractVerificationFieldIsYul.tsx

+import { GridItem } 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';
+
+import CheckboxInput from 'ui/shared/CheckboxInput';
+
+interface Props {
+  control: Control<FormFields>;
+}
+
+const ContractVerificationFieldIsYul = ({ control }: Props) => {
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'is_yul'>}) => (
+    <CheckboxInput<FormFields, 'is_yul'> text="Is Yul contract" field={ field }/>
+  ), []);
+
+  return (
+    <>
+      <GridItem>
+        <Controller
+          name="is_yul"
+          control={ control }
+          render={ renderControl }
+        />
+      </GridItem>
+      <GridItem/>
+    </>
+  );
+};
+
+export default React.memo(ContractVerificationFieldIsYul);

ui/contractVerification/ContractVerificationFieldMethod.tsx → ui/contractVerification/fields/ContractVerificationFieldMethod.tsx

@@ -19,7 +19,7 @@ import React from 'react';
 import type { ControllerRenderProps, Control } from 'react-hook-form';
 import { Controller } from 'react-hook-form';
 
-import type { FormFields, VerificationMethod } from './types';
+import type { FormFields, VerificationMethod } from '../types';
 
 import infoIcon from 'icons/info.svg';
 
@@ -110,7 +110,7 @@ const ContractVerificationFieldMethod = ({ control, isDisabled }: Props) => {
 
   return (
     <section>
-      <Text variant="secondary" fontSize="sm" mb={ 5 }>New solidity/yul smart contract verification</Text>
+      <Text variant="secondary" fontSize="sm" mb={ 5 }>Smart-contract verification method</Text>
       <Controller
         name="method"
         control={ control }

ui/contractVerification/fields/ContractVerificationFieldName.tsx

+import { chakra, Code, FormControl, GridItem, Input } 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';
+
+import InputPlaceholder from 'ui/shared/InputPlaceholder';
+
+interface Props {
+  control: Control<FormFields>;
+}
+
+const ContractVerificationFieldName = ({ control }: Props) => {
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'name'>}) => {
+    return (
+      <FormControl variant="floating" id={ field.name } isRequired size="lg">
+        <Input
+          { ...field }
+          required
+          maxLength={ 255 }
+        />
+        <InputPlaceholder text="Contract name"/>
+      </FormControl>
+    );
+  }, []);
+
+  return (
+    <>
+      <GridItem>
+        <Controller
+          name="name"
+          control={ control }
+          render={ renderControl }
+          rules={{ required: true }}
+        />
+      </GridItem>
+      <GridItem fontSize="sm">
+        <span>Must match the name specified in the code. For example, in </span>
+        <Code>{ `contract MyContract {..}` }</Code>
+        <span>. <chakra.span fontWeight={ 600 }>MyContract</chakra.span> is the contract name.</span>
+      </GridItem>
+    </>
+  );
+};
+
+export default React.memo(ContractVerificationFieldName);

ui/contractVerification/methods/ContractVerificationFlattenSourceCode.tsx

+import React from 'react';
+import type { Control } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import ContractVerificationMethod from '../ContractVerificationMethod';
+import ContractVerificationFieldIsYul from '../fields/ContractVerificationFieldIsYul';
+import ContractVerificationFieldName from '../fields/ContractVerificationFieldName';
+
+interface Props {
+  control: Control<FormFields>;
+}
+
+const ContractVerificationFlattenSourceCode = ({ control }: Props) => {
+  return (
+    <ContractVerificationMethod title="New Solidity/Yul Smart Contract Verification">
+      <ContractVerificationFieldIsYul control={ control }/>
+      <ContractVerificationFieldName control={ control }/>
+    </ContractVerificationMethod>
+  );
+};
+
+export default React.memo(ContractVerificationFlattenSourceCode);

ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx

+import React from 'react';
+import type { Control } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import ContractVerificationMethod from '../ContractVerificationMethod';
+
+interface Props {
+  control: Control<FormFields>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ContractVerificationMultiPartFile = ({ control }: Props) => {
+  return (
+    <ContractVerificationMethod title="New Solidity/Yul Smart Contract Verification">
+      ContractVerificationMultiPartFile
+    </ContractVerificationMethod>
+  );
+};
+
+export default React.memo(ContractVerificationMultiPartFile);

ui/contractVerification/methods/ContractVerificationSourcify.tsx

+import React from 'react';
+import type { Control } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import ContractVerificationMethod from '../ContractVerificationMethod';
+
+interface Props {
+  control: Control<FormFields>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ContractVerificationSourcify = ({ control }: Props) => {
+  return (
+    <ContractVerificationMethod title="New Smart Contract Verification">
+      ContractVerificationSourcify
+    </ContractVerificationMethod>
+  );
+};
+
+export default React.memo(ContractVerificationSourcify);

ui/contractVerification/methods/ContractVerificationStandardInput.tsx

+import React from 'react';
+import type { Control } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import ContractVerificationMethod from '../ContractVerificationMethod';
+
+interface Props {
+  control: Control<FormFields>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ContractVerificationStandardInput = ({ control }: Props) => {
+  return (
+    <ContractVerificationMethod title="New Smart Contract Verification">
+      ContractVerificationStandardInput
+    </ContractVerificationMethod>
+  );
+};
+
+export default React.memo(ContractVerificationStandardInput);

ui/contractVerification/methods/ContractVerificationVyperContract.tsx

+import React from 'react';
+import type { Control } from 'react-hook-form';
+
+import type { FormFields } from '../types';
+
+import ContractVerificationMethod from '../ContractVerificationMethod';
+
+interface Props {
+  control: Control<FormFields>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const ContractVerificationVyperContract = ({ control }: Props) => {
+  return (
+    <ContractVerificationMethod title="New Vyper Smart Contract Verification">
+      ContractVerificationVyperContract
+    </ContractVerificationMethod>
+  );
+};
+
+export default React.memo(ContractVerificationVyperContract);

ui/contractVerification/types.ts

@@ -2,10 +2,13 @@ export type VerificationMethod = 'flatten_source_code' | 'standard_input' | 'sou
 
 export interface FormFieldsFlattenSourceCode {
   method: 'flatten_source_code';
+  is_yul: boolean;
+  name: string;
 }
 
 export interface FormFieldsStandardInput {
   method: 'standard_input';
+  name: string;
 }
 
 export interface FormFieldsSourcify {
@@ -18,6 +21,7 @@ export interface FormFieldsMultiPartFile {
 
 export interface FormFieldsVyperContract {
   method: 'vyper_contract';
+  name: string;
 }
 
 export type FormFields = FormFieldsFlattenSourceCode | FormFieldsStandardInput | FormFieldsSourcify |