Fix onboarding persisting when changing routes

2 files changed, 12 insertions, 3 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..159fd27e6 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -1,5 +1,6 @@
 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';
@@ -15,7 +16,7 @@ import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
 import { ProviderType, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
 import { utils } from 'ts/utils/utils';
 
-export interface PortalOnboardingFlowProps {
+export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
     blockchain: Blockchain;
     stepIndex: number;
     isRunning: boolean;
@@ -32,9 +33,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();
@@ -209,3 +216,5 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
         );
     }
 }
+
+export const PortalOnboardingFlow = withRouter(PlainPortalOnboardingFlow);
diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 3f24d18c5..b6d22c99a 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -270,7 +270,7 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
                         <ListItem
                             primaryText={
                                 <div className="flex right" style={styles.manageYourWalletText}>
-                                    {'manage your wallet'}
+                                    manage your wallet
                                 </div>
                                 // https://github.com/palantir/tslint-react/issues/140
                                 // tslint:disable-next-line:jsx-curly-spacing