diff options
author | Leonid Logvinov <logvinov.leon@gmail.com> | 2017-12-22 22:05:32 +0800 |
---|---|---|
committer | Leonid Logvinov <logvinov.leon@gmail.com> | 2018-01-03 18:37:38 +0800 |
commit | e744e4cd989bd3ae1070c59f7baa8097f18b8b06 (patch) | |
tree | a7fde03873f3c1b8689d3991edbb362f8022e5f0 /packages/website/ts/components/eth_wrappers.tsx | |
parent | 9a96e8c704b6f84e00bbe848159a4819844cf09d (diff) | |
download | dexon-0x-contracts-e744e4cd989bd3ae1070c59f7baa8097f18b8b06.tar.gz dexon-0x-contracts-e744e4cd989bd3ae1070c59f7baa8097f18b8b06.tar.zst dexon-0x-contracts-e744e4cd989bd3ae1070c59f7baa8097f18b8b06.zip |
Apply prettier config
Diffstat (limited to 'packages/website/ts/components/eth_wrappers.tsx')
-rw-r--r-- | packages/website/ts/components/eth_wrappers.tsx | 268 |
1 files changed, 122 insertions, 146 deletions
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index 934df9176..fe733ea76 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -1,21 +1,14 @@ -import {ZeroEx} from '0x.js'; +import { ZeroEx } from '0x.js'; import BigNumber from 'bignumber.js'; import * as _ from 'lodash'; import Divider from 'material-ui/Divider'; -import { - Table, - TableBody, - TableHeader, - TableHeaderColumn, - TableRow, - TableRowColumn, -} from 'material-ui/Table'; +import { Table, TableBody, TableHeader, TableHeaderColumn, TableRow, TableRowColumn } from 'material-ui/Table'; import * as moment from 'moment'; import * as React from 'react'; import ReactTooltip = require('react-tooltip'); -import {Blockchain} from 'ts/blockchain'; -import {EthWethConversionButton} from 'ts/components/eth_weth_conversion_button'; -import {Dispatcher} from 'ts/redux/dispatcher'; +import { Blockchain } from 'ts/blockchain'; +import { EthWethConversionButton } from 'ts/components/eth_weth_conversion_button'; +import { Dispatcher } from 'ts/redux/dispatcher'; import { EtherscanLinkSuffixes, OutdatedWrappedEtherByNetworkId, @@ -25,10 +18,10 @@ import { TokenState, TokenStateByAddress, } from 'ts/types'; -import {colors} from 'ts/utils/colors'; -import {configs} from 'ts/utils/configs'; -import {constants} from 'ts/utils/constants'; -import {utils} from 'ts/utils/utils'; +import { colors } from 'ts/utils/colors'; +import { configs } from 'ts/utils/configs'; +import { constants } from 'ts/utils/constants'; +import { utils } from 'ts/utils/utils'; const PRECISION = 5; const DATE_FORMAT = 'D/M/YY'; @@ -83,24 +76,22 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt } public render() { const tokens = _.values(this.props.tokenByAddress); - const etherToken = _.find(tokens, {symbol: 'WETH'}); + const etherToken = _.find(tokens, { symbol: 'WETH' }); const etherTokenState = this.props.tokenStateByAddress[etherToken.address]; const wethBalance = ZeroEx.toUnitAmount(etherTokenState.balance, constants.DECIMAL_PLACES_ETH); const isBidirectional = true; const etherscanUrl = utils.getEtherScanLinkIfExists( - etherToken.address, this.props.networkId, EtherscanLinkSuffixes.Address, + etherToken.address, + this.props.networkId, + EtherscanLinkSuffixes.Address, ); const tokenLabel = this._renderToken('Wrapped Ether', etherToken.address, configs.ICON_URL_BY_SYMBOL.WETH); return ( - <div className="clearfix lg-px4 md-px4 sm-px2" style={{minHeight: 600}}> + <div className="clearfix lg-px4 md-px4 sm-px2" style={{ minHeight: 600 }}> <div className="relative"> <h3>ETH Wrapper</h3> - <div className="absolute" style={{top: 0, right: 0}}> - <a - target="_blank" - href={constants.URL_WETH_IO} - style={{color: colors.grey}} - > + <div className="absolute" style={{ top: 0, right: 0 }}> + <a target="_blank" href={constants.URL_WETH_IO} style={{ color: colors.grey }}> <div className="flex"> <div>About Wrapped ETH</div> <div className="pl1"> @@ -112,14 +103,9 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt </div> <Divider /> <div> - <div className="py2"> - Wrap ETH into an ERC20-compliant Ether token. 1 ETH = 1 WETH. - </div> + <div className="py2">Wrap ETH into an ERC20-compliant Ether token. 1 ETH = 1 WETH.</div> <div> - <Table - selectable={false} - style={{backgroundColor: colors.grey50}} - > + <Table selectable={false} style={{ backgroundColor: colors.grey50 }}> <TableHeader displaySelectAll={false} adjustForCheckbox={false}> <TableRow> <TableHeaderColumn>ETH Token</TableHeaderColumn> @@ -134,13 +120,13 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableRowColumn className="py1"> <div className="flex"> <img - style={{width: ICON_DIMENSION, height: ICON_DIMENSION}} + style={{ + width: ICON_DIMENSION, + height: ICON_DIMENSION, + }} src={ETHER_ICON_PATH} /> - <div - className="ml2 sm-hide xs-hide" - style={{marginTop: 12}} - > + <div className="ml2 sm-hide xs-hide" style={{ marginTop: 12 }}> ETH </div> </div> @@ -164,9 +150,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableRowColumn className="py1"> {this._renderTokenLink(tokenLabel, etherscanUrl)} </TableRowColumn> - <TableRowColumn> - {wethBalance.toFixed(PRECISION)} WETH - </TableRowColumn> + <TableRowColumn>{wethBalance.toFixed(PRECISION)} WETH</TableRowColumn> <TableRowColumn> <EthWethConversionButton isOutdatedWrappedEther={false} @@ -186,22 +170,16 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <div> <h4>Outdated WETH</h4> <Divider /> - <div className="pt2" style={{lineHeight: 1.5}}> + <div className="pt2" style={{ lineHeight: 1.5 }}> The{' '} - <a - href="https://blog.0xproject.com/canonical-weth-a9aa7d0279dd" - target="_blank" - > + <a href="https://blog.0xproject.com/canonical-weth-a9aa7d0279dd" target="_blank"> canonical WETH - </a> contract is updated when necessary. - Unwrap outdated WETH in order to
retrieve your ETH and move it - to the updated WETH token. + </a>{' '} + contract is updated when necessary. Unwrap outdated WETH in order to
retrieve your ETH and move + it to the updated WETH token. </div> <div> - <Table - selectable={false} - style={{backgroundColor: colors.grey50}} - > + <Table selectable={false} style={{ backgroundColor: colors.grey50 }}> <TableHeader displaySelectAll={false} adjustForCheckbox={false}> <TableRow> <TableHeaderColumn>WETH Version</TableHeaderColumn> @@ -230,90 +208,94 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt rightSymbol = 'WETH'; } return ( - <div className="flex mx-auto" style={{width: 85}}> - <div style={{paddingTop: 3}}>{leftSymbol}</div> + <div className="flex mx-auto" style={{ width: 85 }}> + <div style={{ paddingTop: 3 }}>{leftSymbol}</div> <div className="px1"> - <i - style={{fontSize: 18}} - className={`zmdi ${iconClass}`} - /> + <i style={{ fontSize: 18 }} className={`zmdi ${iconClass}`} /> </div> - <div style={{paddingTop: 3}}>{rightSymbol}</div> + <div style={{ paddingTop: 3 }}>{rightSymbol}</div> </div> ); } private _renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState) { - const rows = _.map(configs.OUTDATED_WRAPPED_ETHERS, - (outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => { - const outdatedWETHIfExists = outdatedWETHByNetworkId[this.props.networkId]; - if (_.isUndefined(outdatedWETHIfExists)) { - return null; // noop - } - const timestampMsRange = outdatedWETHIfExists.timestampMsRange; - let dateRange: string; - if (!_.isUndefined(timestampMsRange)) { - const startMoment = moment(timestampMsRange.startTimestampMs); - const endMoment = moment(timestampMsRange.endTimestampMs); - dateRange = `${startMoment.format(DATE_FORMAT)}-${endMoment.format(DATE_FORMAT)}`; - } else { - dateRange = '-'; - } - const outdatedEtherToken = { - ...etherToken, - address: outdatedWETHIfExists.address, - }; - const isStateLoaded = this.state.outdatedWETHAddressToIsStateLoaded[outdatedWETHIfExists.address]; - const outdatedEtherTokenState = this.state.outdatedWETHStateByAddress[outdatedWETHIfExists.address]; - const balanceInEthIfExists = isStateLoaded ? - ZeroEx.toUnitAmount( - outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH, - ).toFixed(PRECISION) : - undefined; - const onConversionSuccessful = this._onOutdatedConversionSuccessfulAsync.bind( - this, outdatedWETHIfExists.address, - ); - const etherscanUrl = utils.getEtherScanLinkIfExists( - outdatedWETHIfExists.address, this.props.networkId, EtherscanLinkSuffixes.Address, - ); - const tokenLabel = this._renderToken(dateRange, outdatedEtherToken.address, OUTDATED_WETH_ICON_PATH); - return ( - <TableRow key={`weth-${outdatedWETHIfExists.address}`}> - <TableRowColumn className="py1"> - {this._renderTokenLink(tokenLabel, etherscanUrl)} - </TableRowColumn> - <TableRowColumn> - {isStateLoaded ? - `${balanceInEthIfExists} WETH` : - <i className="zmdi zmdi-spinner zmdi-hc-spin" /> - } - </TableRowColumn> - <TableRowColumn> - <EthWethConversionButton - isDisabled={!isStateLoaded} - isOutdatedWrappedEther={true} - direction={Side.Receive} - ethToken={outdatedEtherToken} - ethTokenState={outdatedEtherTokenState} - dispatcher={this.props.dispatcher} - blockchain={this.props.blockchain} - userEtherBalance={this.props.userEtherBalance} - onConversionSuccessful={onConversionSuccessful} - /> - </TableRowColumn> - </TableRow> - ); - }); + const rows = _.map( + configs.OUTDATED_WRAPPED_ETHERS, + (outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => { + const outdatedWETHIfExists = outdatedWETHByNetworkId[this.props.networkId]; + if (_.isUndefined(outdatedWETHIfExists)) { + return null; // noop + } + const timestampMsRange = outdatedWETHIfExists.timestampMsRange; + let dateRange: string; + if (!_.isUndefined(timestampMsRange)) { + const startMoment = moment(timestampMsRange.startTimestampMs); + const endMoment = moment(timestampMsRange.endTimestampMs); + dateRange = `${startMoment.format(DATE_FORMAT)}-${endMoment.format(DATE_FORMAT)}`; + } else { + dateRange = '-'; + } + const outdatedEtherToken = { + ...etherToken, + address: outdatedWETHIfExists.address, + }; + const isStateLoaded = this.state.outdatedWETHAddressToIsStateLoaded[outdatedWETHIfExists.address]; + const outdatedEtherTokenState = this.state.outdatedWETHStateByAddress[outdatedWETHIfExists.address]; + const balanceInEthIfExists = isStateLoaded + ? ZeroEx.toUnitAmount(outdatedEtherTokenState.balance, constants.DECIMAL_PLACES_ETH).toFixed( + PRECISION, + ) + : undefined; + const onConversionSuccessful = this._onOutdatedConversionSuccessfulAsync.bind( + this, + outdatedWETHIfExists.address, + ); + const etherscanUrl = utils.getEtherScanLinkIfExists( + outdatedWETHIfExists.address, + this.props.networkId, + EtherscanLinkSuffixes.Address, + ); + const tokenLabel = this._renderToken(dateRange, outdatedEtherToken.address, OUTDATED_WETH_ICON_PATH); + return ( + <TableRow key={`weth-${outdatedWETHIfExists.address}`}> + <TableRowColumn className="py1"> + {this._renderTokenLink(tokenLabel, etherscanUrl)} + </TableRowColumn> + <TableRowColumn> + {isStateLoaded ? ( + `${balanceInEthIfExists} WETH` + ) : ( + <i className="zmdi zmdi-spinner zmdi-hc-spin" /> + )} + </TableRowColumn> + <TableRowColumn> + <EthWethConversionButton + isDisabled={!isStateLoaded} + isOutdatedWrappedEther={true} + direction={Side.Receive} + ethToken={outdatedEtherToken} + ethTokenState={outdatedEtherTokenState} + dispatcher={this.props.dispatcher} + blockchain={this.props.blockchain} + userEtherBalance={this.props.userEtherBalance} + onConversionSuccessful={onConversionSuccessful} + /> + </TableRowColumn> + </TableRow> + ); + }, + ); return rows; } private _renderTokenLink(tokenLabel: React.ReactNode, etherscanUrl: string) { return ( <span> - {_.isUndefined(etherscanUrl) ? - tokenLabel : - <a href={etherscanUrl} target="_blank" style={{textDecoration: 'none'}}> + {_.isUndefined(etherscanUrl) ? ( + tokenLabel + ) : ( + <a href={etherscanUrl} target="_blank" style={{ textDecoration: 'none' }}> {tokenLabel} </a> - } + )} </span> ); } @@ -321,18 +303,9 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt const tooltipId = `tooltip-${address}`; return ( <div className="flex"> - <img - style={{width: ICON_DIMENSION, height: ICON_DIMENSION}} - src={imgPath} - /> - <div - className="ml2 sm-hide xs-hide" - style={{marginTop: 12}} - > - <span - data-tip={true} - data-for={tooltipId} - > + <img style={{ width: ICON_DIMENSION, height: ICON_DIMENSION }} src={imgPath} /> + <div className="ml2 sm-hide xs-hide" style={{ marginTop: 12 }}> + <span data-tip={true} data-for={tooltipId}> {name} </span> <ReactTooltip id={tooltipId}>{address}</ReactTooltip> @@ -348,7 +321,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt }, }); const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( - this.props.userAddress, outdatedWETHAddress, + this.props.userAddress, + outdatedWETHAddress, ); this.setState({ outdatedWETHAddressToIsStateLoaded: { @@ -370,7 +344,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt const outdatedWETHStateByAddress: OutdatedWETHStateByAddress = {}; for (const address of outdatedWETHAddresses) { const [balance, allowance] = await this.props.blockchain.getTokenBalanceAndAllowanceAsync( - this.props.userAddress, address, + this.props.userAddress, + address, ); outdatedWETHStateByAddress[address] = { balance, @@ -384,15 +359,16 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt }); } private _getOutdatedWETHAddresses(): string[] { - const outdatedWETHAddresses = _.compact(_.map(configs.OUTDATED_WRAPPED_ETHERS, - outdatedWrappedEtherByNetwork => { - const outdatedWrappedEtherIfExists = outdatedWrappedEtherByNetwork[this.props.networkId]; - if (_.isUndefined(outdatedWrappedEtherIfExists)) { - return undefined; - } - const address = outdatedWrappedEtherIfExists.address; - return address; - })); + const outdatedWETHAddresses = _.compact( + _.map(configs.OUTDATED_WRAPPED_ETHERS, outdatedWrappedEtherByNetwork => { + const outdatedWrappedEtherIfExists = outdatedWrappedEtherByNetwork[this.props.networkId]; + if (_.isUndefined(outdatedWrappedEtherIfExists)) { + return undefined; + } + const address = outdatedWrappedEtherIfExists.address; + return address; + }), + ); return outdatedWETHAddresses; } } // tslint:disable:max-file-line-count |