From f524e252da9b85f2e7a3ae27033cd3419a69d2ef Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Tue, 14 Mar 2023 09:48:53 -0600 Subject: [PATCH 1/8] Add native Base chain support --- packages/core/package.json | 2 +- packages/core/src/icons/base.ts | 18 ++++++++++++++++++ packages/core/src/icons/index.ts | 8 +++++--- packages/core/src/utils.ts | 11 +++++++++-- packages/demo/package.json | 2 +- packages/demo/src/App.svelte | 11 +++++++++-- packages/demo/src/blocknative-icon.js | 27 +++++++++++++++++++++++++-- 7 files changed, 68 insertions(+), 11 deletions(-) create mode 100644 packages/core/src/icons/base.ts diff --git a/packages/core/package.json b/packages/core/package.json index 01f0b526f..845f4689b 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/core", - "version": "2.15.5-alpha.1", + "version": "2.15.5-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/icons/base.ts b/packages/core/src/icons/base.ts new file mode 100644 index 000000000..5f7e3dcc7 --- /dev/null +++ b/packages/core/src/icons/base.ts @@ -0,0 +1,18 @@ +export default ` + + + + + + + + + + + + + + + + +` \ No newline at end of file diff --git a/packages/core/src/icons/index.ts b/packages/core/src/icons/index.ts index ded63789b..3dda66abc 100644 --- a/packages/core/src/icons/index.ts +++ b/packages/core/src/icons/index.ts @@ -1,9 +1,7 @@ // bn branding export { default as defaultBnIcon } from './blocknative-icon.js' export { default as poweredByBlocknative } from './poweredByBlocknative.js' -// other -export { default as hourglass } from './hourglass.js' -export { default as questionIcon } from './question.js' +// chain icons export { default as ethereumIcon } from './ethereum.js' export { default as polygonIcon } from './polygon.js' export { default as binanceIcon } from './binance.js' @@ -14,6 +12,10 @@ export { default as celoIcon } from './celo.js' export { default as gnosisIcon } from './gnosis.js' export { default as harmonyOneIcon } from './harmony-one.js' export { default as arbitrumIcon } from './arbitrum.js' +export { default as baseIcon } from './base.js' +// other +export { default as hourglass } from './hourglass.js' +export { default as questionIcon } from './question.js' export { default as checkmark } from './checkmark.js' export { default as errorIcon } from './error.js' export { default as infoIcon } from './info.js' diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts index 827c7f70c..c5464824c 100644 --- a/packages/core/src/utils.ts +++ b/packages/core/src/utils.ts @@ -27,7 +27,8 @@ import { celoIcon, avalancheIcon, harmonyOneIcon, - arbitrumIcon + arbitrumIcon, + baseIcon } from './icons/index.js' import type { @@ -123,6 +124,7 @@ export const chainIdToLabel: Record = { '0x45': 'Optimism Kovan', '0xa86a': 'Avalanche', '0xa4ec': 'Celo', + '0x14a33': 'Base Goerli', '0x64': 'Gnosis', '0x63564C40': 'Harmony One', '0xa4b1': 'Arbitrum' @@ -201,7 +203,12 @@ export const chainStyles: Record = { '0xa4b1': { icon: arbitrumIcon, color: '#33394B' - } + }, + '0x14a33': { + icon: baseIcon, + color: '#0259F9' + }, + } export const unrecognizedChainStyle = { icon: questionIcon, color: '#33394B' } diff --git a/packages/demo/package.json b/packages/demo/package.json index 574d1887d..80d85aa9a 100644 --- a/packages/demo/package.json +++ b/packages/demo/package.json @@ -23,7 +23,7 @@ "webpack-dev-server": "4.7.4" }, "dependencies": { - "@web3-onboard/core": "^2.15.5-alpha.1", + "@web3-onboard/core": "^2.15.5-alpha.2", "@web3-onboard/coinbase": "^2.1.4", "@web3-onboard/transaction-preview": "^2.0.4", "@web3-onboard/dcent": "^2.2.3", diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index 6687d278b..ac9c39de1 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -27,6 +27,7 @@ import phantomModule from '@web3-onboard/phantom' import trustModule from '@web3-onboard/trust' import frontierModule from '@web3-onboard/frontier' + import blocknativeIcon from './blocknative-icon.js' import { recoverAddress, arrayify, @@ -240,16 +241,22 @@ token: 'ARB-ETH', label: 'Arbitrum', rpcUrl: 'https://rpc.ankr.com/arbitrum' + }, + { + id: 84531, + token: 'ETH', + label: 'Base Goerli', + rpcUrl: 'https://goerli.base.org' } ], connect: { // disableClose: true, - // disableUDResolution: true, + disableUDResolution: true, autoConnectLastWallet: true }, appMetadata: { name: 'Blocknative', - // icon: blocknativeIcon, + icon: blocknativeIcon, // logo: blocknativeLogo, description: 'Demo app for Onboard V2', recommendedInjectedWallets: [ diff --git a/packages/demo/src/blocknative-icon.js b/packages/demo/src/blocknative-icon.js index 75c62b717..a85040b7c 100644 --- a/packages/demo/src/blocknative-icon.js +++ b/packages/demo/src/blocknative-icon.js @@ -1,3 +1,26 @@ -export default ` - +export default ` + + + + + + + + + + + + + + + + + + + + + + + + ` From 2882d52cae1bca0cf7ca70f941d89eae72168148 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Tue, 14 Mar 2023 09:51:51 -0600 Subject: [PATCH 2/8] bump react/vue packages --- packages/react/package.json | 4 ++-- packages/vue/package.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react/package.json b/packages/react/package.json index 960bdb0c5..1a879c553 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/react", - "version": "2.6.6-alpha.1", + "version": "2.6.6-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.15.5-alpha.1", + "@web3-onboard/core": "^2.15.5-alpha.2", "@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 a9a8463f4..177e70a88 100644 --- a/packages/vue/package.json +++ b/packages/vue/package.json @@ -1,6 +1,6 @@ { "name": "@web3-onboard/vue", - "version": "2.5.6-alpha.1", + "version": "2.5.6-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 standardized 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.15.5-alpha.1", + "@web3-onboard/core": "^2.15.5-alpha.2", "vue-demi": "^0.12.4" }, "peerDependencies": { From dfda45963dc41927e6c46ce4e5a39a3cad16b0fc Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Tue, 14 Mar 2023 09:55:00 -0600 Subject: [PATCH 3/8] Update docs --- docs/package.json | 2 +- docs/src/lib/services/onboard.js | 6 ++++++ docs/src/routes/docs/[...3]modules/core.md | 17 ++++++++++++----- 3 files changed, 19 insertions(+), 6 deletions(-) diff --git a/docs/package.json b/docs/package.json index 86d798525..68eed4980 100644 --- a/docs/package.json +++ b/docs/package.json @@ -56,7 +56,7 @@ "dependencies": { "bnc-sdk": "^4.6.6", "@web3-onboard/coinbase": "^2.1.4", - "@web3-onboard/core": "^2.15.4", + "@web3-onboard/core": "^2.15.5", "@web3-onboard/dcent": "^2.2.3", "@web3-onboard/enkrypt": "^2.0.0", "@web3-onboard/fortmatic": "^2.0.14", diff --git a/docs/src/lib/services/onboard.js b/docs/src/lib/services/onboard.js index a8f8e9848..e2a53980f 100644 --- a/docs/src/lib/services/onboard.js +++ b/docs/src/lib/services/onboard.js @@ -179,6 +179,12 @@ const intiOnboard = async (theme) => { token: 'ARB-ETH', label: 'Arbitrum', rpcUrl: 'https://rpc.ankr.com/arbitrum' + }, + { + id: 84531, + token: 'ETH', + label: 'Base Goerli', + rpcUrl: 'https://goerli.base.org' } ], appMetadata: { diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md index 2bbf20c1f..ed39fdfa6 100644 --- a/docs/src/routes/docs/[...3]modules/core.md +++ b/docs/src/routes/docs/[...3]modules/core.md @@ -458,6 +458,12 @@ const onboard = Onboard({ token: 'ARB-ETH', label: 'Arbitrum', rpcUrl: 'https://rpc.ankr.com/arbitrum' + }, + { + id: 84531, + token: 'ETH', + label: 'Base Goerli', + rpcUrl: 'https://goerli.base.org' } ], appMetadata: { @@ -1478,21 +1484,23 @@ export default config If an error presents around `window` being undefined remove the `define.global` block. Add this to your `app.html` + ```html ``` ##### Buffer polyfill + It seems some component or dependency requires Node's Buffer. To polyfill this, the simplest way I could find was to install the buffer package and include the following in web3-onboard.ts: ```javascript import { Buffer } from 'buffer' globalThis.Buffer = Buffer ``` -See [this github issue](https://github.com/blocknative/web3-onboard/issues/1568#issuecomment-1463963462) for further troubleshooting +See [this github issue](https://github.com/blocknative/web3-onboard/issues/1568#issuecomment-1463963462) for further troubleshooting ### Vite @@ -1575,14 +1583,12 @@ Checkout a boilerplate example for NextJS v13 (here)[https://github.com/blocknat Checkout a boilerplate example for NextJS (here)[https://github.com/blocknative/web3-onboard/tree/develop/examples/with-nextjs] - :::admonition type=note If you are seeing an error during builds when dynamically importing Web3Onboard in a NextJS v13 project, try upgrading to to the Canary beta release of NextJS where this issue is fixed. ::: - ## Package Managers ### npm and yarn @@ -1590,5 +1596,6 @@ If you are seeing an error during builds when dynamically importing Web3Onboard Web3-Onboard will work out of the box with `npm` and `yarn` support. ### pnpm + We have had issues reported when using `pnpm` as the package manager when working with web3-onboard. -As we work to understand this new manager more and the issues around it we recommend using `npm` or `yarn` for now. \ No newline at end of file +As we work to understand this new manager more and the issues around it we recommend using `npm` or `yarn` for now. From 9d06c88a54b611ee5e1b308837c75f2092610e6e Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Tue, 14 Mar 2023 10:26:02 -0600 Subject: [PATCH 4/8] Fix notify docs --- docs/src/routes/docs/[...3]modules/core.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md index ed39fdfa6..5d93efcd5 100644 --- a/docs/src/routes/docs/[...3]modules/core.md +++ b/docs/src/routes/docs/[...3]modules/core.md @@ -321,7 +321,7 @@ type ContainerElements = { --- -#### **`notify`** +#### **notify** Notify provides by default transaction notifications for all connected wallets on the current blockchain. When switching chains the previous chain listeners remain active for 60 seconds to allow capture and report of remaining transactions that may be in flight. By default transaction notifications are captured if a DAppID is provided in the Onboard config along with the Account Center being enabled. From 204ae5daad9bacf49e83a84268a2458e5fabcfd4 Mon Sep 17 00:00:00 2001 From: Gustavo Esquinca Date: Tue, 14 Mar 2023 12:45:41 -0400 Subject: [PATCH 5/8] update heading no need to make a heading bold --- docs/src/routes/docs/[...3]modules/core.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md index 5d93efcd5..53b084c88 100644 --- a/docs/src/routes/docs/[...3]modules/core.md +++ b/docs/src/routes/docs/[...3]modules/core.md @@ -321,7 +321,7 @@ type ContainerElements = { --- -#### **notify** +#### Notify Notify provides by default transaction notifications for all connected wallets on the current blockchain. When switching chains the previous chain listeners remain active for 60 seconds to allow capture and report of remaining transactions that may be in flight. By default transaction notifications are captured if a DAppID is provided in the Onboard config along with the Account Center being enabled. From 86b0d58ff96759b0f60e76334aeb5ff18fb23ef6 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Tue, 14 Mar 2023 11:01:55 -0600 Subject: [PATCH 6/8] Revert disable ud res in demo --- packages/demo/src/App.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/demo/src/App.svelte b/packages/demo/src/App.svelte index ac9c39de1..a25892d80 100644 --- a/packages/demo/src/App.svelte +++ b/packages/demo/src/App.svelte @@ -251,7 +251,7 @@ ], connect: { // disableClose: true, - disableUDResolution: true, + // disableUDResolution: true, autoConnectLastWallet: true }, appMetadata: { From 959bda31b8d1ad2402f2dcd532abbb5dd6ca13cd Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Tue, 14 Mar 2023 11:07:00 -0600 Subject: [PATCH 7/8] removing bold from other core props and sending notify lowercase as its a init prop --- docs/src/routes/docs/[...3]modules/core.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md index 53b084c88..9b2acd593 100644 --- a/docs/src/routes/docs/[...3]modules/core.md +++ b/docs/src/routes/docs/[...3]modules/core.md @@ -98,13 +98,13 @@ type InitOptions { ### Options -#### **wallets** +#### wallets An array of wallet modules that you would like to be presented to the user to select from when connecting a wallet. A wallet module is an abstraction that allows for easy interaction without needing to know the specifics of how that wallet works and are separate packages that can be included. --- -#### **chains** +#### chains An array of Chains that your app supports: @@ -124,7 +124,7 @@ type Chain = { --- -#### **appMetadata** +#### appMetadata An object that defines your app: @@ -169,7 +169,7 @@ type RecommendedInjectedWallets = { --- -#### **connectModal** +#### connectModal An object that allows for customizing the connect modal layout and behavior @@ -208,7 +208,7 @@ type ConnectModalOptions = { --- -#### **i18n** +#### 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 an object for the `en` locale. @@ -222,7 +222,7 @@ Onboard is using the [ICU syntax](https://formatjs.io/docs/core-concepts/icu-syn --- -#### **theme** +#### theme A string or an object that defines the color theme web3-onboard will render the components. @@ -266,7 +266,7 @@ It will allow you to customize the look and feel of web3-onboard, try different --- -#### **accountCenter** +#### accountCenter An object that defines whether the account center UI (default and minimal) is enabled and its position on the screen. Currently the account center is enabled for both desktop and mobile devices. @@ -294,7 +294,7 @@ type AccountCenterPosition = 'topRight' | 'bottomRight' | 'bottomLeft' | 'topLef --- -#### **containerElements** +#### 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. @@ -321,7 +321,7 @@ type ContainerElements = { --- -#### Notify +#### notify Notify provides by default transaction notifications for all connected wallets on the current blockchain. When switching chains the previous chain listeners remain active for 60 seconds to allow capture and report of remaining transactions that may be in flight. By default transaction notifications are captured if a DAppID is provided in the Onboard config along with the Account Center being enabled. From adc57b29723b6094bb4f47b2b5ecc8774b80f84f Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Tue, 14 Mar 2023 11:19:41 -0600 Subject: [PATCH 8/8] Add wallet module information --- docs/src/routes/docs/[...3]modules/core.md | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/docs/src/routes/docs/[...3]modules/core.md b/docs/src/routes/docs/[...3]modules/core.md index 9b2acd593..7f6ec43a4 100644 --- a/docs/src/routes/docs/[...3]modules/core.md +++ b/docs/src/routes/docs/[...3]modules/core.md @@ -27,6 +27,7 @@ npm install @web3-onboard/core +#### All Wallet Modules If you would like to support all wallets, then you can install all of the wallet modules: @@ -95,12 +96,13 @@ type InitOptions { } ``` - -### Options +--- #### wallets -An array of wallet modules that you would like to be presented to the user to select from when connecting a wallet. A wallet module is an abstraction that allows for easy interaction without needing to know the specifics of how that wallet works and are separate packages that can be included. +An array of wallet modules that you would like to be presented to the user to select from when connecting a wallet. A wallet module is an abstraction that allows for easy interaction without needing to know the specifics of how that wallet works and are separate packages that can be included. +These modules are separate @web3-onboard packages such as `@web3-onboard/injected-wallets` or `@web3-onboard/ledger`. +For a full list click [here](#all-wallet-modules). ---