aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/inputs
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/inputs')
-rw-r--r--packages/website/ts/components/inputs/allowance_state_toggle.tsx30
-rw-r--r--packages/website/ts/components/inputs/allowance_toggle.tsx140
2 files changed, 18 insertions, 152 deletions
diff --git a/packages/website/ts/components/inputs/allowance_state_toggle.tsx b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
index 495efd806..ce439e147 100644
--- a/packages/website/ts/components/inputs/allowance_state_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_state_toggle.tsx
@@ -24,7 +24,7 @@ export interface AllowanceStateToggleProps {
export interface AllowanceStateToggleState {
allowanceState: AllowanceState;
- prevAllowance: BigNumber;
+ prevTokenState: TokenState;
}
const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
@@ -33,21 +33,21 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr
public static defaultProps = {
onErrorOccurred: _.noop.bind(_),
};
- private static _getAllowanceStateFromAllowance(allowance?: BigNumber): AllowanceState {
- if (_.isUndefined(allowance)) {
+ private static _getAllowanceState(tokenState: TokenState): AllowanceState {
+ if (!tokenState.isLoaded) {
return AllowanceState.Loading;
}
- if (allowance.gt(0)) {
+ if (tokenState.allowance.gt(0)) {
return AllowanceState.Unlocked;
}
return AllowanceState.Locked;
}
constructor(props: AllowanceStateToggleProps) {
super(props);
- const allowance = props.tokenState.allowance;
+ const tokenState = props.tokenState;
this.state = {
- allowanceState: AllowanceState.Loading,
- prevAllowance: allowance,
+ allowanceState: AllowanceStateToggle._getAllowanceState(tokenState),
+ prevTokenState: tokenState,
};
}
@@ -69,11 +69,17 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr
);
}
public componentWillReceiveProps(nextProps: AllowanceStateToggleProps): void {
- if (!nextProps.tokenState.allowance.eq(this.state.prevAllowance)) {
- const allowance = nextProps.tokenState.allowance;
+ const nextTokenState = nextProps.tokenState;
+ const prevTokenState = this.state.prevTokenState;
+ if (
+ !nextTokenState.allowance.eq(prevTokenState.allowance) ||
+ nextTokenState.isLoaded !== prevTokenState.isLoaded
+ ) {
+ const tokenState = nextProps.tokenState;
+ const allowance = tokenState.allowance;
this.setState({
- prevAllowance: allowance,
- allowanceState: AllowanceStateToggle._getAllowanceStateFromAllowance(allowance),
+ prevTokenState: tokenState,
+ allowanceState: AllowanceStateToggle._getAllowanceState(nextTokenState),
});
}
}
@@ -124,7 +130,7 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr
} catch (err) {
analytics.track('Set Allowance Failure', logData);
this.setState({
- allowanceState: AllowanceStateToggle._getAllowanceStateFromAllowance(this.state.prevAllowance),
+ allowanceState: AllowanceStateToggle._getAllowanceState(this.state.prevTokenState),
});
const errMsg = `${err}`;
if (utils.didUserDenyWeb3Request(errMsg)) {
diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
deleted file mode 100644
index 05dce134a..000000000
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-import { Styles } from '@0xproject/react-shared';
-import { BigNumber, logUtils } from '@0xproject/utils';
-import * as _ from 'lodash';
-import Toggle from 'material-ui/Toggle';
-import * as React from 'react';
-import { Blockchain } from 'ts/blockchain';
-import { Dispatcher } from 'ts/redux/dispatcher';
-import { colors } from 'ts/style/colors';
-import { BalanceErrs, Token, TokenState } from 'ts/types';
-import { analytics } from 'ts/utils/analytics';
-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;
- token: Token;
- tokenState: TokenState;
- userAddress: string;
- isDisabled?: boolean;
- onErrorOccurred?: (errType: BalanceErrs) => void;
- refetchTokenStateAsync: () => Promise<void>;
-}
-
-interface AllowanceToggleState {
- isSpinnerVisible: boolean;
- prevAllowance: BigNumber;
-}
-
-const styles: Styles = {
- baseThumbStyle: {
- height: 10,
- width: 10,
- top: 6,
- backgroundColor: colors.white,
- boxShadow: `0px 0px 0px ${colors.allowanceToggleShadow}`,
- },
- offThumbStyle: {
- left: 4,
- },
- onThumbStyle: {
- left: 25,
- },
- baseTrackStyle: {
- width: 25,
- },
- offTrackStyle: {
- backgroundColor: colors.grey300,
- },
- onTrackStyle: {
- backgroundColor: colors.mediumBlue,
- },
-};
-
-export class AllowanceToggle extends React.Component<AllowanceToggleProps, AllowanceToggleState> {
- public static defaultProps = {
- onErrorOccurred: _.noop.bind(_),
- isDisabled: false,
- };
- constructor(props: AllowanceToggleProps) {
- super(props);
- this.state = {
- isSpinnerVisible: false,
- prevAllowance: props.tokenState.allowance,
- };
- }
- public componentWillReceiveProps(nextProps: AllowanceToggleProps): void {
- if (!nextProps.tokenState.allowance.eq(this.state.prevAllowance)) {
- this.setState({
- isSpinnerVisible: false,
- prevAllowance: nextProps.tokenState.allowance,
- });
- }
- }
- public render(): React.ReactNode {
- return (
- <div className="flex">
- <div>
- <Toggle
- disabled={this.state.isSpinnerVisible || this.props.isDisabled}
- toggled={this._isAllowanceSet()}
- onToggle={this._onToggleAllowanceAsync.bind(this)}
- thumbStyle={{ ...styles.baseThumbStyle, ...styles.offThumbStyle }}
- thumbSwitchedStyle={{ ...styles.baseThumbStyle, ...styles.onThumbStyle }}
- trackStyle={{ ...styles.baseTrackStyle, ...styles.offTrackStyle }}
- trackSwitchedStyle={{ ...styles.baseTrackStyle, ...styles.onTrackStyle }}
- />
- </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);
- return;
- }
-
- this.setState({
- isSpinnerVisible: true,
- });
-
- let newAllowanceAmountInBaseUnits = new BigNumber(0);
- if (!this._isAllowanceSet()) {
- newAllowanceAmountInBaseUnits = DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS;
- }
- const logData = {
- tokenSymbol: this.props.token.symbol,
- newAllowance: newAllowanceAmountInBaseUnits.toNumber(),
- };
- try {
- await this.props.blockchain.setProxyAllowanceAsync(this.props.token, newAllowanceAmountInBaseUnits);
- analytics.track('Set Allowances Success', logData);
- await this.props.refetchTokenStateAsync();
- } catch (err) {
- analytics.track('Set Allowance Failure', logData);
- this.setState({
- isSpinnerVisible: false,
- });
- const errMsg = `${err}`;
- if (utils.didUserDenyWeb3Request(errMsg)) {
- return;
- }
- logUtils.log(`Unexpected error encountered: ${err}`);
- logUtils.log(err.stack);
- this.props.onErrorOccurred(BalanceErrs.allowanceSettingFailed);
- errorReporter.report(err);
- }
- }
- private _isAllowanceSet(): boolean {
- return !this.props.tokenState.allowance.eq(0);
- }
-}