From 3898b8e8ab083689221e39de6b18fe31e6699d38 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 5 Jun 2018 21:36:05 -0700
Subject: Wrap AllowanceToggle in redux container

---
 .../website/ts/components/inputs/allowance_toggle.tsx     |  8 ++++++--
 .../ts/components/onboarding/portal_onboarding_flow.tsx   | 15 +++++++++++++++
 packages/website/ts/components/token_balances.tsx         |  5 +----
 packages/website/ts/components/wallet/wallet.tsx          |  7 ++-----
 4 files changed, 24 insertions(+), 11 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index a8df4935a..ca4b89f77 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -18,11 +18,11 @@ interface AllowanceToggleProps {
     networkId: number;
     blockchain: Blockchain;
     dispatcher: Dispatcher;
-    onErrorOccurred: (errType: BalanceErrs) => void;
     token: Token;
     tokenState: TokenState;
     userAddress: string;
-    isDisabled: boolean;
+    isDisabled?: boolean;
+    onErrorOccurred?: (errType: BalanceErrs) => void;
     refetchTokenStateAsync: () => Promise<void>;
 }
 
@@ -57,6 +57,10 @@ const styles: Styles = {
 };
 
 export class AllowanceToggle extends React.Component<AllowanceToggleProps, AllowanceToggleState> {
+    public static defaultProps = {
+        onErrorOccurred: _.noop,
+        isDisabled: false,
+    };
     constructor(props: AllowanceToggleProps) {
         super(props);
         this.state = {
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index bf52684d7..65cb20733 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -5,6 +5,7 @@ import { BigNumber } from '@0xproject/utils';
 import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
 import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { utils } from 'ts/utils/utils';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 
 export interface PortalOnboardingFlowProps {
     stepIndex: number;
@@ -77,6 +78,12 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
                 placement: 'right',
                 continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
             },
+            {
+                target: '.weth-row',
+                content: 'Unlock your tokens for trading. You only need to do this once for each token.',
+                placement: 'right',
+                continueButtonDisplay: 'disabled',
+            },
         ];
         return steps;
     }
@@ -125,4 +132,12 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             this.props.updateIsRunning(true);
         }
     }
+    private _renderAllowanceToggle(): React.ReactNode {
+        return (
+            <AllowanceToggle
+                blockchain={this.props.blockchain}
+                refetchTokenStateAsync={this.props.refetchTokenStateAsync}
+            />
+        );
+    }
 }
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 2bc065b0f..f95bfb39d 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -22,7 +22,7 @@ import ReactTooltip = require('react-tooltip');
 import firstBy = require('thenby');
 import { Blockchain } from 'ts/blockchain';
 import { AssetPicker } from 'ts/components/generate_order/asset_picker';
-import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { SendButton } from 'ts/components/send_button';
 import { HelpTooltip } from 'ts/components/ui/help_tooltip';
 import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
@@ -362,13 +362,10 @@ export class TokenBalances extends React.Component<TokenBalancesProps, TokenBala
                 </TableRowColumn>
                 <TableRowColumn>
                     <AllowanceToggle
-                        networkId={this.props.networkId}
                         blockchain={this.props.blockchain}
-                        dispatcher={this.props.dispatcher}
                         token={token}
                         tokenState={tokenState}
                         onErrorOccurred={this._onErrorOccurred.bind(this)}
-                        userAddress={this.props.userAddress}
                         isDisabled={!tokenState.isLoaded}
                         refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this, token.address)}
                     />
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 37233930e..f8ec05790 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -23,7 +23,7 @@ import ReactTooltip = require('react-tooltip');
 import firstBy = require('thenby');
 
 import { Blockchain } from 'ts/blockchain';
-import { AllowanceToggle } from 'ts/components/inputs/allowance_toggle';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { Container } from 'ts/components/ui/container';
 import { IconButton } from 'ts/components/ui/icon_button';
 import { Identicon } from 'ts/components/ui/identicon';
