1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
|
import * as _ from 'lodash';
import * as React from 'react';
import { BigNumber } from '@0xproject/utils';
import { OnboardingFlow, Step } from 'ts/components/onboarding/onboarding_flow';
import { ProviderType, TokenByAddress, TokenStateByAddress } from 'ts/types';
import { utils } from 'ts/utils/utils';
import { AllowanceToggle } from 'ts/containers/inputs/allowance_toggle';
export interface PortalOnboardingFlowProps {
stepIndex: number;
isRunning: boolean;
userAddress: string;
hasBeenSeen: boolean;
providerType: ProviderType;
injectedProviderName: string;
blockchainIsLoaded: boolean;
userEtherBalanceInWei?: BigNumber;
tokenByAddress: TokenByAddress;
trackedTokenStateByAddress: TokenStateByAddress;
updateIsRunning: (isRunning: boolean) => void;
updateOnboardingStep: (stepIndex: number) => void;
}
export class PortalOnboardingFlow extends React.Component<PortalOnboardingFlowProps> {
public componentDidMount(): void {
this._overrideOnboardingStateIfShould();
}
public componentDidUpdate(): void {
this._overrideOnboardingStateIfShould();
}
public render(): React.ReactNode {
return (
<OnboardingFlow
steps={this._getSteps()}
stepIndex={this.props.stepIndex}
isRunning={this.props.isRunning}
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._userHasVisibleEth() ? 'enabled' : 'disabled',
},
{
target: '.weth-row',
content: 'You need to convert some of your ETH into tradeable Wrapped ETH (WETH)',
placement: 'right',
continueButtonDisplay: this._userHasVisibleWeth() ? 'enabled' : 'disabled',
},
{
target: '.weth-row',
content: 'Unlock your tokens for trading. You only need to do this once for each token.',
placement: 'right',
continueButtonDisplay: 'disabled',
},
];
return steps;
}
private _isAddressAvailable(): boolean {
return !_.isEmpty(this.props.userAddress);
}
private _userHasVisibleEth(): boolean {
return this.props.userEtherBalanceInWei > new BigNumber(0);
}
private _userHasVisibleWeth(): boolean {
const ethToken = utils.getEthToken(this.props.tokenByAddress);
if (!ethToken) {
return false;
}
const wethTokenState = this.props.trackedTokenStateByAddress[ethToken.address];
return wethTokenState.balance > new BigNumber(0);
}
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);
}
}
private _renderAllowanceToggle(): React.ReactNode {
return (
<AllowanceToggle
blockchain={this.props.blockchain}
refetchTokenStateAsync={this.props.refetchTokenStateAsync}
/>
);
}
}
|