Feature - Replace internal Ethers functionality with Viem - Add WAGMI support module

.circleci/config.yml

@@ -167,7 +167,7 @@ commands:
 jobs:
   build-core:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:16.15.1
     working_directory: ~/web3-onboard-monorepo/packages/core
     steps:
       - node-build-steps
@@ -275,7 +275,7 @@ jobs:
       - node-build-steps
   build-react:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:16.15.1
     working_directory: ~/web3-onboard-monorepo/packages/react
     steps:
       - node-build-steps
@@ -293,7 +293,7 @@ jobs:
       - node-build-steps
   build-web3auth:
     docker:
-      - image: cimg/node:16.18.1
+      - image: cimg/node:18.0.0
     working_directory: ~/web3-onboard-monorepo/packages/web3auth
     steps:
       - node-build-steps
@@ -305,7 +305,7 @@ jobs:
       - node-build-steps
   build-vue:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:16.15.1
     working_directory: ~/web3-onboard-monorepo/packages/vue
     steps:
       - node-build-steps
@@ -341,7 +341,7 @@ jobs:
       - node-build-steps
   build-uauth:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:18.0.0
     working_directory: ~/web3-onboard-monorepo/packages/uauth
     steps:
       - node-build-steps
@@ -395,7 +395,7 @@ jobs:
       - node-build-steps
   build-arcana-auth:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:18.0.0
     working_directory: ~/web3-onboard-monorepo/packages/arcana-auth
     steps:
       - node-build-steps
@@ -407,7 +407,7 @@ jobs:
       - node-build-steps
   build-venly:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:18.18.2
     working_directory: ~/web3-onboard-monorepo/packages/venly
     steps:
       - node-build-steps
@@ -432,7 +432,7 @@ jobs:
     resource_class: large
   build-solid:
     docker:
-      - image: cimg/node:16.14.2
+      - image: cimg/node:16.15.1
     working_directory: ~/web3-onboard-monorepo/packages/solid
     steps:
       - node-build-steps
@@ -448,6 +448,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/particle-network
     steps:
       - node-build-steps
+  build-wagmi:
+    docker:
+      - image: cimg/node:18.0.0
+    working_directory: ~/web3-onboard-monorepo/packages/wagmi
+    steps:
+      - node-build-steps
   build-passport:
     docker:
       - image: cimg/node:18.0.0
@@ -458,7 +464,7 @@ jobs:
   # Build staging/Alpha releases
   build-staging-core:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:16.15.1
     working_directory: ~/web3-onboard-monorepo/packages/core
     steps:
       - node-staging-build-steps
@@ -566,7 +572,7 @@ jobs:
       - node-staging-build-steps
   build-staging-react:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:16.15.1
     working_directory: ~/web3-onboard-monorepo/packages/react
     steps:
       - node-staging-build-steps
@@ -584,7 +590,7 @@ jobs:
       - node-staging-build-steps
   build-staging-web3auth:
     docker:
-      - image: cimg/node:16.18.1
+      - image: cimg/node:18.0.0
     working_directory: ~/web3-onboard-monorepo/packages/web3auth
     steps:
       - node-staging-build-steps
@@ -596,7 +602,7 @@ jobs:
       - node-staging-build-steps
   build-staging-vue:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:16.15.1
     working_directory: ~/web3-onboard-monorepo/packages/vue
     steps:
       - node-staging-build-steps
@@ -632,7 +638,7 @@ jobs:
       - node-staging-build-steps
   build-staging-uauth:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:18.0.0
     working_directory: ~/web3-onboard-monorepo/packages/uauth
     steps:
       - node-staging-build-steps
@@ -686,7 +692,7 @@ jobs:
       - node-staging-build-steps
   build-staging-arcana-auth:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:18.0.0
     working_directory: ~/web3-onboard-monorepo/packages/arcana-auth
     steps:
       - node-staging-build-steps
@@ -698,7 +704,7 @@ jobs:
       - node-staging-build-steps
   build-staging-venly:
     docker:
-      - image: cimg/node:16.13.1
+      - image: cimg/node:18.18.2
     working_directory: ~/web3-onboard-monorepo/packages/venly
     steps:
       - node-staging-build-steps