@@ -428,15 +428,12 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         );
     }
     private _renderAllowanceToggle(config: AllowanceToggleConfig): React.ReactNode {
+        // TODO: Error handling
         return (
             <AllowanceToggle
-                networkId={this.props.networkId}
                 blockchain={this.props.blockchain}
-                dispatcher={this.props.dispatcher}
                 token={config.token}
                 tokenState={config.tokenState}
-                onErrorOccurred={_.noop} // TODO: Error handling
-                userAddress={this.props.userAddress}
                 isDisabled={!config.tokenState.isLoaded}
                 refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(config.token.address)}
             />
-- 
cgit v1.2.3


From 612cc96e417c1397e1874be22208864f12acbda3 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 6 Jun 2018 11:47:11 -0700
Subject: Add utilities for getting tokens from tokensByAddress

---
 .../website/ts/components/onboarding/portal_onboarding_flow.tsx     | 3 +++
 packages/website/ts/components/portal/portal.tsx                    | 6 +++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 65cb20733..55d89d61e 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -2,12 +2,14 @@ import * as _ from 'lodash';
 import * as React from 'react';
 
 import { BigNumber } from '@0xproject/utils';
+import { Blockchain } from 'ts/blockchain';
 import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
 import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 
 export interface PortalOnboardingFlowProps {
+    blockchain: Blockchain;
     stepIndex: number;
     isRunning: boolean;
     userAddress: string;
@@ -20,6 +22,7 @@ export interface PortalOnboardingFlowProps {
     trackedTokenStateByAddress: TokenStateByAddress;
     updateIsRunning: (isRunning: boolean) => void;
     updateOnboardingStep: (stepIndex: number) => void;
+    refetchTokenStateAsync: (tokenAddress: string) => Promise<void>;
 }
 
 export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index 90d45208f..02a58cbf3 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -235,7 +235,11 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 : TokenVisibility.TRACKED;
         return (
             <div style={styles.root}>
-                <PortalOnboardingFlow trackedTokenStateByAddress={this.state.trackedTokenStateByAddress} />
+                <PortalOnboardingFlow
+                    blockchain={this._blockchain}
+                    trackedTokenStateByAddress={this.state.trackedTokenStateByAddress}
+                    refetchTokenStateAsync={this._refetchTokenStateAsync.bind(this)}
+                />
                 <DocumentTitle title="0x Portal DApp" />
                 <TopBar
                     userAddress={this.props.userAddress}
-- 
cgit v1.2.3


From cbe5438a31a54a92a198b2cc5ad8a5d5feb033b4 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Wed, 6 Jun 2018 18:06:03 -0700
Subject: Render TokenAllowance

---
 .../onboarding/portal_onboarding_flow.tsx           | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 55d89d61e..78592c67f 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { BigNumber } from '@0xproject/utils';
 import { Blockchain } from 'ts/blockchain';
 import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
-import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
+import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 
@@ -83,7 +83,8 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             },
             {
                 target: '.weth-row',
-                content: 'Unlock your tokens for trading. You only need to do this once for each token.',
+                // content: <div> Unlock your tokens for trading. You only need to do this once for each token. {this._renderEthAllowanceToggle()}</div>,
+                content: 'blah',
                 placement: 'right',
                 continueButtonDisplay: 'disabled',
             },
@@ -135,9 +136,23 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             this.props.updateIsRunning(true);
         }
     }
