crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve WETH page styling

Browse Source
This commit is contained in:
Fabio Berger
2017-12-14 19:28:49 -06:00
parent 6d386220d9
commit ac1fbeb962
2 changed files with 35 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
View File

@@ -53,7 +53,7 @@ export class EthWethConversionDialog extends
title={title}
titleStyle={{fontWeight: 100}}
actions={convertDialogActions}
contentStyle={{width: 600}}
contentStyle={{width: 448}}
open={this.props.isOpen}
>
{this.renderConversionDialogBody()}
@@ -70,7 +70,7 @@ export class EthWethConversionDialog extends
<div className="pb2">
{explanation}
</div>
<div className="mx-auto" style={{maxWidth: 332}}>
<div className="mx-auto" style={{maxWidth: 312}}>
<div className="flex">
{this.renderCurrency(isWrappedVersion)}
<div style={{paddingTop: 68}}>
@@ -83,7 +83,7 @@ export class EthWethConversionDialog extends
</div>
<div
className="pt2 mx-auto"
style={{width: 235}}
style={{width: 245}}
>
{this.props.direction === Side.receive ?
<TokenAmountInput
@@ -131,7 +131,7 @@ export class EthWethConversionDialog extends
<div className="center py2">
<img src={iconUrl} style={{width: 60}} />
</div>
<div className="center">
<div className="center" style={{fontSize: 12}}>
({symbol})
</div>
</div>

39
packages/website/ts/components/eth_wrappers.tsx
View File

@@ -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}