aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website
diff options
context:
space:
mode:
authorfragosti <francesco.agosti93@gmail.com>2018-05-26 02:36:07 +0800
committerfragosti <francesco.agosti93@gmail.com>2018-05-26 03:03:18 +0800
commite575323c6013b89873b698a7f34da135a4b2c51f (patch)
tree43ff4bed7fdf007936fc1ba3ee3d113f884dd842 /packages/website
parent809ac3340cb477d4b46e24d4bad028568beeec06 (diff)
downloaddexon-sol-tools-e575323c6013b89873b698a7f34da135a4b2c51f.tar.gz
dexon-sol-tools-e575323c6013b89873b698a7f34da135a4b2c51f.tar.zst
dexon-sol-tools-e575323c6013b89873b698a7f34da135a4b2c51f.zip
Auto-show onboarding flow on first page view
Diffstat (limited to 'packages/website')
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx17
-rw-r--r--packages/website/ts/containers/portal_onboarding_flow.ts8
-rw-r--r--packages/website/ts/index.tsx16
-rw-r--r--packages/website/ts/local_storage/local_storage.ts14
-rw-r--r--packages/website/ts/redux/reducer.ts5
5 files changed, 53 insertions, 7 deletions
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index c80d1dd6e..ab9d58415 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -14,7 +14,8 @@ export interface PortalOnboardingFlowProps {
providerType: ProviderType;
injectedProviderName: string;
blockchainIsLoaded: boolean;
- onClose: () => void;
+ hasBeenSeen: boolean;
+ setIsRunning: (isRunning: boolean) => void;
setOnboardingStep: (stepIndex: number) => void;
}
@@ -42,6 +43,12 @@ const steps: Step[] = [
];
export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
+ public componentDidMount(): void {
+ this._autoStartOnboardingIfShould();
+ }
+ public componentDidUpdate(): void {
+ this._autoStartOnboardingIfShould();
+ }
public render(): React.ReactNode {
return (
<OnboardingFlow
@@ -49,7 +56,7 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
blacklistedStepIndices={this._getBlacklistedStepIndices()}
stepIndex={this.props.stepIndex}
isRunning={this.props.isRunning}
- onClose={this.props.onClose}
+ onClose={this.props.setIsRunning.bind(this, false)}
setOnboardingStep={this.props.setOnboardingStep}
/>
);
@@ -73,4 +80,10 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
}
return twoAndOn;
}
+
+ private _autoStartOnboardingIfShould(): void {
+ if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
+ this.props.setIsRunning(true);
+ }
+ }
}
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
index 3db8762ec..a7bd86ab1 100644
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -15,10 +15,11 @@ interface ConnectedState {
providerType: ProviderType;
injectedProviderName: string;
blockchainIsLoaded: boolean;
+ hasBeenSeen: boolean;
}
interface ConnectedDispatch {
- onClose: () => void;
+ setIsRunning: (isRunning: boolean) => void;
setOnboardingStep: (stepIndex: number) => void;
}
@@ -29,13 +30,14 @@ const mapStateToProps = (state: State): ConnectedState => ({
providerType: state.providerType,
injectedProviderName: state.injectedProviderName,
blockchainIsLoaded: state.blockchainIsLoaded,
+ hasBeenSeen: state.hasPortalOnboardingBeenSeen,
});
const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
- onClose: (): void => {
+ setIsRunning: (isRunning: boolean): void => {
dispatch({
type: ActionTypes.UpdatePortalOnboardingShowing,
- data: false,
+ data: isRunning,
});
},
setOnboardingStep: (stepIndex: number): void => {
diff --git a/packages/website/ts/index.tsx b/packages/website/ts/index.tsx
index 4fe81a91e..5ab03c07c 100644
--- a/packages/website/ts/index.tsx
+++ b/packages/website/ts/index.tsx
@@ -1,4 +1,5 @@
// Polyfills
+import * as _ from 'lodash';
import { MuiThemeProvider } from 'material-ui/styles';
import * as React from 'react';
import { render } from 'react-dom';
@@ -14,6 +15,7 @@ import { Landing } from 'ts/containers/landing';
import { NotFound } from 'ts/containers/not_found';
import { Wiki } from 'ts/containers/wiki';
import { createLazyComponent } from 'ts/lazy_component';
+import { stateStorage } from 'ts/local_storage/state_storage';
import { trackedTokenStorage } from 'ts/local_storage/tracked_token_storage';
import { tradeHistoryStorage } from 'ts/local_storage/trade_history_storage';
import { reducer, State } from 'ts/redux/reducer';
@@ -75,7 +77,19 @@ const LazyOrderUtilsDocumentation = createLazyComponent('Documentation', async (
analytics.init();
// tslint:disable-next-line:no-floating-promises
analytics.logProviderAsync((window as any).web3);
-const store: ReduxStore<State> = createStore(reducer, devToolsEnhancer({ name: '0x Website Redux Store' }));
+const store: ReduxStore<State> = createStore(
+ reducer,
+ stateStorage.getPersistedDefaultState(),
+ devToolsEnhancer({ name: '0x Website Redux Store' }),
+);
+store.subscribe(
+ _.throttle(() => {
+ stateStorage.saveState({
+ hasPortalOnboardingBeenSeen: store.getState().hasPortalOnboardingBeenSeen,
+ });
+ }, 1000),
+);
+
render(
<Router>
<div>
diff --git a/packages/website/ts/local_storage/local_storage.ts b/packages/website/ts/local_storage/local_storage.ts
index 20a533a91..569e262fc 100644
--- a/packages/website/ts/local_storage/local_storage.ts
+++ b/packages/website/ts/local_storage/local_storage.ts
@@ -26,6 +26,20 @@ export const localStorage = {
}
window.localStorage.removeItem(key);
},
+ getObject(key: string): object {
+ const item = localStorage.getItemIfExists(key);
+ if (item) {
+ try {
+ return JSON.parse(item);
+ } catch (err) {
+ return undefined;
+ }
+ }
+ return undefined;
+ },
+ setObject(key: string, value: object): void {
+ localStorage.setItem(key, JSON.stringify(value));
+ },
getAllKeys(): string[] {
if (!this.doesExist) {
return [];
diff --git a/packages/website/ts/redux/reducer.ts b/packages/website/ts/redux/reducer.ts
index e61345c87..5c57792f7 100644
--- a/packages/website/ts/redux/reducer.ts
+++ b/packages/website/ts/redux/reducer.ts
@@ -42,6 +42,7 @@ export interface State {
userEtherBalanceInWei: BigNumber;
portalOnboardingStep: number;
isPortalOnboardingShowing: boolean;
+ hasPortalOnboardingBeenSeen: boolean;
// Note: cache of supplied orderJSON in fill order step. Do not use for anything else.
userSuppliedOrderCache: Order;
@@ -56,7 +57,7 @@ export interface State {
translate: Translate;
}
-const INITIAL_STATE: State = {
+export const INITIAL_STATE: State = {
// Portal
blockchainErr: BlockchainErrs.NoError,
blockchainIsLoaded: false,
@@ -84,6 +85,7 @@ const INITIAL_STATE: State = {
userSuppliedOrderCache: undefined,
portalOnboardingStep: 0,
isPortalOnboardingShowing: false,
+ hasPortalOnboardingBeenSeen: false,
// Docs
docsVersion: DEFAULT_DOCS_VERSION,
availableDocVersions: [DEFAULT_DOCS_VERSION],
@@ -309,6 +311,7 @@ export function reducer(state: State = INITIAL_STATE, action: Action): State {
return {
...state,
isPortalOnboardingShowing,
+ hasPortalOnboardingBeenSeen: true,
};
}