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

Refactor the WETH conversion dialog/button to be either wrap or unwrap specific and not both

Browse Source
This commit is contained in:
Fabio Berger
2017-12-14 10:41:33 -06:00
parent 105bcc6664
commit 7ce1021798
2 changed files with 109 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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() {