Wrap AllowanceToggle in redux container

1 files changed, 15 insertions, 0 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..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}
+            />
+        );
+    }
 }