vyper method

ui/contractVerification/fields/ContractVerificationFieldAbiEncodedArgs.tsx

+import { FormControl, GridItem, Link, Textarea } 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 ContractVerificationFieldAbiEncodedArgs = ({ control }: Props) => {
+  const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'abi_encoded_args'>}) => {
+    return (
+      <FormControl variant="floating" id={ field.name } size={{ base: 'md', lg: 'lg' }}>
+        <Textarea
+          { ...field }
+          maxLength={ 255 }
+        />
+        <InputPlaceholder text="ABI-encoded Constructor Arguments"/>
+      </FormControl>
+    );
+  }, []);
+
+  return (
+    <>
+      <GridItem>
+        <Controller
+          name="abi_encoded_args"
+          control={ control }
+          render={ renderControl }
+        />
+      </GridItem>
+      <GridItem fontSize="sm">
+        <span>Add arguments in </span>
+        <Link href="https://solidity.readthedocs.io/en/develop/abi-spec.html" target="_blank">ABI hex encoded form</Link>
+        <span> if required by the contract. Constructor arguments are written right to left, and will be found at the end of the input created bytecode.</span>
+        <span> They may also be </span>
+        <Link href="https://abi.hashex.org/" target="_blank">parsed here</Link>
+        <span>.</span>
+      </GridItem>
+    </>
+  );
+};
+
+export default React.memo(ContractVerificationFieldAbiEncodedArgs);

ui/contractVerification/fields/ContractVerificationFieldCode.tsx

@@ -9,9 +9,10 @@ import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
   control: Control<FormFields>;
+  isVyper?: boolean;
 }
 
