Skip to content

Commit b88b575

Browse files
lnbc1QWFyb24lnbc1QWFyb24
committed
Add better error handling
1 parent 7fd94e1 commit b88b575

File tree

6 files changed

+181
-81
lines changed

6 files changed

+181
-81
lines changed

‎src/modules/check/accounts.ts

Lines changed: 27 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ import { usbIcon } from './icons'
77

88
type AccountsAndBalances = Array<{ balance: string; address: string }>
99

10+
const msgStyles = `
11+
display: block;
12+
font-size: 0.889em;
13+
font-family: inherit;
14+
color: inherit;
15+
margin-top: 0.5rem;
16+
`
17+
1018
function accountSelect(options: {
1119
heading: string
1220
description: string
@@ -61,21 +69,26 @@ function accountSelect(options: {
6169
? `<div class="bn-onboard-custom bn-onboard-loading">
6270
<div class="bn-onboard-loading-first"></div>
6371
<div class="bn-onboard-loading-second"></div>
64-
<div class="bn-onboard-loading-third"</div>
65-
</div>`
72+
<div class="bn-onboard-loading-third"></div>
73+
</div>
74+
<span style="${msgStyles}">Loading More Accounts...</span>
75+
`
6676
: `
67-
<select id="account-select" onchange="window.accountSelect()" style="padding: 0.5rem;">
68-
${accountsAndBalances.map(
69-
(account: { balance: string; address: string }) =>
70-
`<option>${account.address} --- ${
71-
account.balance != null
72-
? new BigNumber(account.balance)
73-
.div('1000000000000000000')
74-
.toFixed(3)
75-
: '0'
76-
} ETH</option>`
77-
)}
78-
</select><button style="background: transparent; margin: 0 0.25rem; padding: 0.25rem 0.5rem; border-radius: 40px; cursor: pointer; color: inherit; border-color: inherit; border-width: 1px; border-style: solid;" onclick="window.loadMoreAccounts()">Load More</button>
77+
<div style="display: flex; align-items: center;">
78+
<select id="account-select" onchange="window.accountSelect()" style="padding: 0.5rem;">
79+
${accountsAndBalances.map(
80+
(account: { balance: string; address: string }) =>
81+
`<option>${account.address} --- ${
82+
account.balance != null
83+
? new BigNumber(account.balance)
84+
.div('1000000000000000000')
85+
.toFixed(3)
86+
: '0'
87+
} ETH</option>`
88+
)}
89+
</select>
90+
<button style="display: flex; align-items: center; text-align: center; height: 1.5rem; background: transparent; margin: 0 0.25rem; padding: 0 0.5rem; border-radius: 40px; cursor: pointer; color: inherit; border-color: inherit; border-width: 1px; border-style: solid;" onclick="window.loadMoreAccounts()">Load More</button>
91+
</div>
7992
`,
8093
button: {
8194
onclick: () => {

‎src/modules/check/derivation-path.ts

Lines changed: 58 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const baseStyles = `
3030
border-radius: 40px;
3131
margin-top: 0.5rem;
3232
padding: 0.55em 1.4em;
33-
cursor: pointer;
33+
text-align: center;
3434
color: inherit;
3535
font-family: inherit;
3636
transition: background 150ms ease-in-out;
@@ -49,22 +49,17 @@ const errorStyles = `
4949
border: 1px solid #e2504a;
5050
`
5151

52-
const errorMsgStyles = `
52+
const msgStyles = `
53+
display: block;
5354
font-size: 0.889em;
5455
font-family: inherit;
55-
color: #e2504a;
56+
color: inherit;
57+
margin-top: 0.5rem;
5658
`
5759

58-
const customInputHtmlString = (error?: string) => {
59-
return `
60-
<input
61-
id="custom-derivation-input"
62-
style="${baseStyles + selectedStyles + (error ? errorStyles : '')}"
63-
type="text"
64-
placeholder="custom derivation path"
65-
onchange="window.handleCustomInput(this.value)" />
66-
`
67-
}
60+
const errorMsgStyles = `
61+
color: #e2504a;
62+
`
6863

6964
function derivationPath(options: {
7065
heading: string
@@ -81,6 +76,18 @@ function derivationPath(options: {
8176
error: ''
8277
}
8378

79+
const customInputHtmlString = (error?: string) => {
80+
return `
81+
<input
82+
id="custom-derivation-input"
83+
style="${baseStyles + selectedStyles + (error ? errorStyles : '')}"
84+
type="text"
85+
value="${state.dPath}"
86+
placeholder="custom derivation path"
87+
onchange="window.handleCustomInput(this.value)" />
88+
`
89+
}
90+
8491
function derivationSelectHtmlString(walletName: string) {
8592
return `
8693
<div id="derivation-select" style="${styles}">
@@ -90,7 +97,7 @@ function derivationPath(options: {
9097
return `
9198
<button style="${baseStyles +
9299
buttonStyles +
93-
(state.dPath === path
100+
(state.dPath === path && !state.showCustomInput
94101
? selectedStyles
95102
: '')}" onclick="window.handleDerivationClick(this)" data-path="${path}">
96103
${label} - ${path}
@@ -106,13 +113,17 @@ function derivationPath(options: {
106113
}
107114
${
108115
state.loading
109-
? `<div class="bn-onboard-custom bn-onboard-loading" style="margin-top: 1rem">
116+
? `<div class="bn-onboard-custom bn-onboard-loading" style="margin-top: 1rem;">
110117
<div class="bn-onboard-loading-first"></div>
111118
<div class="bn-onboard-loading-second"></div>
112-
<div class="bn-onboard-loading-third"</div>
113-
</div>`
119+
<div class="bn-onboard-loading-third"></div>
120+
</div>
121+
<span style="${msgStyles}">Loading Accounts...</span>
122+
`
114123
: state.error
115-
? `<span style="${errorMsgStyles}">${state.error}</span>`
124+
? `<span style="${msgStyles + errorMsgStyles}">${
125+
state.error
126+
}</span>`
116127
: ''
117128
}
118129
</div>
@@ -147,7 +158,7 @@ function derivationPath(options: {
147158

148159
if (selectedPath === 'custom') {
149160
state.showCustomInput = true
150-
state.dPath = ''
161+
151162
setTimeout(() => {
152163
const input = document.getElementById('custom-derivation-input')
153164
input && input.focus()
@@ -170,35 +181,48 @@ function derivationPath(options: {
170181
heading: heading || 'Hardware Wallet Connect',
171182
description:
172183
description ||
173-
`Please select a derivation path to connect your ${wallet.name} accounts, or select custom to input a custom path:`,
184+
`Make sure your ${wallet.name} is plugged in, ${
185+
wallet.name === 'Ledger' ? 'and the Ethereum app is open, ' : ''
186+
}then select a derivation path to connect your accounts:`,
174187
eventCode: 'derivationPath',
175188
html: derivationSelectHtmlString(wallet.name),
176189
button: {
177190
text: 'Connect',
178191
onclick: async () => {
179192
state.loading = true
180193
const path = state.dPath || derivationPaths[wallet.name][0].path
181-
const validPath = await wallet.provider.setPath(
182-
path,
183-
state.showCustomInput
184-
)
185-
186-
if (!validPath) {
187-
state.error = `${path} is not a valid derivation path`
194+
try {
195+
const validPath = await wallet.provider.setPath(
196+
path,
197+
state.showCustomInput
198+
)
199+
200+
if (!validPath) {
201+
state.error = `${path} is not a valid derivation path`
202+
state.loading = false
203+
return
204+
}
205+
} catch (error) {
206+
state.error = error
188207
state.loading = false
189208
return
190209
}
191210

192211
state.error = ''
193212

194213
wallet.connect &&
195-
wallet.connect().then(() => {
196-
// @TODO add path to local store
197-
198-
deleteWindowProperties()
199-
state.loading = false
200-
state.completed = true
201-
})
214+
wallet
215+
.connect()
216+
.then(() => {
217+
// @TODO add path to local store
218+
deleteWindowProperties()
219+
state.loading = false
220+
state.completed = true
221+
})
222+
.catch(error => {
223+
state.error = error.message
224+
state.loading = false
225+
})
202226
}
203227
},
204228

‎src/modules/select/wallets/ledger.ts

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ import Eth from '@ledgerhq/hw-app-eth'
1414
import * as EthereumTx from 'ethereumjs-tx'
1515

1616
import buffer from 'buffer'
17-
import { getAddress } from '../../../utilities'
1817

1918
const LEDGER_LIVE_PATH = `m/44'/60'`
2019
const ACCOUNTS_TO_GET = 5
@@ -118,7 +117,6 @@ async function ledgerProvider(options: {
118117
}
119118

120119
function disconnect() {
121-
console.log('resetting')
122120
dPath = ''
123121
addressToPath = new Map()
124122
enabled = false
@@ -175,7 +173,7 @@ async function ledgerProvider(options: {
175173
} catch (error) {}
176174
}
177175

178-
async function getPublicKey(eth: any) {
176+
async function getPublicKey() {
179177
if (!dPath) {
180178
throw new Error('a derivation path is needed to get the public key')
181179
}
@@ -192,9 +190,7 @@ async function ledgerProvider(options: {
192190

193191
return account
194192
} catch (error) {
195-
throw new Error(
196-
'There was a problem getting access to your Ledger accounts.'
197-
)
193+
throw new Error('There was a problem accessing your Ledger accounts.')
198194
}
199195
}
200196

@@ -209,7 +205,7 @@ async function ledgerProvider(options: {
209205

210206
async function getAccounts(getMore?: boolean) {
211207
if (!enabled) {
212-
return [undefined]
208+
return []
213209
}
214210

215211
if (addressToPath.size > 0 && !getMore) {
@@ -228,19 +224,19 @@ async function ledgerProvider(options: {
228224
}
229225

230226
for (const path of paths) {
227+
const res = await eth.getAddress(path)
228+
addressToPath.set(res.address, path)
229+
}
230+
} else {
231+
if (!account) {
231232
try {
232-
const res = await eth.getAddress(path)
233-
addressToPath.set(res.address, path)
233+
account = await getPublicKey()
234234
} catch (error) {
235-
console.log({ error })
235+
throw error
236236
}
237237
}
238-
} else {
239-
const accountInfo = account || (await getPublicKey(eth))
240-
241-
if (!accountInfo) return [undefined]
242238

243-
const addressInfo = generateAddresses(accountInfo, addressToPath.size)
239+
const addressInfo = generateAddresses(account, addressToPath.size)
244240

245241
addressInfo.forEach(({ dPath, address }) => {
246242
addressToPath.set(address, dPath)

0 commit comments

Comments
 (0)