diff options
4 files changed, 20 insertions, 66 deletions
diff --git a/packages/website/ts/components/onboarding/onboarding_flow.tsx b/packages/website/ts/components/onboarding/onboarding_flow.tsx index d53f63400..de734318e 100644 --- a/packages/website/ts/components/onboarding/onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/onboarding_flow.tsx @@ -12,11 +12,11 @@ export interface Step { title?: string; content: React.ReactNode; placement?: Placement; + hideBackButton?: boolean; } export interface OnboardingFlowProps { steps: Step[]; - blacklistedStepIndices: number[]; stepIndex: number; isRunning: boolean; onClose: () => void; @@ -24,14 +24,6 @@ export interface OnboardingFlowProps { } export class OnboardingFlow extends React.Component<OnboardingFlowProps> { - public componentDidMount(): void { - this._setOnboardingStepBasedOnBlacklist(this.props.stepIndex); - } - - public componentWillReceiveProps(nextProps: OnboardingFlowProps): void { - this._setOnboardingStepBasedOnBlacklist(nextProps.stepIndex); - } - public render(): React.ReactNode { if (!this.props.isRunning) { return null; @@ -45,51 +37,6 @@ 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, - ); - if (newStepIndex !== nextIndex) { - 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 _getElementForStep(): Element { return document.querySelector(this._getCurrentStep().target); } @@ -112,6 +59,7 @@ export class OnboardingFlow extends React.Component<OnboardingFlowProps> { title={step.title} content={step.content} isLastStep={isLastStep} + hideBackButton={step.hideBackButton} onClose={this.props.onClose} onClickNext={this._goToNextStep.bind(this)} onClickBack={this._goToPrevStep.bind(this)} diff --git a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx index 5e8102af0..41925a672 100644 --- a/packages/website/ts/components/onboarding/onboarding_tooltip.tsx +++ b/packages/website/ts/components/onboarding/onboarding_tooltip.tsx @@ -11,6 +11,7 @@ export interface OnboardingTooltipProps { onClose: () => void; onClickNext: () => void; onClickBack: () => void; + hideBackButton?: boolean; } export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> = (props: OnboardingTooltipProps) => ( @@ -19,7 +20,7 @@ export const OnboardingTooltip: React.StatelessComponent<OnboardingTooltipProps> <div className="flex flex-column"> {props.title} {props.content} - <button onClick={props.onClickBack}>Back</button> + {!props.hideBackButton && <button onClick={props.onClickBack}>Back</button>} <button onClick={props.onClickNext}>Skip</button> <button onClick={props.onClose}>Close</button> </div> diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 00d278ce0..25570b4a7 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -35,6 +35,7 @@ const steps: Step[] = [ content: 'In order to start trading on any 0x relayer in the 0x ecosystem, you need to complete two simple steps', placement: 'right', + hideBackButton: true, }, { target: '.wallet', @@ -45,16 +46,15 @@ const steps: Step[] = [ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> { public componentDidMount(): void { - this._autoStartOnboardingIfShould(); + this._overrideOnboardingStateIfShould(); } public componentDidUpdate(): void { - this._autoStartOnboardingIfShould(); + this._overrideOnboardingStateIfShould(); } public render(): React.ReactNode { return ( <OnboardingFlow steps={steps} - blacklistedStepIndices={this._getBlacklistedStepIndices()} stepIndex={this.props.stepIndex} isRunning={this.props.isRunning} onClose={this.props.setIsRunning.bind(this, false)} @@ -67,21 +67,28 @@ export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowPr return !_.isEmpty(this.props.userAddress); } - private _getBlacklistedStepIndices(): number[] { + private _overrideOnboardingStateIfShould(): void { + this._autoStartOnboardingIfShould(); + this._adjustStepIfShould(); + } + + private _adjustStepIfShould(): void { if (this._isAddressAvailable()) { - return [0, 1]; + if (this.props.stepIndex < 2) { + this.props.setOnboardingStep(2); + } + return; } const isExternallyInjected = utils.isExternallyInjected( this.props.providerType, this.props.injectedProviderName, ); - const twoAndOn = _.range(2, steps.length); if (isExternallyInjected) { - return [0].concat(twoAndOn); + this.props.setOnboardingStep(1); + return; } - return twoAndOn; + this.props.setOnboardingStep(0); } - private _autoStartOnboardingIfShould(): void { if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) { this.props.setIsRunning(true); diff --git a/packages/website/ts/components/top_bar/provider_display.tsx b/packages/website/ts/components/top_bar/provider_display.tsx index 82c95aa6d..679ec07dc 100644 --- a/packages/website/ts/components/top_bar/provider_display.tsx +++ b/packages/website/ts/components/top_bar/provider_display.tsx @@ -34,8 +34,6 @@ const styles: Styles = { backgroundColor: colors.white, borderRadius: ROOT_HEIGHT, boxShadow: `0px 4px 6px ${colors.walletBoxShadow}`, - zIndex: zIndex.aboveOverlay, - position: 'relative', }, }; |