[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 <g.esq.ca@gmail.com>
blocknative · Mar 14, 2023 · 0618bcf · 0618bcf
1 parent dfc522c
commit 0618bcf
Show file tree

Hide file tree

Showing 12 changed files with 104 additions and 32 deletions.
diff --git 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
@@ -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
@@ -27,6 +27,7 @@ npm install @web3-onboard/core
   </TabPanel>
 </Tabs>
 
+#### All Wallet Modules
 If you would like to support all wallets, then you can install all of the wallet modules:
 
 <Tabs values={['yarn', 'npm']}>
@@ -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
 <script>
-      var global = global || window
+  var global = global || window
 </script>
 ```
 
 ##### 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,20 +1585,19 @@ 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
 
 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.
+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
@@ -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
@@ -0,0 +1,18 @@
+export default `
+<svg height="100%" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1607_202)">
+<mask id="mask0_1607_202" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="32" height="32">
+<path d="M32 0H0V32H32V0Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1607_202)">
+<path d="M16 32C19.1645 32 22.258 31.0616 24.8892 29.3036C27.5204 27.5454 29.571 25.0466 30.782 22.123C31.993 19.1993 32.31 15.9823 31.6926 12.8786C31.0752 9.77486 29.5514 6.92394 27.3138 4.6863C25.076 2.44866 22.2252 0.924806 19.1214 0.307442C16.0177 -0.30992 12.8007 0.0069325 9.87706 1.21793C6.95344 2.42894 4.45458 4.4797 2.69648 7.11088C0.938384 9.74206 0 12.8355 0 16C0 20.2434 1.68571 24.3132 4.6863 27.3138C7.68688 30.3142 11.7565 32 16 32Z" fill="#0052FF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9624 27.2676C22.1852 27.2676 27.23 22.223 27.23 16C27.23 9.7771 22.1852 4.73242 15.9624 4.73242C10.0588 4.73242 5.21566 9.2726 4.7341 15.0518H21.4546V16.928H4.73242C5.20432 22.7168 10.0519 27.2676 15.9624 27.2676Z" fill="white"/>
+</g>
+</g>
+<defs>
+<clipPath id="clip0_1607_202">
+<rect width="32" height="32" fill="white"/>
+</clipPath>
+</defs>
+</svg>
+`
diff --git 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
@@ -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<string, string> = {
   '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<string, ChainStyle> = {
   '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
@@ -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
@@ -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
@@ -1,3 +1,26 @@
-export default `
-<svg id="Layer_1" height="100%" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 380.94 434.03"><defs><style>.cls-1{fill:#262a3d;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);}</style><linearGradient id="linear-gradient" x1="2.19" y1="163.03" x2="188.9" y2="163.03" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#55ccfe"/><stop offset="1" stop-color="#5e93ef"/></linearGradient><linearGradient id="linear-gradient-2" x1="2.19" y1="324.73" x2="375.61" y2="324.73" xlink:href="#linear-gradient"/></defs><polygon class="cls-1" points="64.42 324.73 2.19 216.93 126.66 216.93 126.66 216.93 188.9 324.73 64.42 324.73"/><polygon class="cls-2" points="126.66 216.93 2.19 216.93 64.42 109.13 188.9 109.13 126.66 216.93"/><polygon class="cls-1" points="251.14 216.93 188.9 109.13 64.42 109.13 2.19 1.33 251.14 1.33 375.61 216.93 251.14 216.93"/><polygon class="cls-3" points="251.14 432.53 2.19 432.53 64.42 324.73 188.9 324.73 251.14 216.93 375.61 216.93 251.14 432.53"/></svg>
+export default `<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="56" height="56" rx="8" fill="#262A3D"/>
+<g clip-path="url(#clip0_15747_103507)">
+<path d="M20.6176 35.9801L16.0142 27.9949H25.2218L29.826 35.9801H20.6176Z" fill="#262A3D"/>
+<path d="M20.6176 35.9801L16.0142 27.9949H25.2218L29.826 35.9801H20.6176Z" fill="white"/>
+<path d="M25.2218 27.9947H16.0142L20.6176 20.0095H29.826L25.2218 27.9947Z" fill="url(#paint0_linear_15747_103507)"/>
+<path d="M34.4302 27.9948L29.826 20.0096H20.6176L16.0142 12.0244H34.4302L43.6379 27.9948H34.4302Z" fill="#262A3D"/>
+<path d="M34.4302 27.9948L29.826 20.0096H20.6176L16.0142 12.0244H34.4302L43.6379 27.9948H34.4302Z" fill="white"/>
+<path d="M34.4302 43.9652H16.0142L20.6176 35.9801H29.826L34.4302 27.9949H43.6379L34.4302 43.9652Z" fill="url(#paint1_linear_15747_103507)"/>
+</g>
+<defs>
+<linearGradient id="paint0_linear_15747_103507" x1="16.0142" y1="24.0021" x2="29.826" y2="24.0021" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55CCFE"/>
+<stop offset="1" stop-color="#5E93EF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_15747_103507" x1="76.5102" y1="5214.05" x2="10391.8" y2="5214.05" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55CCFE"/>
+<stop offset="1" stop-color="#5E93EF"/>
+</linearGradient>
+<clipPath id="clip0_15747_103507">
+<rect width="27.6667" height="32" fill="white" transform="translate(16 12)"/>
+</clipPath>
+</defs>
+</svg>
+
 `
diff --git 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
@@ -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": {