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 | 89 |
1 files changed, 37 insertions, 52 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 d78cbdc29..ae4328976 100644 --- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx +++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx @@ -2,10 +2,10 @@ import BigNumber from 'bignumber.js'; import Dialog from 'material-ui/Dialog'; import FlatButton from 'material-ui/FlatButton'; 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 {colors} from 'ts/utils/colors'; +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; @@ -23,8 +23,10 @@ interface EthWethConversionDialogState { hasErrors: boolean; } -export class EthWethConversionDialog extends - React.Component<EthWethConversionDialogProps, EthWethConversionDialogState> { +export class EthWethConversionDialog extends React.Component< + EthWethConversionDialogProps, + EthWethConversionDialogState +> { constructor() { super(); this.state = { @@ -34,25 +36,16 @@ export class EthWethConversionDialog extends } 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'; + const title = this.props.direction === Side.Deposit ? 'Wrap ETH' : 'Unwrap WETH'; return ( <Dialog title={title} - titleStyle={{fontWeight: 100}} + titleStyle={{ fontWeight: 100 }} actions={convertDialogActions} - contentStyle={{width: 448}} + contentStyle={{ width: 448 }} open={this.props.isOpen} > {this._renderConversionDialogBody()} @@ -60,31 +53,24 @@ export class EthWethConversionDialog extends ); } 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 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="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 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 ? + <div className="pt2 mx-auto" style={{ width: 245 }}> + {this.props.direction === Side.Receive ? ( <TokenAmountInput token={this.props.token} tokenState={this.props.tokenState} @@ -94,7 +80,8 @@ export class EthWethConversionDialog extends onChange={this._onValueChange.bind(this)} amount={this.state.value} onVisitBalancesPageClick={this.props.onCancelled} - /> : + /> + ) : ( <EthAmountInput balance={this.props.etherBalance} amount={this.state.value} @@ -103,21 +90,22 @@ export class EthWethConversionDialog extends shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs} onVisitBalancesPageClick={this.props.onCancelled} /> - } - <div - className="pt1" - style={{fontSize: 12}} - > + )} + <div className="pt1" style={{ fontSize: 12 }}> <div className="left">1 ETH = 1 WETH</div> - {this.props.direction === Side.Receive && + {this.props.direction === Side.Receive && ( <div className="right" onClick={this._onMaxClick.bind(this)} - style={{color: colors.darkBlue, textDecoration: 'underline', cursor: 'pointer'}} + style={{ + color: colors.darkBlue, + textDecoration: 'underline', + cursor: 'pointer', + }} > Max </div> - } + )} </div> </div> </div> @@ -130,16 +118,13 @@ export class EthWethConversionDialog extends const symbol = isWrappedVersion ? 'WETH' : 'ETH'; return ( <div className="mx-auto pt2"> - <div - className="center" - style={{color: colors.darkBlue}} - > + <div className="center" style={{ color: colors.darkBlue }}> {name} </div> <div className="center py2"> - <img src={iconUrl} style={{width: 60}} /> + <img src={iconUrl} style={{ width: 60 }} /> </div> - <div className="center" style={{fontSize: 12}}> + <div className="center" style={{ fontSize: 12 }}> ({symbol}) </div> </div> |