@@ -722,7 +728,7 @@ jobs:
       - node-staging-build-steps
   build-staging-solid:
     docker:
-      - image: cimg/node:16.14.2
+      - image: cimg/node:16.15.1
     working_directory: ~/web3-onboard-monorepo/packages/solid
     steps:
       - node-staging-build-steps
@@ -738,6 +744,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/particle-network
     steps:
       - node-staging-build-steps
+  build-staging-wagmi:
+    docker:
+      - image: cimg/node:18.0.0
+    working_directory: ~/web3-onboard-monorepo/packages/wagmi
+    steps:
+      - node-staging-build-steps
   build-staging-passport:
     docker:
       - image: cimg/node:18.0.0
@@ -753,6 +765,7 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-common:
           <<: *deploy_staging_filters
+
   core:
     jobs:
       - build-core:
@@ -1030,6 +1043,12 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-particle:
           <<: *deploy_staging_filters
+  wagmi:
+    jobs:
+      - build-wagmi:
+          <<: *deploy_production_filters
+      - build-staging-wagmi:
+          <<: *deploy_staging_filters
   passport:
     jobs:
       - build-passport:

docs/src/routes/docs/[...1]overview/[...1]introduction/+page.md

@@ -102,6 +102,7 @@ const MAINNET_RPC_URL = 'https://mainnet.infura.io/v3/<INFURA_KEY>'
 const injected = injectedModule()
 
 const onboard = Onboard({
+  // This javascript object is unordered meaning props do not require a certain order
   wallets: [injected],
   chains: [
     {

docs/src/routes/docs/[...2]getting-started/[...1]installation/+page.md

@@ -110,6 +110,7 @@ const appMetadata = {
 
 ```ts
 const onboard = Onboard({
+  // This javascript object is unordered meaning props do not require a certain order
   wallets,
   chains,
   appMetadata

docs/src/routes/docs/[...3]modules/[...1]core/+page.md

@@ -621,6 +621,7 @@ import injectedModule from '@web3-onboard/injected-wallets'
 const injected = injectedModule()
 
 const onboard = Onboard({
+  // This javascript object is unordered meaning props do not require a certain order
   // head to https://explorer.blocknative.com/account to sign up for free
   apiKey: 'xxx387fb-bxx1-4xxc-a0x3-9d37e426xxxx'
   wallets: [injected],

docs/src/routes/docs/[...3]modules/[...3]react/+page.md

@@ -46,6 +46,7 @@ const rpcUrl = `https://mainnet.infura.io/v3/${infuraKey}`
 
 // initialize Onboard
 init({
+  // This javascript object is unordered meaning props do not require a certain order
   apiKey,
   wallets: [injected],
   chains: [
@@ -724,3 +725,31 @@ export default {
   }
 }
 ```
+
+## `useWagmiConfig`
+
+This hook allows you to get the WagmiConfig (Config from the Wagmi project) from @web3-onboard/core if W3O has been initialized with the [WAGMI property imported and passing into the web3-onboard/core config](../../modules/wagmi.md#usage).
+
+```typescript
+import { sendTransaction as wagmiSendTransaction } from '@web3-onboard/wagmi'
+import { parseEther } from 'viem'
+import { useWagmiConfig, wallets } from '@web3-onboard/react'
+import type { WagmiConfig } from '@web3-onboard/core'
+
+type useWagmiConfig = (): WagmiConfig
+
+const wagmiConfig = useWagmiConfig()
+const w3OWallets = useWallets()
+
+const sendTransaction = async () => {
+  // current primary wallet - as multiple wallets can connect this value is the currently active
+  const [currentPrimaryWallet] = w3OWallets
+  const result = await wagmiSendTransaction(wagmiConfig, {
+    to: toAddress,
+    // desired connector to send txn from
+    account: currentPrimaryWallet.accounts[0],
+    value: parseEther('0.001')
+  })
+  console.log(result)
+}
+```

docs/src/routes/docs/[...3]modules/[...8]wagmi/+page.md

@@ -0,0 +1,97 @@
+---
+title: wagmi
+---
+
+# {$frontmatter.title}
+
+A module for connecting wallets using WAGMI which returns a WAGMI config object to be used with [@wagmi/core](https://wagmi.sh/core/getting-started) functions.
+
+### Install
+
+<Tabs values={['yarn', 'npm']}>
+<TabPanel value="yarn">
+
+```sh copy
+yarn add @web3-onboard/wagmi
+```
+
+  </TabPanel>
+  <TabPanel value="npm">
+
+```sh copy
+npm install @web3-onboard/wagmi
+```
+
+  </TabPanel>
+</Tabs>
+
+## Usage
+
+This example assumes you have already setup web3-onboard to connect wallets to your dapp.
+For more information see [web3-onboard docs](https://onboard.blocknative.com/docs/modules/core#install).
+
+```ts
+import Onboard from '@web3-onboard/core'
+import injectedModule from '@web3-onboard/injected-wallets'
+import wagmi from '@web3-onboard/wagmi'
+import { parseEther } from 'viem'
+import {
+  sendTransaction as wagmiSendTransaction,
+  switchChain,
+  disconnect,
+  getConnectors
+} from '@web3-onboard/wagmi'
+import { parseEther, isHex, fromHex } from 'viem'
+
+const injected = injectedModule()
+
+const onboard = Onboard({
+  // This javascript object is unordered meaning props do not require a certain order
+  // ... other Onboard options
+  wagmi,
+  wallets: [injected],
+  chains: [
+    {
+      id: '0x1',
+      token: 'ETH',
+      label: 'Ethereum',
+      rpcUrl: 'https://mainnet.infura.io/v3/17c1e1500e384acfb6a72c5d2e67742e'
+    }
+  ]
+  // ... other Onboard options
+})
+
+const sendTransaction = async () => {
+  // current primary wallet - as multiple wallets can connect this value is the currently active
+  const [currentPrimaryWallet] = onboard.state.get().wallets
+  const wagmiConfig = onboard.state.get().wagmiConfig
+  const result = await wagmiSendTransaction(wagmiConfig, {
+    to: toAddress,
+    // desired connector to send txn from
+    account: currentPrimaryWallet.accounts[0],
+    value: parseEther('0.001')
+  })
+  console.log(result)
+}
+
+async function switchWagmiChain(chainId) {
+  let chainAsNumber
+  if (isHex(chainId)) {
+    chainAsNumber = fromHex(chainId, 'number')
+  } else if (!isHex(chainId) && typeof chainId === 'number') {
+    chainAsNumber = chainId
+  } else {
+    throw new Error('Invalid chainId')
+  }
+  const wagmiConfig = onboard.state.get().wagmiConfig
+  await switchChain(wagmiConfig, { chainId: chainAsNumber })
+}
+
+async function disconnectWallet() {
+  const wagmiConfig = onboard.state.get().wagmiConfig
+  const disconnectThisWallet = getConnectors(wagmiConfig).find(
+    (connector) => connector.name === label
+  )
+  disconnect(wagmiConfig, { connector: disconnectThisWallet })
+}
+```

package.json

@@ -63,7 +63,7 @@
   "devDependencies": {
     "prettier": "^2.4.1",
     "prettier-plugin-svelte": "^2.4.0",
-    "typescript": "^4.5.5"
+    "typescript": "^4.9.4"
   },
   "peerDependencies": {
     "react": "*",

packages/arcana-auth/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/arcana-auth",
-  "version": "2.0.0",
+  "version": "2.1.0-alpha.2",
   "license": "MIT",
   "description": "Arcana wallet is a built-in, secure Web3 wallet that users can access instantly when logging into an app integrated with the Arcana Auth SDK. It offers a customizable interface that can be branded to match the app's style. Users don't need to generate or manage cryptographic keys or remember passphrases. The wallet uses advanced distributed key generation, giving users full control over their wallets while onboarding Web3 apps using familiar Web2 authentication methods. It is user-friendly, secure, and puts users in control of their Web3 experience.",
   "private": false,
@@ -13,10 +13,10 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@arcana/auth": "^1.0.7",
-    "@web3-onboard/common": "2.3.3"
+    "@arcana/auth": "^1.0.10",
+    "@web3-onboard/common": "2.4.0-alpha.2"
   },
   "devDependencies": {
-    "typescript": "^5.1.6"
+    "typescript": "^5.4.5"
   }
 }