Skip to content

F
frontend
Commit aa344285 authored by tom's avatar tom
Browse files
Options

mobile view

parent 5bcca893
Hide whitespace changes
Inline Side-by-side
Showing with 156 additions and 133 deletions
ui/contractVerification/ContractVerificationFormRow.tsx 0 → 100644
View file @ aa344285
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));
ui/contractVerification/fields/ContractVerificationFieldAbiEncodedArgs.tsx
View file @ aa344285
import { FormControl, GridItem, Link, Textarea } from '@chakra-ui/react';
import { FormControl, Link, Textarea } from '@chakra-ui/react';
import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form';
......@@ -7,6 +7,8 @@ import type { FormFields } from '../types';
import InputPlaceholder from 'ui/shared/InputPlaceholder';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props {
control: Control<FormFields>;
}
......@@ -25,23 +27,21 @@ const ContractVerificationFieldAbiEncodedArgs = ({ control }: Props) => {
}, []);
return (
<>
<GridItem>
<Controller
name="abi_encoded_args"
control={ control }
render={ renderControl }
/>
</GridItem>
<GridItem fontSize="sm">
<ContractVerificationFormRow>
<Controller
name="abi_encoded_args"
control={ control }
render={ renderControl }
/>
<>
<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>
</>
</>
</ContractVerificationFormRow>
);
};
......
ui/contractVerification/fields/ContractVerificationFieldCode.tsx
View file @ aa344285
import { FormControl, GridItem, Link, Textarea } from '@chakra-ui/react';
import { FormControl, Link, Textarea } from '@chakra-ui/react';
import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form';
......@@ -7,6 +7,8 @@ import type { FormFields } from '../types';
import InputPlaceholder from 'ui/shared/InputPlaceholder';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props {
control: Control<FormFields>;
isVyper?: boolean;
......@@ -27,24 +29,22 @@ const ContractVerificationFieldCode = ({ control, isVyper }: Props) => {
}, []);
return (
<>
<GridItem>
<Controller
name="code"
control={ control }
render={ renderControl }
rules={{ required: true }}
/>
</GridItem>
{ isVyper ? <GridItem/> : (
<GridItem fontSize="sm">
<ContractVerificationFormRow>
<Controller
name="code"
control={ control }
render={ renderControl }
rules={{ required: true }}
/>
{ isVyper ? null : (
<>
<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>
</>
) }
</>
</ContractVerificationFormRow>
);
};
......
ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx
View file @ aa344285
import { Code, GridItem, Select, Checkbox } from '@chakra-ui/react';
import { Code, 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';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
const COMPILERS = [
'v0.8.17+commit.8df45f5f',
'v0.8.16+commit.07a7930e',
......@@ -42,8 +44,8 @@ const ContractVerificationFieldCompiler = ({ control, isVyper }: Props) => {
}, [ isNightly ]);
return (
<>
<GridItem>
<ContractVerificationFormRow>
<>
<Controller
name="compiler"
control={ control }
......@@ -59,17 +61,17 @@ const ContractVerificationFieldCompiler = ({ control, isVyper }: Props) => {
Include nightly builds
</Checkbox>
) }
</GridItem>
{ isVyper ? <GridItem/> : (
<GridItem fontSize="sm">
</>
{ isVyper ? null : (
<>
<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>
</>
) }
</>
</ContractVerificationFormRow>
);
};
......
ui/contractVerification/fields/ContractVerificationFieldConstArgs.tsx
View file @ aa344285
import { GridItem } from '@chakra-ui/react';
import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form';
......@@ -7,6 +6,8 @@ import type { FormFields } from '../types';
import CheckboxInput from 'ui/shared/CheckboxInput';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props {
control: Control<FormFields>;
}
......@@ -17,16 +18,13 @@ const ContractVerificationFieldConstArgs = ({ control }: Props) => {
), []);
return (
<>
<GridItem>
<Controller
name="constructor_args"
control={ control }
render={ renderControl }
/>
</GridItem>
<GridItem/>
</>
<ContractVerificationFormRow>
<Controller
name="constructor_args"
control={ control }
render={ renderControl }
/>
</ContractVerificationFormRow>
);
};
......
ui/contractVerification/fields/ContractVerificationFieldEvmVersion.tsx
View file @ aa344285
import { GridItem, Link, Select } from '@chakra-ui/react';
import { 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';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
const VERSIONS = [
'default',
'london',
......@@ -29,20 +31,18 @@ const ContractVerificationFieldEvmVersion = ({ control }: Props) => {
}, [ ]);
return (
<>
<GridItem>
<Controller
name="evm_version"
control={ control }
render={ renderControl }
rules={{ required: true }}
/>
</GridItem>
<GridItem fontSize="sm">
<ContractVerificationFormRow>
<Controller
name="evm_version"
control={ control }
render={ renderControl }
rules={{ required: true }}
/>
<>
<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>
</>
</>
</ContractVerificationFormRow>
);
};
......
ui/contractVerification/fields/ContractVerificationFieldIsYul.tsx
View file @ aa344285
import { GridItem } from '@chakra-ui/react';
import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form';
......@@ -7,6 +6,8 @@ import type { FormFields } from '../types';
import CheckboxInput from 'ui/shared/CheckboxInput';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props {
control: Control<FormFields>;
}
......@@ -17,16 +18,13 @@ const ContractVerificationFieldIsYul = ({ control }: Props) => {
), []);
return (
<>
<GridItem>
<Controller
name="is_yul"
control={ control }
render={ renderControl }
/>
</GridItem>
<GridItem/>
</>
<ContractVerificationFormRow>
<Controller
name="is_yul"
control={ control }
render={ renderControl }
/>
</ContractVerificationFormRow>
);
};
......
ui/contractVerification/fields/ContractVerificationFieldLibraries.tsx
View file @ aa344285
import { Checkbox, GridItem } from '@chakra-ui/react';
import { Checkbox } from '@chakra-ui/react';
import React from 'react';
import type { Control } from 'react-hook-form';
import { useFieldArray } from 'react-hook-form';
import type { FormFields } from '../types';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
import ContractVerificationFieldLibraryItem from './ContractVerificationFieldLibraryItem';
interface Props {
......@@ -38,15 +39,15 @@ const ContractVerificationFieldLibraries = ({ control }: Props) => {
return (
<>
<GridItem mt={ 9 }>
<ContractVerificationFormRow>
<Checkbox
size="lg"
onChange={ handleCheckboxChange }
mt={ 9 }
>
Add contract libraries
Add contract libraries
</Checkbox>
</GridItem>
<GridItem/>
</ContractVerificationFormRow>
{ fields.map((field, index) => (
<ContractVerificationFieldLibraryItem
key={ field.id }
......
ui/contractVerification/fields/ContractVerificationFieldLibraryItem.tsx
View file @ aa344285
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 type { Control, ControllerRenderProps } from 'react-hook-form';
import { Controller } from 'react-hook-form';
......@@ -10,6 +10,8 @@ import plusIcon from 'icons/plus.svg';
import { ADDRESS_REGEXP } from 'lib/validations/address';
import InputPlaceholder from 'ui/shared/InputPlaceholder';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
const LIMIT = 10;
interface Props {
......@@ -62,8 +64,8 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
return (
<>
<GridItem mt={ index !== 0 ? 12 : 0 } ref={ ref }>
<Flex alignItems="center" justifyContent="space-between">
<ContractVerificationFormRow>
<Flex alignItems="center" justifyContent="space-between" ref={ ref } mt={ index !== 0 ? 6 : 0 }>
<Text variant="secondary" fontSize="sm">Contract library { index + 1 }</Text>
<Flex columnGap={ 5 }>
{ fieldsLength > 1 && (
......@@ -88,34 +90,33 @@ const ContractVerificationFieldLibraryItem = ({ control, index, fieldsLength, on
) }
</Flex>
</Flex>
</GridItem>
<GridItem/>
<GridItem>
</ContractVerificationFormRow>
<ContractVerificationFormRow>
<Controller
name={ `libraries.${ index }.name` }
control={ control }
render={ renderNameControl }
rules={{ required: true }}
/>
</GridItem>
{ index === 0 ? (
<GridItem fontSize="sm">
{ index === 0 ? (
<>
A library name called in the .sol file. Multiple libraries (up to 10) may be added for each contract.
</GridItem>
) : <GridItem/> }
<GridItem>
</>
) : null }
</ContractVerificationFormRow>
<ContractVerificationFormRow>
<Controller
name={ `libraries.${ index }.address` }
control={ control }
render={ renderAddressControl }
rules={{ required: true, pattern: ADDRESS_REGEXP }}
/>
</GridItem>
{ index === 0 ? (
<GridItem fontSize="sm">
The 0x library address. This can be found in the generated json file or Truffle output (if using truffle).
</GridItem>
) : <GridItem/> }
{ index === 0 ? (
<>
The 0x library address. This can be found in the generated json file or Truffle output (if using truffle).
</>
) : null }
</ContractVerificationFormRow>
</>
);
};
......
ui/contractVerification/fields/ContractVerificationFieldName.tsx
View file @ aa344285
import { chakra, Code, FormControl, GridItem, Input } from '@chakra-ui/react';
import { chakra, Code, FormControl, Input } from '@chakra-ui/react';
import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form';
......@@ -7,6 +7,8 @@ import type { FormFields } from '../types';
import InputPlaceholder from 'ui/shared/InputPlaceholder';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props {
control: Control<FormFields>;
hint?: string;
......@@ -27,25 +29,21 @@ const ContractVerificationFieldName = ({ control, hint }: Props) => {
}, []);
return (
<>
<GridItem>
<Controller
name="name"
control={ control }
render={ renderControl }
rules={{ required: true }}
/>
</GridItem>
<GridItem fontSize="sm">
{ 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>
</>
<ContractVerificationFormRow>
<Controller
name="name"
control={ control }
render={ renderControl }
rules={{ required: true }}
/>
{ hint ? <span>{ hint }</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>
);
};
......
ui/contractVerification/fields/ContractVerificationFieldOptimization.tsx
View file @ aa344285
import { FormControl, GridItem, Input } from '@chakra-ui/react';
import { FormControl, Input } from '@chakra-ui/react';
import React from 'react';
import type { ControllerRenderProps, Control } from 'react-hook-form';
import { Controller } from 'react-hook-form';
......@@ -8,6 +8,8 @@ import type { FormFields } from '../types';
import CheckboxInput from 'ui/shared/CheckboxInput';
import InputPlaceholder from 'ui/shared/InputPlaceholder';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props {
control: Control<FormFields>;
}
......@@ -38,25 +40,21 @@ const ContractVerificationFieldOptimization = ({ control }: Props) => {
return (
<>
<GridItem>
<ContractVerificationFormRow>
<Controller
name="is_optimization_enabled"
control={ control }
render={ renderCheckboxControl }
/>
</GridItem>
<GridItem/>
</ContractVerificationFormRow>
{ isEnabled && (
<>
<GridItem>
<Controller
name="optimization_runs"
control={ control }
render={ renderInputControl }
/>
</GridItem>
<GridItem/>
</>
<ContractVerificationFormRow>
<Controller
name="optimization_runs"
control={ control }
render={ renderInputControl }
/>
</ContractVerificationFormRow>
) }
</>
);
......
ui/contractVerification/fields/ContractVerificationFieldSources.tsx
View file @ aa344285
import { GridItem, Text, Button, Box, chakra } from '@chakra-ui/react';
import { 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';
......@@ -8,6 +8,8 @@ import type { FormFields } from '../types';
import FileInput from 'ui/shared/forms/FileInput';
import FileSnippet from 'ui/shared/forms/FileSnippet';
import ContractVerificationFormRow from '../ContractVerificationFormRow';
interface Props {
control: Control<FormFields>;
accept?: string;
......@@ -60,17 +62,17 @@ const ContractVerificationFieldSources = ({ control, accept, multiple, title, cl
return (
<>
<GridItem mt={ 4 } className={ className }>
<Text fontWeight={ 500 } mb={ 4 }>{ title }</Text>
<ContractVerificationFormRow >
<Text fontWeight={ 500 } className={ className } mt={ 4 }>{ title }</Text>
</ContractVerificationFormRow>
<ContractVerificationFormRow>
<Controller
name="sources"
control={ control }
render={ renderControl }
/>
</GridItem>
<GridItem fontSize="sm" mt={ 4 } className={ className }>
{ hint }
</GridItem>
{ hint ? <span>{ hint }</span> : null }
</ContractVerificationFormRow>
</>
);
};
......
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