aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/onboarding/portal_onboarding_flow.tsx')
-rw-r--r--packages/website/ts/components/onboarding/portal_onboarding_flow.tsx100
1 files changed, 70 insertions, 30 deletions
diff --git a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
index 10d4af30e..6bfa5c75f 100644
--- a/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
+++ b/packages/website/ts/components/onboarding/portal_onboarding_flow.tsx
@@ -12,7 +12,11 @@ import { IntroOnboardingStep } from 'ts/components/onboarding/intro_onboarding_s
import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
import { SetAllowancesOnboardingStep } from 'ts/components/onboarding/set_allowances_onboarding_step';
import { UnlockWalletOnboardingStep } from 'ts/components/onboarding/unlock_wallet_onboarding_step';
-import { WrapEthOnboardingStep } from 'ts/components/onboarding/wrap_eth_onboarding_step';
+import {
+ WrapEthOnboardingStep1,
+ WrapEthOnboardingStep2,
+ WrapEthOnboardingStep3,
+} from 'ts/components/onboarding/wrap_eth_onboarding_step';
import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
import { ProviderType, ScreenWidths, Token, TokenByAddress, TokenStateByAddress } from 'ts/types';
import { analytics } from 'ts/utils/analytics';
@@ -24,7 +28,7 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
stepIndex: number;
isRunning: boolean;
userAddress: string;
- hasBeenSeen: boolean;
+ hasBeenClosed: boolean;
providerType: ProviderType;
injectedProviderName: string;
blockchainIsLoaded: boolean;
@@ -40,15 +44,23 @@ export interface PortalOnboardingFlowProps extends RouteComponentProps<any> {
class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
private _unlisten: () => void;
public componentDidMount(): void {
- this._overrideOnboardingStateIfShould();
+ this._adjustStepIfShould();
+ // Wait until the step is adjusted to decide whether we should show onboarding.
+ setTimeout(this._autoStartOnboardingIfShould.bind(this), 1000);
// If there is a route change, just close onboarding.
this._unlisten = this.props.history.listen(() => this.props.updateIsRunning(false));
}
public componentWillUnmount(): void {
this._unlisten();
}
- public componentDidUpdate(): void {
- this._overrideOnboardingStateIfShould();
+ public componentDidUpdate(prevProps: PortalOnboardingFlowProps): void {
+ this._adjustStepIfShould();
+ if (!prevProps.isRunning && this.props.isRunning) {
+ // On mobile, make sure the wallet is completely visible.
+ if (this.props.screenWidth === ScreenWidths.Sm) {
+ document.querySelector('.wallet').scrollIntoView();
+ }
+ }
}
public render(): React.ReactNode {
return (
@@ -90,45 +102,63 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
continueButtonDisplay: 'enabled',
},
{
- target: '.eth-row',
- title: 'Add ETH',
- content: <AddEthOnboardingStep />,
+ target: '.wallet',
+ title: 'Step 1: Add ETH',
+ content: (
+ <AddEthOnboardingStep userEthBalanceInWei={this.props.userEtherBalanceInWei || new BigNumber(0)} />
+ ),
placement: 'right',
continueButtonDisplay: this._userHasVisibleEth() ? 'enabled' : 'disabled',
},
{
- target: '.weth-row',
- title: 'Step 1/2',
+ target: '.wallet',
+ title: 'Step 2: Wrap ETH',
+ content: <WrapEthOnboardingStep1 />,
+ placement: 'right',
+ continueButtonDisplay: 'enabled',
+ },
+ {
+ target: '.wallet',
+ title: 'Step 2: Wrap ETH',
+ content: <WrapEthOnboardingStep2 />,
+ placement: 'right',
+ continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
+ },
+ {
+ target: '.wallet',
+ title: 'Step 2: Wrap ETH',
content: (
- <WrapEthOnboardingStep
- formattedEthBalanceIfExists={
+ <WrapEthOnboardingStep3
+ formattedWethBalanceIfExists={
this._userHasVisibleWeth() ? this._getFormattedWethBalance() : undefined
}
/>
),
placement: 'right',
- continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : undefined,
+ continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
},
{
- target: '.weth-row',
- title: 'Step 2/2',
+ target: '.wallet',
+ title: 'Step 3: Unlock Tokens',
content: (
<SetAllowancesOnboardingStep
zrxAllowanceToggle={this._renderZrxAllowanceToggle()}
ethAllowanceToggle={this._renderEthAllowanceToggle()}
+ doesUserHaveAllowancesForWethAndZrx={this._doesUserHaveAllowancesForWethAndZrx()}
/>
),
placement: 'right',
- continueButtonDisplay: this._userHasAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
+ continueButtonDisplay: this._doesUserHaveAllowancesForWethAndZrx() ? 'enabled' : 'disabled',
},
{
target: '.wallet',
- title: '🎉 Congrats! The ecosystem awaits.',
+ title: '🎉 The Ecosystem Awaits',
content: <CongratsOnboardingStep />,
placement: 'right',
continueButtonDisplay: 'enabled',
shouldHideNextButton: true,
continueButtonText: 'Enter the 0x Ecosystem',
+ onContinueButtonClick: this._handleFinalStepContinueClick.bind(this),
},
];
return steps;
@@ -155,21 +185,18 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
private _userHasVisibleWeth(): boolean {
return this._getWethBalance() > new BigNumber(0);
}
- private _userHasAllowancesForWethAndZrx(): boolean {
+ private _doesUserHaveAllowancesForWethAndZrx(): boolean {
const ethToken = utils.getEthToken(this.props.tokenByAddress);
const zrxToken = utils.getZrxToken(this.props.tokenByAddress);
if (ethToken && zrxToken) {
- const ethTokenAllowance = this.props.trackedTokenStateByAddress[ethToken.address].allowance;
- const zrxTokenAllowance = this.props.trackedTokenStateByAddress[zrxToken.address].allowance;
- return ethTokenAllowance > new BigNumber(0) && zrxTokenAllowance > new BigNumber(0);
+ const ethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
+ const zrxTokenState = this.props.trackedTokenStateByAddress[zrxToken.address];
+ if (ethTokenState && zrxTokenState) {
+ return ethTokenState.allowance.gt(0) && zrxTokenState.allowance.gt(0);
+ }
}
return false;
}
- private _overrideOnboardingStateIfShould(): void {
- this._autoStartOnboardingIfShould();
- this._adjustStepIfShould();
- }
-
private _adjustStepIfShould(): void {
const stepIndex = this.props.stepIndex;
if (this._isAddressAvailable()) {
@@ -193,7 +220,10 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
}
}
private _autoStartOnboardingIfShould(): void {
- if (!this.props.isRunning && !this.props.hasBeenSeen && this.props.blockchainIsLoaded) {
+ if (
+ (this.props.stepIndex === 0 && !this.props.isRunning) ||
+ (!this.props.isRunning && !this.props.hasBeenClosed && this.props.blockchainIsLoaded)
+ ) {
const networkName = sharedConstants.NETWORK_NAME_BY_ID[this.props.networkId];
analytics.logEvent('Portal', 'Onboarding Started - Automatic', networkName, this.props.stepIndex);
this.props.updateIsRunning(true);
@@ -221,18 +251,28 @@ class PlainPortalOnboardingFlow extends React.Component<PortalOnboardingFlowProp
if (!token) {
return null;
}
- const tokenState = this.props.trackedTokenStateByAddress[token.address];
+ const tokenStateIfExists = this.props.trackedTokenStateByAddress[token.address];
+ if (_.isUndefined(tokenStateIfExists)) {
+ return null;
+ }
return (
<AllowanceToggle
token={token}
- tokenState={tokenState}
- isDisabled={!tokenState.isLoaded}
+ tokenState={tokenStateIfExists}
+ isDisabled={!tokenStateIfExists.isLoaded}
blockchain={this.props.blockchain}
// tslint:disable-next-line:jsx-no-lambda
refetchTokenStateAsync={async () => this.props.refetchTokenStateAsync(token.address)}
/>
);
}
+ private _handleFinalStepContinueClick(): void {
+ if (utils.isMobile(this.props.screenWidth)) {
+ window.scrollTo(0, 0);
+ this.props.history.push('/portal');
+ }
+ this._closeOnboarding();
+ }
}
export const PortalOnboardingFlow = withRouter(PlainPortalOnboardingFlow);
generated by cgit v1.2.3 (git 2.25.1) at 2024-09-12 17:46:17 +0800