Auto-show onboarding flow on first page view

1 files changed, 15 insertions, 2 deletions

diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index c80d1dd6e..ab9d58415 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -14,7 +14,8 @@ export interface PortalOnboardingFlowProps {
     providerType: ProviderType;
     injectedProviderName: string;
     blockchainIsLoaded: boolean;
-    onClose: () => void;
+    hasBeenSeen: boolean;
+    setIsRunning: (isRunning: boolean) => void;
     setOnboardingStep: (stepIndex: number) => void;
 }
 
@@ -42,6 +43,12 @@ const steps: Step[] = [
 ];
 
 export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
+    public componentDidMount(): void {
+        this._autoStartOnboardingIfShould();
+    }
+    public componentDidUpdate(): void {
+        this._autoStartOnboardingIfShould();
+    }
     public render(): React.ReactNode {
         return (
             <OnboardingFlow
@@ -49,7 +56,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
                 blacklistedStepIndices={this._getBlacklistedStepIndices()}
                 stepIndex={this.props.stepIndex}
                 isRunning={this.props.isRunning}
-                onClose={this.props.onClose}
+                onClose={this.props.setIsRunning.bind(this, false)}
                 setOnboardingStep={this.props.setOnboardingStep}
             />
         );
@@ -73,4 +80,10 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         }
         return twoAndOn;
     }
+
+    private _autoStartOnboardingIfShould(): void {
+        if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
+            this.props.setIsRunning(true);
+        }
+    }
 }