diff options
Diffstat (limited to 'packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx')
| -rw-r--r-- | packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx | 172 |
1 files changed, 98 insertions, 74 deletions
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx index aba5b9faf..661cc1d8c 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -1,14 +1,14 @@ -import BigNumber from 'bignumber.js'; +import { BigNumber } from '@0xproject/utils'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; -import RadioButton from 'material-ui/RadioButton'; -import RadioButtonGroup from 'material-ui/RadioButton/RadioButtonGroup'; import * as React from 'react'; -import {EthAmountInput} from 'ts/components/inputs/eth_amount_input'; -import {TokenAmountInput} from 'ts/components/inputs/token_amount_input'; -import {Side, Token, TokenState} from 'ts/types'; +import { EthAmountInput } from 'ts/components/inputs/eth_amount_input'; +import { TokenAmountInput } from 'ts/components/inputs/token_amount_input'; +import { Side, Token, TokenState } from 'ts/types'; +import { colors } from 'ts/utils/colors'; interface EthWethConversionDialogProps { + direction: Side; onComplete: (direction: Side, value: BigNumber) => void; onCancelled: () => void; isOpen: boolean; @@ -19,105 +19,129 @@ interface EthWethConversionDialogProps { interface EthWethConversionDialogState { value?: BigNumber; - direction: Side; shouldShowIncompleteErrs: boolean; hasErrors: boolean; } -export class EthWethConversionDialog extends - React.Component<EthWethConversionDialogProps, EthWethConversionDialogState> { +export class EthWethConversionDialog extends React.Component< + EthWethConversionDialogProps, + EthWethConversionDialogState +> { constructor() { super(); this.state = { - direction: Side.deposit, shouldShowIncompleteErrs: false, - hasErrors: true, + hasErrors: false, }; } public render() { const convertDialogActions = [ - <FlatButton - key="cancel" - label="Cancel" - onTouchTap={this.onCancel.bind(this)} - />, - <FlatButton - key="convert" - label="Convert" - primary={true} - onTouchTap={this.onConvertClick.bind(this)} - />, + <FlatButton key="cancel" label="Cancel" onTouchTap={this._onCancel.bind(this)} />, + <FlatButton key="convert" label="Convert" primary={true} onTouchTap={this._onConvertClick.bind(this)} />, ]; + const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH'; return ( <Dialog - title="I want to convert" - titleStyle={{fontWeight: 100}} + title={title} + titleStyle={{ fontWeight: 100 }} actions={convertDialogActions} + contentStyle={{ width: 448 }} open={this.props.isOpen} > - {this.renderConversionDialogBody()} + {this._renderConversionDialogBody()} </Dialog> ); } - private renderConversionDialogBody() { + private _renderConversionDialogBody() { + const explanation = + this.props.direction === Side.Deposit + ? 'Convert your Ether into a tokenized, tradable form.' + : "Convert your Wrapped Ether back into it's native form."; + const isWrappedVersion = this.props.direction === Side.Receive; + return ( + <div> + <div className="pb2">{explanation}</div> + <div className="mx-auto" style={{ maxWidth: 312 }}> + <div className="flex"> + {this._renderCurrency(isWrappedVersion)} + <div style={{ paddingTop: 68 }}> + <i style={{ fontSize: 28, color: colors.darkBlue }} className="zmdi zmdi-arrow-right" /> + </div> + {this._renderCurrency(!isWrappedVersion)} + </div> + <div className="pt2 mx-auto" style={{ width: 245 }}> + {this.props.direction === Side.Receive ? ( + <TokenAmountInput + 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} + /> + ) : ( + <EthAmountInput + balance={this.props.etherBalance} + amount={this.state.value} + onChange={this._onValueChange.bind(this)} + shouldCheckBalance={true} + shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} + onVisitBalancesPageClick={this.props.onCancelled} + /> + )} + <div className="pt1" style={{ fontSize: 12 }}> + <div className="left">1 ETH = 1 WETH</div> + {this.props.direction === Side.Receive && ( + <div + className="right" + onClick={this._onMaxClick.bind(this)} + style={{ + color: colors.darkBlue, + textDecoration: 'underline', + cursor: 'pointer', + }} + > + Max + </div> + )} + </div> + </div> + </div> + </div> + ); + } + private _renderCurrency(isWrappedVersion: boolean) { + const name = isWrappedVersion ? 'Wrapped Ether' : 'Ether'; + const iconUrl = isWrappedVersion ? '/images/token_icons/ether_erc20.png' : '/images/ether.png'; + const symbol = isWrappedVersion ? 'WETH' : 'ETH'; return ( - <div className="mx-auto" style={{maxWidth: 300}}> - <RadioButtonGroup - className="pb1" - defaultSelected={this.state.direction} - name="conversionDirection" - onChange={this.onConversionDirectionChange.bind(this)} - > - <RadioButton - className="pb1" - value={Side.deposit} - label="Ether -> Ether Tokens" - /> - <RadioButton - value={Side.receive} - label="Ether Tokens -> Ether" - /> - </RadioButtonGroup> - {this.state.direction === Side.receive ? - <TokenAmountInput - label="Amount to convert" - 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} - /> : - <EthAmountInput - label="Amount to convert" - balance={this.props.etherBalance} - amount={this.state.value} - onChange={this.onValueChange.bind(this)} - shouldCheckBalance={true} - shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} - onVisitBalancesPageClick={this.props.onCancelled} - /> - } + <div className="mx-auto pt2"> + <div className="center" style={{ color: colors.darkBlue }}> + {name} + </div> + <div className="center py2"> + <img src={iconUrl} style={{ width: 60 }} /> + </div> + <div className="center" style={{ fontSize: 12 }}> + ({symbol}) + </div> </div> ); } - private onConversionDirectionChange(e: any, direction: Side) { + private _onMaxClick() { this.setState({ - value: undefined, - shouldShowIncompleteErrs: false, - direction, - hasErrors: true, + value: this.props.tokenState.balance, }); } - private onValueChange(isValid: boolean, amount?: BigNumber) { + private _onValueChange(isValid: boolean, amount?: BigNumber) { this.setState({ value: amount, hasErrors: !isValid, }); } - private onConvertClick() { + private _onConvertClick() { if (this.state.hasErrors) { this.setState({ shouldShowIncompleteErrs: true, @@ -127,10 +151,10 @@ export class EthWethConversionDialog extends this.setState({ value: undefined, }); - this.props.onComplete(this.state.direction, value); + this.props.onComplete(this.props.direction, value); } } - private onCancel() { + private _onCancel() { this.setState({ value: undefined, }); |