WIP for allowance toggle redesign working

packages/website/ts/components/inputs/allowance_state_toggle.tsx

@@ -1,36 +1,82 @@
-import { colors } from '@0xproject/react-shared';
+import { BigNumber, logUtils } from '@0xproject/utils';
+import * as _ from 'lodash';
 import * as React from 'react';
-import { AllowanceStateView, AllowanceState } from 'ts/components/ui/allowance_state_view';
-import { Token, TokenState } from 'ts/types';
-import { Container } from 'ts/components/ui/container';
 import ReactTooltip = require('react-tooltip');
+import { Blockchain } from 'ts/blockchain';
+import { AllowanceState, AllowanceStateView } from 'ts/components/ui/allowance_state_view';
+import { Container } from 'ts/components/ui/container';
+import { Dispatcher } from 'ts/redux/dispatcher';
+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';
 
 export interface AllowanceStateToggleProps {
+    networkId: number;
+    blockchain: Blockchain;
+    dispatcher: Dispatcher;
     token: Token;
     tokenState: TokenState;
+    userAddress: string;
+    onErrorOccurred?: (errType: BalanceErrs) => void;
+    refetchTokenStateAsync: () => Promise<void>;
 }
 
 export interface AllowanceStateToggleState {
     allowanceState: AllowanceState;
+    prevAllowance: BigNumber;
 }
 
-const flip = () => Math.random() < 0.5;
+const DEFAULT_ALLOWANCE_AMOUNT_IN_BASE_UNITS = new BigNumber(2).pow(256).minus(1);
 
 export class AllowanceStateToggle extends React.Component<AllowanceStateToggleProps, AllowanceStateToggleState> {
-    public state = {
-        allowanceState: flip() ? AllowanceState.Loading : AllowanceState.Locked,
+    public static defaultProps = {
+        onErrorOccurred: _.noop.bind(_),
     };
+    private static _getAllowanceStateFromAllowance(allowance?: BigNumber): AllowanceState {
+        if (_.isUndefined(allowance)) {
+            return AllowanceState.Loading;
+        }
+        if (allowance.gt(0)) {
+            return AllowanceState.Unlocked;
+        }
+        return AllowanceState.Locked;
+    }
+    constructor(props: AllowanceStateToggleProps) {
+        super(props);
+        const allowance = props.tokenState.allowance;
+        this.state = {
+            allowanceState: AllowanceState.Loading,
+            prevAllowance: allowance,
+        };
+    }
+
     public render(): React.ReactNode {
         const tooltipId = `tooltip-id-${this.props.token.symbol}`;
         return (
             <Container cursor="pointer">
                 <ReactTooltip id={tooltipId}>{this._getTooltipContent()}</ReactTooltip>
-                <div data-tip={true} data-for={tooltipId} data-place="right" data-effect="solid">
+                <div
+                    data-tip={true}
+                    data-for={tooltipId}
+                    data-place="right"
+                    data-effect="solid"
+                    onClick={this._onToggleAllowanceAsync.bind(this)}
+                >
                     <AllowanceStateView allowanceState={this.state.allowanceState} />
                 </div>
             </Container>
         );
     }
+    public componentWillReceiveProps(nextProps: AllowanceStateToggleProps): void {
+        if (!nextProps.tokenState.allowance.eq(this.state.prevAllowance)) {
+            const allowance = nextProps.tokenState.allowance;
+            this.setState({
+                prevAllowance: allowance,
+                allowanceState: AllowanceStateToggle._getAllowanceStateFromAllowance(allowance),
+            });
+        }
+    }
     private _getTooltipContent(): React.ReactNode {
         const symbol = this.props.token.symbol;
         switch (this.state.allowanceState) {
@@ -53,4 +99,44 @@ export class AllowanceStateToggle extends React.Component<AllowanceStateTogglePr
                 return null;
         }
     }
+    private async _onToggleAllowanceAsync(): Promise<void> {
+        if (this.props.userAddress === '') {
+            this.props.dispatcher.updateShouldBlockchainErrDialogBeOpen(true);
+            return;
+        }
+
+        this.setState({
+            allowanceState: AllowanceState.Loading,
+        });
+
+        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({
+                allowanceState: AllowanceStateToggle._getAllowanceStateFromAllowance(this.state.prevAllowance),
+            });
+            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);
+    }
 }

packages/website/ts/components/ui/allowance_state_view.tsx

@@ -1,7 +1,5 @@
-import { colors } from '@0xproject/react-shared';
 import CircularProgress from 'material-ui/CircularProgress';
 import * as React from 'react';
-import { styled } from 'ts/style/theme';
 
 export enum AllowanceState {
     Locked,

packages/website/ts/components/wallet/wallet.tsx

@@ -28,7 +28,6 @@ import { NullTokenRow } from 'ts/components/wallet/null_token_row';
 import { PlaceHolder } from 'ts/components/wallet/placeholder';
 import { StandardIconRow } from 'ts/components/wallet/standard_icon_row';
 import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
-import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { AllowanceStateToggle } from 'ts/containers/inputs/allowance_state_toggle';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
@@ -422,7 +421,14 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         //         refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)}
         //     />
         // );
-        return <AllowanceStateToggle token={config.token} tokenState={config.tokenState} />;
+        return (
+            <AllowanceStateToggle
+                blockchain={this.props.blockchain}
+                token={config.token}
+                tokenState={config.tokenState}
+                refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)}
+            />
+        );
     }
     private _renderAmount(
         amount: BigNumber,

packages/website/ts/containers/inputs/allowance_state_toggle.ts

@@ -9,21 +9,33 @@ import { AllowanceStateToggle as AllowanceStateToggleComponent } from 'ts/compon
 import { Dispatcher } from 'ts/redux/dispatcher';
 
 interface AllowanceStateToggleProps {
+    blockchain: Blockchain;
+    onErrorOccurred?: (errType: BalanceErrs) => void;
     token: Token;
     tokenState: TokenState;
+    isDisabled?: boolean;
+    refetchTokenStateAsync: () => Promise<void>;
 }
 
-interface ConnectedState {}
+interface ConnectedState {
+    networkId: number;
+    userAddress: string;
+}
 
 interface ConnectedDispatch {
     dispatcher: Dispatcher;
 }
 
-const mapStateToProps = (state: State, _ownProps: AllowanceStateToggleProps): ConnectedState => ({});
+const mapStateToProps = (state: State, _ownProps: AllowanceStateToggleProps): ConnectedState => ({
+    networkId: state.networkId,
+    userAddress: state.userAddress,
+});
 
-// const mapDispatchTopProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({});
+const mapDispatchTopProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    dispatcher: new Dispatcher(dispatch),
+});
 
 export const AllowanceStateToggle: React.ComponentClass<AllowanceStateToggleProps> = connect(
     mapStateToProps,
-    // mapDispatchTopProps,
+    mapDispatchTopProps,
 )(AllowanceStateToggleComponent);