diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-12-04 04:24:37 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-12-04 04:24:37 +0800 |
commit | a192b309f339f451d647f4b9f71eac2d6684f738 (patch) | |
tree | 77ee3e5a1f32cb834fc30ce260400ce49bb301dd /packages/website/ts/pages/instant/config_generator_address_input.tsx | |
parent | 4b6ac96a8db908b02a352357592dfef986e23fdc (diff) | |
download | dexon-sol-tools-a192b309f339f451d647f4b9f71eac2d6684f738.tar dexon-sol-tools-a192b309f339f451d647f4b9f71eac2d6684f738.tar.gz dexon-sol-tools-a192b309f339f451d647f4b9f71eac2d6684f738.tar.bz2 dexon-sol-tools-a192b309f339f451d647f4b9f71eac2d6684f738.tar.lz dexon-sol-tools-a192b309f339f451d647f4b9f71eac2d6684f738.tar.xz dexon-sol-tools-a192b309f339f451d647f4b9f71eac2d6684f738.tar.zst dexon-sol-tools-a192b309f339f451d647f4b9f71eac2d6684f738.zip |
feat: implement basic feeRecipient address in config generator
Diffstat (limited to 'packages/website/ts/pages/instant/config_generator_address_input.tsx')
-rw-r--r-- | packages/website/ts/pages/instant/config_generator_address_input.tsx | 60 |
1 files changed, 60 insertions, 0 deletions
diff --git a/packages/website/ts/pages/instant/config_generator_address_input.tsx b/packages/website/ts/pages/instant/config_generator_address_input.tsx new file mode 100644 index 000000000..dbda547cd --- /dev/null +++ b/packages/website/ts/pages/instant/config_generator_address_input.tsx @@ -0,0 +1,60 @@ +import { colors } from '@0x/react-shared'; +import { addressUtils } from '@0x/utils'; +import * as _ from 'lodash'; +import * as React from 'react'; + +import { Container } from 'ts/components/ui/container'; +import { Input } from 'ts/components/ui/input'; +import { Text } from 'ts/components/ui/text'; + +export interface ConfigGeneratorAddressInputProps { + value?: string; + onChange?: (address: string) => void; +} + +export interface ConfigGeneratorAddressInputState { + errMsg: string; +} + +export class ConfigGeneratorAddressInput extends React.Component< + ConfigGeneratorAddressInputProps, + ConfigGeneratorAddressInputState +> { + public state = { + errMsg: '', + }; + public render(): React.ReactNode { + const { errMsg } = this.state; + const hasError = !_.isEmpty(errMsg); + const border = hasError ? '1px solid red' : undefined; + return ( + <Container> + <Input + width="100%" + fontSize="16px" + value={this.props.value} + onChange={this._handleChange} + placeholder="0xe99...aa8da4" + border={border} + /> + {hasError && ( + <Container marginTop="5px"> + <Text fontSize="14px" fontColor={colors.grey} fontStyle="italic"> + {errMsg} + </Text> + </Container> + )} + </Container> + ); + } + + private _handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => { + const address = event.target.value; + const isValidAddress = addressUtils.isAddress(address.toLowerCase()) || address === ''; + const errMsg = isValidAddress ? '' : 'Please enter a valid Ethereum address'; + this.setState({ + errMsg, + }); + this.props.onChange(address); + }; +} |