From 0618bcfd7adf2c61b48474dfe5386d3a6d58ed56 Mon Sep 17 00:00:00 2001 From: Adam Carpenter Date: Tue, 14 Mar 2023 11:42:07 -0600 Subject: [PATCH] [core, react, vue]: Feature - Add native Base Goerli chain support (#1587) * Add native Base chain support * bump react/vue packages * Update docs * Fix notify docs * update heading no need to make a heading bold * Revert disable ud res in demo * removing bold from other core props and sending notify lowercase as its a init prop * Add wallet module information --------- Co-authored-by: Gustavo Esquinca --- docs/package.json | 2 +- docs/src/lib/services/onboard.js | 6 +++ docs/src/routes/docs/[...3]modules/core.md | 43 +++++++++++++--------- 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 | 9 ++++- packages/demo/src/blocknative-icon.js | 27 +++++++++++++- packages/react/package.json | 4 +- packages/vue/package.json | 4 +- 12 files changed, 104 insertions(+), 32 deletions(-) create mode 100644 packages/core/src/icons/base.ts 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..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,16 +96,17 @@ 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. +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). --- -#### **chains** +#### chains An array of Chains that your app supports: @@ -124,7 +126,7 @@ type Chain = { --- -#### **appMetadata** +#### appMetadata An object that defines your app: @@ -169,7 +171,7 @@ type RecommendedInjectedWallets = { --- -#### **connectModal** +#### connectModal An object that allows for customizing the connect modal layout and behavior @@ -208,7 +210,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 +224,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 +268,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 +296,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 +323,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. @@ -458,6 +460,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 +1486,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 +1585,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 +1598,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. 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..a25892d80 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,6 +241,12 @@ token: 'ARB-ETH', label: 'Arbitrum', rpcUrl: 'https://rpc.ankr.com/arbitrum' + }, + { + id: 84531, + token: 'ETH', + label: 'Base Goerli', + rpcUrl: 'https://goerli.base.org' } ], connect: { @@ -249,7 +256,7 @@ }, 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 ` + + + + + + + + + + + + + + + + + + + + + + + + ` 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": {