Fix issue where modal can be out of sync with app state

packages/typescript-typings/types/react-joyride/index.d.ts

@@ -14,11 +14,13 @@ declare module 'react-joyride' {
         zIndex?: number,
     }
     
+    export type Placement = "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "right" | "left";
+
     export interface Step {
         title?: string;
         content: React.ReactNode;
         target: string;
-        placement?: "top" | "top-left" | "top-right" | "bottom" | "bottom-left" | "bottom-right" | "right" | "left";
+        placement?: Placement;
         type?: "click" | "hover";
         isFixed?: boolean;
         allowClicksThruHole?: boolean;
@@ -29,7 +31,8 @@ declare module 'react-joyride' {
     
     export interface Props {
         steps?: Step[];
-        beaconComponent?: React.ComponentClass;
+        beaconComponent?: React.ReactNode;
+        disableOverlayClose?: boolean;
         run?: boolean;
         stepIndex?: number;
         callback?: (options: any) => void;

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

@@ -8,6 +8,8 @@ interface OnboardingFlowProps {
     steps: Step[];
     stepIndex?: number;
     isRunning: boolean;
+    onClose: () => void;
+    onChange?: (options: any) => void;
 }
 
 const style: StyleOptions = {
@@ -16,16 +18,28 @@ const style: StyleOptions = {
 
 // Wrapper around Joyride with defaults and styles set
 export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
+    public static defaultProps: Partial<OnboardingFlowProps> = {
+        onChange: _.noop,
+    };
+
     public render(): React.ReactNode {
-        const { steps, stepIndex, isRunning } = this.props;
         return (
             <Joyride
-                run={isRunning}
+                run={this.props.isRunning}
                 debug={true}
-                steps={steps}
-                stepIndex={stepIndex}
+                steps={this.props.steps}
+                stepIndex={this.props.stepIndex}
                 styles={{ options: style }}
+                callback={this._handleChange.bind(this)}
             />
         );
     }
-};
+
+    private _handleChange(options: any): void {
+        switch (options.action) {
+            case 'close':
+                this.props.onClose();
+        }
+        this.props.onChange(options);
+    }
+}

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

@@ -1,29 +1,36 @@
 import * as React from 'react';
+import { Step } from 'react-joyride';
 
 import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
 
 export interface PortalOnboardingFlowProps {
     stepIndex: number;
     isRunning: boolean;
+    setOnboardingShowing: (isShowing: boolean) => void;
 }
 
-const steps = [
+const steps: Step[] = [
     {
         target: '.wallet',
-        content: 'Hey!',
+        content: 'You are onboarding right now!',
         placement: 'right',
         disableBeacon: true,
     },
 ];
 
-export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlow> {
+export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
     public render(): React.ReactNode {
         return (
             <OnboardingFlow
                 steps={steps}
                 stepIndex={this.props.stepIndex}
                 isRunning={this.props.isRunning}
+                onClose={this._handleClose.bind(this)}
             />
-        )
+        );
     }
-};
+
+    private _handleClose(): void {
+        this.props.setOnboardingShowing(false);
+    }
+}

packages/website/ts/components/portal/portal.tsx

@@ -19,13 +19,13 @@ import { TextHeader } from 'ts/components/portal/text_header';
 import { RelayerIndex } from 'ts/components/relayer_index/relayer_index';
 import { TokenBalances } from 'ts/components/token_balances';
 import { TopBar, TopBarDisplayType } from 'ts/components/top_bar/top_bar';
-import { PortalOnboardingFlow } from 'ts/containers/portal_onboarding_flow';
-import { Island } from 'ts/components/ui/island';
 import { TradeHistory } from 'ts/components/trade_history/trade_history';
-import { FlashMessage } from 'ts/components/ui/flash_message';
 import { Container } from 'ts/components/ui/container';
+import { FlashMessage } from 'ts/components/ui/flash_message';
+import { Island } from 'ts/components/ui/island';
 import { Wallet } from 'ts/components/wallet/wallet';
 import { GenerateOrderForm } from 'ts/containers/generate_order_form';
+import { PortalOnboardingFlow } from 'ts/containers/portal_onboarding_flow';
 import { localStorage } from 'ts/local_storage/local_storage';
 import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
 import { FullscreenMessage } from 'ts/pages/fullscreen_message';

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

@@ -18,9 +18,9 @@ import { Identicon } from 'ts/components/ui/identicon';
 import { Dispatcher } from 'ts/redux/dispatcher';
 import { Deco, Key, ProviderType, WebsiteLegacyPaths, WebsitePaths } from 'ts/types';
 import { constants } from 'ts/utils/constants';
+import { zIndex } from 'ts/utils/style';
 import { Translate } from 'ts/utils/translate';
 import { utils } from 'ts/utils/utils';
-import { zIndex } from 'ts/utils/style';
 
 export enum TopBarDisplayType {
     Default,

packages/website/ts/containers/portal_onboarding_flow.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { connect } from 'react-redux';
 import { Dispatch } from 'redux';
+import { ActionTypes } from 'ts/types';
 
 import {
     PortalOnboardingFlow as PortalOnboardingFlowComponent,
@@ -13,6 +14,10 @@ interface ConnectedState {
     isRunning: boolean;
 }
 
+interface ConnectedDispatch {
+    setOnboardingShowing: (isShowing: boolean) => void;
+}
+
 const mapStateToProps = (state: State, ownProps: PortalOnboardingFlowComponentProps): ConnectedState => {
     return {
         stepIndex: state.portalOnboardingStep,
@@ -20,4 +25,13 @@ const mapStateToProps = (state: State, ownProps: PortalOnboardingFlowComponentPr
     };
 };
 
-export const PortalOnboardingFlow: React.ComponentClass<PortalOnboardingFlowComponentProps> = connect(mapStateToProps)(PortalOnboardingFlowComponent);
+const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
+    setOnboardingShowing: (isShowing: boolean): void => {
+        dispatch({
+            type: ActionTypes.UpdatePortalOnboardingShowing,
+            data: isShowing,
+        });
+    },
+});
+
+export const PortalOnboardingFlow: React.ComponentClass<PortalOnboardingFlowComponentProps> = connect(mapStateToProps, mapDispatchToProps)(PortalOnboardingFlowComponent);