From 240000f622c9e70df9f4b010311a56584e62f915 Mon Sep 17 00:00:00 2001 From: ustas-eth <82833595+ustas-eth@users.noreply.github.com> Date: Mon, 10 Oct 2022 01:52:07 +0000 Subject: [PATCH 1/9] Fix file extension (#1312) --- packages/tallyho/{README.json => README.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/tallyho/{README.json => README.md} (100%) diff --git a/packages/tallyho/README.json b/packages/tallyho/README.md similarity index 100% rename from packages/tallyho/README.json rename to packages/tallyho/README.md From 4a20f2e919e366367dcf321410e2483b78f9a41e Mon Sep 17 00:00:00 2001 From: Usame Algan <5880855+usame-algan@users.noreply.github.com> Date: Wed, 12 Oct 2022 21:11:28 +0200 Subject: [PATCH 2/9] fix: Remove overflow property on document element when modal closes (#1310) * fix: Remove overflow property on document element when modal closes * Update packages/core/src/views/shared/Modal.svelte * Update versions * Bump react and vue packages Co-authored-by: Adam Carpenter --- packages/core/package.json | 2 +- packages/core/src/views/shared/Modal.svelte | 2 +- packages/demo/package.json | 2 +- packages/react/package.json | 4 ++-- packages/vue/package.json | 4 ++-- 5 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index 7722a9d7f..e2fa8c13b 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.9.0", + "version": "2.9.1-alpha.1", "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/views/shared/Modal.svelte b/packages/core/src/views/shared/Modal.svelte index 96325388f..43649bc2b 100644 --- a/packages/core/src/views/shared/Modal.svelte +++ b/packages/core/src/views/shared/Modal.svelte @@ -42,7 +42,7 @@ onDestroy(() => { device.type === 'mobile' ? (html.style.position = '') - : (html.style.overflow = 'auto') + : html.style.removeProperty('overflow') const scrollY = body.style.top body.style.top = '' window.scrollTo(0, parseInt(scrollY || '0') * -1) diff --git a/packages/demo/package.json b/packages/demo/package.json index 3b042a2bd..3b37e4dfb 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@web3-onboard/coinbase": "^2.1.3", - "@web3-onboard/core": "^2.9.0", + "@web3-onboard/core": "^2.9.1-alpha.1", "@web3-onboard/dcent": "^2.2.1", "@web3-onboard/fortmatic": "^2.0.14", "@web3-onboard/gas": "^2.1.3", diff --git a/packages/react/package.json b/packages/react/package.json index 79b9c2f39..9cdcb4878 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.3.6", + "version": "2.3.7-alpha.1", "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. 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, 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", @@ -62,7 +62,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/core": "^2.9.0", + "@web3-onboard/core": "^2.9.1-alpha.1", "@web3-onboard/common": "^2.2.3", "use-sync-external-store": "1.0.0" }, diff --git a/packages/vue/package.json b/packages/vue/package.json index 719394805..781d3d0d4 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/vue", - "version": "2.2.6", + "version": "2.2.7-alpha.1", "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. 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, 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", @@ -63,7 +63,7 @@ "@vueuse/core": "^8.4.2", "@vueuse/rxjs": "^8.2.0", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/core": "^2.9.0", + "@web3-onboard/core": "^2.9.1-alpha.1", "vue-demi": "^0.12.4" }, "peerDependencies": { From 8531a73d69365f7d584320f1c4b97a5d90f1c34e Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Wed, 12 Oct 2022 16:31:52 -0600 Subject: [PATCH 3/9] [core-v2.9.1-alpha.2, react-v2.3.7-alpha.2, vue-v2.2.7-alpha.2, hw-common-v2.0.4-alpha.1, all HW wallet pkgs]: Fix - Mobile scroll issue on modal close (#1317) * Refactor background scroll logic when connect modal is opened/closed * Align account select modal with connect modal * Clean up demo for small screens * Bump hw-common version * Bump hw package versions --- packages/core/package.json | 4 +-- packages/core/src/views/shared/Modal.svelte | 29 +++---------------- packages/dcent/package.json | 4 +-- packages/demo/package.json | 2 +- packages/demo/src/App.svelte | 9 ++++-- packages/hw-common/package.json | 2 +- .../hw-common/src/views/AccountSelect.svelte | 2 +- packages/keepkey/package.json | 4 +-- packages/keystone/package.json | 4 +-- packages/ledger/package.json | 4 +-- packages/react/package.json | 4 +-- packages/trezor/package.json | 4 +-- packages/vue/package.json | 4 +-- yarn.lock | 7 +++++ 14 files changed, 36 insertions(+), 47 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index e2fa8c13b..55265ef35 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.9.1-alpha.1", + "version": "2.9.1-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", @@ -92,7 +92,7 @@ "lodash.merge": "^4.6.2", "lodash.partition": "^4.6.0", "nanoid": "^4.0.0", - "rxjs": "^7.5.2", + "rxjs": "^7.5.5", "svelte": "^3.49.0", "svelte-i18n": "^3.3.13" } diff --git a/packages/core/src/views/shared/Modal.svelte b/packages/core/src/views/shared/Modal.svelte index 43649bc2b..c18c348a9 100644 --- a/packages/core/src/views/shared/Modal.svelte +++ b/packages/core/src/views/shared/Modal.svelte @@ -16,37 +16,16 @@ diff --git a/packages/dcent/package.json b/packages/dcent/package.json index 82b47e865..b2c509ac4 100644 --- a/packages/dcent/package.json +++ b/packages/dcent/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/dcent", - "version": "2.2.1", + "version": "2.2.2-alpha.1", "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.0.3", + "@web3-onboard/hw-common": "^2.0.4-alpha.1", "@ethereumjs/tx": "^3.4.0", "@ethersproject/providers": "^5.5.0", "eth-dcent-keyring": "^0.2.2" diff --git a/packages/demo/package.json b/packages/demo/package.json index 3b37e4dfb..75220601c 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@web3-onboard/coinbase": "^2.1.3", - "@web3-onboard/core": "^2.9.1-alpha.1", + "@web3-onboard/core": "^2.9.1-alpha.2", "@web3-onboard/dcent": "^2.2.1", "@web3-onboard/fortmatic": "^2.0.14", "@web3-onboard/gas": "^2.1.3", diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index 6754e982e..a3d5e9005 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -30,6 +30,8 @@ import blocknativeLogo from './blocknative-logo' import { onMount } from 'svelte' + let windowWidth + if (window.innerWidth < 700) { new VConsole() } @@ -672,7 +674,6 @@ overflow: hidden; width: 2em; height: 2em; - /* optional formatting below here */ border-radius: 50%; box-shadow: 1px 1px 3px 0px grey; margin: 1em; @@ -762,6 +763,8 @@ } + +
{#if hideForIframe}
@@ -1020,9 +1023,9 @@
{/each} {/if} - {#if !hideForIframe} + {#if !hideForIframe && windowWidth > 1040}
- +
{#each Object.keys(defaultStyling) as target}
diff --git a/packages/hw-common/package.json b/packages/hw-common/package.json index 89a4a4ece..f66fb0639 100644 --- a/packages/hw-common/package.json +++ b/packages/hw-common/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/hw-common", - "version": "2.0.3", + "version": "2.0.4-alpha.1", "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/views/AccountSelect.svelte b/packages/hw-common/src/views/AccountSelect.svelte index 5a4a92330..81ca6cef7 100644 --- a/packages/hw-common/src/views/AccountSelect.svelte +++ b/packages/hw-common/src/views/AccountSelect.svelte @@ -274,7 +274,7 @@ var(--onboard-font-family-normal, var(--font-family-normal)) ); color: var(--account-select-black, var(--onboard-black, var(--black))); - position: absolute; + position: fixed; top: 0; right: 0; z-index: var( diff --git a/packages/keepkey/package.json b/packages/keepkey/package.json index 7dadf06de..dc1aaea4a 100644 --- a/packages/keepkey/package.json +++ b/packages/keepkey/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/keepkey", - "version": "2.3.1", + "version": "2.3.2-alpha.1", "description": "KeepKey hardware 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", @@ -64,7 +64,7 @@ "@shapeshiftoss/hdwallet-core": "^1.15.2", "@shapeshiftoss/hdwallet-keepkey-webusb": "^1.15.2", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/hw-common": "^2.0.3", + "@web3-onboard/hw-common": "^2.0.4-alpha.1", "ethereumjs-util": "^7.1.3" } } diff --git a/packages/keystone/package.json b/packages/keystone/package.json index c844a4252..bd6e317eb 100644 --- a/packages/keystone/package.json +++ b/packages/keystone/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/keystone", - "version": "2.3.1", + "version": "2.3.2-alpha.1", "description": "Keystone hardware 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", @@ -59,6 +59,6 @@ "@ethersproject/providers": "^5.5.0", "@keystonehq/eth-keyring": "^0.14.00.3", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/hw-common": "^2.0.3" + "@web3-onboard/hw-common": "^2.0.4-alpha.1" } } diff --git a/packages/ledger/package.json b/packages/ledger/package.json index 8e293886e..92d70899f 100644 --- a/packages/ledger/package.json +++ b/packages/ledger/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/ledger", - "version": "2.3.1", + "version": "2.3.2-alpha.1", "description": "Ledger hardare 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", @@ -66,7 +66,7 @@ "@ledgerhq/hw-transport-webusb": "^6.19.0", "@metamask/eth-sig-util": "^4.0.0", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/hw-common": "^2.0.3", + "@web3-onboard/hw-common": "^2.0.4-alpha.1", "buffer": "^6.0.3", "ethereumjs-util": "^7.1.3" } diff --git a/packages/react/package.json b/packages/react/package.json index 9cdcb4878..dba4374ce 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.3.7-alpha.1", + "version": "2.3.7-alpha.2", "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. 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, 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", @@ -62,7 +62,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/core": "^2.9.1-alpha.1", + "@web3-onboard/core": "^2.9.1-alpha.2", "@web3-onboard/common": "^2.2.3", "use-sync-external-store": "1.0.0" }, diff --git a/packages/trezor/package.json b/packages/trezor/package.json index 849498c2b..e30c8fa0d 100644 --- a/packages/trezor/package.json +++ b/packages/trezor/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/trezor", - "version": "2.3.1", + "version": "2.3.2-alpha.1", "description": "Trezor hardware 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", @@ -61,7 +61,7 @@ "@ethereumjs/tx": "^3.4.0", "@ethersproject/providers": "^5.5.0", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/hw-common": "^2.0.3", + "@web3-onboard/hw-common": "^2.0.4-alpha.1", "buffer": "^6.0.3", "eth-crypto": "^2.1.0", "ethereumjs-util": "^7.1.3", diff --git a/packages/vue/package.json b/packages/vue/package.json index 781d3d0d4..e97b8efab 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/vue", - "version": "2.2.7-alpha.1", + "version": "2.2.7-alpha.2", "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. 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, 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", @@ -63,7 +63,7 @@ "@vueuse/core": "^8.4.2", "@vueuse/rxjs": "^8.2.0", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/core": "^2.9.1-alpha.1", + "@web3-onboard/core": "^2.9.1-alpha.2", "vue-demi": "^0.12.4" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index fda99da6f..33ec05902 100644 --- a/yarn.lock +++ b/yarn.lock @@ -9263,6 +9263,13 @@ rxjs@^7.5.2: dependencies: tslib "^2.1.0" +rxjs@^7.5.5: + version "7.5.7" + resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-7.5.7.tgz#2ec0d57fdc89ece220d2e702730ae8f1e49def39" + integrity sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA== + dependencies: + tslib "^2.1.0" + sade@^1.7.4: version "1.8.1" resolved "https://registry.yarnpkg.com/sade/-/sade-1.8.1.tgz#0a78e81d658d394887be57d2a409bf703a3b2701" From cb8529ea4ab1c94eb2f8be4ebdd4f4306c0f8362 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Thu, 20 Oct 2022 09:24:03 -0600 Subject: [PATCH 4/9] [core, react, vue]: Fix - AC Expanded Balance Right Align & Chain ID validation and Error Message (#1324) * Add alignment to balance row within AC and bump versions * Handle duplicate chain ID within Chain Validation * Update docs links to new docs site --- README.md | 2 +- examples/with-ledger/README.md | 2 +- packages/core/package.json | 2 +- packages/core/src/validation.ts | 13 +++- .../src/views/account-center/WalletRow.svelte | 1 + packages/demo/package.json | 2 +- packages/demo/src/App.svelte | 32 +++++--- packages/gas/README.md | 2 +- packages/react/package.json | 4 +- packages/vue/package.json | 4 +- yarn.lock | 76 +++++++++++++++++++ 11 files changed, 120 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 55f09836c..bfe8821a1 100644 --- a/README.md +++ b/README.md @@ -71,7 +71,7 @@ if (wallets[0]) { **Onboard v1 migration guide** -If you're coming from v1, we've created a [migration guide for you](https://docs.blocknative.com/onboard/migration-guide). +If you're coming from v1, we've created a [migration guide for you](https://onboard.blocknative.com/docs/overview/onboard.js-migration-guide#background). ## Documentation diff --git a/examples/with-ledger/README.md b/examples/with-ledger/README.md index 4f59ab4bd..9ee1ba13e 100644 --- a/examples/with-ledger/README.md +++ b/examples/with-ledger/README.md @@ -32,4 +32,4 @@ Open [http://localhost:3000](http://localhost:3000) with your browser to see the ## Learn More -To learn more about how you can use web3Onboard to integrate Ledger and other popular web3 wallets into your dApps, take a look at our documentation: [Web3Onboard Documentation](https://docs.blocknative.com/onboard) for more details. +To learn more about how you can use web3Onboard to integrate Ledger and other popular web3 wallets into your dApps, take a look at our documentation: [Web3Onboard Documentation](https://onboard.blocknative.com/docs/overview/introduction#features) for more details. diff --git a/packages/core/package.json b/packages/core/package.json index 55265ef35..72275ab64 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.9.1-alpha.2", + "version": "2.9.1-alpha.3", "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/validation.ts b/packages/core/src/validation.ts index 38ccd05c4..85788a3d1 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -59,7 +59,18 @@ const account = Joi.object({ balance }) -const chains = Joi.array().items(chainValidation) +const chains = Joi.array() + .items(chainValidation) + .unique((a, b) => a.id === b.id) + .error(e => { + if (e[0].code === 'array.unique') { + return new Error( + `There is a duplicate Chain ID in your Onboard Chains array: ${e}` + ) + } + return new Error(`${e}`) + }) + const accounts = Joi.array().items(account) const wallet = Joi.object({ diff --git a/packages/core/src/views/account-center/WalletRow.svelte b/packages/core/src/views/account-center/WalletRow.svelte index 2a9774468..964415a4b 100644 --- a/packages/core/src/views/account-center/WalletRow.svelte +++ b/packages/core/src/views/account-center/WalletRow.svelte @@ -104,6 +104,7 @@ white-space: nowrap; text-overflow: ellipsis; width: 7.25rem; + text-align: end; } .elipsis-container { diff --git a/packages/demo/package.json b/packages/demo/package.json index 75220601c..0e9735283 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -23,7 +23,7 @@ }, "dependencies": { "@web3-onboard/coinbase": "^2.1.3", - "@web3-onboard/core": "^2.9.1-alpha.2", + "@web3-onboard/core": "^2.9.1-alpha.3", "@web3-onboard/dcent": "^2.2.1", "@web3-onboard/fortmatic": "^2.0.14", "@web3-onboard/gas": "^2.1.3", diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index a3d5e9005..e237e70d3 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -141,16 +141,10 @@ rpcUrl: 'https://ropsten.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e' }, { - id: 4, - token: 'rETH', - label: 'Rinkeby', - rpcUrl: 'https://rinkeby.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e' - }, - { - id: 137, - token: 'MATIC', - label: 'Polygon', - rpcUrl: 'https://matic-mainnet.chainstacklabs.com' + id: '0x5', + token: 'ETH', + label: 'Goerli', + rpcUrl: `https://goerli.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e` }, { id: '0x13881', @@ -158,11 +152,29 @@ label: 'Polygon - Mumbai', rpcUrl: 'https://matic-mumbai.chainstacklabs.com ' }, + { + id: '0x38', + token: 'BNB', + label: 'Binance', + rpcUrl: 'https://bsc-dataseed.binance.org/' + }, + { + id: 137, + token: 'MATIC', + label: 'Polygon', + rpcUrl: 'https://matic-mainnet.chainstacklabs.com' + }, { id: 10, token: 'OETH', label: 'Optimism', rpcUrl: 'https://mainnet.optimism.io' + }, + { + id: 42161, + token: 'ARB-ETH', + label: 'Arbitrum', + rpcUrl: 'https://rpc.ankr.com/arbitrum' } ], // connect: { diff --git a/packages/gas/README.md b/packages/gas/README.md index ceca031cf..da9db35d0 100644 --- a/packages/gas/README.md +++ b/packages/gas/README.md @@ -1,6 +1,6 @@ # @web3-onboard/gas -## A module for requesting streams or single requests of gas price estimates from the [Blocknative Gas Platform API](https://docs.blocknative.com/gas-platform). +## A module for requesting streams or single requests of gas price estimates from the [Blocknative Gas Platform API](https://onboard.blocknative.com/docs/packages/gas). ### Install diff --git a/packages/react/package.json b/packages/react/package.json index dba4374ce..61f4631ac 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.3.7-alpha.2", + "version": "2.3.7-alpha.3", "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. 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, 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", @@ -62,7 +62,7 @@ "typescript": "^4.5.5" }, "dependencies": { - "@web3-onboard/core": "^2.9.1-alpha.2", + "@web3-onboard/core": "^2.9.1-alpha.3", "@web3-onboard/common": "^2.2.3", "use-sync-external-store": "1.0.0" }, diff --git a/packages/vue/package.json b/packages/vue/package.json index e97b8efab..eba7323ed 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/vue", - "version": "2.2.7-alpha.2", + "version": "2.2.7-alpha.3", "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. 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, 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", @@ -63,7 +63,7 @@ "@vueuse/core": "^8.4.2", "@vueuse/rxjs": "^8.2.0", "@web3-onboard/common": "^2.2.3", - "@web3-onboard/core": "^2.9.1-alpha.2", + "@web3-onboard/core": "^2.9.1-alpha.3", "vue-demi": "^0.12.4" }, "peerDependencies": { diff --git a/yarn.lock b/yarn.lock index 33ec05902..83649787c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2953,6 +2953,82 @@ dependencies: "@walletconnect/window-getters" "^1.0.0" +"@web3-onboard/dcent@^2.2.1": + version "2.2.1" + resolved "https://registry.yarnpkg.com/@web3-onboard/dcent/-/dcent-2.2.1.tgz#88a0aa781e7bd2279cf32751a69f19c97532ccf3" + integrity sha512-RO7HJnkRMcod4R5Nb2YU63GiNuvpiucKI+F6AmsHwVksj2qcS3fwlJl09uZVK1a2ERkNUSNhp4BCTUsc9esuxw== + dependencies: + "@ethereumjs/tx" "^3.4.0" + "@ethersproject/providers" "^5.5.0" + "@web3-onboard/common" "^2.2.3" + "@web3-onboard/hw-common" "^2.0.3" + eth-dcent-keyring "^0.2.2" + +"@web3-onboard/hw-common@^2.0.3": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@web3-onboard/hw-common/-/hw-common-2.0.3.tgz#8e73ef3c94d2f513e8439804f8a541ccac1cf845" + integrity sha512-hfCVVgNjKIJXjinqMTmYfxqiOTausYj77IrWhSaIk9W9PfAEX+BnPLMhmbuNb39FBVWg/ucvMIiG3pwY6hXoOw== + dependencies: + "@ethereumjs/common" "2.6.2" + "@web3-onboard/common" "^2.2.3" + ethers "5.5.4" + joi "^17.6.1" + rxjs "^7.5.2" + +"@web3-onboard/keepkey@^2.3.1": + version "2.3.1" + resolved "https://registry.yarnpkg.com/@web3-onboard/keepkey/-/keepkey-2.3.1.tgz#00712e1799f2016da2f1fd22f461989e5c436713" + integrity sha512-OA36iTNLkLjFQrt2xsNou+kEdjBVQDxHDJeeTcII4OjEqcTP300GifNd2RIW5sTWP+CK6hx2EWZLDUZGXVJe0A== + dependencies: + "@ethersproject/providers" "^5.5.0" + "@shapeshiftoss/hdwallet-core" "^1.15.2" + "@shapeshiftoss/hdwallet-keepkey-webusb" "^1.15.2" + "@web3-onboard/common" "^2.2.3" + "@web3-onboard/hw-common" "^2.0.3" + ethereumjs-util "^7.1.3" + +"@web3-onboard/keystone@^2.3.1": + version "2.3.1" + resolved "https://registry.yarnpkg.com/@web3-onboard/keystone/-/keystone-2.3.1.tgz#b9a47fa4a4df3462ccd1326466ce883697208cde" + integrity sha512-Evz3/DLcpCIH9pvAmr1Ukd7yNodGgkoLiLmYP9MjEk5FVC1N7/e7sQYQVJ9CmbH9x2a+s37XBsx+g55G2a3cow== + dependencies: + "@ethereumjs/tx" "^3.4.0" + "@ethersproject/providers" "^5.5.0" + "@keystonehq/eth-keyring" "^0.14.00.3" + "@web3-onboard/common" "^2.2.3" + "@web3-onboard/hw-common" "^2.0.3" + +"@web3-onboard/ledger@^2.3.1": + version "2.3.1" + resolved "https://registry.yarnpkg.com/@web3-onboard/ledger/-/ledger-2.3.1.tgz#21afedd376da9dc54e32493f9cafaadd043511f0" + integrity sha512-KNBwJFbL0vivqmArSqTI+05AKhikP/HYLEbuVI9brY5YM/5LXap/QslM8FYECmomOyCofpouPV4AreSWkyRvuA== + dependencies: + "@ethereumjs/tx" "^3.4.0" + "@ethersproject/providers" "^5.5.0" + "@ledgerhq/hw-app-eth" "^6.19.0" + "@ledgerhq/hw-transport-u2f" "^5.36.0-deprecated" + "@ledgerhq/hw-transport-webusb" "^6.19.0" + "@metamask/eth-sig-util" "^4.0.0" + "@web3-onboard/common" "^2.2.3" + "@web3-onboard/hw-common" "^2.0.3" + buffer "^6.0.3" + ethereumjs-util "^7.1.3" + +"@web3-onboard/trezor@^2.3.1": + version "2.3.1" + resolved "https://registry.yarnpkg.com/@web3-onboard/trezor/-/trezor-2.3.1.tgz#48e4f25cd647dd668aca13293a30e68757e00122" + integrity sha512-fINzu1TzMUSh9BlXZC4geQDP1lV4nOtl+8mTHw116L1GYtqAFwtVWmxGx7jzrpyxDj02CQha8UIqiHiOK43f8w== + dependencies: + "@ethereumjs/tx" "^3.4.0" + "@ethersproject/providers" "^5.5.0" + "@web3-onboard/common" "^2.2.3" + "@web3-onboard/hw-common" "^2.0.3" + buffer "^6.0.3" + eth-crypto "^2.1.0" + ethereumjs-util "^7.1.3" + hdkey "^2.0.1" + trezor-connect "^8.2.11" + "@web3auth/base-plugin@^1.0.1": version "1.0.1" resolved "https://registry.yarnpkg.com/@web3auth/base-plugin/-/base-plugin-1.0.1.tgz#1e2a87acf745299fdff6f92e6c46ee9bc38aa670" From 5076ff6665010a0de556587c93a93d771dd6c45d Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Thu, 20 Oct 2022 09:51:21 -0600 Subject: [PATCH 5/9] [core, react, vue]: Fix - Account Center container el (#1323) * Working as expected with styles * cleanup and props for AC localized to AC index * mark accountCenter.containerElement as deprecated * Add documentation around container element usage * Final cleanup for now * Update demo * yarn it * Remove unused link --- packages/core/README.md | 56 ++++++++++---- packages/core/package.json | 2 +- packages/core/src/configuration.ts | 3 +- packages/core/src/constants.ts | 1 - packages/core/src/index.ts | 6 +- packages/core/src/types.ts | 16 +++- packages/core/src/validation.ts | 7 +- packages/core/src/views/Index.svelte | 77 ++++++++++++++----- .../src/views/account-center/Index.svelte | 22 ++++-- packages/demo/package.json | 2 +- packages/demo/public/index.html | 3 +- packages/demo/src/App.svelte | 5 ++ packages/react/package.json | 4 +- packages/vue/package.json | 4 +- 14 files changed, 155 insertions(+), 53 deletions(-) diff --git a/packages/core/README.md b/packages/core/README.md index 7e3016301..20a367a8d 100644 --- a/packages/core/README.md +++ b/packages/core/README.md @@ -78,6 +78,13 @@ type AppMetadata = { explore?: string // if your app only supports injected wallets and when no injected wallets detected, recommend the user to install some recommendedInjectedWallets?: RecommendedInjectedWallets[] + /** Gas module */ + gas?: typeof gas + /** + * 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. + */ + containerElements?: Partial } type RecommendedInjectedWallets = { @@ -106,21 +113,38 @@ type i18nOptions = Record To see a list of all of the text values that can be internationalized or replaced, check out the [default en file](src/i18n/en.json). Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syntax/) for formatting under the hood. +**`containerElements`** +An object mapping for W3O components with the key being the DOM element to mount the specified component to. +This defines the DOM container element for svelte to attach the component. + +**NOTE**: containerElement must be a DOM element with a styleSheet property attached and the element must be available on the DOM at the time of component mounting. +For an example please see containerElement usage [here](https://github.com/blocknative/web3-onboard/blob/8531a73d69365f7d584320f1c4b97a5d90f1c34e/packages/demo/src/App.svelte#L227) + +```typescript +type ContainerElements = { + // when using the accountCenter with a container el the accountCenter position properties are ignored + accountCenter?: string +} +``` + **`accountCenter`** An object that defines whether the account center UI (default and minimal) is enabled and it's position on the screen. Currently the account center is enabled for both desktop and mobile devices. ```typescript -export type AccountCenter = { +type AccountCenter = { enabled: boolean position?: AccountCenterPosition // default: 'topRight' expanded?: boolean // default: true minimal?: boolean // enabled by default for mobile - containerElement?: string // defines the DOM container element for svelte to attach - // **NOTE: containerElement must be a DOM element with a styleSheet property attached. - // This property can normally be omitted from the config and allowed to default to document.body + + /** + * @deprecated Use top level containerElements property + * with the accountCenter prop set to the desired container El + */ + containerElement?: string // defines the DOM container element for svelte to attach } -export type AccountCenterOptions = { +type AccountCenterOptions = { desktop: Omit mobile: Omit } @@ -170,11 +194,11 @@ unsubscribe() ``` ```typescript -export type NotifyOptions = { +type NotifyOptions = { desktop: Notify mobile: Notify } -export type Notify = { +type Notify = { enabled: boolean // default: true /** * Callback that receives all transaction events @@ -196,17 +220,13 @@ export type Notify = { } } -export type CommonPositions = - | 'topRight' - | 'bottomRight' - | 'bottomLeft' - | 'topLeft' +type CommonPositions = 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLeft' -export type TransactionHandlerReturn = CustomNotification | boolean | void +type TransactionHandlerReturn = CustomNotification | boolean | void -export type CustomNotification = Partial> +type CustomNotification = Partial> -export type Notification = { +type Notification = { id: string key: string type: NotificationType @@ -219,7 +239,7 @@ export type Notification = { onClick?: (event: Event) => void } -export type NotificationType = 'pending' | 'success' | 'error' | 'hint' +type NotificationType = 'pending' | 'success' | 'error' | 'hint' export declare type Network = | 'main' @@ -588,7 +608,9 @@ const onboard = Onboard({ token: 'ETH', label: 'Ethereum Mainnet', // Only one RPC required - rpcUrl: `https://mainnet.infura.io/v3/${INFURA_KEY}` || `https://eth-mainnet.g.alchemy.com/v2/${ALCHEMY_KEY}` + rpcUrl: + `https://mainnet.infura.io/v3/${INFURA_KEY}` || + `https://eth-mainnet.g.alchemy.com/v2/${ALCHEMY_KEY}` } ] }) diff --git a/packages/core/package.json b/packages/core/package.json index 72275ab64..937ca724e 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.9.1-alpha.3", + "version": "2.10.0-alpha.1", "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/configuration.ts b/packages/core/src/configuration.ts index 8f7f8d294..68c9332f2 100644 --- a/packages/core/src/configuration.ts +++ b/packages/core/src/configuration.ts @@ -7,7 +7,8 @@ export let configuration: Configuration = { apiKey: null, device: getDevice(), initialWalletInit: [], - gas: null + gas: null, + containerElements: { accountCenter: null } } export function updateConfiguration(update: Partial): void { diff --git a/packages/core/src/constants.ts b/packages/core/src/constants.ts index 609427b6e..dafc25761 100644 --- a/packages/core/src/constants.ts +++ b/packages/core/src/constants.ts @@ -9,7 +9,6 @@ export const APP_INITIAL_STATE: AppState = { enabled: true, position: 'topRight', expanded: false, - containerElement: 'body', minimal: configuration.device.type === 'mobile' }, notify: { diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 554518985..e1be1e4be 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -89,9 +89,12 @@ function init(options: InitOptions): OnboardAPI { apiKey, notify, gas, - connect + connect, + containerElements } = options + updateConfiguration({ containerElements }) + const { device, svelteInstance } = configuration if (svelteInstance) { @@ -122,7 +125,6 @@ function init(options: InitOptions): OnboardAPI { ...accountCenter.desktop } } - updateAccountCenter(accountCenterUpdate) } diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 65b591ba4..268acfaf7 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -50,8 +50,13 @@ export interface InitOptions { * Transaction notification options */ notify?: Partial | Partial - /**Gas module */ + /** Gas module */ gas?: typeof gas + /** + * Object mapping for W3O components with the key being the DOM element to mount + * the component to, this defines the DOM container element for svelte to attach the component + */ + containerElements?: Partial } export interface ConnectOptions { @@ -131,6 +136,7 @@ export type Configuration = { appMetadata?: AppMetadata | null apiKey?: string gas?: typeof gas + containerElements?: ContainerElements } export type Locale = string @@ -156,6 +162,10 @@ export type AccountCenter = { position?: AccountCenterPosition expanded?: boolean minimal?: boolean + /** + * @deprecated Use top level containerElements property + * with the accountCenter prop set to the desired container El + */ containerElement?: string } @@ -164,6 +174,10 @@ export type AccountCenterOptions = { mobile: Omit } +export type ContainerElements = { + accountCenter?: string +} + export type Notify = { /** * Defines whether whether to subscribe to transaction events or not diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index 85788a3d1..33cb1065a 100644 --- a/packages/core/src/validation.ts +++ b/packages/core/src/validation.ts @@ -165,6 +165,10 @@ const connectModalOptions = Joi.object({ showSidebar: Joi.boolean() }) +const containerElements = Joi.object({ + accountCenter: Joi.string() +}) + const initOptions = Joi.object({ wallets: walletInit, chains: chains.required(), @@ -180,7 +184,8 @@ const initOptions = Joi.object({ get: Joi.function().required(), stream: Joi.function().required() }), - connect: connectModalOptions + connect: connectModalOptions, + containerElements: containerElements }) const connectOptions = Joi.object({ diff --git a/packages/core/src/views/Index.svelte b/packages/core/src/views/Index.svelte index 6eda34e0f..5a8f90e9a 100644 --- a/packages/core/src/views/Index.svelte +++ b/packages/core/src/views/Index.svelte @@ -9,7 +9,7 @@ import type { Observable } from 'rxjs' import type { Notification } from '../types.js' - const { device } = configuration + const { device, containerElements } = configuration const accountCenter$ = state .select('accountCenter') .pipe(startWith(state.get().accountCenter), shareReplay(1)) @@ -50,6 +50,7 @@ : Promise.resolve(null) $: sharedContainer = + !accountCenterMountToElement && $accountCenter$.enabled && $notify$.enabled && $notify$.position === $accountCenter$.position @@ -58,25 +59,18 @@ device.type === 'mobile' || $accountCenter$.position === $notify$.position $: sharedMobileContainerCheck = - device.type === 'mobile' && - (($notify$.position.includes('bottom') && + ($notify$.position.includes('bottom') && $accountCenter$.position.includes('bottom')) || - ($notify$.position.includes('top') && - $accountCenter$.position.includes('top'))) - - $: separateMobileContainerCheck = - device.type === 'mobile' && - (($notify$.position.includes('top') && - $accountCenter$.position.includes('bottom')) || - ($notify$.position.includes('bottom') && - $accountCenter$.position.includes('top'))) + ($notify$.position.includes('top') && + $accountCenter$.position.includes('top')) $: displayNotifySeparate = $notify$.enabled && (!$accountCenter$.enabled || + accountCenterMountToElement || ($notify$.position !== $accountCenter$.position && device.type !== 'mobile') || - separateMobileContainerCheck || + (device.type === 'mobile' && !sharedMobileContainerCheck) || !$wallets$.length) $: displayAccountCenterSeparate = @@ -84,14 +78,61 @@ (!$notify$.enabled || ($notify$.position !== $accountCenter$.position && device.type !== 'mobile') || - separateMobileContainerCheck) && + (device.type === 'mobile' && !sharedMobileContainerCheck)) && $wallets$.length $: displayAccountCenterNotifySameContainer = $notify$.enabled && $accountCenter$.enabled && - $wallets$.length && - (sharedContainer || sharedMobileContainerCheck) + (sharedContainer || + (device.type === 'mobile' && sharedMobileContainerCheck)) && + $wallets$.length + + const accountCenterMountToElement = + $accountCenter$.enabled && + containerElements && + containerElements.accountCenter + + if (accountCenterMountToElement) { + const accountCenter = document.createElement('onboard-account-center') + const target = accountCenter.attachShadow({ mode: 'open' }) + + let getW3OEl = document.querySelector('onboard-v2') + let w3OStyleSheets = getW3OEl.shadowRoot.styleSheets + const accountCenterStyleSheet = new CSSStyleSheet() + + // Copy Onboard stylesheets over to AccountCenter shadow DOM + Object.values(w3OStyleSheets).forEach(sheet => { + const styleRules = Object.values(sheet.cssRules) + styleRules.forEach(rule => + accountCenterStyleSheet.insertRule(rule.cssText) + ) + }) + target.adoptedStyleSheets = [accountCenterStyleSheet] + + const containerElement = document.querySelector(accountCenterMountToElement) + + containerElement.appendChild(accountCenter) + if (!containerElement) { + throw new Error( + `Element with query ${accountCenterMountToElement} does not exist.` + ) + } + + const getACComp = async () => { + let acComponent = await accountCenterComponent + if (acComponent) { + new acComponent({ + target, + props: { + settings: $accountCenter$, + mountInContainer: true + } + }) + } + } + getACComp() + }