aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/dialogs
diff options
context:
space:
mode:
authorFabio Berger <me@fabioberger.com>2017-12-15 00:41:33 +0800
committerFabio Berger <me@fabioberger.com>2017-12-15 00:41:33 +0800
commit7ce1021798ac2d459f80d1827a3259e781b4b201 (patch)
treea249f5d4de842d1aedeb50b742a396e74ed3e88d /packages/website/ts/components/dialogs
parent105bcc6664f0d4ab642486977f1edaf8d84b020e (diff)
downloaddexon-sol-tools-7ce1021798ac2d459f80d1827a3259e781b4b201.tar
dexon-sol-tools-7ce1021798ac2d459f80d1827a3259e781b4b201.tar.gz
dexon-sol-tools-7ce1021798ac2d459f80d1827a3259e781b4b201.tar.bz2
dexon-sol-tools-7ce1021798ac2d459f80d1827a3259e781b4b201.tar.lz
dexon-sol-tools-7ce1021798ac2d459f80d1827a3259e781b4b201.tar.xz
dexon-sol-tools-7ce1021798ac2d459f80d1827a3259e781b4b201.tar.zst
dexon-sol-tools-7ce1021798ac2d459f80d1827a3259e781b4b201.zip
Refactor the WETH conversion dialog/button to be either wrap or unwrap specific and not both
Diffstat (limited to 'packages/website/ts/components/dialogs')
-rw-r--r--packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx130
1 files changed, 78 insertions, 52 deletions
diff --git a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
index aba5b9faf..4904ee9e2 100644
--- a/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
+++ b/packages/website/ts/components/dialogs/eth_weth_conversion_dialog.tsx
@@ -1,14 +1,15 @@
import BigNumber from 'bignumber.js';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
-import RadioButton from 'material-ui/RadioButton';
-import RadioButtonGroup from 'material-ui/RadioButton/RadioButtonGroup';
import * as React from 'react';
import {EthAmountInput} from 'ts/components/inputs/eth_amount_input';
import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
import {Side, Token, TokenState} from 'ts/types';
+const DARK_BLUE = '#4D5481';
+
interface EthWethConversionDialogProps {
+ direction: Side;
onComplete: (direction: Side, value: BigNumber) => void;
onCancelled: () => void;
isOpen: boolean;
@@ -19,7 +20,6 @@ interface EthWethConversionDialogProps {
interface EthWethConversionDialogState {
value?: BigNumber;
- direction: Side;
shouldShowIncompleteErrs: boolean;
hasErrors: boolean;
}
@@ -29,7 +29,6 @@ export class EthWethConversionDialog extends
constructor() {
super();
this.state = {
- direction: Side.deposit,
shouldShowIncompleteErrs: false,
hasErrors: true,
};
@@ -48,11 +47,13 @@ export class EthWethConversionDialog extends
onTouchTap={this.onConvertClick.bind(this)}
/>,
];
+ const title = this.props.direction === Side.deposit ? 'Wrap ETH' : 'Unwrap WETH';
return (
<Dialog
- title="I want to convert"
+ title={title}
titleStyle={{fontWeight: 100}}
actions={convertDialogActions}
+ contentStyle={{width: 600}}
open={this.props.isOpen}
>
{this.renderConversionDialogBody()}
@@ -60,56 +61,81 @@ export class EthWethConversionDialog extends
);
}
private renderConversionDialogBody() {
+ const explanation = this.props.direction === Side.deposit ?
+ 'Convert your Ether into a tokenized, tradable form.' :
+ 'Convert your Wrapped Ether back into it\'s native form.';
+ const isWrappedVersion = this.props.direction === Side.receive;
return (
- <div className="mx-auto" style={{maxWidth: 300}}>
- <RadioButtonGroup
- className="pb1"
- defaultSelected={this.state.direction}
- name="conversionDirection"
- onChange={this.onConversionDirectionChange.bind(this)}
- >
- <RadioButton
- className="pb1"
- value={Side.deposit}
- label="Ether -> Ether Tokens"
- />
- <RadioButton
- value={Side.receive}
- label="Ether Tokens -> Ether"
- />
- </RadioButtonGroup>
- {this.state.direction === Side.receive ?
- <TokenAmountInput
- label="Amount to convert"
- token={this.props.token}
- tokenState={this.props.tokenState}
- shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
- shouldCheckBalance={true}
- shouldCheckAllowance={false}
- onChange={this.onValueChange.bind(this)}
- amount={this.state.value}
- onVisitBalancesPageClick={this.props.onCancelled}
- /> :
- <EthAmountInput
- label="Amount to convert"
- balance={this.props.etherBalance}
- amount={this.state.value}
- onChange={this.onValueChange.bind(this)}
- shouldCheckBalance={true}
- shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
- onVisitBalancesPageClick={this.props.onCancelled}
- />
- }
+ <div>
+ <div className="pb2">
+ {explanation}
+ </div>
+ <div className="mx-auto" style={{maxWidth: 332}}>
+ <div className="flex">
+ {this.renderCurrency(isWrappedVersion)}
+ <div style={{paddingTop: 68}}>
+ <i
+ style={{fontSize: 28, color: DARK_BLUE}}
+ className="zmdi zmdi-arrow-right"
+ />
+ </div>
+ {this.renderCurrency(!isWrappedVersion)}
+ </div>
+ <div
+ className="pt2 mx-auto"
+ style={{width: 235}}
+ >
+ {this.props.direction === Side.receive ?
+ <TokenAmountInput
+ token={this.props.token}
+ tokenState={this.props.tokenState}
+ shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+ shouldCheckBalance={true}
+ shouldCheckAllowance={false}
+ onChange={this.onValueChange.bind(this)}
+ amount={this.state.value}
+ onVisitBalancesPageClick={this.props.onCancelled}
+ /> :
+ <EthAmountInput
+ balance={this.props.etherBalance}
+ amount={this.state.value}
+ onChange={this.onValueChange.bind(this)}
+ shouldCheckBalance={true}
+ shouldShowIncompleteErrs={this.state.shouldShowIncompleteErrs}
+ onVisitBalancesPageClick={this.props.onCancelled}
+ />
+ }
+ <div
+ className="pt1"
+ style={{fontSize: 12}}
+ >
+ 1 ETH = 1 WETH
+ </div>
+ </div>
+ </div>
</div>
);
}
- private onConversionDirectionChange(e: any, direction: Side) {
- this.setState({
- value: undefined,
- shouldShowIncompleteErrs: false,
- direction,
- hasErrors: true,
- });
+ private renderCurrency(isWrappedVersion: boolean) {
+ const name = isWrappedVersion ? 'Wrapped Ether' : 'Ether';
+ const iconUrl = isWrappedVersion ? '/images/token_icons/ether_erc20.png' : '/images/ether.png';
+ const symbol = isWrappedVersion ? 'WETH' : 'ETH';
+ return (
+ <div className="mx-auto pt2">
+ <div
+ className="center"
+ style={{color: DARK_BLUE}}
+ >
+ {name}
+ </div>
+ <div className="center py2">
+ <img src={iconUrl} style={{width: 60}} />
+ </div>
+ <div className="center">
+ ({symbol})
+ </div>
+ </div>
+ );
}
private onValueChange(isValid: boolean, amount?: BigNumber) {
this.setState({
@@ -127,7 +153,7 @@ export class EthWethConversionDialog extends
this.setState({
value: undefined,
});
- this.props.onComplete(this.state.direction, value);
+ this.props.onComplete(this.props.direction, value);
}
}
private onCancel() {