thirdweb-dev · Adamj1232 · Jan 25, 2023 · Jan 12, 2023 · Jan 12, 2023 · Jan 20, 2023
diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md
@@ -75,6 +75,10 @@ type InitOptions {
   apiKey?: string
   notify?: Partial<NotifyOptions>
   gas?: typeof gas
+  /**
+   * Customize the connect modal
+   */
+  connect?: ConnectModalOptions
   /**
    * 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.
    */
@@ -151,6 +155,21 @@ type RecommendedInjectedWallets = {
 }
 ```
 
+**`connectModal`**
+An object that allows for customizing the connect modal layout and behavior
+
+```typescript
+type ConnectModalOptions = {
+  showSidebar?: boolean
+  /**
+   * Disabled close of the connect modal with background click and
+   * hides the close button forcing an action from the connect modal
+   * Defaults to false
+   */
+  disableClose?: boolean
+}
+```
+
 **`i18n`**
 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.
 

diff --git a/docs/src/routes/docs/[...4]wallets/injected.md b/docs/src/routes/docs/[...4]wallets/injected.md
@@ -267,11 +267,12 @@ const injected = injectedModule({
 
 ### Injected Wallets Supported Natively
 
-- Metamask - _Desktop & Mobile_ (Mobile relies on Wallet Connect and is detected inside MetaMask app browser)
+- Metamask - _Desktop & Mobile_
 - Binance - _Desktop_
 - Coinbase - _Desktop & Mobile_
+- Phantom - _Desktop & Mobile_
+- Zerion - _Desktop & Mobile_
 - Tally - _Desktop_
-- Exodus - _Desktop & Mobile_
 - Trust - _Mobile_
 - Opera - _Desktop & Mobile_
 - Status - _Mobile_
@@ -303,6 +304,9 @@ const injected = injectedModule({
 - Core - _Desktop_
 - Bitski - _Desktop & Mobile_
 - Enkrypt - _Desktop & Mobile_
+- Zeal - _Desktop_
+- Exodus - _Desktop & Mobile_
+- Frontier - _Desktop & Mobile_
 
 ## Build Environments
 

diff --git a/docs/src/routes/docs/[...4]wallets/keepkey.md b/docs/src/routes/docs/[...4]wallets/keepkey.md
@@ -41,5 +41,38 @@ const connectedWallets = await onboard.connectWallet()
 console.log(connectedWallets)
 ```
 
+Initialization options:
+```typescript
+type keepkeyInitOptions = {
+  containerElement?: string
+  filter?: Platform
+}
+```
+
+The following is a list of the platforms that can be filtered:
+
+```typescript
+type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
+
+type Platform =
+  | 'Windows Phone'
+  | 'Windows'
+  | 'macOS'
+  | 'iOS'
+  | 'Android'
+  | 'Linux'
+  | 'Chrome OS'
+  | 'Android Browser'
+  | 'Chrome'
+  | 'Chromium'
+  | 'Firefox'
+  | 'Microsoft Edge'
+  | 'Opera'
+  | 'Safari'
+  | 'desktop'
+  | 'mobile'
+  | 'tablet'
+```
+
 ## Build Environments
 For build env configurations and setups please see the Build Env section [here](/docs/modules/core#build-environments)
diff --git a/docs/src/routes/docs/[...4]wallets/keystone.md b/docs/src/routes/docs/[...4]wallets/keystone.md
@@ -26,6 +26,8 @@ npm install @web3-onboard/keystone
 ```typescript
 type KeystoneOptions = {
   customNetwork?: CustomNetwork
+  filter?: Platform[]
+  containerElement?: string
 }
 
 interface CustomNetwork {

diff --git a/docs/src/routes/docs/[...4]wallets/trezor.md b/docs/src/routes/docs/[...4]wallets/trezor.md
@@ -28,6 +28,8 @@ type TrezorOptions = {
   email: string
   appUrl: string
   customNetwork?: CustomNetwork
+  filter?: Platform[]
+  containerElement?: string
 }
 
 interface CustomNetwork {
@@ -61,6 +63,8 @@ interface BootstrapNode {
   location: string
   comment: string
 }
+
+type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
 ```
 
 ### Usage

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -128,6 +128,12 @@ An object that allows for customization of the Connect Modal and accepts the typ
 ```typescript
 type ConnectModalOptions = {
   showSidebar?: boolean
+  showSidebar?: boolean
+  /**
+   * Disabled close of the connect modal with background click and
+   * hides the close button forcing an action from the connect modal
+   */
+  disableClose?: boolean // defaults to false
 }
 ```
 

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.14.0-alpha.1",
+  "version": "2.14.0-alpha.2",
   "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.",
   "keywords": [
     "Ethereum",

diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts
@@ -25,7 +25,8 @@ export const APP_INITIAL_STATE: AppState = {
   notifications: [],
   locale: '',
   connect: {
-    showSidebar: true
+    showSidebar: true,
+    disableClose: false
   }
 }
 

diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
@@ -175,6 +175,12 @@ export type i18n = typeof en
 
 export type ConnectModalOptions = {
   showSidebar?: boolean
+  /**
+   * Disabled close of the connect modal with background click and
+   * hides the close button forcing an action from the connect modal
+   * Defaults to false
+   */
+  disableClose?: boolean
 }
 
 export type CommonPositions =

diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts
@@ -171,7 +171,8 @@ const accountCenter = Joi.object({
 })
 
 const connectModalOptions = Joi.object({
-  showSidebar: Joi.boolean()
+  showSidebar: Joi.boolean(),
+  disableClose: Joi.boolean()
 })
 
 const containerElements = Joi.object({

diff --git a/packages/core/src/views/connect/Index.svelte b/packages/core/src/views/connect/Index.svelte
@@ -500,7 +500,7 @@
 <svelte:window bind:innerWidth={windowWidth} />
 
 {#if !autoSelect.disableModals}
-  <Modal {close}>
+  <Modal close={!connect.disableClose && close}>
     <div class="container">
       {#if connect.showSidebar}
         <Sidebar step={$modalStep$} />
@@ -559,11 +559,12 @@
             </div>
           </div>
         {/if}
-        <!-- svelte-ignore a11y-click-events-have-key-events -->
-        <div on:click={close} class="button-container absolute">
-          <CloseButton />
-        </div>
-
+        {#if !connect.disableClose}
+          <!-- svelte-ignore a11y-click-events-have-key-events -->
+          <div on:click={close} class="button-container absolute">
+            <CloseButton />
+          </div>
+        {/if}
         <div class="scroll-container" bind:this={scrollContainer}>
           {#if $modalStep$ === 'selectingWallet' || windowWidth <= MOBILE_WINDOW_WIDTH}
             {#if wallets.length}

diff --git a/packages/dcent/README.md b/packages/dcent/README.md
@@ -48,9 +48,20 @@ const connectedWallets = await onboard.connectWallet()
 console.log(connectedWallets)
 ```
 
+Initialization options:
+```typescript
+type dcentInitOptions = {
+  customNetwork?: CustomNetwork
+  filter?: Platform[]
+  containerElement?: string
+}
+```
+
 The following is a list of the platforms that can be filtered:
 
 ```typescript
+type Platform = DeviceOSName | DeviceBrowserName | DeviceType | 'all';
+
 type Platform =
   | 'Windows Phone'
   | 'Windows'

diff --git a/packages/dcent/package.json b/packages/dcent/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/dcent",
-  "version": "2.2.3-alpha.2",
+  "version": "2.2.3-alpha.3",
   "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.",
   "keywords": [
     "Ethereum",
@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "@web3-onboard/common": "^2.2.3",
-    "@web3-onboard/hw-common": "^2.1.0-alpha.1",
+    "@web3-onboard/hw-common": "^2.1.0-alpha.2",
     "@ethereumjs/tx": "^3.4.0",
     "@ethersproject/providers": "^5.5.0",
     "eth-dcent-keyring": "^0.2.2"

diff --git a/packages/dcent/src/index.ts b/packages/dcent/src/index.ts
@@ -59,10 +59,12 @@ const generateAccounts = async (
 
 function dcent({
   customNetwork,
-  filter
+  filter,
+  containerElement
 }: {
   customNetwork?: CustomNetwork
   filter?: Platform[]
+  containerElement?: string
 } = {}): WalletInit {
   const getIcon = async () => (await import('./icon.js')).default
 
@@ -135,7 +137,8 @@ function dcent({
             assets,
             chains,
             scanAccounts,
-            supportsCustomPath: false
+            supportsCustomPath: false,
+            containerElement
           })
           if (accounts.length) {
             eventEmitter.emit('accountsChanged', [accounts[0].address])

diff --git a/packages/demo/package.json b/packages/demo/package.json
@@ -23,23 +23,23 @@
     "webpack-dev-server": "4.7.4"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.14.0-alpha.1",
+    "@web3-onboard/core": "^2.14.0-alpha.2",
     "@web3-onboard/coinbase": "^2.1.4",
     "@web3-onboard/transaction-preview": "^2.0.0",
-    "@web3-onboard/dcent": "^2.2.3-alpha.1",
+    "@web3-onboard/dcent": "^2.2.3-alpha.3",
     "@web3-onboard/frontier": "^2.0.0",
     "@web3-onboard/fortmatic": "^2.0.14",
     "@web3-onboard/gas": "^2.1.3",
     "@web3-onboard/gnosis": "^2.1.6-alpha.1",
-    "@web3-onboard/keepkey": "^2.3.3-alpha.2",
-    "@web3-onboard/keystone": "^2.3.3-alpha.2",
+    "@web3-onboard/keepkey": "^2.3.3-alpha.3",
+    "@web3-onboard/keystone": "^2.3.3-alpha.3",
     "@web3-onboard/ledger": "^2.4.2-alpha.1",
     "@web3-onboard/injected-wallets": "^2.6.0",
     "@web3-onboard/magic": "^2.1.3",
     "@web3-onboard/phantom": "^2.0.0-alpha.1",
     "@web3-onboard/portis": "^2.1.3",
     "@web3-onboard/sequence": "^2.0.4",
-    "@web3-onboard/trezor": "^2.3.3-alpha.2",
+    "@web3-onboard/trezor": "^2.3.3-alpha.3",
     "@web3-onboard/torus": "^2.2.1",
     "@web3-onboard/tallyho": "^2.0.1",
     "@web3-onboard/web3auth": "^2.1.4",

diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte
@@ -129,7 +129,8 @@
 
   const trezorOptions = {
     email: '[email protected]',
-    appUrl: 'https://www.blocknative.com'
+    appUrl: 'https://www.blocknative.com',
+    // containerElement: '#sample-container-el'
   }
   const trezor = trezorModule(trezorOptions)
 
@@ -228,7 +229,7 @@
       }
     ],
     // connect: {
-    //   showSidebar: false
+    //   disableClose: true
     // },
     appMetadata: {
       name: 'Blocknative',

diff --git a/packages/hw-common/package.json b/packages/hw-common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/hw-common",
-  "version": "2.1.0-alpha.1",
+  "version": "2.1.0-alpha.2",
   "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.",
   "keywords": [
     "Ethereum",

diff --git a/packages/hw-common/src/account-select.ts b/packages/hw-common/src/account-select.ts
@@ -106,8 +106,17 @@ const mountAccountSelect = (
       }
     </style>
   `
+  const containerElementQuery = selectAccountOptions.containerElement || 'body'
 
-  document.body.appendChild(accountSelectDomElement)
+  const containerElement = document.querySelector(containerElementQuery)
+
+  if (!containerElement) {
+    throw new Error(
+      `Element with query ${containerElementQuery} does not exist.`
+    )
+  }
+
+  containerElement.appendChild(accountSelectDomElement)
 
   const app = new AccountSelect({
     target: target,

diff --git a/packages/hw-common/src/entry-modal.ts b/packages/hw-common/src/entry-modal.ts
@@ -215,7 +215,8 @@ const passphraseHTML = `
 export const entryModal = (
   modalType: string,
   submit: (value: string) => void,
-  cancel: () => void
+  cancel: () => void,
+  containerElement?: string
 ): void => {
   const modalHtml = modalType === 'pin' ? pinHTML : passphraseHTML
 
@@ -236,13 +237,23 @@ export const entryModal = (
     }
   }
 
+  const containerElementQuery = containerElement || 'body'
+
+  const containerEl = document.querySelector(containerElementQuery)
+
+  if (!containerEl) {
+    throw new Error(
+      `Element with query ${containerElementQuery} does not exist.`
+    )
+  }
+
   // Creates a modal component which gets
   // mounted to the body and is passed the pin html into it's slot
   const div = document.createElement('div')
   div.innerHTML = modalHtml
   div.className = 'keepkey-modal'
   const pinModal = new Modal({
-    target: document.body,
+    target: containerEl,
     props: {
       closeModal: () => {
         // Cancels any action that the keepkey wallet may be doing

diff --git a/packages/hw-common/src/types.ts b/packages/hw-common/src/types.ts
@@ -43,6 +43,7 @@ export type SelectAccountOptions = {
   chains: Chain[] // the selectable chains/networks to scan for balance
   scanAccounts: ScanAccounts
   supportsCustomPath?: boolean
+  containerElement?: string
 }
 
 export type BasePath = {

diff --git a/packages/hw-common/src/validation.ts b/packages/hw-common/src/validation.ts
@@ -28,7 +28,8 @@ const selectAccountOptions = Joi.object({
   assets: assets,
   chains: chains,
   scanAccounts: Joi.function().arity(1).required(),
-  supportsCustomPath: Joi.bool()
+  supportsCustomPath: Joi.bool(),
+  containerElement: Joi.string()
 })
 
 export const validateSelectAccountOptions = (