1 files changed, 34 insertions, 1 deletions
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index bf52684d7..78592c67f 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -2,11 +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 { 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;
     stepIndex: number;
     isRunning: boolean;
     userAddress: string;
@@ -19,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> {
@@ -77,6 +81,13 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
                 placement: 'right',
                 continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
             },
+            {
+                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',
+                placement: 'right',
+                continueButtonDisplay: 'disabled',
+            },
         ];
         return steps;
     }
@@ -125,4 +136,26 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
             this.props.updateIsRunning(true);
         }
     }
+    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}
+            />
+        );
+    }
 }