aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/eth_wrappers.tsx
diff options
context:
space:
mode:
authorLeonid Logvinov <logvinov.leon@gmail.com>2017-12-22 22:05:32 +0800
committerLeonid Logvinov <logvinov.leon@gmail.com>2018-01-03 18:37:38 +0800
commite744e4cd989bd3ae1070c59f7baa8097f18b8b06 (patch)
treea7fde03873f3c1b8689d3991edbb362f8022e5f0 /packages/website/ts/components/eth_wrappers.tsx
parent9a96e8c704b6f84e00bbe848159a4819844cf09d (diff)
downloaddexon-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.tsx268
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