Allow you to continue the onboarding flow once youve installed metamask and refreshed the page

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

@@ -8,11 +8,12 @@ export interface InstallWalletOnboardingStepProps {}
 
 export const InstallWalletOnboardingStep: React.StatelessComponent<InstallWalletOnboardingStepProps> = () => (
     <div className="flex items-center flex-column">
-        <Container marginTop="15px" marginBottom="15px">
-            <ActionAccountBalanceWallet style={{ width: '30px', height: '30px' }} color={colors.orange} />
-        </Container>
         <Text>
             Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps.
         </Text>
+        <Container marginTop="15px" marginBottom="15px">
+            <ActionAccountBalanceWallet style={{ width: '50px', height: '50px' }} color={colors.orange} />
+        </Container>
+        <Text>Please refresh the page once you've done this to continue!</Text>
     </div>
 );

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

@@ -28,7 +28,7 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
     stepIndex: number;
     isRunning: boolean;
     userAddress: string;
-    hasBeenSeen: boolean;
+    hasBeenClosed: boolean;
     providerType: ProviderType;
     injectedProviderName: string;
     blockchainIsLoaded: boolean;
@@ -44,7 +44,8 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
 class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
     private _unlisten: () => void;
     public componentDidMount(): void {
-        this._overrideOnboardingStateIfShould();
+        this._autoStartOnboardingIfShould();
+        this._adjustStepIfShould();
         // If there is a route change, just close onboarding.
         this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false));
     }
@@ -52,7 +53,7 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         this._unlisten();
     }
     public componentDidUpdate(): void {
-        this._overrideOnboardingStateIfShould();
+        this._adjustStepIfShould();
     }
     public render(): React.ReactNode {
         return (
@@ -189,10 +190,6 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         }
         return false;
     }
-    private _overrideOnboardingStateIfShould(): void {
-        this._autoStartOnboardingIfShould();
-        this._adjustStepIfShould();
-    }
     private _adjustStepIfShould(): void {
         const stepIndex = this.props.stepIndex;
         if (this._isAddressAvailable()) {
@@ -216,7 +213,10 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
         }
     }
     private _autoStartOnboardingIfShould(): void {
-        if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
+        if (
+            (this.props.stepIndex === 0 && !this.props.isRunning) ||
+            (!this.props.isRunning && !this.props.hasBeenClosed && 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);

packages/website/ts/containers/portal_onboarding_flow.ts

@@ -19,7 +19,7 @@ interface ConnectedState {
     stepIndex: number;
     isRunning: boolean;
     userAddress: string;
-    hasBeenSeen: boolean;
+    hasBeenClosed: boolean;
     providerType: ProviderType;
     injectedProviderName: string;
     blockchainIsLoaded: boolean;
@@ -43,7 +43,7 @@ const mapStateToProps = (state: State, _ownProps: PortalOnboardingFlowProps): Co
     blockchainIsLoaded: state.blockchainIsLoaded,
     userEtherBalanceInWei: state.userEtherBalanceInWei,
     tokenByAddress: state.tokenByAddress,
-    hasBeenSeen: state.hasPortalOnboardingBeenSeen,
+    hasBeenClosed: state.hasPortalOnboardingBeenClosed,
     screenWidth: state.screenWidth,
 });
 

packages/website/ts/redux/reducer.ts

@@ -42,7 +42,7 @@ export interface State {
     userEtherBalanceInWei?: BigNumber;
     portalOnboardingStep: number;
     isPortalOnboardingShowing: boolean;
-    hasPortalOnboardingBeenSeen: boolean;
+    hasPortalOnboardingBeenClosed: boolean;
     // Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
     userSuppliedOrderCache: Order;
 
@@ -85,7 +85,7 @@ export const INITIAL_STATE: State = {
     userSuppliedOrderCache: undefined,
     portalOnboardingStep: 0,
     isPortalOnboardingShowing: false,
-    hasPortalOnboardingBeenSeen: false,
+    hasPortalOnboardingBeenClosed: false,
     // Docs
     docsVersion: DEFAULT_DOCS_VERSION,
     availableDocVersions: [DEFAULT_DOCS_VERSION],
@@ -311,7 +311,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
             return {
                 ...state,
                 isPortalOnboardingShowing,
-                hasPortalOnboardingBeenSeen: true,
+                hasPortalOnboardingBeenClosed: !isPortalOnboardingShowing ? true : state.hasPortalOnboardingBeenClosed,
                 // always start onboarding from the beginning
                 portalOnboardingStep: 0,
             };

packages/website/ts/redux/store.ts

@@ -15,7 +15,7 @@ store.subscribe(
     _.throttle(() => {
         // Persisted state
         stateStorage.saveState({
-            hasPortalOnboardingBeenSeen: store.getState().hasPortalOnboardingBeenSeen,
+            hasPortalOnboardingBeenClosed: store.getState().hasPortalOnboardingBeenClosed,
         });
     }, ONE_SECOND),
 );