aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2017-12-13 04:53:39 +0800
committerFabio Berger <me@fabioberger.com>2017-12-13 04:53:39 +0800
commitd0916e196c5872ee9ac82941f4a9f323f5179e74 (patch)
tree4c933065866b2fa7bd014e6c6745200a35e92217 /packages/website/ts/components
parent4f72c527def4adef60200b60f9bf6221956af7a3 (diff)
downloaddexon-sol-tools-d0916e196c5872ee9ac82941f4a9f323f5179e74.tar
dexon-sol-tools-d0916e196c5872ee9ac82941f4a9f323f5179e74.tar.gz
dexon-sol-tools-d0916e196c5872ee9ac82941f4a9f323f5179e74.tar.bz2
dexon-sol-tools-d0916e196c5872ee9ac82941f4a9f323f5179e74.tar.lz
dexon-sol-tools-d0916e196c5872ee9ac82941f4a9f323f5179e74.tar.xz
dexon-sol-tools-d0916e196c5872ee9ac82941f4a9f323f5179e74.tar.zst
dexon-sol-tools-d0916e196c5872ee9ac82941f4a9f323f5179e74.zip
progress weth page
Diffstat (limited to 'packages/website/ts/components')
-rw-r--r--packages/website/ts/components/eth_wrappers.tsx214
-rw-r--r--packages/website/ts/components/fill_order.tsx1
-rw-r--r--packages/website/ts/components/portal.tsx18
-rw-r--r--packages/website/ts/components/portal_menu.tsx8
4 files changed, 240 insertions, 1 deletions
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx
new file mode 100644
index 000000000..277929870
--- /dev/null
+++ b/packages/website/ts/components/eth_wrappers.tsx
@@ -0,0 +1,214 @@
+import {ZeroEx} from '0x.js';
+import BigNumber from 'bignumber.js';
+import * as _ from 'lodash';
+import Divider from 'material-ui/Divider';
+import Paper from 'material-ui/Paper';
+import RaisedButton from 'material-ui/RaisedButton';
+import {colors} from 'material-ui/styles';
+import {
+ Table,
+ TableBody,
+ TableHeader,
+ TableHeaderColumn,
+ TableRow,
+ TableRowColumn,
+} from 'material-ui/Table';
+import * as moment from 'moment';
+import * as React from 'react';
+import {Blockchain} from 'ts/blockchain';
+import {LifeCycleRaisedButton} from 'ts/components/ui/lifecycle_raised_button';
+import {trackedTokenStorage} from 'ts/local_storage/tracked_token_storage';
+import {Dispatcher} from 'ts/redux/dispatcher';
+import {
+ OutdatedWrappedEther,
+ TokenByAddress,
+ TokenStateByAddress,
+} from 'ts/types';
+import {configs} from 'ts/utils/configs';
+import {constants} from 'ts/utils/constants';
+import {errorReporter} from 'ts/utils/error_reporter';
+import {utils} from 'ts/utils/utils';
+
+const PRECISION = 5;
+const DATE_FORMAT = 'D/M/YY';
+const ICON_DIMENSION = 40;
+const ETHER_ICON_PATH = '/images/ether.png';
+const OUTDATED_WETH_ICON_PATH = '/images/wrapped_eth_gray.png';
+const ETHER_TOKEN_SYMBOL = 'WETH';
+
+interface EthWrappersProps {
+ networkId: number;
+ blockchain: Blockchain;
+ dispatcher: Dispatcher;
+ tokenByAddress: TokenByAddress;
+ tokenStateByAddress: TokenStateByAddress;
+ userAddress: string;
+ userEtherBalance: BigNumber;
+}
+
+interface EthWrappersState {}
+
+export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersState> {
+ constructor(props: EthWrappersProps) {
+ super(props);
+ this.state = {};
+ }
+ public componentDidMount() {
+ window.scrollTo(0, 0);
+ }
+ public render() {
+ const tokens = _.values(this.props.tokenByAddress);
+ const wethToken = _.find(tokens, {symbol: 'WETH'});
+ const wethState = this.props.tokenStateByAddress[wethToken.address];
+ const wethBalance = ZeroEx.toUnitAmount(wethState.balance, 18);
+ return (
+ <div className="clearfix lg-px4 md-px4 sm-px2" style={{minHeight: 600}}>
+ <h3>ETH Wrapper</h3>
+ <Divider />
+ <div>
+ <div className="py2">
+ Wrap ETH into an ERC20-compliant Ether token
+ </div>
+ <div>
+ <Table
+ selectable={false}
+ style={{backgroundColor: colors.grey50}}
+ >
+ <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
+ <TableRow>
+ <TableHeaderColumn>ETH Token</TableHeaderColumn>
+ <TableHeaderColumn>Balance</TableHeaderColumn>
+ <TableHeaderColumn>
+ {'ETH <-> WETH'}
+ </TableHeaderColumn>
+ </TableRow>
+ </TableHeader>
+ <TableBody displayRowCheckbox={false}>
+ <TableRow key="ETH">
+ <TableRowColumn className="py1">
+ <div className="flex">
+ <img
+ style={{width: ICON_DIMENSION, height: ICON_DIMENSION}}
+ src={ETHER_ICON_PATH}
+ />
+ <div className="mt2 ml2 sm-hide xs-hide">
+ Ether
+ </div>
+ </div>
+ </TableRowColumn>
+ <TableRowColumn>
+ {this.props.userEtherBalance.toFixed(PRECISION)} ETH
+ </TableRowColumn>
+ <TableRowColumn style={{paddingLeft: 3}}>
+ <LifeCycleRaisedButton
+ labelReady="Wrap"
+ labelLoading="Wrapping..."
+ labelComplete="Wrapped!"
+ onClickAsyncFn={this.wrapEthAsync.bind(this, true)}
+ />
+ </TableRowColumn>
+ </TableRow>
+ <TableRow key="WETH">
+ <TableRowColumn className="py1">
+ <div className="flex">
+ <img
+ style={{width: ICON_DIMENSION, height: ICON_DIMENSION}}
+ src={constants.iconUrlBySymbol.WETH}
+ />
+ <div className="mt2 ml2 sm-hide xs-hide">
+ Wrapped Ether
+ </div>
+ </div>
+ </TableRowColumn>
+ <TableRowColumn>
+ {wethBalance.toFixed(PRECISION)} WETH
+ </TableRowColumn>
+ <TableRowColumn style={{paddingLeft: 3}}>
+ <LifeCycleRaisedButton
+ labelReady="Unwrap"
+ labelLoading="Unwrapping..."
+ labelComplete="Unwrapped!"
+ onClickAsyncFn={this.unwrapEthAsync.bind(this, true)}
+ />
+ </TableRowColumn>
+ </TableRow>
+ </TableBody>
+ </Table>
+ </div>
+ </div>
+ <h4>Outdated WETH</h4>
+ <Divider />
+ <div className="pt2" style={{lineHeight: 1.5}}>
+ The{' '}
+ <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.
+ </div>
+ <div>
+ <Table
+ selectable={false}
+ style={{backgroundColor: colors.grey50}}
+ >
+ <TableHeader displaySelectAll={false} adjustForCheckbox={false}>
+ <TableRow>
+ <TableHeaderColumn>WETH Version</TableHeaderColumn>
+ <TableHeaderColumn>Balance</TableHeaderColumn>
+ <TableHeaderColumn>
+ {'WETH -> ETH'}
+ </TableHeaderColumn>
+ </TableRow>
+ </TableHeader>
+ <TableBody displayRowCheckbox={false}>
+ {this.renderOutdatedWeths()}
+ </TableBody>
+ </Table>
+ </div>
+ </div>
+ );
+ }
+ private renderOutdatedWeths() {
+ const rows = _.map(configs.outdatedWrappedEthers, (outdatedWETH: OutdatedWrappedEther) => {
+ const timestampMsRange = outdatedWETH.timestampMsRangeByNetworkId[this.props.networkId];
+ const startMoment = moment(timestampMsRange.startTimestampMs);
+ const endMoment = moment(timestampMsRange.endTimestampMs);
+ return (
+ <TableRow key={`weth-${outdatedWETH.address}`}>
+ <TableRowColumn className="py1">
+ <div className="flex">
+ <img
+ style={{width: ICON_DIMENSION, height: ICON_DIMENSION}}
+ src={OUTDATED_WETH_ICON_PATH}
+ />
+ <div className="mt2 ml2 sm-hide xs-hide">
+ {startMoment.format(DATE_FORMAT)}-{endMoment.format(DATE_FORMAT)}
+ </div>
+ </div>
+ </TableRowColumn>
+ <TableRowColumn>
+ 0 WETH
+ </TableRowColumn>
+ <TableRowColumn style={{paddingLeft: 3}}>
+ <LifeCycleRaisedButton
+ labelReady="Unwrap"
+ labelLoading="Unwrapping..."
+ labelComplete="Unwrapped!"
+ onClickAsyncFn={this.unwrapEthAsync.bind(this, true)}
+ />
+ </TableRowColumn>
+ </TableRow>
+ );
+ });
+ return rows;
+ }
+ private async wrapEthAsync() {
+ // TODO
+ }
+ private async unwrapEthAsync() {
+ // TODO
+ }
+} // tslint:disable:max-file-line-count
diff --git a/packages/website/ts/components/fill_order.tsx b/packages/website/ts/components/fill_order.tsx
index 388c72d8e..77a9cfddb 100644
--- a/packages/website/ts/components/fill_order.tsx
+++ b/packages/website/ts/components/fill_order.tsx
@@ -4,7 +4,6 @@ import BigNumber from 'bignumber.js';
import * as _ from 'lodash';
import {Card, CardHeader, CardText} from 'material-ui/Card';
import Divider from 'material-ui/Divider';
-import Paper from 'material-ui/Paper';
import RaisedButton from 'material-ui/RaisedButton';
import TextField from 'material-ui/TextField';
import * as moment from 'moment';
diff --git a/packages/website/ts/components/portal.tsx b/packages/website/ts/components/portal.tsx
index 62a5d2eac..57e75dab3 100644
--- a/packages/website/ts/components/portal.tsx
+++ b/packages/website/ts/components/portal.tsx
@@ -9,6 +9,7 @@ import {Route, Switch} from 'react-router-dom';
import {Blockchain} from 'ts/blockchain';
import {BlockchainErrDialog} from 'ts/components/dialogs/blockchain_err_dialog';
import {PortalDisclaimerDialog} from 'ts/components/dialogs/portal_disclaimer_dialog';
+import {EthWrappers} from 'ts/components/eth_wrappers';
import {FillOrder} from 'ts/components/fill_order';
import {Footer} from 'ts/components/footer';
import {PortalMenu} from 'ts/components/portal_menu';
@@ -206,6 +207,10 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
{this.props.blockchainIsLoaded ?
<Switch>
<Route
+ path={`${WebsitePaths.Portal}/weth`}
+ render={this.renderEthWrapper.bind(this)}
+ />
+ <Route
path={`${WebsitePaths.Portal}/fill`}
render={this.renderFillOrder.bind(this)}
/>
@@ -250,6 +255,19 @@ export class Portal extends React.Component<PortalAllProps, PortalAllState> {
</div>
);
}
+ private renderEthWrapper() {
+ return (
+ <EthWrappers
+ networkId={this.props.networkId}
+ blockchain={this.blockchain}
+ dispatcher={this.props.dispatcher}
+ tokenByAddress={this.props.tokenByAddress}
+ tokenStateByAddress={this.props.tokenStateByAddress}
+ userAddress={this.props.userAddress}
+ userEtherBalance={this.props.userEtherBalance}
+ />
+ );
+ }
private renderTradeHistory() {
return (
<TradeHistory
diff --git a/packages/website/ts/components/portal_menu.tsx b/packages/website/ts/components/portal_menu.tsx
index 869df3e71..e00fbd40c 100644
--- a/packages/website/ts/components/portal_menu.tsx
+++ b/packages/website/ts/components/portal_menu.tsx
@@ -50,6 +50,14 @@ export class PortalMenu extends React.Component<PortalMenuProps, PortalMenuState
>
{this.renderMenuItemWithIcon('Trade history', 'zmdi-format-list-bulleted')}
</MenuItem>
+ <MenuItem
+ style={this.props.menuItemStyle}
+ className="py2"
+ to={`${WebsitePaths.Portal}/weth`}
+ onClick={this.props.onClick.bind(this)}
+ >
+ {this.renderMenuItemWithIcon('ETH wrapper', 'zmdi-circle-o')}
+ </MenuItem>
</div>
);
}