aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/onboarding
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/onboarding')
-rw-r--r--packages/website/ts/components/onboarding/onboarding_flow.tsx7
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx60
2 files changed, 57 insertions, 10 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx
index 621d14260..22fc71481 100644
--- a/packages/website/ts/components/onboarding/onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx
@@ -17,9 +17,16 @@ 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 render(): React.ReactNode {
return (
<Joyride
+ ref={this._joyrideRef}
run={this.props.isRunning}
debug={true}
steps={this.props.steps}
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 11684aaee..7abfdabda 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -1,32 +1,72 @@
+import * as _ from 'lodash';
import * as React from 'react';
import { Step } from 'react-joyride';
import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow';
+import { ProviderType } from 'ts/types';
+import { utils } from 'ts/utils/utils';
export interface PortalOnboardingFlowProps {
stepIndex: number;
isRunning: boolean;
onClose: () => void;
+ userAddress: string;
+ providerType: ProviderType;
+ injectedProviderName: string;
+ blockchainIsLoaded: boolean;
+ setOnboardingStep: (stepIndex: number) => void;
}
-const steps: Step[] = [
- {
- target: '.wallet',
- content: 'You are onboarding right now!',
- placement: 'right',
- disableBeacon: true,
- },
-];
-
export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
public render(): React.ReactNode {
return (
<OnboardingFlow
- steps={steps}
+ steps={this._getSteps()}
stepIndex={this.props.stepIndex}
isRunning={this.props.isRunning}
onClose={this.props.onClose}
/>
);
}
+
+ private _isAddressAvailable(): boolean {
+ 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;
+ if (this._isAddressAvailable()) {
+ return restOfSteps;
+ }
+ const isExternallyInjected = utils.isExternallyInjected(
+ this.props.providerType,
+ this.props.injectedProviderName,
+ );
+ if (isExternallyInjected) {
+ return [lockedMetamaskStep, ...restOfSteps];
+ }
+ return allSteps;
+ }
}