Refine docs, examples and use of wallet state to pass wagmiConnector

Author: Adamj1232

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

@@ -772,18 +772,13 @@ const sendTransaction = async () => {
   console.log(result)
 }
 
-async function switchWagmiChain(chainId) {
+async function signMessage(chainId) {
   // current primary wallet - as multiple wallets can connect this value is the currently active
   const [activeWallet] = onboard.state.get().wallets
-  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,
-    connector: 
+  await wagmiSignMessage(wagmiConfig, {
+    message: 'This is my message to you',
+    connector: activeWallet.wagmiConnector
+  })
+}
+```

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

@@ -50,6 +50,7 @@ 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
   wagmi,
   wallets: [injected],
   chains: [
@@ -77,6 +78,16 @@ const sendTransaction = async () => {
   console.log(result)
 }
 
+async function signMessage(chainId) {
+  // current primary wallet - as multiple wallets can connect this value is the currently active
+  const [activeWallet] = onboard.state.get().wallets
+  const wagmiConfig = onboard.state.get().wagmiConfig
+  await wagmiSignMessage(wagmiConfig, {
+    message: 'This is my message to you',
+    connector: activeWallet.wagmiConnector
+  })
+}
+
 async function switchWagmiChain(chainId) {
   // current primary wallet - as multiple wallets can connect this value is the currently active
   const [activeWallet] = onboard.state.get().wallets

packages/core/src/store/actions.ts

@@ -9,6 +9,7 @@ import { nanoid } from 'nanoid'
 import { dispatch } from './index.js'
 import { configuration } from '../configuration.js'
 import { handleThemeChange, returnTheme } from '../themes.js'
+import { state } from '../store/index.js'
 
 import type {
   Account,
@@ -192,6 +193,9 @@ export function setPrimaryWallet(wallet: WalletState, address?: string): void {
     }
   }
 
+  // Update wagmi config if wagmi is being used
+  handleWagmiConnectorUpdate(wallet)
+
   // add wallet will set it to first wallet since it already exists
   addWallet(wallet)
 }
@@ -478,14 +482,30 @@ export function updateAppMetadata(
   dispatch(action as UpdateAppMetadataAction)
 }
 
-export function updateWagmiConfig(
-  update: Config
-): void {
-
+export function updateWagmiConfig(update: Config): void {
   const action = {
     type: UPDATE_WAGMI_CONFIG,
     payload: update
   }
 
   dispatch(action as UpdateWagmiConfigAction)
 }
+
+function handleWagmiConnectorUpdate(wallet: WalletState) {
+  const { wagmi } = configuration
+  if (!wagmi) return
+
+  try {
+    const { label } = wallet
+    const { wagmiConnect, getWagmiConnector } = wagmi
+    const wagmiConfig = state.get().wagmiConfig
+    const wagmiConnector = getWagmiConnector(label)
+    wagmiConnect(wagmiConfig, { connector: wagmiConnector }).then(() => {
+      updateWallet(label, { wagmiConnector })
+    })
+  } catch (e) {
+    console.error(
+      `Error updating Wagmi connector on primary wallet switch ${e}`
+    )
+  }
+}

packages/demo/src/App.svelte

@@ -57,7 +57,8 @@
     switchChain,
     disconnect,
     signMessage as wagmiSignMessage,
-    getConnectors
+    getConnectors,
+    watchConnectors
   } from '@web3-onboard/wagmi'
   import { parseEther, isHex, fromHex } from 'viem'
   import passportModule, { Network } from '@web3-onboard/passport'
@@ -510,11 +511,11 @@
 
     // const receipt = await txn.wait()
     // console.log(receipt)
-    const wagmiConfig = onboard.state.get().wagmiConfig
-    console.log(wagmiConfig)
+    const [primaryWallet] = onboard.state.get().wallets
     const result = await wagmiSendTransaction(wagmiConfig, {
       to: toAddress,
-      value: parseEther('0.001')
+      value: parseEther('0.001'),
+      connector: primaryWallet.wagmiConnector
     })
     console.log(result)
   }
@@ -555,7 +556,7 @@
     console.log(transactionHash)
   }
 
-  const signMessage = async (provider, address) => {
+  const signMessage = async (wagmiConnector, address) => {
     // if using ethers v6 this is:
     // ethersProvider = new ethers.BrowserProvider(wallet.provider, 'any')
     // const ethersProvider = new ethers.providers.Web3Provider(provider, 'any')
@@ -564,9 +565,10 @@
     // const signature = await signer?.signMessage(signMsg)
     // let verifySign = false
     // let recoveredAddress = null
-    const wagmiConfig = onboard.state.get().wagmiConfig
-    console.log('signMessage', wagmiConfig)
-    await wagmiSignMessage(wagmiConfig, { message: signMsg })
+    await wagmiSignMessage(wagmiConfig, {
+      message: signMsg,
+      connector: wagmiConnector
+    })
     // try {
     //   recoveredAddress = recoverAddress(
     //     arrayify(hashMessage(signMsg)),
@@ -675,8 +677,12 @@
     } else {
       throw new Error('Invalid chainId')
     }
-    const wagmiConfig = onboard.state.get().wagmiConfig
-    await switchChain(wagmiConfig, { chainId: chainAsNumber })
+    const [primaryWallet] = onboard.state.get().wallets
+    const { wagmiConnector } = primaryWallet
+    await switchChain(wagmiConfig, {
+      chainId: chainAsNumber,
+      connector: wagmiConnector
+    })
   }
 </script>
 
@@ -889,7 +895,7 @@
     {/if}
   </div>
   {#if $wallets$}
-    {#each $wallets$ as { icon, label, accounts, chains, provider, instance }}
+    {#each $wallets$ as { icon, label, accounts, chains, provider, instance, wagmiConnector }}
       <div class="connected-wallet" data-testid="connected-wallet">
         <div class="flex-centered" style="width: 10rem;">
           <div style="width: 2rem; height: 2rem">
@@ -945,7 +951,7 @@
               bind:value={toAddress}
               data-testid="sendTransaction"
             />
-            <button on:click={sendTransaction(provider)}>
+            <button on:click={sendTransaction(wagmiConnector)}>
               Send Transaction
             </button>
           </div>
@@ -969,7 +975,7 @@
               placeholder="Message..."
               bind:value={signMsg}
             />
-            <button on:click={signMessage(provider, address)}>
+            <button on:click={signMessage(wagmiConnector, address)}>
               Sign Message
             </button>
           </div>
@@ -979,7 +985,7 @@
               type="text"
               class="sign-transaction-textarea"
             />
-            <button on:click={signTypedMessage(provider, address)}>
+            <button on:click={signTypedMessage(wagmiConnector, address)}>
               Sign Typed Message
             </button>
           </div>
@@ -991,7 +997,7 @@
               class="sign-transaction-textarea"
             />
             <button
-              on:click={signTransactionMessage(provider)}
+              on:click={signTransactionMessage(wagmiConnector)}
               style="margin: 0 0 0 .5rem"
             >
               Sign Transaction
@@ -1005,7 +1011,7 @@
             const disconnectThisWallet = getConnectors(wagmiConfig).find(
               connector => connector.name === label
             )
-            disconnect(wagmiConfig, { connector: disconnectThisWallet })
+            disconnect(wagmiConfig, { connector: wagmiConnector })
           }}
         >
           Disconnect Wallet

packages/react/README.md

@@ -495,18 +495,13 @@ const sendTransaction = async () => {
   console.log(result)
 }
 
-async function switchWagmiChain(chainId) {
+async function signMessage(chainId) {
   // current primary wallet - as multiple wallets can connect this value is the currently active
   const [activeWallet] = onboard.state.get().wallets
-  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,
-    connector: 
+  await wagmiSignMessage(wagmiConfig, {
+    message: 'This is my message to you',
+    connector: activeWallet.wagmiConnector
+  })
+}
+```

packages/wagmi/README.md

@@ -35,6 +35,7 @@ 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
   wagmi,
   wallets: [injected],
   chains: [
@@ -62,21 +63,13 @@ const sendTransaction = async () => {
   console.log(result)
 }
 
-async function switchWagmiChain(chainId) {
+async function signMessage(chainId) {
   // current primary wallet - as multiple wallets can connect this value is the currently active
   const [activeWallet] = onboard.state.get().wallets
-  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,
-    connector: wagmiConnector
+  await wagmiSignMessage(wagmiConfig, {
+    message: 'This is my message to you',
+    connector: activeWallet.wagmiConnector
   })
 }
 

packages/wagmi/src/index.ts

@@ -87,6 +87,7 @@ async function buildWagmiConfig(
         return undefined
       }
     }
+    console.log('wagmiConnectorFn', wagmiConnectorFn)
     const connectors: CreateConnectorFn[] = [...Object.values(wagmiConnectorFn)]
     const viemChains = await createWagmiChains(chainsList || [], transports)