Skip to content

Commit 52d894e

Browse files
Adamj1232Adamj1232
authored
Feature: HW Account Select and Entry Modal container element props and Disable Connect Modal close config (#1480)
* Working as expected still some tweaks required * Add default comment to disableClose prop * Update docs site for changes * revert demo * Bump versions mixed in merge * Update injected wallets list * Bump dcent version
1 parent 17dd23b commit 52d894e

34 files changed

+243
-49
lines changed

‎docs/src/routes/docs/[...3]modules/core.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,10 @@ type InitOptions {
7575
apiKey?: string
7676
notify?: Partial<NotifyOptions>
7777
gas?: typeof gas
78+
/**
79+
* Customize the connect modal
80+
*/
81+
connect?: ConnectModalOptions
7882
/**
7983
* Object mapping for W3O components with the key being the component and the value the DOM element to mount the component to. This element must be available at time of package script execution.
8084
*/
@@ -151,6 +155,21 @@ type RecommendedInjectedWallets = {
151155
}
152156
```
153157
158+
**`connectModal`**
159+
An object that allows for customizing the connect modal layout and behavior
160+
161+
```typescript
162+
type ConnectModalOptions = {
163+
showSidebar?: boolean
164+
/**
165+
* Disabled close of the connect modal with background click and
166+
* hides the close button forcing an action from the connect modal
167+
* Defaults to false
168+
*/
169+
disableClose?: boolean
170+
}
171+
```
172+
154173
**`i18n`**
155174
An object that defines the display text for different locales. Can also be used to override the default text. To override the default text, pass in a object for the `en` locale.
156175

‎docs/src/routes/docs/[...4]wallets/injected.md

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -267,11 +267,12 @@ const injected = injectedModule({
267267

268268
### Injected Wallets Supported Natively
269269

270-
- Metamask - _Desktop & Mobile_ (Mobile relies on Wallet Connect and is detected inside MetaMask app browser)
270+
- Metamask - _Desktop & Mobile_
271271
- Binance - _Desktop_
272272
- Coinbase - _Desktop & Mobile_
273+
- Phantom - _Desktop & Mobile_
274+
- Zerion - _Desktop & Mobile_
273275
- Tally - _Desktop_
274-
- Exodus - _Desktop & Mobile_
275276
- Trust - _Mobile_
276277
- Opera - _Desktop & Mobile_
277278
- Status - _Mobile_
@@ -303,6 +304,9 @@ const injected = injectedModule({
303304
- Core - _Desktop_
304305
- Bitski - _Desktop & Mobile_
305306
- Enkrypt - _Desktop & Mobile_
307+
- Zeal - _Desktop_
308+
- Exodus - _Desktop & Mobile_
309+
- Frontier - _Desktop & Mobile_
306310

307311
## Build Environments
308312

‎docs/src/routes/docs/[...4]wallets/keepkey.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,5 +41,38 @@ const connectedWallets = await onboard.connectWallet()
4141
console.log(connectedWallets)
4242
```
4343

44+
Initialization options:
45+
```typescript
46+
type keepkeyInitOptions = {
47+
containerElement?: string
48+
filter?: Platform
49+
}
50+
```
51+
52+
The following is a list of the platforms that can be filtered:
53+
54+
```typescript
55+
type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
56+
57+
type Platform =
58+
| 'Windows Phone'
59+
| 'Windows'
60+
| 'macOS'
61+
| 'iOS'
62+
| 'Android'
63+
| 'Linux'
64+
| 'Chrome OS'
65+
| 'Android Browser'
66+
| 'Chrome'
67+
| 'Chromium'
68+
| 'Firefox'
69+
| 'Microsoft Edge'
70+
| 'Opera'
71+
| 'Safari'
72+
| 'desktop'
73+
| 'mobile'
74+
| 'tablet'
75+
```
76+
4477
## Build Environments
4578
For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)

‎docs/src/routes/docs/[...4]wallets/keystone.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ npm install @web3-onboard/keystone
2626
```typescript
2727
type KeystoneOptions = {
2828
customNetwork?: CustomNetwork
29+
filter?: Platform[]
30+
containerElement?: string
2931
}
3032

3133
interface CustomNetwork {

‎docs/src/routes/docs/[...4]wallets/trezor.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ type TrezorOptions = {
2828
email: string
2929
appUrl: string
3030
customNetwork?: CustomNetwork
31+
filter?: Platform[]
32+
containerElement?: string
3133
}
3234

3335
interface CustomNetwork {
@@ -61,6 +63,8 @@ interface BootstrapNode {
6163
location: string
6264
comment: string
6365
}
66+
67+
type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
6468
```
6569

6670
### Usage

‎packages/core/README.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,12 @@ An object that allows for customization of the Connect Modal and accepts the typ
128128
```typescript
129129
type ConnectModalOptions = {
130130
showSidebar?: boolean
131+
showSidebar?: boolean
132+
/**
133+
* Disabled close of the connect modal with background click and
134+
* hides the close button forcing an action from the connect modal
135+
*/
136+
disableClose?: boolean // defaults to false
131137
}
132138
```
133139

‎packages/core/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/core",
3-
"version": "2.14.0-alpha.1",
3+
"version": "2.14.0-alpha.2",
44
"description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
55
"keywords": [
66
"Ethereum",

‎packages/core/src/constants.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ export const APP_INITIAL_STATE: AppState = {
2525
notifications: [],
2626
locale: '',
2727
connect: {
28-
showSidebar: true
28+
showSidebar: true,
29+
disableClose: false
2930
}
3031
}
3132

‎packages/core/src/types.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,12 @@ export type i18n = typeof en
175175

176176
export type ConnectModalOptions = {
177177
showSidebar?: boolean
178+
/**
179+
* Disabled close of the connect modal with background click and
180+
* hides the close button forcing an action from the connect modal
181+
* Defaults to false
182+
*/
183+
disableClose?: boolean
178184
}
179185

180186
export type CommonPositions =

‎packages/core/src/validation.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,8 @@ const accountCenter = Joi.object({
171171
})
172172

173173
const connectModalOptions = Joi.object({
174-
showSidebar: Joi.boolean()
174+
showSidebar: Joi.boolean(),
175+
disableClose: Joi.boolean()
175176
})
176177

177178
const containerElements = Joi.object({

‎packages/core/src/views/connect/Index.svelte

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -500,7 +500,7 @@
500500
<svelte:window bind:innerWidth={windowWidth} />
501501

502502
{#if !autoSelect.disableModals}
503-
<Modal {close}>
503+
<Modal close={!connect.disableClose && close}>
504504
<div class="container">
505505
{#if connect.showSidebar}
506506
<Sidebar step={$modalStep$} />
@@ -559,11 +559,12 @@
559559
</div>
560560
</div>
561561
{/if}
562-
<!-- svelte-ignore a11y-click-events-have-key-events -->
563-
<div on:click={close} class="button-container absolute">
564-
<CloseButton />
565-
</div>
566-
562+
{#if !connect.disableClose}
563+
<!-- svelte-ignore a11y-click-events-have-key-events -->
564+
<div on:click={close} class="button-container absolute">
565+
<CloseButton />
566+
</div>
567+
{/if}
567568
<div class="scroll-container" bind:this={scrollContainer}>
568569
{#if $modalStep$ === 'selectingWallet' || windowWidth <= MOBILE_WINDOW_WIDTH}
569570
{#if wallets.length}

‎packages/dcent/README.md

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,20 @@ const connectedWallets = await onboard.connectWallet()
4848
console.log(connectedWallets)
4949
```
5050

51+
Initialization options:
52+
```typescript
53+
type dcentInitOptions = {
54+
customNetwork?: CustomNetwork
55+
filter?: Platform[]
56+
containerElement?: string
57+
}
58+
```
59+
5160
The following is a list of the platforms that can be filtered:
5261
5362
```typescript
63+
type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
64+
5465
type Platform =
5566
| 'Windows Phone'
5667
| 'Windows'

‎packages/dcent/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/dcent",
3-
"version": "2.2.3-alpha.2",
3+
"version": "2.2.3-alpha.3",
44
"description": "D'CENT wallet module for connecting to Web3-Onboard. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
55
"keywords": [
66
"Ethereum",
@@ -57,7 +57,7 @@
5757
},
5858
"dependencies": {
5959
"@web3-onboard/common": "^2.2.3",
60-
"@web3-onboard/hw-common": "^2.1.0-alpha.1",
60+
"@web3-onboard/hw-common": "^2.1.0-alpha.2",
6161
"@ethereumjs/tx": "^3.4.0",
6262
"@ethersproject/providers": "^5.5.0",
6363
"eth-dcent-keyring": "^0.2.2"

‎packages/dcent/src/index.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,12 @@ const generateAccounts = async (
5959

6060
function dcent({
6161
customNetwork,
62-
filter
62+
filter,
63+
containerElement
6364
}: {
6465
customNetwork?: CustomNetwork
6566
filter?: Platform[]
67+
containerElement?: string
6668
} = {}): WalletInit {
6769
const getIcon = async () => (await import('./icon.js')).default
6870

@@ -135,7 +137,8 @@ function dcent({
135137
assets,
136138
chains,
137139
scanAccounts,
138-
supportsCustomPath: false
140+
supportsCustomPath: false,
141+
containerElement
139142
})
140143
if (accounts.length) {
141144
eventEmitter.emit('accountsChanged', [accounts[0].address])

‎packages/demo/package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -23,23 +23,23 @@
2323
"webpack-dev-server": "4.7.4"
2424
},
2525
"dependencies": {
26-
"@web3-onboard/core": "^2.14.0-alpha.1",
26+
"@web3-onboard/core": "^2.14.0-alpha.2",
2727
"@web3-onboard/coinbase": "^2.1.4",
2828
"@web3-onboard/transaction-preview": "^2.0.0",
29-
"@web3-onboard/dcent": "^2.2.3-alpha.1",
29+
"@web3-onboard/dcent": "^2.2.3-alpha.3",
3030
"@web3-onboard/frontier": "^2.0.0",
3131
"@web3-onboard/fortmatic": "^2.0.14",
3232
"@web3-onboard/gas": "^2.1.3",
3333
"@web3-onboard/gnosis": "^2.1.6-alpha.1",
34-
"@web3-onboard/keepkey": "^2.3.3-alpha.2",
35-
"@web3-onboard/keystone": "^2.3.3-alpha.2",
34+
"@web3-onboard/keepkey": "^2.3.3-alpha.3",
35+
"@web3-onboard/keystone": "^2.3.3-alpha.3",
3636
"@web3-onboard/ledger": "^2.4.2-alpha.1",
3737
"@web3-onboard/injected-wallets": "^2.6.1-alpha.1",
3838
"@web3-onboard/magic": "^2.1.3",
3939
"@web3-onboard/phantom": "^2.0.0-alpha.1",
4040
"@web3-onboard/portis": "^2.1.3",
4141
"@web3-onboard/sequence": "^2.0.4",
42-
"@web3-onboard/trezor": "^2.3.3-alpha.2",
42+
"@web3-onboard/trezor": "^2.3.3-alpha.3",
4343
"@web3-onboard/torus": "^2.2.1",
4444
"@web3-onboard/tallyho": "^2.0.1",
4545
"@web3-onboard/web3auth": "^2.1.4",

‎packages/demo/src/App.svelte

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,7 +129,8 @@
129129
130130
const trezorOptions = {
131131
email: 'test@test.com',
132-
appUrl: 'https://www.blocknative.com'
132+
appUrl: 'https://www.blocknative.com',
133+
// containerElement: '#sample-container-el'
133134
}
134135
const trezor = trezorModule(trezorOptions)
135136
@@ -228,7 +229,7 @@
228229
}
229230
],
230231
// connect: {
231-
// showSidebar: false
232+
// disableClose: true
232233
// },
233234
appMetadata: {
234235
name: 'Blocknative',

‎packages/hw-common/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@web3-onboard/hw-common",
3-
"version": "2.1.0-alpha.1",
3+
"version": "2.1.0-alpha.2",
44
"description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
55
"keywords": [
66
"Ethereum",

‎packages/hw-common/src/account-select.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -106,8 +106,17 @@ const mountAccountSelect = (
106106
}
107107
</style>
108108
`
109+
const containerElementQuery = selectAccountOptions.containerElement || 'body'
109110

110-
document.body.appendChild(accountSelectDomElement)
111+
const containerElement = document.querySelector(containerElementQuery)
112+
113+
if (!containerElement) {
114+
throw new Error(
115+
`Element with query ${containerElementQuery} does not exist.`
116+
)
117+
}
118+
119+
containerElement.appendChild(accountSelectDomElement)
111120

112121
const app = new AccountSelect({
113122
target: target,

‎packages/hw-common/src/entry-modal.ts

Lines changed: 13 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -215,7 +215,8 @@ const passphraseHTML = `
215215
export const entryModal = (
216216
modalType: string,
217217
submit: (value: string) => void,
218-
cancel: () => void
218+
cancel: () => void,
219+
containerElement?: string
219220
): void => {
220221
const modalHtml = modalType === 'pin' ? pinHTML : passphraseHTML
221222

@@ -236,13 +237,23 @@ export const entryModal = (
236237
}
237238
}
238239

240+
const containerElementQuery = containerElement || 'body'
241+
242+
const containerEl = document.querySelector(containerElementQuery)
243+
244+
if (!containerEl) {
245+
throw new Error(
246+
`Element with query ${containerElementQuery} does not exist.`
247+
)
248+
}
249+
239250
// Creates a modal component which gets
240251
// mounted to the body and is passed the pin html into it's slot
241252
const div = document.createElement('div')
242253
div.innerHTML = modalHtml
243254
div.className = 'keepkey-modal'
244255
const pinModal = new Modal({
245-
target: document.body,
256+
target: containerEl,
246257
props: {
247258
closeModal: () => {
248259
// Cancels any action that the keepkey wallet may be doing

‎packages/hw-common/src/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ export type SelectAccountOptions = {
4343
chains: Chain[] // the selectable chains/networks to scan for balance
4444
scanAccounts: ScanAccounts
4545
supportsCustomPath?: boolean
46+
containerElement?: string
4647
}
4748

4849
export type BasePath = {

‎packages/hw-common/src/validation.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,8 @@ const selectAccountOptions = Joi.object({
2828
assets: assets,
2929
chains: chains,
3030
scanAccounts: Joi.function().arity(1).required(),
31-
supportsCustomPath: Joi.bool()
31+
supportsCustomPath: Joi.bool(),
32+
containerElement: Joi.string()
3233
})
3334

3435
export const validateSelectAccountOptions = (

0 commit comments

Comments
 (0)