aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-05-23 06:18:22 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-05-25 01:52:11 +0800
commitb4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7 (patch)
tree951170665292c24f2bd3720ad21200185d7e2e54 /packages/website
parent7af77d3eb0a73a0bd27898f5d3842c7dc7afef77 (diff)
downloaddexon-sol-tools-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar
dexon-sol-tools-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar.gz
dexon-sol-tools-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar.bz2
dexon-sol-tools-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar.lz
dexon-sol-tools-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar.xz
dexon-sol-tools-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.tar.zst
dexon-sol-tools-b4e1ce59f9d5500667228f4ab1a2c9c4ca087ca7.zip
Fix issue where modal can be out of sync with app state
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx24
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx17
-rw-r--r--packages/website/ts/components/portal/portal.tsx6
-rw-r--r--packages/website/ts/components/top_bar/top_bar.tsx2
-rw-r--r--packages/website/ts/containers/portal_onboarding_flow.ts16
-rw-r--r--packages/website/ts/utils/style.ts2
6 files changed, 51 insertions, 16 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 5bbf84e1b..1d98d5901 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/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);
+ }
+}
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 57b209fac..9bccd0a9c 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/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);
+ }
+}
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index a4e3a006e..a03731ec0 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/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';
diff --git a/packages/website/ts/components/top_bar/top_bar.tsx b/packages/website/ts/components/top_bar/top_bar.tsx
index 3f11f9779..db8e3cb82 100644
--- a/packages/website/ts/components/top_bar/top_bar.tsx
+++ b/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,
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
index 46c23f62f..7e4b3ef39 100644
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/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);
diff --git a/packages/website/ts/utils/style.ts b/packages/website/ts/utils/style.ts
index f3593b198..51b6e4eb6 100644
--- a/packages/website/ts/utils/style.ts
+++ b/packages/website/ts/utils/style.ts
@@ -1,4 +1,4 @@
export const zIndex = {
topBar: 1100,
overlay: 1101,
-}; \ No newline at end of file
+};