-const ContractVerificationFieldCode = ({ control }: Props) => {
+const ContractVerificationFieldCode = ({ control, isVyper }: Props) => {
   const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'code'>}) => {
     return (
       <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
@@ -35,12 +36,14 @@ const ContractVerificationFieldCode = ({ control }: Props) => {
           rules={{ required: true }}
         />
       </GridItem>
-      <GridItem fontSize="sm">
-        <span>We recommend using flattened code. This is necessary if your code utilizes a library or inherits dependencies. Use the </span>
-        <Link href="https://github.com/poanetwork/solidity-flattener" target="_blank">POA solidity flattener</Link>
-        <span> or the </span>
-        <Link href="https://www.npmjs.com/package/truffle-flattener" target="_blank">Truffle flattener</Link>
-      </GridItem>
+      { isVyper ? <GridItem/> : (
+        <GridItem fontSize="sm">
+          <span>We recommend using flattened code. This is necessary if your code utilizes a library or inherits dependencies. Use the </span>
+          <Link href="https://github.com/poanetwork/solidity-flattener" target="_blank">POA solidity flattener</Link>
+          <span> or the </span>
+          <Link href="https://www.npmjs.com/package/truffle-flattener" target="_blank">Truffle flattener</Link>
+        </GridItem>
+      ) }
     </>
   );
 };

ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx

@@ -19,9 +19,10 @@ const COMPILERS_NIGHTLY = [
 
 interface Props {
   control: Control<FormFields>;
+  isVyper?: boolean;
 }
 
-const ContractVerificationFieldCompiler = ({ control }: Props) => {
+const ContractVerificationFieldCompiler = ({ control, isVyper }: Props) => {
   const [ isNightly, setIsNightly ] = React.useState(false);
 
   const handleCheckboxChange = React.useCallback(() => {
@@ -49,21 +50,25 @@ const ContractVerificationFieldCompiler = ({ control }: Props) => {
           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>
+        { !isVyper && (
+          <Checkbox
+            size="lg"
+            mt={ 3 }
+            onChange={ handleCheckboxChange }
+          >
+            Include nightly builds
+          </Checkbox>
+        ) }
       </GridItem>
+      { isVyper ? <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>
+      ) }
     </>
   );
 };

ui/contractVerification/fields/ContractVerificationFieldLibraries.tsx

@@ -38,7 +38,7 @@ const ContractVerificationFieldLibraries = ({ control }: Props) => {
 
   return (
     <>
-      <GridItem mt={ 12 }>
+      <GridItem mt={ 9 }>
         <Checkbox
           size="lg"
           onChange={ handleCheckboxChange }

ui/contractVerification/fields/ContractVerificationFieldName.tsx

@@ -9,9 +9,10 @@ import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface Props {
   control: Control<FormFields>;
+  hint?: string;
 }
 
-const ContractVerificationFieldName = ({ control }: Props) => {
+const ContractVerificationFieldName = ({ control, hint }: Props) => {
   const renderControl = React.useCallback(({ field }: {field: ControllerRenderProps<FormFields, 'name'>}) => {
     return (
       <FormControl variant="floating" id={ field.name } isRequired size={{ base: 'md', lg: 'lg' }}>
@@ -36,9 +37,13 @@ const ContractVerificationFieldName = ({ control }: Props) => {
         />
       </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>
+        { hint || (
+          <>
+            <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>
     </>
   );

ui/contractVerification/fields/ContractVerificationFieldSources.tsx

-import { GridItem, Text, Button, Box } from '@chakra-ui/react';
+import { GridItem, Text, Button, Box, chakra } from '@chakra-ui/react';
 import React from 'react';
 import type { ControllerRenderProps, Control } from 'react-hook-form';
 import { Controller, useFormContext } from 'react-hook-form';
@@ -13,9 +13,11 @@ interface Props {
   accept?: string;
   multiple?: boolean;
   title: string;
+  className?: string;
+  hint: string;
 }
 
-const ContractVerificationFieldSources = ({ control, accept, multiple, title }: Props) => {
+const ContractVerificationFieldSources = ({ control, accept, multiple, title, className, hint }: Props) => {
   const { setValue, getValues } = useFormContext();
 
   const handleFileRemove = React.useCallback((index?: number) => {
@@ -58,7 +60,7 @@ const ContractVerificationFieldSources = ({ control, accept, multiple, title }:
 
   return (
     <>
-      <GridItem mt="30px">
+      <GridItem mt={ 4 } className={ className }>
         <Text fontWeight={ 500 } mb={ 4 }>{ title }</Text>
         <Controller
           name="sources"
@@ -66,9 +68,11 @@ const ContractVerificationFieldSources = ({ control, accept, multiple, title }:
           render={ renderControl }
         />
       </GridItem>
-      <GridItem/>
+      <GridItem fontSize="sm" mt={ 4 } className={ className }>
+        { hint }
+      </GridItem>
     </>
   );
 };
 
-export default React.memo(ContractVerificationFieldSources);
+export default React.memo(chakra(ContractVerificationFieldSources));

ui/contractVerification/methods/ContractVerificationMultiPartFile.tsx

@@ -20,7 +20,13 @@ const ContractVerificationMultiPartFile = ({ control }: Props) => {
       <ContractVerificationFieldCompiler control={ control }/>
       <ContractVerificationFieldEvmVersion control={ control }/>
       <ContractVerificationFieldOptimization control={ control }/>
-      <ContractVerificationFieldSources control={ control } accept=".sol,.yul" multiple title="Sources *.sol or *.yul files"/>
+      <ContractVerificationFieldSources
+        control={ control }
+        accept=".sol,.yul"
+        multiple
+        title="Sources *.sol or *.yul files"
+        hint="Upload all Solidity or Yul contract source files."
+      />
       <ContractVerificationFieldLibraries control={ control }/>
     </ContractVerificationMethod>
   );

ui/contractVerification/methods/ContractVerificationSourcify.tsx

@@ -4,6 +4,7 @@ import type { Control } from 'react-hook-form';
 import type { FormFields } from '../types';
 
 import ContractVerificationMethod from '../ContractVerificationMethod';
+import ContractVerificationFieldSources from '../fields/ContractVerificationFieldSources';
 
 interface Props {
   control: Control<FormFields>;
@@ -13,7 +14,13 @@ interface Props {
 const ContractVerificationSourcify = ({ control }: Props) => {
   return (
     <ContractVerificationMethod title="New Smart Contract Verification">
-      ContractVerificationSourcify
+      <ContractVerificationFieldSources
+        control={ control }
+        accept=".json"
+        multiple
+        title="Sources and Metadata JSON" mt={ 0 }
+        hint="Upload all Solidity contract source files and JSON metadata file(s) created during contract compilation."
+      />
     </ContractVerificationMethod>
   );
 };

ui/contractVerification/methods/ContractVerificationStandardInput.tsx

@@ -19,7 +19,12 @@ const ContractVerificationStandardInput = ({ control }: Props) => {
     <ContractVerificationMethod title="New Smart Contract Verification">
       <ContractVerificationFieldName control={ control }/>
       <ContractVerificationFieldCompiler control={ control }/>
-      <ContractVerificationFieldSources control={ control } accept=".json" title="Standard Input JSON"/>
+      <ContractVerificationFieldSources
+        control={ control }
+        accept=".json"
+        title="Standard Input JSON"
+        hint="Upload the standard input JSON file created during contract compilation."
+      />
       <ContractVerificationFieldConstArgs control={ control }/>
     </ContractVerificationMethod>
   );

ui/contractVerification/methods/ContractVerificationVyperContract.tsx

@@ -4,6 +4,10 @@ import type { Control } from 'react-hook-form';
 import type { FormFields } from '../types';
 
 import ContractVerificationMethod from '../ContractVerificationMethod';
+import ContractVerificationFieldAbiEncodedArgs from '../fields/ContractVerificationFieldAbiEncodedArgs';
+import ContractVerificationFieldCode from '../fields/ContractVerificationFieldCode';
+import ContractVerificationFieldCompiler from '../fields/ContractVerificationFieldCompiler';
+import ContractVerificationFieldName from '../fields/ContractVerificationFieldName';
 
 interface Props {
   control: Control<FormFields>;
@@ -13,7 +17,10 @@ interface Props {
 const ContractVerificationVyperContract = ({ control }: Props) => {
   return (
     <ContractVerificationMethod title="New Vyper Smart Contract Verification">
-      ContractVerificationVyperContract
+      <ContractVerificationFieldName control={ control } hint="Must match the name specified in the code."/>
+      <ContractVerificationFieldCompiler control={ control } isVyper/>
+      <ContractVerificationFieldCode control={ control } isVyper/>
+      <ContractVerificationFieldAbiEncodedArgs control={ control }/>
     </ContractVerificationMethod>
   );
 };

ui/contractVerification/types.ts

@@ -26,6 +26,7 @@ export interface FormFieldsStandardInput {
 
 export interface FormFieldsSourcify {
   method: 'sourcify';
+  sources: Array<File>;
 }
 
 export interface FormFieldsMultiPartFile {
@@ -40,6 +41,9 @@ export interface FormFieldsMultiPartFile {
 export interface FormFieldsVyperContract {
   method: 'vyper_contract';
   name: string;
+  compiler: string;
+  code: string;
+  abi_encoded_args: string;
 }
 
 export type FormFields = FormFieldsFlattenSourceCode | FormFieldsStandardInput | FormFieldsSourcify |