Skip to content

Commit bb7af45

Browse files
lnbc1QWFyb24lnbc1QWFyb24
authored
Merge pull request #262 from blocknative/develop
Release 1.4.0
2 parents 2cac2af + 3d7d0a8 commit bb7af45

24 files changed

+1239
-491
lines changed

‎package.json

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "bnc-onboard",
3-
"version": "1.3.6",
3+
"version": "1.4.0",
44
"description": "Onboard users to web3 by allowing them to select a wallet, get that wallet ready to transact and have access to synced wallet state.",
55
"keywords": [
66
"ethereum",
@@ -49,7 +49,10 @@
4949
"bnc-sdk": "1.1.0",
5050
"bowser": "^2.5.2",
5151
"ethereumjs-tx": "^2.1.2",
52+
"ethereumjs-util": "^6.2.0",
53+
"ethereumjs-wallet": "^0.6.3",
5254
"fortmatic": "^0.8.2",
55+
"hdkey": "^1.1.1",
5356
"regenerator-runtime": "^0.13.3",
5457
"squarelink": "^1.1.4",
5558
"trezor-connect": "7.0.1",

‎rollup.config.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ export default {
5959
'regenerator-runtime/runtime',
6060
'trezor-connect',
6161
'ethereumjs-tx',
62+
'ethereumjs-util',
63+
'hdkey',
6264
'@ledgerhq/hw-transport-u2f',
6365
'@ledgerhq/hw-app-eth',
6466
'util',

‎src/@types/index.d.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,9 @@ declare module 'web3-provider-engine/subproviders/subscriptions'
88
declare module 'web3-provider-engine/subproviders/filters'
99
declare module 'trezor-connect'
1010
declare module 'ethereumjs-tx'
11+
declare module 'ethereumjs-util'
12+
declare module 'hdkey'
13+
// declare module 'ethereumjs-wallet/hdkey'
1114
declare module '@ledgerhq/hw-app-eth'
1215
declare module '@ledgerhq/hw-transport-u2f'
1316

‎src/components/Modal.svelte

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -80,10 +80,14 @@
8080
}
8181
</style>
8282

83-
<aside transition:fade class="bn-onboard-custom bn-onboard-modal">
83+
<aside
84+
transition:fade
85+
class="bn-onboard-custom bn-onboard-modal"
86+
on:click={closeModal}>
8487
<section
8588
class:bn-onboard-dark-mode={$app.darkMode}
86-
class="bn-onboard-custom bn-onboard-modal-content">
89+
class="bn-onboard-custom bn-onboard-modal-content"
90+
on:click={e => e.stopPropagation()}>
8791
<slot />
8892
{#if closeable}
8993
<div

‎src/interfaces.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ export interface WalletCheckModule {
2828
id?: string
2929
}
3030

31+
export interface WalletCheckModule {
32+
reset?: () => void
33+
}
34+
3135
export interface WalletCheckModal {
3236
heading: string
3337
description: string

‎src/modules/check/accounts.ts

Lines changed: 65 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,44 @@
1-
import { WalletCheckModule, StateAndHelpers } from '../../interfaces'
1+
import {
2+
WalletCheckModule,
3+
StateAndHelpers,
4+
WalletCheckModal
5+
} from '../../interfaces'
6+
import { usbIcon } from './icons'
27

38
type AccountsAndBalances = Array<{ balance: string; address: string }>
49

5-
function accountSelect(): WalletCheckModule | never {
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+
18+
function accountSelect(
19+
options: {
20+
heading?: string
21+
description?: string
22+
icon?: string
23+
} = {}
24+
): WalletCheckModule {
25+
const { heading, description, icon } = options
626
let completed: boolean = false
727
let loadingAccounts: boolean = false
828
let accountsAndBalances: AccountsAndBalances = []
929

10-
return async (stateAndHelpers: StateAndHelpers) => {
11-
const { wallet, BigNumber, address, balance } = stateAndHelpers
30+
async function checkModule(
31+
stateAndHelpers: StateAndHelpers
32+
): Promise<WalletCheckModal | undefined> {
33+
const { wallet, BigNumber } = stateAndHelpers
1234
const { provider, type } = wallet
1335

14-
if (type === 'hardware' && !completed) {
15-
if (accountsAndBalances.length <= 1 && !loadingAccounts) {
16-
accountsAndBalances = [{ address, balance }]
36+
if (type === 'hardware' && !completed && !provider.isCustomPath()) {
37+
if (accountsAndBalances.length === 0) {
38+
loadingAccounts = true
39+
const accounts = await provider.enable()
40+
accountsAndBalances = await provider.getBalances(accounts)
41+
loadingAccounts = false
1742
}
1843

1944
const deleteWindowProperties = () => {
@@ -23,8 +48,7 @@ function accountSelect(): WalletCheckModule | never {
2348

2449
const loadMoreAccounts = async () => {
2550
loadingAccounts = true
26-
const moreAccounts = await provider.getAllAccountsAndBalances()
27-
accountsAndBalances = moreAccounts
51+
accountsAndBalances = await provider.getMoreAccounts()
2852
loadingAccounts = false
2953
}
3054

@@ -38,28 +62,35 @@ function accountSelect(): WalletCheckModule | never {
3862
;(window as any).loadMoreAccounts = loadMoreAccounts
3963

4064
return {
41-
heading: 'Select Account',
42-
description: `Please select which account you would like to use with this Dapp:`,
65+
heading: heading || 'Select Account',
66+
description:
67+
description ||
68+
`Please select which account you would like to use with this Dapp:`,
4369
eventCode: 'accountSelect',
4470
html: loadingAccounts
4571
? `<div class="bn-onboard-custom bn-onboard-loading">
4672
<div class="bn-onboard-loading-first"></div>
4773
<div class="bn-onboard-loading-second"></div>
48-
<div class="bn-onboard-loading-third"</div>
49-
</div>`
74+
<div class="bn-onboard-loading-third"></div>
75+
</div>
76+
<span style="${msgStyles}">Loading More Accounts...</span>
77+
`
5078
: `
51-
<select id="account-select" onchange="window.accountSelect()" style="padding: 0.5rem;">
52-
${accountsAndBalances.map(
53-
(account: { balance: string; address: string }) =>
54-
`<option value="${account.address}">${account.address} --- ${
55-
account.balance != null
56-
? new BigNumber(account.balance)
57-
.div('1000000000000000000')
58-
.toFixed(3)
59-
: '0'
60-
} ETH</option>`
61-
)}
62-
</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;" onclick="window.loadMoreAccounts()">Load More</button>
79+
<div style="display: flex; align-items: center;">
80+
<select id="account-select" onchange="window.accountSelect()" style="padding: 0.5rem;">
81+
${accountsAndBalances.map(
82+
(account: { balance: string; address: string }) =>
83+
`<option>${account.address} --- ${
84+
account.balance != null
85+
? new BigNumber(account.balance)
86+
.div('1000000000000000000')
87+
.toFixed(3)
88+
: '0'
89+
} ETH</option>`
90+
)}
91+
</select>
92+
<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>
93+
</div>
6394
`,
6495
button: {
6596
onclick: () => {
@@ -68,12 +99,18 @@ function accountSelect(): WalletCheckModule | never {
6899
},
69100
text: 'Done'
70101
},
71-
icon: `
72-
<svg height="18" viewBox="0 0 18 18" width="18" xmlns="http://www.w3.org/2000/svg"><path d="m13.375 28c-1.86075 0-3.375-1.51425-3.375-3.375s1.51425-3.375 3.375-3.375 3.375 1.51425 3.375 3.375-1.51425 3.375-3.375 3.375zm0-4.5c-.619875 0-1.125.504-1.125 1.125s.505125 1.125 1.125 1.125 1.125-.504 1.125-1.125-.505125-1.125-1.125-1.125zm0-6.75c-1.86075 0-3.375-1.51425-3.375-3.375s1.51425-3.375 3.375-3.375 3.375 1.51425 3.375 3.375-1.51425 3.375-3.375 3.375zm0-4.5c-.619875 0-1.125.505125-1.125 1.125s.505125 1.125 1.125 1.125 1.125-.505125 1.125-1.125-.505125-1.125-1.125-1.125zm11.25 4.5c-1.86075 0-3.375-1.51425-3.375-3.375s1.51425-3.375 3.375-3.375 3.375 1.51425 3.375 3.375-1.51425 3.375-3.375 3.375zm0-4.5c-.621 0-1.125.505125-1.125 1.125s.504 1.125 1.125 1.125 1.125-.505125 1.125-1.125-.504-1.125-1.125-1.125zm-11.25 10.117125h-.014625c-.615375-.007875-1.110375-.50175-1.110375-1.117125 0-1.35675.898875-3.375 3.375-3.375h6.75c.50625-.0135 1.125-.219375 1.125-1.125v-1.125c0-.621.502875-1.125 1.125-1.125s1.125.504 1.125 1.125v1.125c0 2.476125-2.01825 3.375-3.375 3.375h-6.75c-.905625 0-1.1115.61875-1.125 1.1385-.01575.610875-.51525 1.103625-1.125 1.103625zm0 1.132875c-.621 0-1.125-.502875-1.125-1.125v-6.75c0-.621.504-1.125 1.125-1.125s1.125.504 1.125 1.125v6.75c0 .622125-.504 1.125-1.125 1.125z" fill="currentColor" transform="translate(-10 -10)"/></svg>
73-
`
102+
icon: icon || usbIcon
74103
}
75104
}
76105
}
106+
107+
checkModule.reset = () => {
108+
completed = false
109+
accountsAndBalances = []
110+
loadingAccounts = false
111+
}
112+
113+
return checkModule
77114
}
78115

79116
export default accountSelect

‎src/modules/check/balance.ts

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,18 @@
11
import { WalletCheckModal, StateAndHelpers } from '../../interfaces'
22
import { validateType } from '../../validation'
3+
import { balanceIcon } from './icons'
34

4-
function balance(options: {
5-
minimumBalance: string
6-
}): (currentState: StateAndHelpers) => WalletCheckModal | undefined {
5+
function balance(
6+
options: {
7+
minimumBalance: string
8+
heading?: string
9+
description?: string
10+
icon?: string
11+
} = { minimumBalance: '0' }
12+
): (currentState: StateAndHelpers) => WalletCheckModal | undefined {
713
validateType({ name: 'balance options', value: options, type: 'object' })
814

9-
const { minimumBalance } = options
15+
const { minimumBalance, heading, description, icon } = options
1016

1117
validateType({
1218
name: 'minimumBalance',
@@ -17,18 +23,18 @@ function balance(options: {
1723
return (StateAndHelpers: StateAndHelpers) => {
1824
const { balance, BigNumber } = StateAndHelpers
1925
// if balance is less than minimum
20-
if (BigNumber(balance).lt(BigNumber(minimumBalance || 0))) {
26+
if (BigNumber(balance).lt(BigNumber(minimumBalance))) {
2127
return {
22-
heading: 'Get Some ETH',
23-
description: `Your current account has less than the necessary minimum balance of ${BigNumber(
24-
minimumBalance
25-
)
26-
.div(BigNumber('1000000000000000000'))
27-
.toString(10)} ETH.`,
28+
heading: heading || 'Get Some ETH',
29+
description:
30+
description ||
31+
`Your current account has less than the necessary minimum balance of ${BigNumber(
32+
minimumBalance
33+
)
34+
.div(BigNumber('1000000000000000000'))
35+
.toString(10)} ETH.`,
2836
eventCode: 'nsfFail',
29-
icon: `
30-
<svg height="18" viewBox="0 0 429 695" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor" fill-rule="evenodd"><path d="m0 394 213 126.228516 214-126.228516-214 301z"/><path d="m0 353.962264 213.5-353.962264 213.5 353.962264-213.5 126.037736z"/></g></svg>
31-
`
37+
icon: icon || balanceIcon
3238
}
3339
}
3440
}

‎src/modules/check/connect.ts

Lines changed: 20 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,30 @@
1-
import { WalletCheckModal, StateAndHelpers } from '../../interfaces'
1+
import {
2+
WalletCheckModal,
3+
StateAndHelpers,
4+
WalletCheckModule
5+
} from '../../interfaces'
6+
import { connectIcon } from './icons'
7+
8+
function connect(
9+
options: {
10+
heading?: string
11+
description?: string
12+
icon?: string
13+
} = {}
14+
): WalletCheckModule {
15+
const { heading, description, icon } = options
216

3-
function connect() {
417
return (stateAndHelpers: StateAndHelpers): WalletCheckModal | undefined => {
518
const { wallet, address } = stateAndHelpers
619
if (!address && wallet && wallet.name) {
720
return {
8-
heading: 'Login and Authorize Your Wallet',
9-
description: `This dapp requires access to your wallet, please login and authorize access to your ${wallet.name} accounts to continue.`,
21+
heading: heading || 'Login and Authorize Your Wallet',
22+
description:
23+
description ||
24+
`This dapp requires access to your wallet, please login and authorize access to your ${wallet.name} accounts to continue.`,
1025
eventCode: 'loginFail',
1126
action: wallet.connect,
12-
icon: `
13-
<svg height="14" viewBox="0 0 18 14" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m10.29375 4.05351563c0-.04921875 0-.09140625 0-.13007813 0-1.0546875 0-2.109375 0-3.1640625 0-.43945312.3480469-.76992188.7804688-.7453125.2003906.01054688.3585937.10546875.4992187.24609375.5800781.58359375 1.1566406 1.16367188 1.7367187 1.74023438 1.4695313 1.46953125 2.9390625 2.93906249 4.4050782 4.40859375.1335937.13359375.2425781.27421875.2707031.46757812.0351562.20742188-.0246094.421875-.1652344.58007813-.0246094.028125-.0492187.05273437-.0738281.08085937-2.0601563 2.06367188-4.1203125 4.1238281-6.1804688 6.1875-.2109375.2109375-.4570312.3023438-.7453125.2179688-.2707031-.0808594-.4464843-.2707032-.5132812-.5484375-.0140625-.0738282-.0175781-.1441407-.0140625-.2179688 0-1.0335937 0-2.0707031 0-3.1042969 0-.0386719 0-.08085935 0-.13359372h-5.06953125c-.49570313 0-.80507813-.309375-.80507813-.80859375 0-1.42382813 0-2.84414063 0-4.26796875 0-.49570313.30585938-.8015625.8015625-.8015625h4.93593748z"/><path d="m5.69882812 13.978125h-4.01132812c-.928125 0-1.6875-.8753906-1.6875-1.9511719v-10.06171872c0-1.07578125.75585938-1.95117188 1.6875-1.95117188h4.01132812c.34101563 0 .61523438.31992188.61523438.71015625 0 .39023438-.27421875.71015625-.61523438.71015625h-4.01132812c-.253125 0-.45703125.23554688-.45703125.52734375v10.06171875c0 .2917969.20390625.5273437.45703125.5273437h4.01132812c.34101563 0 .61523438.3199219.61523438.7101563s-.27773438.7171875-.61523438.7171875z"/></g></svg>
14-
`
27+
icon: icon || connectIcon
1528
}
1629
}
1730
}

0 commit comments

Comments
 (0)