diff options
author | Fabio Berger <me@fabioberger.com> | 2017-12-15 09:28:49 +0800 |
---|---|---|
committer | Fabio Berger <me@fabioberger.com> | 2017-12-15 09:28:49 +0800 |
commit | ac1fbeb9623682ce678990d1815fcff63a6c40ae (patch) | |
tree | b6fc1cdc1de8d6c4756548a818057975db6f2415 /packages/website/ts/components/eth_wrappers.tsx | |
parent | 6d386220d93f6fb609f8f05e27d093614a39b459 (diff) | |
download | dexon-0x-contracts-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar dexon-0x-contracts-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar.gz dexon-0x-contracts-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar.bz2 dexon-0x-contracts-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar.lz dexon-0x-contracts-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar.xz dexon-0x-contracts-ac1fbeb9623682ce678990d1815fcff63a6c40ae.tar.zst dexon-0x-contracts-ac1fbeb9623682ce678990d1815fcff63a6c40ae.zip |
Improve WETH page styling
Diffstat (limited to 'packages/website/ts/components/eth_wrappers.tsx')
-rw-r--r-- | packages/website/ts/components/eth_wrappers.tsx | 39 |
1 files changed, 31 insertions, 8 deletions
diff --git a/packages/website/ts/components/eth_wrappers.tsx b/packages/website/ts/components/eth_wrappers.tsx index c2f9b7b45..ccbed4188 100644 --- a/packages/website/ts/components/eth_wrappers.tsx +++ b/packages/website/ts/components/eth_wrappers.tsx @@ -91,6 +91,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt const etherToken = _.find(tokens, {symbol: 'WETH'}); const etherTokenState = this.props.tokenStateByAddress[etherToken.address]; const wethBalance = ZeroEx.toUnitAmount(etherTokenState.balance, 18); + const isBidirectional = true; return ( <div className="clearfix lg-px4 md-px4 sm-px2" style={{minHeight: 600}}> <div className="relative"> @@ -113,7 +114,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <Divider /> <div> <div className="py2"> - Wrap ETH into an ERC20-compliant Ether token + Wrap ETH into an ERC20-compliant Ether token. 1 ETH = 1 WETH. </div> <div> <Table @@ -124,8 +125,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableRow> <TableHeaderColumn>ETH Token</TableHeaderColumn> <TableHeaderColumn>Balance</TableHeaderColumn> - <TableHeaderColumn> - {'ETH <-> WETH'} + <TableHeaderColumn className="center"> + {this.renderActionColumnTitle(isBidirectional)} </TableHeaderColumn> </TableRow> </TableHeader> @@ -145,7 +146,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableRowColumn> {this.props.userEtherBalance.toFixed(PRECISION)} ETH </TableRowColumn> - <TableRowColumn style={{paddingLeft: 3}}> + <TableRowColumn> <EthWethConversionButton isOutdatedWrappedEther={false} direction={Side.deposit} @@ -172,7 +173,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableRowColumn> {wethBalance.toFixed(PRECISION)} WETH </TableRowColumn> - <TableRowColumn style={{paddingLeft: 3}}> + <TableRowColumn> <EthWethConversionButton isOutdatedWrappedEther={false} direction={Side.receive} @@ -211,8 +212,8 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <TableRow> <TableHeaderColumn>WETH Version</TableHeaderColumn> <TableHeaderColumn>Balance</TableHeaderColumn> - <TableHeaderColumn> - {'WETH -> ETH'} + <TableHeaderColumn className="center"> + {this.renderActionColumnTitle(!isBidirectional)} </TableHeaderColumn> </TableRow> </TableHeader> @@ -225,6 +226,28 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt </div> ); } + private renderActionColumnTitle(isBidirectional: boolean) { + let iconClass = 'zmdi-long-arrow-right'; + let leftSymbol = 'WETH'; + let rightSymbol = 'ETH'; + if (isBidirectional) { + iconClass = 'zmdi-swap'; + leftSymbol = 'ETH'; + rightSymbol = 'WETH'; + } + return ( + <div className="flex mx-auto" style={{width: 85}}> + <div style={{paddingTop: 3}}>{leftSymbol}</div> + <div className="px1"> + <i + style={{fontSize: 18}} + className={`zmdi ${iconClass}`} + /> + </div> + <div style={{paddingTop: 3}}>{rightSymbol}</div> + </div> + ); + } private renderOutdatedWeths(etherToken: Token, etherTokenState: TokenState) { const rows = _.map(configs.outdatedWrappedEthers, (outdatedWETHByNetworkId: OutdatedWrappedEtherByNetworkId) => { @@ -267,7 +290,7 @@ export class EthWrappers extends React.Component<EthWrappersProps, EthWrappersSt <i className="zmdi zmdi-spinner zmdi-hc-spin" /> } </TableRowColumn> - <TableRowColumn style={{paddingLeft: 3}}> + <TableRowColumn> <EthWethConversionButton isDisabled={!isStateLoaded} isOutdatedWrappedEther={true} |