diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md index 838c91c83..638b7b493 100644 --- 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 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 index 9d02c1a3b..ebea4c92b 100644 --- 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 index 1cf9a49a8..20acb8076 100644 --- 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) \ No newline at end of file diff --git a/docs/src/routes/docs/[...4]wallets/keystone.md b/docs/src/routes/docs/[...4]wallets/keystone.md index 1ec5b2fe1..419af689f 100644 --- 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 index c4b6bc3be..c021a6a53 100644 --- 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 index f81430c60..5ca9646a7 100644 --- 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 index 28b755549..7aa7ce087 100644 --- 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 index 88791b4be..c71fe8329 100644 --- 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 index f664fd266..009be20ce 100644 --- 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 index ab8a87eaf..2ae077ee8 100644 --- 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 index 5c3474a52..dcd5e2be4 100644 --- a/packages/core/src/views/connect/Index.svelte +++ b/packages/core/src/views/connect/Index.svelte @@ -500,7 +500,7 @@ {#if !autoSelect.disableModals} - +
{#if connect.showSidebar} @@ -559,11 +559,12 @@
{/if} - -
- -
- + {#if !connect.disableClose} + +
+ +
+ {/if}
{#if $modalStep$ === 'selectingWallet' || windowWidth <= MOBILE_WINDOW_WIDTH} {#if wallets.length} diff --git a/packages/dcent/README.md b/packages/dcent/README.md index 9d996d725..51a84d900 100644 --- 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 index 6a1186ee2..68e00a224 100644 --- 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 index a15dc5e8e..d6a35c241 100644 --- 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 index a64f124b8..d76cd0422 100644 --- 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 index f60f899bf..ea2b1953e 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -129,7 +129,8 @@ const trezorOptions = { email: 'test@test.com', - 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 index 170dc6671..4baad8862 100644 --- 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 index 1882e51ea..ff34593ad 100644 --- a/packages/hw-common/src/account-select.ts +++ b/packages/hw-common/src/account-select.ts @@ -106,8 +106,17 @@ const mountAccountSelect = ( } ` + 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 index daecd4512..77e1d32da 100644 --- 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 index b9b7ad960..9f9f75127 100644 --- 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 index d2da3a50b..2b202941d 100644 --- 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 = ( diff --git a/packages/hw-common/src/views/AccountSelect.svelte b/packages/hw-common/src/views/AccountSelect.svelte index 1f7b3f6c0..0efdea2c1 100644 --- a/packages/hw-common/src/views/AccountSelect.svelte +++ b/packages/hw-common/src/views/AccountSelect.svelte @@ -21,7 +21,8 @@ assets, chains, scanAccounts, - supportsCustomPath = true + supportsCustomPath = true, + containerElement } = selectAccountOptions let accountsListObject: AccountsList | undefined @@ -270,12 +271,19 @@ var(--account-select-modal-z-index) ); display: flex; - width: 100vw; - height: 100vh; align-items: center; justify-content: center; backdrop-filter: blur(4px); - background-color: rgba(0, 0, 0, 0.2); + background: var(--account-select-background-color, rgba(0, 0, 0, 0.2)); + } + + .fixed { + position: fixed; + } + + .h-w-100 { + width: 100vw; + height: 100vh; } .hardware-connect-modal { @@ -434,9 +442,14 @@ } -
+