diff options
author | Leonid <logvinov.leon@gmail.com> | 2017-11-28 05:53:21 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-11-28 05:53:21 +0800 |
commit | cf0a8b2d0503f9d08ac789024d44b196613ecdc3 (patch) | |
tree | 75653154b85dd6df06da46af9411baf57c23367b /packages/website/ts/components/dialogs/send_dialog.tsx | |
parent | 37f0051d8380279a1a882cdc724e54fc09117901 (diff) | |
parent | 4a17f5e82074b01e74ae6982e82419a037eebdb4 (diff) | |
download | dexon-sol-tools-cf0a8b2d0503f9d08ac789024d44b196613ecdc3.tar dexon-sol-tools-cf0a8b2d0503f9d08ac789024d44b196613ecdc3.tar.gz dexon-sol-tools-cf0a8b2d0503f9d08ac789024d44b196613ecdc3.tar.bz2 dexon-sol-tools-cf0a8b2d0503f9d08ac789024d44b196613ecdc3.tar.lz dexon-sol-tools-cf0a8b2d0503f9d08ac789024d44b196613ecdc3.tar.xz dexon-sol-tools-cf0a8b2d0503f9d08ac789024d44b196613ecdc3.tar.zst dexon-sol-tools-cf0a8b2d0503f9d08ac789024d44b196613ecdc3.zip |
Merge branch 'development' into feature/passNetworkId
Diffstat (limited to 'packages/website/ts/components/dialogs/send_dialog.tsx')
-rw-r--r-- | packages/website/ts/components/dialogs/send_dialog.tsx | 126 |
1 files changed, 126 insertions, 0 deletions
diff --git a/packages/website/ts/components/dialogs/send_dialog.tsx b/packages/website/ts/components/dialogs/send_dialog.tsx new file mode 100644 index 000000000..10417a326 --- /dev/null +++ b/packages/website/ts/components/dialogs/send_dialog.tsx @@ -0,0 +1,126 @@ +import * as React from 'react'; +import * as _ from 'lodash'; +import Dialog from 'material-ui/Dialog'; +import FlatButton from 'material-ui/FlatButton'; +import RadioButtonGroup from 'material-ui/RadioButton/RadioButtonGroup'; +import RadioButton from 'material-ui/RadioButton'; +import {Side, Token, TokenState} from 'ts/types'; +import {TokenAmountInput} from 'ts/components/inputs/token_amount_input'; +import {EthAmountInput} from 'ts/components/inputs/eth_amount_input'; +import {AddressInput} from 'ts/components/inputs/address_input'; +import BigNumber from 'bignumber.js'; + +interface SendDialogProps { + onComplete: (recipient: string, value: BigNumber) => void; + onCancelled: () => void; + isOpen: boolean; + token: Token; + tokenState: TokenState; +} + +interface SendDialogState { + value?: BigNumber; + recipient: string; + shouldShowIncompleteErrs: boolean; + isAmountValid: boolean; +} + +export class SendDialog extends React.Component<SendDialogProps, SendDialogState> { + constructor() { + super(); + this.state = { + recipient: '', + shouldShowIncompleteErrs: false, + isAmountValid: false, + }; + } + public render() { + const transferDialogActions = [ + <FlatButton + key="cancelTransfer" + label="Cancel" + onTouchTap={this.onCancel.bind(this)} + />, + <FlatButton + key="sendTransfer" + disabled={this.hasErrors()} + label="Send" + primary={true} + onTouchTap={this.onSendClick.bind(this)} + />, + ]; + return ( + <Dialog + title="I want to send" + titleStyle={{fontWeight: 100}} + actions={transferDialogActions} + open={this.props.isOpen} + > + {this.renderSendDialogBody()} + </Dialog> + ); + } + private renderSendDialogBody() { + return ( + <div className="mx-auto" style={{maxWidth: 300}}> + <div style={{height: 80}}> + <AddressInput + initialAddress={this.state.recipient} + updateAddress={this.onRecipientChange.bind(this)} + isRequired={true} + label={'Recipient address'} + hintText={'Address'} + /> + </div> + <TokenAmountInput + label="Amount to send" + token={this.props.token} + tokenState={this.props.tokenState} + shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} + shouldCheckBalance={true} + shouldCheckAllowance={false} + onChange={this.onValueChange.bind(this)} + amount={this.state.value} + onVisitBalancesPageClick={this.props.onCancelled} + /> + </div> + ); + } + private onRecipientChange(recipient?: string) { + this.setState({ + shouldShowIncompleteErrs: false, + recipient, + }); + } + private onValueChange(isValid: boolean, amount?: BigNumber) { + this.setState({ + isAmountValid: isValid, + value: amount, + }); + } + private onSendClick() { + if (this.hasErrors()) { + this.setState({ + shouldShowIncompleteErrs: true, + }); + } else { + const value = this.state.value; + this.setState({ + recipient: undefined, + value: undefined, + }); + this.props.onComplete(this.state.recipient, value); + } + } + private onCancel() { + this.setState({ + value: undefined, + }); + this.props.onCancelled(); + } + private hasErrors() { + return _.isUndefined(this.state.recipient) || + _.isUndefined(this.state.value) || + !this.state.isAmountValid; + } +} |