Feature - Replace internal Ethers functionality with Viem - Add WAGMI support module (#2203)

* Replaced isAddress check from ethers

* Replace Ethers BigNumber usage with browser native BigInt

* Remove ethers from common

* Testing package size

* Working as expected!

* Disable ums

* Cleanup chain usage

* More cleanup

* Ens avatar testing

* Some ethers swapped out for viem in Trezor and import map expanded

* Alittle cleanup in Trezor

* revert Trezor changes

* All is working from old commit

* Fix conflict

* Remove logs

* Return Address type to official check

* Update versions and handle type issues

* Bump Viem to latest

* Add node version check and min set to 16.15.1

* Add npmrc files with engine-strict set to true to core, react and vue to ensure the node engine check is enforced

* Added function for converting wei in both hex and string to eth, updated chain usage for ens and l2s, added function for handling decimel resolution with bigints

* Return bignumber to core for now

* cleanup and testing, removing unused code, refactor and rename to properly reflect functionality

* Remove bignumber from core again

* Fix merge issue with unstoppable resolution

* Return getText function for ens and update to viem

* Refine ci changes scope to core and related packages

* Final pass of PR for cleanup and refactor

* Remove ethers from tp

* Update to latest viem

* Update cede and WC docs

* resolve conflict

* Update config to publish viem test branches

* Update tsconfig and types

* Update node version in core

* Bump versions for release and Remove console.log

* ENS working again

* Progress within hw wallets

* Progress on chain imports

* Further refinement on viem usage of public client

* refine ledger, deprecate v1

* Update TS, revert viem changes to HW-wallets

* Handle ts errors

* Update packages for test release

* Handle all ts errors!

* Cleanup

* Making progress

* Wagmi core

* Refine imports and test a whole bunch

* Fix build errors

* Try later version of node in CI

* Add sass types to common

* Update tsconfig

* Update imports from common

* Refine types

* Update core imports

* Update svelte preprocess

* Bump common version

* More refinements to core

* Remove log

* Update tsconfig for hw-common to resolve build error

* Ensure new utils file is part of commit

* Remove unnecessary commonjs as the issue was fixed by viem team

* Use viem utils in common

* Changes to versioning and ready for testing

* Bump version

* Merge in changes from viem branch

* More updates from viem branch

* Refine package intialization and wagmi init

* testing signing

* Update wagmi disconnect

* Update viem versions

* Yarn it

* Update publish workflow to publish all packages

* Fix issue and redeploy

* Update solid node build version

* Handle build errors

* Update configs for build

* Update ci build config

* Bump arcana  node version in CI

* Fix arcana

* Fix venly

* Update gnosis pakcage.json

* Get all of the changes from viem merged and stablelized

* Use toHex function, switch chain now working

* Handle multiple wallets correctly

* Still working thru MM sdk issues

* Working through issues

* Still working through MM issues

* Connect working for sdks

* wagmi support stabilized

* Cleanup logs

* More updates to wagmi on disconnect

* Refine disconnect

* Create and test wagmi module

* Create wagmi module

* Add wagmi docs

* Update examples

* Update disconnect to handle wagmi

* Handle ts errors in wagmi package

* Refine examples and more ts fixes

* Handle more errors

* Update tags to be named as wagmi

* Update CI for deployment

* Fix CI build for wagmi

* Update tsconfig

* Update tsconfig again

* Update docs examples

* Fix build error

* cleanup exports and hook within react and document

* Refine docs

* Capsule is working!

* Add note about init object to docs and readme

* Export all wagmi functions from wagmi package

* Update docs

* Fix examples

* Bump to latest versions of wagmi and viem

* bump common version

* Bump versions for latest deps

* Bump versions for pub

* Version from wagmi to alpha flag

* Revert testing ci changes

* update CI to remove testing flow

* Remove log

* Remove capsule for failing build from demo

Author: Adamj1232

.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"
   }
 }