Remove blacklist concept

packages/website/ts/components/onboarding/onboarding_flow.tsx

@@ -12,11 +12,11 @@ export interface Step {
     title?: string;
     content: React.ReactNode;
     placement?: Placement;
+    hideBackButton?: boolean;
 }
 
 export interface OnboardingFlowProps {
     steps: Step[];
-    blacklistedStepIndices: number[];
     stepIndex: number;
     isRunning: boolean;
     onClose: () => void;
@@ -24,14 +24,6 @@ export interface OnboardingFlowProps {
 }
 
 export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
-    public componentDidMount(): void {
-        this._setOnboardingStepBasedOnBlacklist(this.props.stepIndex);
-    }
-
-    public componentWillReceiveProps(nextProps: OnboardingFlowProps): void {
-        this._setOnboardingStepBasedOnBlacklist(nextProps.stepIndex);
-    }
-
     public render(): React.ReactNode {
         if (!this.props.isRunning) {
             return null;
@@ -45,51 +37,6 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
         );
     }
 
-    private _setOnboardingStepBasedOnBlacklist(nextIndex: number): void {
-        const blacklistedSteps = this.props.blacklistedStepIndices;
-        const newStepIndex = this._adjustedStepBasedOnBlacklist(
-            this.props.stepIndex,
-            nextIndex,
-            this.props.steps.length,
-            blacklistedSteps,
-        );
-        if (newStepIndex !== nextIndex) {
-            this.props.setOnboardingStep(newStepIndex);
-        }
-    }
-
-    private _adjustedStepBasedOnBlacklist(
-        currentStep: number,
-        nextStep: number,
-        totalSteps: number,
-        blacklistedSteps: number[],
-    ): number {
-        if (!blacklistedSteps.includes(nextStep)) {
-            return nextStep;
-        }
-        let newStep = nextStep;
-        const op = nextStep >= currentStep ? _.add : _.subtract;
-        let didSearch = false;
-        while (blacklistedSteps.includes(newStep)) {
-            newStep = op(newStep, 1);
-            if (newStep < 0) {
-                if (didSearch) {
-                    break;
-                }
-                newStep = totalSteps - 1;
-                didSearch = true;
-            }
-            if (newStep >= totalSteps) {
-                if (didSearch) {
-                    break;
-                }
-                newStep = 0;
-                didSearch = true;
-            }
-        }
-        return newStep;
-    }
-
     private _getElementForStep(): Element {
         return document.querySelector(this._getCurrentStep().target);
     }
@@ -112,6 +59,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
                     title={step.title}
                     content={step.content}
                     isLastStep={isLastStep}
+                    hideBackButton={step.hideBackButton}
                     onClose={this.props.onClose}
                     onClickNext={this._goToNextStep.bind(this)}
                     onClickBack={this._goToPrevStep.bind(this)}

packages/website/ts/components/onboarding/onboarding_tooltip.tsx

@@ -11,6 +11,7 @@ export interface OnboardingTooltipProps {
     onClose: () => void;
     onClickNext: () => void;
     onClickBack: () => void;
+    hideBackButton?: boolean;
 }
 
 export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => (
@@ -19,7 +20,7 @@ export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps>
             <div className="flex flex-column">
                 {props.title}
                 {props.content}
-                <button onClick={props.onClickBack}>Back</button>
+                {!props.hideBackButton && <button onClick={props.onClickBack}>Back</button>}
                 <button onClick={props.onClickNext}>Skip</button>
                 <button onClick={props.onClose}>Close</button>
             </div>

packages/website/ts/components/onboarding/portal_onboarding_flow.tsx

@@ -35,6 +35,7 @@ const steps: Step[] = [
         content:
             'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
         placement: 'right',
+        hideBackButton: true,
     },
     {
         target: '.wallet',
@@ -45,16 +46,15 @@ const steps: Step[] = [
 
 export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
     public componentDidMount(): void {
-        this._autoStartOnboardingIfShould();
+        this._overrideOnboardingStateIfShould();
     }
     public componentDidUpdate(): void {
-        this._autoStartOnboardingIfShould();
+        this._overrideOnboardingStateIfShould();
     }
     public render(): React.ReactNode {
         return (
             <OnboardingFlow
                 steps={steps}
-                blacklistedStepIndices={this._getBlacklistedStepIndices()}
                 stepIndex={this.props.stepIndex}
                 isRunning={this.props.isRunning}
                 onClose={this.props.setIsRunning.bind(this, false)}
@@ -67,21 +67,28 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         return !_.isEmpty(this.props.userAddress);
     }
 
-    private _getBlacklistedStepIndices(): number[] {
+    private _overrideOnboardingStateIfShould(): void {
+        this._autoStartOnboardingIfShould();
+        this._adjustStepIfShould();
+    }
+
+    private _adjustStepIfShould(): void {
         if (this._isAddressAvailable()) {
-            return [0, 1];
+            if (this.props.stepIndex < 2) {
+                this.props.setOnboardingStep(2);
+            }
+            return;
         }
         const isExternallyInjected = utils.isExternallyInjected(
             this.props.providerType,
             this.props.injectedProviderName,
         );
-        const twoAndOn = _.range(2, steps.length);
         if (isExternallyInjected) {
-            return [0].concat(twoAndOn);
+            this.props.setOnboardingStep(1);
+            return;
         }
-        return twoAndOn;
+        this.props.setOnboardingStep(0);
     }
-
     private _autoStartOnboardingIfShould(): void {
         if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
             this.props.setIsRunning(true);

packages/website/ts/components/top_bar/provider_display.tsx

@@ -34,8 +34,6 @@ const styles: Styles = {
         backgroundColor: colors.white,
         borderRadius: ROOT_HEIGHT,
         boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`,
-        zIndex: zIndex.aboveOverlay,
-        position: 'relative',
     },
 };