Implement allowance and final flow step

1 files changed, 36 insertions, 14 deletions

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)}
             />
         );
     }