Commit aa344285 authored by tom's avatar tom

mobile view

parent 5bcca893
import { chakra, GridItem } from '@chakra-ui/react';
import React from 'react';
import useIsMobile from 'lib/hooks/useIsMobile';
interface Props {
children: [JSX.Element, JSX.Element | null] | (JSX.Element | null);
className?: string;
}
const ContractVerificationFormRow = ({ children, className }: Props) => {
const isMobile = useIsMobile();
const firstChildren = Array.isArray(children) ? children[0] : children;
const secondChildren = Array.isArray(children) ? children[1] : null;
return (
<>
<GridItem className={ className } _notFirst={{ mt: { base: 3, lg: 0 } }}>{ firstChildren }</GridItem>
{ isMobile && !secondChildren ? null : <GridItem fontSize="sm" className={ className }>{ secondChildren }</GridItem> }
</>
);
};
export default React.memo(chakra(ContractVerificationFormRow));
import { FormControl, GridItem, Link, Textarea } from '@chakra-ui/react'; import { FormControl, Link, Textarea } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form'; import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
...@@ -7,6 +7,8 @@ import type { FormFields } from '../types'; ...@@ -7,6 +7,8 @@ import type { FormFields } from '../types';
import InputPlaceholder from 'ui/shared/InputPlaceholder'; import InputPlaceholder from 'ui/shared/InputPlaceholder';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props { interface Props {
control: Control<FormFields>; control: Control<FormFields>;
} }
...@@ -25,23 +27,21 @@ const ContractVerificationFieldAbiEncodedArgs = ({ control }: Props) => { ...@@ -25,23 +27,21 @@ const ContractVerificationFieldAbiEncodedArgs = ({ control }: Props) => {
}, []); }, []);
return ( return (
<> <ContractVerificationFormRow>
<GridItem> <Controller
<Controller name="abi_encoded_args"
name="abi_encoded_args" control={ control }
control={ control } render={ renderControl }
render={ renderControl } />
/> <>
</GridItem>
<GridItem fontSize="sm">
<span>Add arguments in </span> <span>Add arguments in </span>
<Link href="https://solidity.readthedocs.io/en/develop/abi-spec.html" target="_blank">ABI hex encoded form</Link> <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> 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> <span> They may also be </span>
<Link href="https://abi.hashex.org/" target="_blank">parsed here</Link> <Link href="https://abi.hashex.org/" target="_blank">parsed here</Link>
<span>.</span> <span>.</span>
</GridItem> </>
</> </ContractVerificationFormRow>
); );
}; };
......
import { FormControl, GridItem, Link, Textarea } from '@chakra-ui/react'; import { FormControl, Link, Textarea } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form'; import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
...@@ -7,6 +7,8 @@ import type { FormFields } from '../types'; ...@@ -7,6 +7,8 @@ import type { FormFields } from '../types';
import InputPlaceholder from 'ui/shared/InputPlaceholder'; import InputPlaceholder from 'ui/shared/InputPlaceholder';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props { interface Props {
control: Control<FormFields>; control: Control<FormFields>;
isVyper?: boolean; isVyper?: boolean;
...@@ -27,24 +29,22 @@ const ContractVerificationFieldCode = ({ control, isVyper }: Props) => { ...@@ -27,24 +29,22 @@ const ContractVerificationFieldCode = ({ control, isVyper }: Props) => {
}, []); }, []);
return ( return (
<> <ContractVerificationFormRow>
<GridItem> <Controller
<Controller name="code"
name="code" control={ control }
control={ control } render={ renderControl }
render={ renderControl } rules={{ required: true }}
rules={{ required: true }} />
/> { isVyper ? null : (
</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> <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> <Link href="https://github.com/poanetwork/solidity-flattener" target="_blank">POA solidity flattener</Link>
<span> or the </span> <span> or the </span>
<Link href="https://www.npmjs.com/package/truffle-flattener" target="_blank">Truffle flattener</Link> <Link href="https://www.npmjs.com/package/truffle-flattener" target="_blank">Truffle flattener</Link>
</GridItem> </>
) } ) }
</> </ContractVerificationFormRow>
); );
}; };
......
import { Code, GridItem, Select, Checkbox } from '@chakra-ui/react'; import { Code, Select, Checkbox } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form'; import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
import type { FormFields } from '../types'; import type { FormFields } from '../types';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
const COMPILERS = [ const COMPILERS = [
'v0.8.17+commit.8df45f5f', 'v0.8.17+commit.8df45f5f',
'v0.8.16+commit.07a7930e', 'v0.8.16+commit.07a7930e',
...@@ -42,8 +44,8 @@ const ContractVerificationFieldCompiler = ({ control, isVyper }: Props) => { ...@@ -42,8 +44,8 @@ const ContractVerificationFieldCompiler = ({ control, isVyper }: Props) => {
}, [ isNightly ]); }, [ isNightly ]);
return ( return (
<> <ContractVerificationFormRow>
<GridItem> <>
<Controller <Controller
name="compiler" name="compiler"
control={ control } control={ control }
...@@ -59,17 +61,17 @@ const ContractVerificationFieldCompiler = ({ control, isVyper }: Props) => { ...@@ -59,17 +61,17 @@ const ContractVerificationFieldCompiler = ({ control, isVyper }: Props) => {
Include nightly builds Include nightly builds
</Checkbox> </Checkbox>
) } ) }
</GridItem> </>
{ isVyper ? <GridItem/> : ( { isVyper ? null : (
<GridItem fontSize="sm"> <>
<span>The compiler version is specified in </span> <span>The compiler version is specified in </span>
<Code>pragma solidity X.X.X</Code> <Code>pragma solidity X.X.X</Code>
<span>. Use the compiler version rather than the nightly build. If using the Solidity compiler, run </span> <span>. Use the compiler version rather than the nightly build. If using the Solidity compiler, run </span>
<Code>solc —version</Code> <Code>solc —version</Code>
<span> to check.</span> <span> to check.</span>
</GridItem> </>
) } ) }
</> </ContractVerificationFormRow>
); );
}; };
......
import { GridItem } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form'; import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
...@@ -7,6 +6,8 @@ import type { FormFields } from '../types'; ...@@ -7,6 +6,8 @@ import type { FormFields } from '../types';
import CheckboxInput from 'ui/shared/CheckboxInput'; import CheckboxInput from 'ui/shared/CheckboxInput';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props { interface Props {
control: Control<FormFields>; control: Control<FormFields>;
} }
...@@ -17,16 +18,13 @@ const ContractVerificationFieldConstArgs = ({ control }: Props) => { ...@@ -17,16 +18,13 @@ const ContractVerificationFieldConstArgs = ({ control }: Props) => {
), []); ), []);
return ( return (
<> <ContractVerificationFormRow>
<GridItem> <Controller
<Controller name="constructor_args"
name="constructor_args" control={ control }
control={ control } render={ renderControl }
render={ renderControl } />
/> </ContractVerificationFormRow>
</GridItem>
<GridItem/>
</>
); );
}; };
......
import { GridItem, Link, Select } from '@chakra-ui/react'; import { Link, Select } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form'; import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
import type { FormFields } from '../types'; import type { FormFields } from '../types';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
const VERSIONS = [ const VERSIONS = [
'default', 'default',
'london', 'london',
...@@ -29,20 +31,18 @@ const ContractVerificationFieldEvmVersion = ({ control }: Props) => { ...@@ -29,20 +31,18 @@ const ContractVerificationFieldEvmVersion = ({ control }: Props) => {
}, [ ]); }, [ ]);
return ( return (
<> <ContractVerificationFormRow>
<GridItem> <Controller
<Controller name="evm_version"
name="evm_version" control={ control }
control={ control } render={ renderControl }
render={ renderControl } rules={{ required: true }}
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> <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> <Link href="https://forum.poa.network/t/smart-contract-verification-evm-version-details/2318" target="_blank">EVM version details</Link>
</GridItem> </>
</> </ContractVerificationFormRow>
); );
}; };
......
import { GridItem } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form'; import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
...@@ -7,6 +6,8 @@ import type { FormFields } from '../types'; ...@@ -7,6 +6,8 @@ import type { FormFields } from '../types';
import CheckboxInput from 'ui/shared/CheckboxInput'; import CheckboxInput from 'ui/shared/CheckboxInput';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props { interface Props {
control: Control<FormFields>; control: Control<FormFields>;
} }
...@@ -17,16 +18,13 @@ const ContractVerificationFieldIsYul = ({ control }: Props) => { ...@@ -17,16 +18,13 @@ const ContractVerificationFieldIsYul = ({ control }: Props) => {
), []); ), []);
return ( return (
<> <ContractVerificationFormRow>
<GridItem> <Controller
<Controller name="is_yul"
name="is_yul" control={ control }
control={ control } render={ renderControl }
render={ renderControl } />
/> </ContractVerificationFormRow>
</GridItem>
<GridItem/>
</>
); );
}; };
......
import { Checkbox, GridItem } from '@chakra-ui/react'; import { Checkbox } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { Control } from 'react-hook-form'; import type { Control } from 'react-hook-form';
import { useFieldArray } from 'react-hook-form'; import { useFieldArray } from 'react-hook-form';
import type { FormFields } from '../types'; import type { FormFields } from '../types';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
import ContractVerificationFieldLibraryItem from './ContractVerificationFieldLibraryItem'; import ContractVerificationFieldLibraryItem from './ContractVerificationFieldLibraryItem';
interface Props { interface Props {
...@@ -38,15 +39,15 @@ const ContractVerificationFieldLibraries = ({ control }: Props) => { ...@@ -38,15 +39,15 @@ const ContractVerificationFieldLibraries = ({ control }: Props) => {
return ( return (
<> <>
<GridItem mt={ 9 }> <ContractVerificationFormRow>
<Checkbox <Checkbox
size="lg" size="lg"
onChange={ handleCheckboxChange } onChange={ handleCheckboxChange }
mt={ 9 }
> >
Add contract libraries Add contract libraries
</Checkbox> </Checkbox>
</GridItem> </ContractVerificationFormRow>
<GridItem/>
{ fields.map((field, index) => ( { fields.map((field, index) => (
<ContractVerificationFieldLibraryItem <ContractVerificationFieldLibraryItem
key={ field.id } key={ field.id }
......
import { Flex, FormControl, GridItem, Icon, IconButton, Input, Text } from '@chakra-ui/react'; import { Flex, FormControl, Icon, IconButton, Input, Text } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { Control, ControllerRenderProps } from 'react-hook-form'; import type { Control, ControllerRenderProps } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
...@@ -10,6 +10,8 @@ import plusIcon from 'icons/plus.svg'; ...@@ -10,6 +10,8 @@ import plusIcon from 'icons/plus.svg';
import { ADDRESS_REGEXP } from 'lib/validations/address'; import { ADDRESS_REGEXP } from 'lib/validations/address';
import InputPlaceholder from 'ui/shared/InputPlaceholder'; import InputPlaceholder from 'ui/shared/InputPlaceholder';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
const LIMIT = 10; const LIMIT = 10;
interface Props { interface Props {
...@@ -62,8 +64,8 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on ...@@ -62,8 +64,8 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
return ( return (
<> <>
<GridItem mt={ index !== 0 ? 12 : 0 } ref={ ref }> <ContractVerificationFormRow>
<Flex alignItems="center" justifyContent="space-between"> <Flex alignItems="center" justifyContent="space-between" ref={ ref } mt={ index !== 0 ? 6 : 0 }>
<Text variant="secondary" fontSize="sm">Contract library { index + 1 }</Text> <Text variant="secondary" fontSize="sm">Contract library { index + 1 }</Text>
<Flex columnGap={ 5 }> <Flex columnGap={ 5 }>
{ fieldsLength > 1 && ( { fieldsLength > 1 && (
...@@ -88,34 +90,33 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on ...@@ -88,34 +90,33 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
) } ) }
</Flex> </Flex>
</Flex> </Flex>
</GridItem> </ContractVerificationFormRow>
<GridItem/> <ContractVerificationFormRow>
<GridItem>
<Controller <Controller
name={ `libraries.${ index }.name` } name={ `libraries.${ index }.name` }
control={ control } control={ control }
render={ renderNameControl } render={ renderNameControl }
rules={{ required: true }} rules={{ required: true }}
/> />
</GridItem> { index === 0 ? (
{ index === 0 ? ( <>
<GridItem fontSize="sm">
A library name called in the .sol file. Multiple libraries (up to 10) may be added for each contract. A library name called in the .sol file. Multiple libraries (up to 10) may be added for each contract.
</GridItem> </>
) : <GridItem/> } ) : null }
<GridItem> </ContractVerificationFormRow>
<ContractVerificationFormRow>
<Controller <Controller
name={ `libraries.${ index }.address` } name={ `libraries.${ index }.address` }
control={ control } control={ control }
render={ renderAddressControl } render={ renderAddressControl }
rules={{ required: true, pattern: ADDRESS_REGEXP }} rules={{ required: true, pattern: ADDRESS_REGEXP }}
/> />
</GridItem> { index === 0 ? (
{ index === 0 ? ( <>
<GridItem fontSize="sm"> The 0x library address. This can be found in the generated json file or Truffle output (if using truffle).
The 0x library address. This can be found in the generated json file or Truffle output (if using truffle). </>
</GridItem> ) : null }
) : <GridItem/> } </ContractVerificationFormRow>
</> </>
); );
}; };
......
import { chakra, Code, FormControl, GridItem, Input } from '@chakra-ui/react'; import { chakra, Code, FormControl, Input } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form'; import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
...@@ -7,6 +7,8 @@ import type { FormFields } from '../types'; ...@@ -7,6 +7,8 @@ import type { FormFields } from '../types';
import InputPlaceholder from 'ui/shared/InputPlaceholder'; import InputPlaceholder from 'ui/shared/InputPlaceholder';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props { interface Props {
control: Control<FormFields>; control: Control<FormFields>;
hint?: string; hint?: string;
...@@ -27,25 +29,21 @@ const ContractVerificationFieldName = ({ control, hint }: Props) => { ...@@ -27,25 +29,21 @@ const ContractVerificationFieldName = ({ control, hint }: Props) => {
}, []); }, []);
return ( return (
<> <ContractVerificationFormRow>
<GridItem> <Controller
<Controller name="name"
name="name" control={ control }
control={ control } render={ renderControl }
render={ renderControl } rules={{ required: true }}
rules={{ required: true }} />
/> { hint ? <span>{ hint }</span> : (
</GridItem> <>
<GridItem fontSize="sm"> <span>Must match the name specified in the code. For example, in </span>
{ hint || ( <Code>{ `contract MyContract {..}` }</Code>
<> <span>. <chakra.span fontWeight={ 600 }>MyContract</chakra.span> is the contract name.</span>
<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> </ContractVerificationFormRow>
</>
) }
</GridItem>
</>
); );
}; };
......
import { FormControl, GridItem, Input } from '@chakra-ui/react'; import { FormControl, Input } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form'; import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form'; import { Controller } from 'react-hook-form';
...@@ -8,6 +8,8 @@ import type { FormFields } from '../types'; ...@@ -8,6 +8,8 @@ import type { FormFields } from '../types';
import CheckboxInput from 'ui/shared/CheckboxInput'; import CheckboxInput from 'ui/shared/CheckboxInput';
import InputPlaceholder from 'ui/shared/InputPlaceholder'; import InputPlaceholder from 'ui/shared/InputPlaceholder';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props { interface Props {
control: Control<FormFields>; control: Control<FormFields>;
} }
...@@ -38,25 +40,21 @@ const ContractVerificationFieldOptimization = ({ control }: Props) => { ...@@ -38,25 +40,21 @@ const ContractVerificationFieldOptimization = ({ control }: Props) => {
return ( return (
<> <>
<GridItem> <ContractVerificationFormRow>
<Controller <Controller
name="is_optimization_enabled" name="is_optimization_enabled"
control={ control } control={ control }
render={ renderCheckboxControl } render={ renderCheckboxControl }
/> />
</GridItem> </ContractVerificationFormRow>
<GridItem/>
{ isEnabled && ( { isEnabled && (
<> <ContractVerificationFormRow>
<GridItem> <Controller
<Controller name="optimization_runs"
name="optimization_runs" control={ control }
control={ control } render={ renderInputControl }
render={ renderInputControl } />
/> </ContractVerificationFormRow>
</GridItem>
<GridItem/>
</>
) } ) }
</> </>
); );
......
import { GridItem, Text, Button, Box, chakra } from '@chakra-ui/react'; import { Text, Button, Box, chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form'; import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller, useFormContext } from 'react-hook-form'; import { Controller, useFormContext } from 'react-hook-form';
...@@ -8,6 +8,8 @@ import type { FormFields } from '../types'; ...@@ -8,6 +8,8 @@ import type { FormFields } from '../types';
import FileInput from 'ui/shared/forms/FileInput'; import FileInput from 'ui/shared/forms/FileInput';
import FileSnippet from 'ui/shared/forms/FileSnippet'; import FileSnippet from 'ui/shared/forms/FileSnippet';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props { interface Props {
control: Control<FormFields>; control: Control<FormFields>;
accept?: string; accept?: string;
...@@ -60,17 +62,17 @@ const ContractVerificationFieldSources = ({ control, accept, multiple, title, cl ...@@ -60,17 +62,17 @@ const ContractVerificationFieldSources = ({ control, accept, multiple, title, cl
return ( return (
<> <>
<GridItem mt={ 4 } className={ className }> <ContractVerificationFormRow >
<Text fontWeight={ 500 } mb={ 4 }>{ title }</Text> <Text fontWeight={ 500 } className={ className } mt={ 4 }>{ title }</Text>
</ContractVerificationFormRow>
<ContractVerificationFormRow>
<Controller <Controller
name="sources" name="sources"
control={ control } control={ control }
render={ renderControl } render={ renderControl }
/> />
</GridItem> { hint ? <span>{ hint }</span> : null }
<GridItem fontSize="sm" mt={ 4 } className={ className }> </ContractVerificationFormRow>
{ hint }
</GridItem>
</> </>
); );
}; };
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment