[UPDATE] - Celo icon and demo support (#2131)

* Bump versions for release and Remove console.log * Update celo icon and add celo support to demo examples * Update more docs * Interact with w3o providers * Use different celo icon * Update docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md * Update versions
blocknative · Apr 4, 2024 · 4eff194 · 4eff194
1 parent 9b871a1
commit 4eff194
Show file tree

Hide file tree

Showing 23 changed files with 172 additions and 54 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -58,7 +58,7 @@
     "@web3-onboard/capsule": "^2.0.1",
     "@web3-onboard/cede-store": "^2.2.0",
     "@web3-onboard/coinbase": "^2.2.7",
-    "@web3-onboard/core": "^2.21.3",
+    "@web3-onboard/core": "^2.21.4-alpha.1",
     "@web3-onboard/dcent": "^2.2.7",
     "@web3-onboard/enkrypt": "^2.0.4",
     "@web3-onboard/fortmatic": "^2.0.19",

diff --git a/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md b/docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md
@@ -32,9 +32,9 @@ Web3-Onboard is the quickest and easiest way to add multi-wallet and multi-chain
 
 - **Notify:** Real-time transaction notifications for all transaction states for the connected wallet address(es). In-notification speedups & cancels for hardware wallet connections.
 
-### Supported Networks
+### Natively Supported EVM Chains
 
-web3-onboard supports all EVM networks. Supporting a new network is simply a matter of adding its details in the Chains section upon initialization. For more information see [initialization options](../../modules/core.md#initialization).
+web3-onboard supports ALL EVM networks. Supporting a new network is simply a matter of adding its details in the Chains section upon initialization. For more information see [initialization options](../../modules/core.md#initialization).
 
 - Ethereum
 - Arbitrum One
@@ -126,6 +126,12 @@ const onboard = Onboard({
       token: 'ETH',
       label: 'Base',
       rpcUrl: 'https://mainnet.base.org'
+    },
+    {
+      id: '0xa4ec',
+      token: 'ETH',
+      label: 'Celo',
+      rpcUrl: 'https://1rpc.io/celo'
     }
   ]
 })

diff --git a/docs/src/routes/docs/[...3]modules/[...1]core/+page.md b/docs/src/routes/docs/[...3]modules/[...1]core/+page.md
@@ -671,6 +671,12 @@ const onboard = Onboard({
       token: 'OETH',
       label: 'Optimism',
       rpcUrl: 'https://mainnet.optimism.io'
+    },
+    {
+      id: '0xa4ec',
+      token: 'ETH',
+      label: 'Celo',
+      rpcUrl: 'https://1rpc.io/celo'
     }
   ],
   appMetadata: {
@@ -755,6 +761,10 @@ const onboard = Onboard({
 
 To initiate a user to select and connect a wallet you can call the `connectWallet` function on an initialized Onboard instance. It will return a `Promise` that will resolve when the user either successfully connects a wallet, or when they dismiss the UI. The resolved value from the promise will be the latest state of the `wallets` array. The order of the wallets array is last to first, so the most recently selected wallet will be the first item in the array and can be thought of as the "primary wallet". If no wallet was selected, then the `wallets` array will have the same state as it had before calling `connectWallet`.
 
+### Wallet Provider
+
+Wallets connected through web3-onboard are all passed to the dapp following the EIP-1193 standard. This allows for the same interaction between all wallets connected through web3-onboard and abstracts away the challenges of working with different wallet providers.
+
 ### Example
 
 ```javascript
@@ -766,6 +776,10 @@ async function connectWallet() {
 connectWallet()
 ```
 
+### Interacting with the providers - Transfer, Send, Sign using ethers.js
+
+For examples of interacting with the wallet providers please see our demo project [here](https://github.com/blocknative/web3-onboard/blob/9b871a1b3117e92a7c87285677fa5b35c544a8e0/packages/demo/src/App.svelte#L447)
+
 ### Auto Selecting a Wallet
 
 A common UX pattern is to remember the last wallet that a user has previously connected by storing it in localStorage and then automatically selecting them for the user next time they visit your app.

diff --git a/docs/src/routes/docs/[...4]wallets/[...14]injected/+page.md b/docs/src/routes/docs/[...4]wallets/[...14]injected/+page.md
@@ -4,10 +4,14 @@ title: Injected Wallets
 
 # {$frontmatter.title}
 
-This module lets web3-onboard automatically detect Browser Injected Wallets such as Metamask or Coinbase Wallet. We recommend you install this module to get the most out of your w3o implementation. This module supports [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) and [recognizes many injected wallets natively](#injected-wallets-supported-natively) as well as supports [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) and recognizes any wallet that has implemented 6963 support.
+This module lets web3-onboard automatically detect Browser Injected Wallets such as Metamask or Coinbase Wallet. We recommend you install this module to get the most out of your w3o implementation. This module supports [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) and [recognizes many injected wallets natively](#injected-wallets-supported-natively) as well as supports all [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) compatible wallets.
 
 Note: Make sure to install the core module before installing other modules to w3o.
 
+### Support all EIP-6963 Wallets out of the box
+
+Web3-Onboard supports all [EIP-6963](https://eips.ethereum.org/EIPS/eip-6963) compatible wallets out of the box and will automatically recognizes any wallet which has integrated 6963 support.
+
 ## Install
 
 <Tabs values={['yarn', 'npm']}>

diff --git a/docs/src/routes/examples/[...1]connect-wallet/+page.md b/docs/src/routes/examples/[...1]connect-wallet/+page.md
@@ -38,7 +38,6 @@ npm install @web3-onboard/react @web3-onboard/injected-wallets @web3-onboard/inf
   </TabPanel>
 </Tabs>
 
-
 ## Step 2: Import + Configure
 
 Import the libraries and any wallets you would like to use. For this example, we are going to use the injected wallets module. You can easily add more wallet support to your dapp via our other wallet modules. Additionally, we'll setup web3-onboard to support 2 chains: Ethereum mainnet and Polygon mainnet.
@@ -156,6 +155,12 @@ const chains = [
     token: 'ARB-ETH',
     label: 'Arbitrum',
     rpcUrl: 'https://rpc.ankr.com/arbitrum'
+  },
+  {
+    id: '0xa4ec',
+    token: 'ETH',
+    label: 'Celo',
+    rpcUrl: 'https://1rpc.io/celo'
   }
 ]
 
@@ -412,6 +417,12 @@ const chains = [
     token: 'ARB-ETH',
     label: 'Arbitrum',
     rpcUrl: 'https://rpc.ankr.com/arbitrum'
+  },
+  {
+    id: '0xa4ec',
+    token: 'ETH',
+    label: 'Celo',
+    rpcUrl: 'https://1rpc.io/celo'
   }
 ]
 
@@ -497,3 +508,7 @@ Now that we have our wallet connected, let's display some basic information, suc
 
   </TabPanel>
 </Tabs>
+
+## Interacting with the providers - Transfer, Send, Sign using ethers.js
+
+For examples of interacting with the wallet providers please see our demo project [here](https://github.com/blocknative/web3-onboard/blob/9b871a1b3117e92a7c87285677fa5b35c544a8e0/packages/demo/src/App.svelte#L447)
diff --git a/examples/with-nextjs-13/web3-onboard.ts b/examples/with-nextjs-13/web3-onboard.ts
@@ -123,6 +123,12 @@ export default init({
       token: 'MATIC',
       label: 'Matic Mainnet',
       rpcUrl: 'https://matic-mainnet.chainstacklabs.com'
+    },
+    {
+      id: '0xa4ec',
+      token: 'ETH',
+      label: 'Celo',
+      rpcUrl: 'https://1rpc.io/celo'
     }
   ],
   appMetadata: {

diff --git a/examples/with-nextjs/pages/_app.js b/examples/with-nextjs/pages/_app.js
@@ -23,17 +23,23 @@ const baseMainnet = {
   label: 'Base',
   rpcUrl: 'https://mainnet.base.org'
 }
+const celoMainnet = {
+  id: '0xa4ec',
+  token: 'ETH',
+  label: 'Celo',
+  rpcUrl: 'https://1rpc.io/celo'
+}
 
-const chains = [ethereumRopsten, polygonMainnet, baseMainnet]
+const chains = [ethereumRopsten, polygonMainnet, baseMainnet,celoMainnet]
 const wallets = [injectedModule()]
 
 const web3Onboard = init({
   wallets,
   chains,
   appMetadata: {
-    name: "Web3-Onboard Demo",
+    name: 'Web3-Onboard Demo',
     icon: '<svg>My App Icon</svg>',
-    description: "A demo of Web3-Onboard."
+    description: 'A demo of Web3-Onboard.'
   }
 })
 
@@ -45,4 +51,4 @@ function MyApp({ Component, pageProps }) {
   )
 }
 
-export default MyApp
+export default MyApp
diff --git a/examples/with-solidjs/src/providers/onboard-provider/options.ts b/examples/with-solidjs/src/providers/onboard-provider/options.ts
@@ -28,6 +28,12 @@ export const chains = [
     token: 'ETH',
     label: 'Base',
     rpcUrl: 'https://mainnet.base.org'
+  },
+  {
+    id: '0xa4ec',
+    token: 'ETH',
+    label: 'Celo',
+    rpcUrl: 'https://1rpc.io/celo'
   }
 ];
 

diff --git a/examples/with-sveltekit/src/lib/web3-onboard.ts b/examples/with-sveltekit/src/lib/web3-onboard.ts
@@ -33,6 +33,12 @@ const chains = [
     token: 'ETH',
     label: 'Base',
     rpcUrl: 'https://mainnet.base.org'
+  },
+  {
+    id: '0xa4ec',
+    token: 'ETH',
+    label: 'Celo',
+    rpcUrl: 'https://1rpc.io/celo'
   }
 ]
 

diff --git a/examples/with-vanilla-js/src/onboard.js b/examples/with-vanilla-js/src/onboard.js
@@ -29,6 +29,12 @@ const chains = [
     token: 'ETH',
     label: 'Base',
     rpcUrl: 'https://mainnet.base.org'
+  },
+  {
+    id: '0xa4ec',
+    token: 'ETH',
+    label: 'Celo',
+    rpcUrl: 'https://1rpc.io/celo'
   }
 ]
 

diff --git a/examples/with-vite-react/src/web3-onboard.ts b/examples/with-vite-react/src/web3-onboard.ts
@@ -33,14 +33,12 @@ const injected = injectedModule({
 
 const walletLink = coinbaseModule()
 
-const walletConnect = walletConnectModule(
-  {
-    version: 2,
-    // Replace with your apiKey
-    projectId: '4a49c32131502e8c12d54295295e2012',
-    dappUrl: 'https://onboard.blocknative.com/'
-  }
-)
+const walletConnect = walletConnectModule({
+  version: 2,
+  // Replace with your apiKey
+  projectId: '4a49c32131502e8c12d54295295e2012',
+  dappUrl: 'https://onboard.blocknative.com/'
+})
 const portis = portisModule({
   // Replace with your apiKey
   apiKey: 'b2b7586f-2b1e-4c30-a7fb-c2d1533b153b'
@@ -137,6 +135,12 @@ export default init({
       token: 'ETH',
       label: 'Base',
       rpcUrl: 'https://mainnet.base.org'
+    },
+    {
+      id: '0xa4ec',
+      token: 'ETH',
+      label: 'Celo',
+      rpcUrl: 'https://1rpc.io/celo'
     }
   ],
   appMetadata: {

diff --git a/examples/with-vuejs-v2/src/components/HelloWorld.vue b/examples/with-vuejs-v2/src/components/HelloWorld.vue
@@ -22,17 +22,17 @@
 </template>
 
 <script>
-import { init, useOnboard } from '@web3-onboard/vue';
-import injectedModule from '@web3-onboard/injected-wallets';
+import { init, useOnboard } from '@web3-onboard/vue'
+import injectedModule from '@web3-onboard/injected-wallets'
 
-const injected = injectedModule();
+const injected = injectedModule()
 // With vite
-const infuraKey = import.meta.env.VITE_INFURA_KEY;
+const infuraKey = import.meta.env.VITE_INFURA_KEY
 
 // Without vite
 //const infuraKey = process.env.INFURA_KEY;
 
-const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`;
+const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`
 
 const web3Onboard = init({
   wallets: [injected],
@@ -41,7 +41,7 @@ const web3Onboard = init({
       id: '0x1',
       token: 'ETH',
       label: 'Ethereum Mainnet',
-      rpcUrl,
+      rpcUrl
     },
     {
       id: 42161,
@@ -60,58 +60,64 @@ const web3Onboard = init({
       token: 'ETH',
       label: 'Base',
       rpcUrl: 'https://mainnet.base.org'
+    },
+    {
+      id: '0xa4ec',
+      token: 'ETH',
+      label: 'Celo',
+      rpcUrl: 'https://1rpc.io/celo'
     }
-  ],
-});
+  ]
+})
 
 const { wallets, connectWallet, disconnectConnectedWallet, connectedWallet } =
-  useOnboard();
+  useOnboard()
 
-const trunc = (address) =>
-  !!address ? address.slice(0, 6) + '...' + address.slice(-6) : null;
+const trunc = address =>
+  !!address ? address.slice(0, 6) + '...' + address.slice(-6) : null
 
 export default {
   props: {
-    msg: String,
+    msg: String
   },
   data() {
     return {
       connectedWallet,
-      count: 0,
-    };
+      count: 0
+    }
   },
   methods: {
     connect: () => connectWallet(),
-    disconnect: () => disconnectConnectedWallet(),
+    disconnect: () => disconnectConnectedWallet()
   },
   computed: {
     address: function () {
       if (
         this.connectedWallet.accounts &&
         this.connectedWallet.accounts[0].address
       ) {
-        console.log(this.connectedWallet.accounts[0].address);
-        return trunc(this.connectedWallet.accounts[0].address);
+        console.log(this.connectedWallet.accounts[0].address)
+        return trunc(this.connectedWallet.accounts[0].address)
       }
     },
     ens: function () {
       if (
         this.connectedWallet.accounts &&
         this.connectedWallet.accounts[0].ens?.name
       ) {
-        return trunc(this.connectedWallet.accounts[0].ens);
+        return trunc(this.connectedWallet.accounts[0].ens)
       }
     },
     uns: function () {
       if (
         this.connectedWallet.accounts &&
         this.connectedWallet.accounts[0].uns?.name
       ) {
-        return trunc(this.connectedWallet.accounts[0].uns);
+        return trunc(this.connectedWallet.accounts[0].uns)
       }
-    },
-  },
-};
+    }
+  }
+}
 </script>
 
 <style scoped>

diff --git a/examples/with-vuejs/src/App.vue b/examples/with-vuejs/src/App.vue
@@ -28,6 +28,12 @@ init({
       token: 'ARB',
       label: 'Arbitrum Nova',
       rpcUrl: 'https://nova.arbitrum.io/rpc'
+    },
+    {
+      id: '0xa4ec',
+      token: 'ETH',
+      label: 'Celo',
+      rpcUrl: 'https://1rpc.io/celo'
     }
   ]
 })

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.21.3",
+  "version": "2.21.4-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/icons/celo.ts b/packages/core/src/icons/celo.ts
@@ -1,5 +1,12 @@
 export default `
-  <svg width="100%" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <path d="M19.1511 8.08001C19.1511 4.11201 15.9191 0.880005 11.9511 0.880005C8.94313 0.880005 6.38313 2.70401 5.29513 5.32801C2.73513 6.41601 0.911133 8.976 0.911133 11.952C0.911133 15.92 4.14313 19.152 8.11113 19.152C11.1191 19.152 13.6791 17.328 14.7671 14.704C17.2951 13.616 19.1511 11.056 19.1511 8.08001ZM8.11113 17.36C5.13513 17.36 2.70313 14.928 2.70313 11.952C2.70313 10.256 3.50313 8.72001 4.75113 7.72801C4.75113 7.85601 4.75113 7.98401 4.75113 8.08001C4.75113 12.048 7.98313 15.28 11.9511 15.28C12.1111 15.28 12.2391 15.28 12.3991 15.28C11.3751 16.56 9.83913 17.36 8.11113 17.36ZM13.3591 13.296C12.9111 13.424 12.4311 13.488 11.9511 13.488C8.97513 13.488 6.54313 11.056 6.54313 8.08001C6.54313 7.60001 6.60713 7.15201 6.73513 6.736C7.18313 6.60801 7.66313 6.54401 8.14313 6.54401C11.1191 6.54401 13.5511 8.976 13.5511 11.952C13.5191 12.432 13.4551 12.88 13.3591 13.296ZM15.3111 12.304C15.3111 12.176 15.3111 12.048 15.3111 11.952C15.3111 7.984 12.0791 4.752 8.11113 4.752C7.95113 4.752 7.82313 4.752 7.66313 4.752C8.65513 3.472 10.1911 2.67201 11.9191 2.67201C14.8951 2.67201 17.3271 5.10401 17.3271 8.08001C17.3271 9.80801 16.5271 11.312 15.3111 12.304Z" fill="white"/>
-  </svg>
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 26.3.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Symbol" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 384 383" style="enable-background:new 0 0 384 383;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#FCFF52;}
+</style>
+<path class="st0" d="M383.5,0H0.5v383h383V249.3h-63.6C298,298.1,248.7,332,192.3,332c-77.8,0-140.8-63.6-140.8-140.8
+	C51.4,114,114.5,51,192.3,51c57.5,0,106.8,35,128.7,84.9h62.5V0z"/>
+</svg>
 `