diff options
Diffstat (limited to 'packages/website/ts/components/onboarding/portal_onboarding_flow.tsx')
-rw-r--r-- | packages/website/ts/components/onboarding/portal_onboarding_flow.tsx | 119 |
1 files changed, 105 insertions, 14 deletions
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx index 11684aaee..edaeb3736 100644 --- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx +++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx @@ -1,32 +1,123 @@ +import * as _ from 'lodash'; import * as React from 'react'; -import { Step } from 'react-joyride'; -import { OnboardingFlow } from 'ts/components/onboarding/onboarding_flow'; +import { BigNumber } from '@0xproject/utils'; +import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow'; +import { ProviderType, TokenByAddress } from 'ts/types'; +import { utils } from 'ts/utils/utils'; export interface PortalOnboardingFlowProps { stepIndex: number; isRunning: boolean; - onClose: () => void; + userAddress: string; + hasBeenSeen: boolean; + providerType: ProviderType; + injectedProviderName: string; + blockchainIsLoaded: boolean; + userEthBalanceInWei: BigNumber; + tokenByAddress: TokenByAddress; + updateIsRunning: (isRunning: boolean) => void; + updateOnboardingStep: (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 componentDidMount(): void { + this._overrideOnboardingStateIfShould(); + } + public componentDidUpdate(): void { + this._overrideOnboardingStateIfShould(); + } public render(): React.ReactNode { return ( <OnboardingFlow - steps={steps} + steps={this._getSteps()} stepIndex={this.props.stepIndex} isRunning={this.props.isRunning} - onClose={this.props.onClose} + onClose={this.props.updateIsRunning.bind(this, false)} + updateOnboardingStep={this.props.updateOnboardingStep} /> ); } + + private _getSteps(): Step[] { + 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', + hideBackButton: true, + hideNextButton: true, + }, + { + target: '.wallet', + content: 'Unlock your metamask extension to begin', + placement: 'right', + hideBackButton: true, + hideNextButton: 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', + hideBackButton: true, + continueButtonDisplay: 'enabled', + }, + { + target: '.eth-row', + content: 'Before you begin you will need to send some ETH to your metamask wallet', + placement: 'right', + continueButtonDisplay: this._userHasEth() ? 'enabled' : 'disabled', + }, + { + target: '.weth-row', + content: 'You need to convert some of your ETH into tradeable Wrapped ETH (WETH)', + placement: 'right', + continueButtonDisplay: this._userHasWeth() ? 'enabled' : 'disabled', + }, + ]; + return steps; + } + + private _isAddressAvailable(): boolean { + return !_.isEmpty(this.props.userAddress); + } + + private _userHasEth(): boolean { + return this.props.userEthBalanceInWei > new BigNumber(0); + } + + private _userHasWeth(): boolean { + // TODO: https://app.asana.com/0/681385331277907/690722374136933 + return false; + } + + private _overrideOnboardingStateIfShould(): void { + this._autoStartOnboardingIfShould(); + this._adjustStepIfShould(); + } + + private _adjustStepIfShould(): void { + if (this._isAddressAvailable()) { + if (this.props.stepIndex < 2) { + this.props.updateOnboardingStep(2); + } + return; + } + const isExternallyInjected = utils.isExternallyInjected( + this.props.providerType, + this.props.injectedProviderName, + ); + if (isExternallyInjected) { + this.props.updateOnboardingStep(1); + return; + } + this.props.updateOnboardingStep(0); + } + private _autoStartOnboardingIfShould(): void { + if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) { + this.props.updateIsRunning(true); + } + } } |