1 files changed, 34 insertions, 29 deletions

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index feaa9c997..c80d1dd6e 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash';
 import * as React from 'react';
 import { Step } from 'react-joyride';
 
+import { black } from 'material-ui/styles/colors';
 import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
 import { ProviderType } from 'ts/types';
 import { utils } from 'ts/utils/utils';
@@ -9,21 +10,47 @@ import { utils } from 'ts/utils/utils';
 export interface PortalOnboardingFlowProps {
     stepIndex: number;
     isRunning: boolean;
-    onClose: () => void;
     userAddress: string;
     providerType: ProviderType;
     injectedProviderName: string;
     blockchainIsLoaded: boolean;
+    onClose: () => void;
+    setOnboardingStep: (stepIndex: number) => void;
 }
 
+const steps: Step[] = [
+    {
+        target: '.wallet',
+        content:
+            'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
+        placement: 'right',
+        disableBeacon: true,
+    },
+    {
+        target: '.wallet',
+        content: 'Unlock your metamask extension to begin',
+        placement: 'right',
+        disableBeacon: true,
+    },
+    {
+        target: '.wallet',
+        content:
+            'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
+        placement: 'right',
+        disableBeacon: true,
+    },
+];
+
 export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
     public render(): React.ReactNode {
         return (
             <OnboardingFlow
-                steps={this._getSteps()}
+                steps={steps}
+                blacklistedStepIndices={this._getBlacklistedStepIndices()}
                 stepIndex={this.props.stepIndex}
                 isRunning={this.props.isRunning}
                 onClose={this.props.onClose}
+                setOnboardingStep={this.props.setOnboardingStep}
             />
         );
     }
@@ -32,40 +59,18 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         return !_.isEmpty(this.props.userAddress);
     }
 
-    private _getSteps(): Step[] {
-        const allSteps: Step[] = [
-            {
-                target: '.wallet',
-                content:
-                    'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
-                placement: 'right',
-                disableBeacon: true,
-            },
-            {
-                target: '.wallet',
-                content: 'Unlock your metamask extension to begin',
-                placement: 'right',
-                disableBeacon: true,
-            },
-            {
-                target: '.wallet',
-                content:
-                    'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
-                placement: 'right',
-                disableBeacon: true,
-            },
-        ];
-        const [noMetamaskStep, lockedMetamaskStep, ...restOfSteps] = allSteps;
+    private _getBlacklistedStepIndices(): number[] {
         if (this._isAddressAvailable()) {
-            return restOfSteps;
+            return [0, 1];
         }
         const isExternallyInjected = utils.isExternallyInjected(
             this.props.providerType,
             this.props.injectedProviderName,
         );
+        const twoAndOn = _.range(2, steps.length);
         if (isExternallyInjected) {
-            return [lockedMetamaskStep, ...restOfSteps];
+            return [0].concat(twoAndOn);
         }
-        return allSteps;
+        return twoAndOn;
     }
 }