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
|
import { BigNumber } from '@0xproject/utils';
import * as _ from 'lodash';
import Toggle from 'material-ui/Toggle';
import * as React from 'react';
import * as ReactGA from 'react-ga';
import { Blockchain } from 'ts/blockchain';
import { Dispatcher } from 'ts/redux/dispatcher';
import { BalanceErrs, Token, TokenState } from 'ts/types';
import { constants } from 'ts/utils/constants';
import { errorReporter } from 'ts/utils/error_reporter';
import { utils } from 'ts/utils/utils';
const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
interface AllowanceToggleProps {
networkId: number;
blockchain: Blockchain;
dispatcher: Dispatcher;
onErrorOccurred: (errType: BalanceErrs) => void;
token: Token;
tokenState: TokenState;
userAddress: string;
isDisabled: boolean;
refetchTokenStateAsync: () => Promise<void>;
}
interface AllowanceToggleState {
isSpinnerVisible: boolean;
prevAllowance: BigNumber;
}
export class AllowanceToggle extends React.Component<AllowanceToggleProps, AllowanceToggleState> {
constructor(props: AllowanceToggleProps) {
super(props);
this.state = {
isSpinnerVisible: false,
prevAllowance: props.tokenState.allowance,
};
}
public componentWillReceiveProps(nextProps: AllowanceToggleProps) {
if (!nextProps.tokenState.allowance.eq(this.state.prevAllowance)) {
this.setState({
isSpinnerVisible: false,
prevAllowance: nextProps.tokenState.allowance,
});
}
}
public render() {
return (
<div className="flex">
<div>
<Toggle
disabled={this.state.isSpinnerVisible || this.props.isDisabled}
toggled={this._isAllowanceSet()}
onToggle={this._onToggleAllowanceAsync.bind(this)}
/>
</div>
{this.state.isSpinnerVisible && (
<div className="pl1" style={{ paddingTop: 3 }}>
<i className="zmdi zmdi-spinner zmdi-hc-spin" />
</div>
)}
</div>
);
}
private async _onToggleAllowanceAsync(): Promise<void> {
if (this.props.userAddress === '') {
this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
}
this.setState({
isSpinnerVisible: true,
});
let newAllowanceAmountInBaseUnits = new BigNumber(0);
if (!this._isAllowanceSet()) {
newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
}
const networkName = constants.NETWORK_NAME_BY_ID[this.props.networkId];
const eventLabel = `${this.props.token.symbol}-${networkName}`;
try {
await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);
ReactGA.event({
category: 'Portal',
action: 'Set Allowance Success',
label: eventLabel,
value: newAllowanceAmountInBaseUnits.toNumber(),
});
await this.props.refetchTokenStateAsync();
} catch (err) {
ReactGA.event({
category: 'Portal',
action: 'Set Allowance Failure',
label: eventLabel,
value: newAllowanceAmountInBaseUnits.toNumber(),
});
this.setState({
isSpinnerVisible: false,
});
const errMsg = `${err}`;
if (utils.didUserDenyWeb3Request(errMsg)) {
return;
}
utils.consoleLog(`Unexpected error encountered: ${err}`);
utils.consoleLog(err.stack);
this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed);
await errorReporter.reportAsync(err);
}
}
private _isAllowanceSet() {
return !this.props.tokenState.allowance.eq(0);
}
}
|
