aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx56
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx63
-rw-r--r--packages/website/ts/containers/portal_onboarding_flow.ts7
3 files changed, 92 insertions, 34 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 22fc71481..0cb640f8f 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -6,9 +6,11 @@ import { zIndex } from 'ts/utils/style';
export interface OnboardingFlowProps {
steps: Step[];
+ blacklistedStepIndices: number[];
stepIndex: number;
isRunning: boolean;
onClose: () => void;
+ setOnboardingStep: (stepIndex: number) => void;
}
const joyrideStyleOptions: StyleOptions = {
@@ -17,16 +19,17 @@ const joyrideStyleOptions: StyleOptions = {
// Wrapper around Joyride with defaults and styles set
export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
- private _joyrideRef: React.RefObject<Joyride>;
- constructor(props: OnboardingFlowProps) {
- super(props);
- this._joyrideRef = React.createRef();
+ public componentDidMount(): void {
+ this._setOnboardingStepBasedOnBlacklist(this.props.stepIndex);
+ }
+
+ public componentWillReceiveProps(nextProps: OnboardingFlowProps): void {
+ this._setOnboardingStepBasedOnBlacklist(nextProps.stepIndex);
}
public render(): React.ReactNode {
return (
<Joyride
- ref={this._joyrideRef}
run={this.props.isRunning}
debug={true}
steps={this.props.steps}
@@ -37,6 +40,49 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> {
);
}
+ private _setOnboardingStepBasedOnBlacklist(nextIndex: number): void {
+ const blacklistedSteps = this.props.blacklistedStepIndices;
+ const newStepIndex = this._adjustedStepBasedOnBlacklist(
+ this.props.stepIndex,
+ nextIndex,
+ this.props.steps.length,
+ blacklistedSteps,
+ );
+ this.props.setOnboardingStep(newStepIndex);
+ }
+
+ private _adjustedStepBasedOnBlacklist(
+ currentStep: number,
+ nextStep: number,
+ totalSteps: number,
+ blacklistedSteps: number[],
+ ): number {
+ if (!blacklistedSteps.includes(nextStep)) {
+ return nextStep;
+ }
+ let newStep = nextStep;
+ const op = nextStep >= currentStep ? _.add : _.subtract;
+ let didSearch = false;
+ while (blacklistedSteps.includes(newStep)) {
+ newStep = op(newStep, 1);
+ if (newStep < 0) {
+ if (didSearch) {
+ break;
+ }
+ newStep = totalSteps - 1;
+ didSearch = true;
+ }
+ if (newStep >= totalSteps) {
+ if (didSearch) {
+ break;
+ }
+ newStep = 0;
+ didSearch = true;
+ }
+ }
+ return newStep;
+ }
+
private _handleChange(data: CallbackData): void {
switch (data.action) {
case 'close':
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index feaa9c997..c80d1dd6e 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -2,6 +2,7 @@ import * as _ from 'lodash';
import * as React from 'react';
import { Step } from 'react-joyride';
+import { black } from 'material-ui/styles/colors';
import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
import { ProviderType } from 'ts/types';
import { utils } from 'ts/utils/utils';
@@ -9,21 +10,47 @@ import { utils } from 'ts/utils/utils';
export interface PortalOnboardingFlowProps {
stepIndex: number;
isRunning: boolean;
- onClose: () => void;
userAddress: string;
providerType: ProviderType;
injectedProviderName: string;
blockchainIsLoaded: boolean;
+ onClose: () => void;
+ setOnboardingStep: (stepIndex: number) => void;
}
+const steps: Step[] = [
+ {
+ target: '.wallet',
+ content:
+ 'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
+ placement: 'right',
+ disableBeacon: true,
+ },
+ {
+ target: '.wallet',
+ content: 'Unlock your metamask extension to begin',
+ placement: 'right',
+ disableBeacon: true,
+ },
+ {
+ target: '.wallet',
+ content:
+ 'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
+ placement: 'right',
+ disableBeacon: true,
+ },
+];
+
export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
public render(): React.ReactNode {
return (
<OnboardingFlow
- steps={this._getSteps()}
+ steps={steps}
+ blacklistedStepIndices={this._getBlacklistedStepIndices()}
stepIndex={this.props.stepIndex}
isRunning={this.props.isRunning}
onClose={this.props.onClose}
+ setOnboardingStep={this.props.setOnboardingStep}
/>
);
}
@@ -32,40 +59,18 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr
return !_.isEmpty(this.props.userAddress);
}
- private _getSteps(): Step[] {
- const allSteps: Step[] = [
- {
- target: '.wallet',
- content:
- 'Before you begin, you need to connect to a wallet. This will be used across all 0x relayers and dApps',
- placement: 'right',
- disableBeacon: true,
- },
- {
- target: '.wallet',
- content: 'Unlock your metamask extension to begin',
- placement: 'right',
- disableBeacon: true,
- },
- {
- target: '.wallet',
- content:
- 'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps',
- placement: 'right',
- disableBeacon: true,
- },
- ];
- const [noMetamaskStep, lockedMetamaskStep, ...restOfSteps] = allSteps;
+ private _getBlacklistedStepIndices(): number[] {
if (this._isAddressAvailable()) {
- return restOfSteps;
+ return [0, 1];
}
const isExternallyInjected = utils.isExternallyInjected(
this.props.providerType,
this.props.injectedProviderName,
);
+ const twoAndOn = _.range(2, steps.length);
if (isExternallyInjected) {
- return [lockedMetamaskStep, ...restOfSteps];
+ return [0].concat(twoAndOn);
}
- return allSteps;
+ return twoAndOn;
}
}
diff --git a/packages/website/ts/containers/portal_onboarding_flow.ts b/packages/website/ts/containers/portal_onboarding_flow.ts
index 3ce91b7b3..3db8762ec 100644
--- a/packages/website/ts/containers/portal_onboarding_flow.ts
+++ b/packages/website/ts/containers/portal_onboarding_flow.ts
@@ -19,6 +19,7 @@ interface ConnectedState {
interface ConnectedDispatch {
onClose: () => void;
+ setOnboardingStep: (stepIndex: number) => void;
}
const mapStateToProps = (state: State): ConnectedState => ({
@@ -37,6 +38,12 @@ const mapDispatchToProps = (dispatch: Dispatch<State>): ConnectedDispatch => ({
data: false,
});
},
+ setOnboardingStep: (stepIndex: number): void => {
+ dispatch({
+ type: ActionTypes.UpdatePortalOnboardingStep,
+ data: stepIndex,
+ });
+ },
});
export const PortalOnboardingFlow: React.ComponentClass<PortalOnboardingFlowProps> = connect(