-    private _renderAllowanceToggle(): React.ReactNode {
+    private _renderZrxAllowanceToggle(): React.ReactNode {
+        const zrxToken = utils.getZrxToken(this.props.tokenByAddress)
+        return this._renderAllowanceToggle(zrxToken);
+    }
+    private _renderEthAllowanceToggle(): React.ReactNode {
+        const ethToken = utils.getEthToken(this.props.tokenByAddress);
+        return this._renderAllowanceToggle(ethToken);
+    }
+    private _renderAllowanceToggle(token: Token): React.ReactNode {
+        if (!token) {
+            return null;
+        }
+        const tokenState = this.props.trackedTokenStateByAddress[token.address];
         return (
             <AllowanceToggle
+                token={token}
+                tokenState={tokenState}
                 blockchain={this.props.blockchain}
                 refetchTokenStateAsync={this.props.refetchTokenStateAsync}
             />
-- 
cgit v1.2.3


From 421e5682329d6047703be926d20a906f6fe2529e Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Tue, 12 Jun 2018 16:54:37 -0700
Subject: Implement allowance and final flow step

---
 .../ts/components/inputs/allowance_toggle.tsx      |  1 +
 .../onboarding/portal_onboarding_flow.tsx          | 50 ++++++++++++++++------
 packages/website/ts/components/token_balances.tsx  |  2 +-
 packages/website/ts/components/wallet/wallet.tsx   |  2 +-
 4 files changed, 39 insertions(+), 16 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/inputs/allowance_toggle.tsx b/packages/website/ts/components/inputs/allowance_toggle.tsx
index 3e61e1b8b..0dd2a5aa5 100644
--- a/packages/website/ts/components/inputs/allowance_toggle.tsx
+++ b/packages/website/ts/components/inputs/allowance_toggle.tsx
@@ -1,5 +1,6 @@
 import { constants as sharedConstants, 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';
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 78592c67f..0809f5e9c 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -4,9 +4,9 @@ import * as React from 'react';
 import { BigNumber } from '@0xproject/utils';
 import { Blockchain } from 'ts/blockchain';
 import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { utils } from 'ts/utils/utils';
-import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 
 export interface PortalOnboardingFlowProps {
     blockchain: Blockchain;
@@ -43,7 +43,6 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             />
         );
     }
-
     private _getSteps(): Step[] {
         const steps: Step[] = [
             {
@@ -83,23 +82,30 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             },
             {
                 target: '.weth-row',
-                // content: <div> Unlock your tokens for trading. You only need to do this once for each token. {this._renderEthAllowanceToggle()}</div>,
-                content: 'blah',
+                content: <div>
+                    Unlock your tokens for trading. You only need to do this once for each token.
+                    <div> ETH: {this._renderEthAllowanceToggle()}</div>
+                    <div> ZRX: {this._renderZrxAllowanceToggle()}</div>
+                </div>,
                 placement: 'right',
-                continueButtonDisplay: 'disabled',
+                continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
+            },
+            {
+                target: '.wallet',
+                content:
+                    'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.',
+                placement: 'right',
+                continueButtonDisplay: 'enabled',
             },
         ];
         return steps;
     }
-
     private _isAddressAvailable(): boolean {
         return !_.isEmpty(this.props.userAddress);
     }
-
     private _userHasVisibleEth(): boolean {
         return this.props.userEtherBalanceInWei > new BigNumber(0);
     }
-
     private _userHasVisibleWeth(): boolean {
         const ethToken = utils.getEthToken(this.props.tokenByAddress);
         if (!ethToken) {
@@ -108,15 +114,25 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         const wethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
         return wethTokenState.balance > new BigNumber(0);
     }
-
+    private _userHasAllowancesForWethAndZrx(): boolean {
+        const ethToken = utils.getEthToken(this.props.tokenByAddress);
+        const zrxToken = utils.getZrxToken(this.props.tokenByAddress);
+        if (ethToken && zrxToken) {
+            const ethTokenAllowance = this.props.trackedTokenStateByAddress[ethToken.address].allowance;
+            const zrxTokenAllowance = this.props.trackedTokenStateByAddress[zrxToken.address].allowance;
+            return ethTokenAllowance > new BigNumber(0) && zrxTokenAllowance > new BigNumber(0);
+        }
+        return false;
+    }
     private _overrideOnboardingStateIfShould(): void {
         this._autoStartOnboardingIfShould();
         this._adjustStepIfShould();
     }
 
     private _adjustStepIfShould(): void {
+        const stepIndex = this.props.stepIndex;
         if (this._isAddressAvailable()) {
-            if (this.props.stepIndex < 2) {
+            if (stepIndex < 2) {
                 this.props.updateOnboardingStep(2);
             }
             return;
@@ -126,10 +142,14 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             this.props.injectedProviderName,
         );
         if (isExternallyInjected) {
-            this.props.updateOnboardingStep(1);
+            if (stepIndex !== 1) {
+                this.props.updateOnboardingStep(1);
+            }
             return;
         }
-        this.props.updateOnboardingStep(0);
+        if (stepIndex !== 0) {
+            this.props.updateOnboardingStep(0);
+        }
     }
     private _autoStartOnboardingIfShould(): void {
         if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
@@ -137,7 +157,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         }
     }
     private _renderZrxAllowanceToggle(): React.ReactNode {
-        const zrxToken = utils.getZrxToken(this.props.tokenByAddress)
+        const zrxToken = utils.getZrxToken(this.props.tokenByAddress);
         return this._renderAllowanceToggle(zrxToken);
     }
     private _renderEthAllowanceToggle(): React.ReactNode {
@@ -153,8 +173,10 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             <AllowanceToggle
                 token={token}
                 tokenState={tokenState}
+                isDisabled={!tokenState.isLoaded}
                 blockchain={this.props.blockchain}
-                refetchTokenStateAsync={this.props.refetchTokenStateAsync}
+                // tslint:disable-next-line:jsx-no-lambda
+                refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(token.address)}
             />
         );
     }
diff --git a/packages/website/ts/components/token_balances.tsx b/packages/website/ts/components/token_balances.tsx
index 5edd8377a..7af80745c 100644
--- a/packages/website/ts/components/token_balances.tsx
+++ b/packages/website/ts/components/token_balances.tsx
@@ -20,11 +20,11 @@ import ReactTooltip = require('react-tooltip');
 import firstBy = require('thenby');
 import { Blockchain } from 'ts/blockchain';
 import { AssetPicker } from 'ts/components/generate_order/asset_picker';
-import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { SendButton } from 'ts/components/send_button';
 import { HelpTooltip } from 'ts/components/ui/help_tooltip';
 import { LifeCycleRaisedButton } from 'ts/components/ui/lifecycle_raised_button';
 import { TokenIcon } from 'ts/components/ui/token_icon';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import {
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 819f75ac4..4523b0ac9 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -13,7 +13,6 @@ import { Link } from 'react-router-dom';
 import firstBy = require('thenby');
 
 import { Blockchain } from 'ts/blockchain';
-import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { Container } from 'ts/components/ui/container';
 import { IconButton } from 'ts/components/ui/icon_button';
 import { Identicon } from 'ts/components/ui/identicon';
@@ -21,6 +20,7 @@ import { Island } from 'ts/components/ui/island';
 import { TokenIcon } from 'ts/components/ui/token_icon';
 import { WalletDisconnectedItem } from 'ts/components/wallet/wallet_disconnected_item';
 import { WrapEtherItem } from 'ts/components/wallet/wrap_ether_item';
+import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { colors } from 'ts/style/colors';
 import { zIndex } from 'ts/style/z_index';
-- 
cgit v1.2.3


From 7d6700582006d201f8757107b4cf286bb0ee5661 Mon Sep 17 00:00:00 2001
From: fragosti <francesco.agosti93@gmail.com>
Date: Thu, 14 Jun 2018 14:26:17 -0700
Subject: Run prettify

---
 .../ts/components/onboarding/portal_onboarding_flow.tsx   | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

(limited to 'packages/website/ts/components')

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 0809f5e9c..efb844cb5 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -82,18 +82,19 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             },
             {
                 target: '.weth-row',
-                content: <div>
-                    Unlock your tokens for trading. You only need to do this once for each token.
-                    <div> ETH: {this._renderEthAllowanceToggle()}</div>
-                    <div> ZRX: {this._renderZrxAllowanceToggle()}</div>
-                </div>,
+                content: (
+                    <div>
+                        Unlock your tokens for trading. You only need to do this once for each token.
+                        <div> ETH: {this._renderEthAllowanceToggle()}</div>
+                        <div> ZRX: {this._renderZrxAllowanceToggle()}</div>
+                    </div>
+                ),
                 placement: 'right',
                 continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
             },
             {
                 target: '.wallet',
-                content:
-                    'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.',
+                content: 'Congrats! Your wallet is now set up for trading. Use it on any relayer in the 0x ecosystem.',
                 placement: 'right',
                 continueButtonDisplay: 'enabled',
             },
-- 
cgit v1.2.3