forked from LN-Zap/zap-desktop
/
Onboarding.js
257 lines (244 loc) · 8.36 KB
/
Onboarding.js
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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
import React from 'react'
import PropTypes from 'prop-types'
import LoadingBolt from 'components/LoadingBolt'
import FormContainer from './FormContainer'
import ConnectionType from './ConnectionType'
import ConnectionDetails from './ConnectionDetails'
import Alias from './Alias'
import Autopilot from './Autopilot'
import Login from './Login'
import Signup from './Signup'
import RecoverForm from './RecoverForm'
import NewWalletSeed from './NewWalletSeed'
import ReEnterSeed from './ReEnterSeed'
import NewWalletPassword from './NewWalletPassword'
import NewAezeedPassword from './NewAezeedPassword'
import styles from './Onboarding.scss'
const Onboarding = ({
onboarding: {
step,
connectionType,
connectionHost,
connectionCert,
connectionMacaroon,
alias,
autopilot,
startingLnd,
createWalletPassword,
seed,
aezeedPassword,
fetchingSeed
},
connectionTypeProps,
connectionDetailProps,
changeStep,
startLnd,
submitNewWallet,
aliasProps,
initWalletProps,
autopilotProps,
recoverFormProps,
newWalletSeedProps,
newWalletPasswordProps,
newAezeedPasswordProps,
reEnterSeedProps
}) => {
const renderStep = () => {
switch (step) {
case 0.1:
return (
<FormContainer
title="How do you want to connect to the Lightning Network?"
description="
By default Zap will spin up a node for you and handle all the nerdy stuff
in the background. However you can also setup a custom node connection and
use Zap to control a remote node if you desire (for advanced users).
"
back={null}
next={() => changeStep(connectionType === 'local' ? 1 : 0.2)}
>
<ConnectionType {...connectionTypeProps} />
</FormContainer>
)
case 0.2:
return (
<FormContainer
title="Connection details"
description="Enter the connection details for your Lightning node."
back={() => changeStep(0.1)}
next={() =>
startLnd({
connectionType,
connectionHost,
connectionCert,
connectionMacaroon
})
}
>
<ConnectionDetails {...connectionDetailProps} />
</FormContainer>
)
case 1:
return (
<FormContainer
title="What should we call you?"
description="Set your nickname to help others connect with you on the Lightning Network"
back={() => changeStep(0.1)}
next={() => changeStep(2)}
>
<Alias {...aliasProps} />
</FormContainer>
)
case 2:
return (
<FormContainer
title="Autopilot"
description="Autopilot is an automatic network manager. Instead of manually adding people to build your network to make payments, enable autopilot to automatically connect you to the Lightning Network using 60% of your balance." // eslint-disable-line max-len
back={() => changeStep(1)}
next={() => startLnd({ connectionType, alias, autopilot })}
>
<Autopilot {...autopilotProps} />
</FormContainer>
)
case 3:
return (
<FormContainer
title="Welcome back!"
description="Enter your wallet password or create a new wallet"
back={null}
next={null}
>
<Login {...initWalletProps.loginProps} />
</FormContainer>
)
case 4:
return (
<FormContainer
title="Welcome!"
description="Looks like you are new here. Set a password to encrypt your wallet. This password will be needed to unlock Zap in the future" // eslint-disable-line max-len
back={null}
next={() => {
// dont allow the user to move on if the confirmation password doesnt match the original password
if (newWalletPasswordProps.showCreateWalletPasswordConfirmationError) {
return
}
// if the password is less than 8 characters don't allow users to proceed
if (!newWalletPasswordProps.passwordMinChars) {
return
}
changeStep(5)
}}
>
<NewWalletPassword {...newWalletPasswordProps} />
</FormContainer>
)
case 5:
return (
<FormContainer
title={"Alright, let's get set up"}
description="Would you like to create a new wallet or import an existing one?"
back={() => changeStep(4)}
next={() => changeStep(initWalletProps.signupProps.signupForm.create ? 6 : 5.1)}
>
<Signup {...initWalletProps.signupProps} />
</FormContainer>
)
case 5.1:
return (
<FormContainer
title="Import your seed"
description="Recovering a wallet, nice. You don't need anyone else, you got yourself :)"
back={() => changeStep(5)}
next={() => changeStep(5.2)}
>
<RecoverForm {...recoverFormProps} />
</FormContainer>
)
case 5.2:
return (
<FormContainer
title="Seed passphrase"
description="Enter your cipherseed passphrase (or just submit if you don't have one)"
back={() => changeStep(5)}
next={() => {
const recoverySeed = recoverFormProps.seedInput.map(input => input.word)
submitNewWallet(createWalletPassword, recoverySeed, aezeedPassword)
}}
>
<NewAezeedPassword {...newAezeedPasswordProps} />
</FormContainer>
)
case 6:
return (
<FormContainer
title="Save your wallet seed"
description="Please save these 24 words securely! This will allow you to recover your wallet in the future"
back={() => changeStep(5)}
next={() => changeStep(7)}
>
<NewWalletSeed {...newWalletSeedProps} />
</FormContainer>
)
case 7:
return (
<FormContainer
title="Re-enter your seed"
description="Yeah I know, might be annoying, but just to be safe!"
back={() => changeStep(6)}
next={() => {
// don't allow them to move on if they havent re-entered the seed correctly
if (!reEnterSeedProps.reEnterSeedChecker) {
return
}
changeStep(8)
}}
>
<ReEnterSeed {...reEnterSeedProps} />
</FormContainer>
)
case 8:
return (
<FormContainer
title="Encrypt your seed"
description="Totally optional, but we encourage it. Set a password that will be used to encrypt your wallet seed" // eslint-disable-line max-len
back={() => changeStep(6)}
next={() => {
// dont allow the user to move on if the confirmation password doesnt match the original password
if (newAezeedPasswordProps.showAezeedPasswordConfirmationError) {
return
}
submitNewWallet(createWalletPassword, seed, aezeedPassword)
}}
>
<NewAezeedPassword {...newAezeedPasswordProps} />
</FormContainer>
)
default:
return <LoadingBolt />
}
}
if (startingLnd) {
return <LoadingBolt />
}
if (fetchingSeed) {
return <LoadingBolt />
}
return <div className={styles.container}>{renderStep()}</div>
}
Onboarding.propTypes = {
onboarding: PropTypes.object.isRequired,
connectionTypeProps: PropTypes.object.isRequired,
connectionDetailProps: PropTypes.object.isRequired,
aliasProps: PropTypes.object.isRequired,
autopilotProps: PropTypes.object.isRequired,
initWalletProps: PropTypes.object.isRequired,
newWalletSeedProps: PropTypes.object.isRequired,
newWalletPasswordProps: PropTypes.object.isRequired,
newAezeedPasswordProps: PropTypes.object.isRequired,
recoverFormProps: PropTypes.object.isRequired,
reEnterSeedProps: PropTypes.object.isRequired,
changeStep: PropTypes.func.isRequired,
startLnd: PropTypes.func.isRequired,
submitNewWallet: PropTypes.func.isRequired
}
export default Onboarding