Merge pull request #325 from blocknative/develop

Latest W3O packages
blocknative · Jun 4, 2024 · 2741b8b · 2741b8b
2 parents 62f8573 + 600cb69
commit 2741b8b
Show file tree

Hide file tree

Showing 5 changed files with 935 additions and 668 deletions.
diff --git a/package.json b/package.json
@@ -1,50 +1,55 @@
 {
   "name": "onboard-notify-react",
-  "version": "0.40.1",
+  "version": "0.40.1-0.1.1",
   "dependencies": {
     "@safe-global/safe-apps-provider": "^0.18.0",
     "@safe-global/safe-apps-sdk": "^8.1.0",
-    "@web3-onboard/arcana-auth": "^2.0.0",
-    "@web3-onboard/bitget": "^2.0.1",
-    "@web3-onboard/blocto": "^2.0.1",
-    "@web3-onboard/capsule": "^2.0.2",
-    "@web3-onboard/cede-store": "^2.2.0",
-    "@web3-onboard/coinbase": "^2.2.7",
-    "@web3-onboard/dcent": "^2.2.8",
-    "@web3-onboard/enkrypt": "^2.0.4",
-    "@web3-onboard/fortmatic": "^2.0.19",
-    "@web3-onboard/frame": "^2.0.2",
-    "@web3-onboard/frontier": "^2.0.4",
-    "@web3-onboard/gas": "^2.1.8",
-    "@web3-onboard/gnosis": "^2.2.1",
-    "@web3-onboard/infinity-wallet": "^2.0.4",
-    "@web3-onboard/injected-wallets": "^2.10.14",
-    "@web3-onboard/keepkey": "^2.3.8",
-    "@web3-onboard/keystone": "^2.3.8",
-    "@web3-onboard/ledger": "^2.6.0",
-    "@web3-onboard/magic": "^2.1.7",
-    "@web3-onboard/metamask": "^2.0.6",
-    "@web3-onboard/mew-wallet": "^2.0.4",
-    "@web3-onboard/phantom": "^2.0.3",
-    "@web3-onboard/portis": "^2.1.7",
-    "@web3-onboard/react": "^2.8.15",
-    "@web3-onboard/sequence": "^2.0.8",
-    "@web3-onboard/taho": "^2.0.5",
-    "@web3-onboard/torus": "^2.2.6",
-    "@web3-onboard/transaction-preview": "^2.0.8",
-    "@web3-onboard/trezor": "^2.4.4",
-    "@web3-onboard/trust": "^2.0.4",
-    "@web3-onboard/uauth": "^2.1.2",
-    "@web3-onboard/venly": "^2.0.0",
-    "@web3-onboard/walletconnect": "^2.5.5",
-    "@web3-onboard/web3auth": "^2.2.3",
-    "@web3-onboard/xdefi": "^2.0.5",
-    "@web3-onboard/zeal": "^2.0.4",
+    "@web3-onboard/arcana-auth": "^2.1.0",
+    "@web3-onboard/bitget": "^2.1.0",
+    "@web3-onboard/blocto": "^2.1.0",
+    "@web3-onboard/capsule": "^2.1.0",
+    "@web3-onboard/cede-store": "^2.3.0",
+    "@web3-onboard/coinbase": "^2.3.0",
+    "@web3-onboard/core": "2.22.0-alpha.7",
+    "@web3-onboard/dcent": "^2.2.9",
+    "@web3-onboard/enkrypt": "^2.1.0",
+    "@web3-onboard/fortmatic": "^2.1.0",
+    "@web3-onboard/frame": "^2.1.0",
+    "@web3-onboard/frontier": "^2.1.0",
+    "@web3-onboard/gas": "^2.2.0",
+    "@web3-onboard/gnosis": "^2.3.0",
+    "@web3-onboard/infinity-wallet": "^2.1.0",
+    "@web3-onboard/injected-wallets": "^2.11.0",
+    "@web3-onboard/keepkey": "^2.3.9",
+    "@web3-onboard/keystone": "^2.3.9",
+    "@web3-onboard/ledger": "^2.7.0",
+    "@web3-onboard/magic": "^2.2.0",
+    "@web3-onboard/metamask": "^2.1.0",
+    "@web3-onboard/mew-wallet": "^2.1.0",
+    "@web3-onboard/particle-network": "2.1.0-alpha.2",
+    "@web3-onboard/passport": "2.1.0-alpha.2",
+    "@web3-onboard/phantom": "^2.1.0",
+    "@web3-onboard/portis": "^2.2.0",
+    "@web3-onboard/react": "^2.9.0",
+    "@web3-onboard/sequence": "^2.1.0",
+    "@web3-onboard/taho": "^2.1.0",
+    "@web3-onboard/torus": "^2.3.0",
+    "@web3-onboard/transaction-preview": "^2.1.0",
+    "@web3-onboard/trezor": "^2.4.5",
+    "@web3-onboard/trust": "^2.1.0",
+    "@web3-onboard/uauth": "^2.2.0",
+    "@web3-onboard/venly": "^2.1.0",
+    "@web3-onboard/wagmi": "2.0.0-alpha.6",
+    "@web3-onboard/walletconnect": "^2.6.0",
+    "@web3-onboard/web3auth": "^2.3.0",
+    "@web3-onboard/xdefi": "^2.1.0",
+    "@web3-onboard/zeal": "^2.1.0",
     "ethers": "^5.5.2",
     "path-browserify": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vconsole": "^3.15.1"
+    "vconsole": "^3.15.1",
+    "viem": "^2.12.0"
   },
   "scripts": {
     "w3o-latest-prod": "yarn add '@web3-onboard/react' '@web3-onboard/coinbase' '@web3-onboard/transaction-preview' '@web3-onboard/dcent' '@web3-onboard/frontier' '@web3-onboard/fortmatic' '@web3-onboard/frame' '@web3-onboard/gas' '@web3-onboard/gnosis' '@web3-onboard/keepkey' '@web3-onboard/keystone' '@web3-onboard/ledger' '@web3-onboard/infinity-wallet' '@web3-onboard/injected-wallets' '@web3-onboard/magic' '@web3-onboard/phantom' '@web3-onboard/portis' '@web3-onboard/sequence' '@web3-onboard/trezor' '@web3-onboard/trust' '@web3-onboard/torus' '@web3-onboard/taho' '@web3-onboard/web3auth' '@web3-onboard/walletconnect' '@web3-onboard/enkrypt' '@web3-onboard/mew-wallet' '@web3-onboard/xdefi' '@web3-onboard/uauth' '@web3-onboard/zeal' '@web3-onboard/cede-store' '@web3-onboard/venly' '@web3-onboard/blocto' '@web3-onboard/arcana-auth' '@web3-onboard/bitget' '@web3-onboard/metamask' '@web3-onboard/capsule'",

diff --git a/src/App.js b/src/App.js
@@ -12,11 +12,19 @@ import {
   useNotifications,
   useSetChain,
   useWallets,
-  useSetLocale
+  useSetLocale,
+  useWagmiConfig
 } from '@web3-onboard/react'
 import './App.css'
 import Header from './views/Header/Header.js'
 import Footer from './views/Footer/Footer.js'
+import {
+  getConnectors,
+  disconnect as wagmiDisconnect,
+  switchChain,
+  sendTransaction as wagmiSendTransaction
+} from '@web3-onboard/wagmi'
+import { parseEther, isHex, fromHex } from 'viem'
 
 if (window.innerWidth < 700) {
   new VConsole()
@@ -27,6 +35,7 @@ let provider
 const App = () => {
   const [{ wallet }, connect, disconnect, updateBalances, setWalletModules] =
     useConnectWallet()
+  const wagmiConfig = useWagmiConfig()
   const [{ chains, connectedChain, settingChain }, setChain] = useSetChain()
   const [notifications, customNotification, updateNotify] = useNotifications()
   const connectedWallets = useWallets()
@@ -92,20 +101,43 @@ const App = () => {
       setBNGasPrices(estimates[0].blockPrices[0].estimatedPrices)
     })
   }, [])
+  useEffect(() => {
+    console.log('wagmiConfig', wagmiConfig)
+  }, [wagmiConfig])
 
   useEffect(() => {
     async function getEtherGasFromRPC() {
-      const customHttpProvider = new ethers.providers.JsonRpcProvider(infuraRPC)
-      const fee = await customHttpProvider.getFeeData()
-      const cleanFees = {
-        price: ethers.utils.formatUnits(fee.gasPrice, 'gwei'),
-        maxPriorityFeePerGas: ethers.utils.formatUnits(
-          fee.maxPriorityFeePerGas,
-          'gwei'
-        ),
-        maxFeePerGas: ethers.utils.formatUnits(fee.maxFeePerGas, 'gwei')
+      try {
+        const customHttpProvider = new ethers.providers.JsonRpcProvider(
+          infuraRPC
+        )
+        if (!customHttpProvider) return console.warn('No provider found')
+        const fee = await customHttpProvider.getFeeData()
+
+        // Occasionally gas values are returned undefined
+        if (
+          !fee ||
+          !fee.gasPrice ||
+          !fee.maxPriorityFeePerGas ||
+          !fee.maxFeePerGas
+        )
+          return console.warn(
+            `Missing necessary gas properties in fee response - fee: ${JSON.stringify(
+              fee
+            )}`
+          )
+        const cleanFees = {
+          price: ethers.utils.formatUnits(fee.gasPrice, 'gwei'),
+          maxPriorityFeePerGas: ethers.utils.formatUnits(
+            fee.maxPriorityFeePerGas,
+            'gwei'
+          ),
+          maxFeePerGas: ethers.utils.formatUnits(fee.maxFeePerGas, 'gwei')
+        }
+        setRPCInfuraGasPrices(cleanFees)
+      } catch (err) {
+        console.error(err)
       }
-      setRPCInfuraGasPrices(cleanFees)
     }
     getEtherGasFromRPC()
   }, [bnGasPrices])
@@ -148,23 +180,25 @@ const App = () => {
       return
     }
 
-    const signer = provider.getUncheckedSigner()
+    // const signer = provider.getUncheckedSigner()
 
     // To set gas using the Web3-Onboard Gas package(support Eth Mainnet and Polygon)
     // define desired confidence for transaction inclusion in block and set in transaction
     // const bnGasForTransaction = bnGasPrices.find(gas => gas.confidence === 90)
 
-    const rc = await signer.sendTransaction({
-      to: toAddress,
-      value: 1000000000000000
+    // const rc = await signer.sendTransaction({
+    //   to: toAddress,
+    //   value: 1000000000000000
 
-      // This will set the transaction gas based on desired confidence
-      // maxPriorityFeePerGas: gweiToWeiHex(
-      //   bnGasForTransaction.maxPriorityFeePerGas
-      // ),
-      // maxFeePerGas: gweiToWeiHex(bnGasForTransaction.maxFeePerGas)
-    })
-    console.log(rc)
+    //   // This will set the transaction gas based on desired confidence
+    //   // maxPriorityFeePerGas: gweiToWeiHex(
+    //   //   bnGasForTransaction.maxPriorityFeePerGas
+    //   // ),
+    //   // maxFeePerGas: gweiToWeiHex(bnGasForTransaction.maxFeePerGas)
+    // })
+    // console.log(rc)
+
+    sendTransactionWagmi()
   }
 
   const sendTransaction = async () => {
@@ -203,6 +237,39 @@ const App = () => {
     console.log(transactionHash)
   }
 
+  // WAGMI functions
+  async function switchChainWagmi(chainId) {
+    let chainAsNumber
+    const { wagmiConnector } = wallet
+
+    console.log('wagmiConnector', wagmiConnector)
+    if (isHex(chainId)) {
+      chainAsNumber = fromHex(chainId, 'number')
+    } else if (!isHex(chainId) && typeof chainId === 'number') {
+      chainAsNumber = chainId
+    } else {
+      throw new Error('Invalid chainId')
+    }
+    await switchChain(wagmiConfig, {
+      chainId: chainAsNumber,
+      connector: wagmiConnector
+    })
+  }
+
+  const sendTransactionWagmi = async () => {
+    const { wagmiConnector } = wallet
+
+    console.log('transactWithThisWallet', wagmiConnector)
+    // current primary wallet - as multiple wallets can connect this value is the currently active
+    const result = await wagmiSendTransaction(wagmiConfig, {
+      to: toAddress,
+      value: parseEther('0.001'),
+      // desired connector to send txn from
+      connector: wagmiConnector
+    })
+    console.log(result)
+  }
+
   const renderNotifySettings = () => {
     if (window.innerWidth < 425) {
       return (
@@ -426,7 +493,8 @@ const App = () => {
                     <select
                       className="chain-select"
                       onChange={({ target: { value } }) =>
-                        setChain({ chainId: value })
+                        // setChain({ chainId: value })
+                        switchChainWagmi(value)
                       }
                       value={connectedChain?.id}
                     >
@@ -471,9 +539,13 @@ const App = () => {
                     <button
                       className="bn-demo-button"
                       onClick={async () => {
-                        const walletsConnected = await disconnect(wallet)
-                        console.log('connected wallets: ', walletsConnected)
-                        window.localStorage.removeItem('connectedWallets')
+                        // const walletsConnected = await disconnect(wallet)
+                        const disconnectThisWallet = getConnectors(
+                          wagmiConfig
+                        ).find(connector => connector.name === wallet.label)
+                        wagmiDisconnect(wagmiConfig, {
+                          connector: disconnectThisWallet
+                        })
                       }}
                     >
                       Reset Wallet State
@@ -620,7 +692,7 @@ const App = () => {
                     onClick={async () => {
                       const ready = await readyToTransact()
                       if (!ready) return
-                      sendTransaction()
+                      sendTransactionWagmi()
                     }}
                   >
                     Send

diff --git a/src/services.js b/src/services.js
@@ -34,8 +34,8 @@ import venlyModule from '@web3-onboard/venly'
 import bloctoModule from '@web3-onboard/blocto'
 import bitgetModule from '@web3-onboard/bitget'
 import metamaskModule from '@web3-onboard/metamask'
+import wagmi from '@web3-onboard/wagmi'
 import arcanaAuthModule from '@web3-onboard/arcana-auth'
-import metamaskSDK from '@web3-onboard/metamask'
 import capsuleModule, {
   Environment,
   OAuthMethod,
@@ -85,8 +85,6 @@ const injected = injectedModule({
   // walletUnavailableMessage: wallet => `Oops ${wallet.label} is unavailable!`
 })
 
-const coinbase = coinbaseModule()
-
 const walletConnect = walletConnectModule({
   handleUri: uri => console.log(uri),
   projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5',
@@ -105,6 +103,7 @@ const web3auth = web3authModule({
     'DJuUOKvmNnlzy6ruVgeWYWIMKLRyYtjYa9Y10VCeJzWZcygDlrYLyXsBQjpJ2hxlBO9dnl8t9GmAC2qOP5vnIGo'
 })
 
+const coinbase = coinbaseModule()
 const torus = torusModule()
 const infinityWallet = infinityWalletModule()
 const ledger = ledgerModule({ projectId: 'f6bd6e2911b56f5ac3bc8b2d0e2d7ad5' })
@@ -172,18 +171,6 @@ const arcanaAuth = arcanaAuthModule({
   clientID: 'xar_test_c9c3bc702eb13255c58dab0e74cfa859711c13cb'
 })
 
-const metamaskSDKWallet = metamaskSDK({
-  options: {
-    extensionOnly: false,
-    i18nOptions: {
-      enabled: true
-    },
-    dappMetadata: {
-      name: 'Demo Web3Onboard'
-    }
-  }
-})
-
 const capsule = capsuleModule({
   environment: Environment.DEVELOPMENT,
   apiKey: '992bbd9146d5de8ad0419f141d9a7ca7',
@@ -199,16 +186,17 @@ const capsule = capsuleModule({
 })
 
 export const initWeb3Onboard = init({
+  wagmi,
   connect: {
     autoConnectAllPreviousWallet: true
   },
   wallets: [
     metamask,
+    coinbase,
     injected,
+    walletConnect,
     ledger,
     trezor,
-    walletConnect,
-    coinbase,
     phantom,
     gnosis,
     trust,
@@ -234,9 +222,8 @@ export const initWeb3Onboard = init({
     cedeStore,
     venly,
     blocto,
-    arcanaAuth,
-    metamaskSDKWallet,
-    capsule
+    arcanaAuth
+    // capsule
   ],
   chains: [
     {