1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
|
import * as React from 'react';
import Dialog from 'material-ui/Dialog';
import FlatButton from 'material-ui/FlatButton';
import RadioButtonGroup from 'material-ui/RadioButton/RadioButtonGroup';
import RadioButton from 'material-ui/RadioButton';
import {Side, Token, TokenState} from 'ts/types';
import {TokenAmountInput} from 'ts/components/inputs/token_amount_input';
import {EthAmountInput} from 'ts/components/inputs/eth_amount_input';
import BigNumber from 'bignumber.js';
interface EthWethConversionDialogProps {
onComplete: (direction: Side, value: BigNumber) => void;
onCancelled: () => void;
isOpen: boolean;
token: Token;
tokenState: TokenState;
etherBalance: BigNumber;
}
interface EthWethConversionDialogState {
value?: BigNumber;
direction: Side;
shouldShowIncompleteErrs: boolean;
hasErrors: boolean;
}
export class EthWethConversionDialog extends
React.Component<EthWethConversionDialogProps, EthWethConversionDialogState> {
constructor() {
super();
this.state = {
direction: Side.deposit,
shouldShowIncompleteErrs: false,
hasErrors: true,
};
}
public render() {
const convertDialogActions = [
<FlatButton
key="cancel"
label="Cancel"
onTouchTap={this.onCancel.bind(this)}
/>,
<FlatButton
key="convert"
label="Convert"
primary={true}
onTouchTap={this.onConvertClick.bind(this)}
/>,
];
return (
<Dialog
title="I want to convert"
titleStyle={{fontWeight: 100}}
actions={convertDialogActions}
open={this.props.isOpen}
>
{this.renderConversionDialogBody()}
</Dialog>
);
}
private renderConversionDialogBody() {
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>
);
}
private onConversionDirectionChange(e: any, direction: Side) {
this.setState({
value: undefined,
shouldShowIncompleteErrs: false,
direction,
hasErrors: true,
});
}
private onValueChange(isValid: boolean, amount?: BigNumber) {
this.setState({
value: amount,
hasErrors: !isValid,
});
}
private onConvertClick() {
if (this.state.hasErrors) {
this.setState({
shouldShowIncompleteErrs: true,
});
} else {
const value = this.state.value;
this.setState({
value: undefined,
});
this.props.onComplete(this.state.direction, value);
}
}
private onCancel() {
this.setState({
value: undefined,
});
this.props.onCancelled();
}
}
|
