1 files changed, 28 insertions, 4 deletions
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 4283022e2..7e40192f6 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -1,5 +1,7 @@
+import { constants as sharedConstants } from '@0xproject/react-shared';
 import * as _ from 'lodash';
 import * as React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router';
 
 import { BigNumber } from '@0xproject/utils';
 import { Blockchain } from 'ts/blockchain';
@@ -13,9 +15,11 @@ import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wall
 import { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step';
 import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
+import { analytics } from 'ts/utils/analytics';
 import { utils } from 'ts/utils/utils';
 
-export interface PortalOnboardingFlowProps {
+export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
+    networkId: number;
     blockchain: Blockchain;
     stepIndex: number;
     isRunning: boolean;
@@ -32,9 +36,15 @@ export interface PortalOnboardingFlowProps {
     refetchTokenStateAsync: (tokenAddress: string) => Promise<void>;
 }
 
-export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
+class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
+    private _unlisten: () => void;
     public componentDidMount(): void {
         this._overrideOnboardingStateIfShould();
+        // If there is a route change, just close onboarding.
+        this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false));
+    }
+    public componentWillUnmount(): void {
+        this._unlisten();
     }
     public componentDidUpdate(): void {
         this._overrideOnboardingStateIfShould();
@@ -45,8 +55,8 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
                 steps={this._getSteps()}
                 stepIndex={this.props.stepIndex}
                 isRunning={this.props.isRunning}
-                onClose={this.props.updateIsRunning.bind(this, false)}
-                updateOnboardingStep={this.props.updateOnboardingStep}
+                onClose={this._closeOnboarding.bind(this)}
+                updateOnboardingStep={this._updateOnboardingStep.bind(this)}
             />
         );
     }
@@ -181,9 +191,21 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
     }
     private _autoStartOnboardingIfShould(): void {
         if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
+            const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
+            analytics.logEvent('Portal', 'Onboarding Started - Automatic', networkName, this.props.stepIndex);
             this.props.updateIsRunning(true);
         }
     }
+    private _updateOnboardingStep(stepIndex: number): void {
+        const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
+        this.props.updateOnboardingStep(stepIndex);
+        analytics.logEvent('Portal', 'Update Onboarding Step', networkName, stepIndex);
+    }
+    private _closeOnboarding(): void {
+        const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
+        this.props.updateIsRunning(false);
+        analytics.logEvent('Portal', 'Onboarding Closed', networkName, this.props.stepIndex);
+    }
     private _renderZrxAllowanceToggle(): React.ReactNode {
         const zrxToken = utils.getZrxToken(this.props.tokenByAddress);
         return this._renderAllowanceToggle(zrxToken);
@@ -209,3 +231,5 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         );
     }
 }
+
+export const PortalOnboardingFlow = withRouter(PlainPortalOnboardingFlow);