From 8cd8a5186559ac5957c90129f0687c6ab3ac2a27 Mon Sep 17 00:00:00 2001
From: Oleksii Kosynskyi <oleksii.kosynskyi@gmail.com>
Date: Wed, 21 Feb 2024 13:28:50 -0500
Subject: [PATCH] add signer example

---
 docs/docs/guides/wagmi_usage/wagmi.md | 93 ++++++++++++++++++++++++---
 1 file changed, 85 insertions(+), 8 deletions(-)

diff --git a/docs/docs/guides/wagmi_usage/wagmi.md b/docs/docs/guides/wagmi_usage/wagmi.md
index b19cf1309b7..02795bc4cf8 100644
--- a/docs/docs/guides/wagmi_usage/wagmi.md
+++ b/docs/docs/guides/wagmi_usage/wagmi.md
@@ -11,7 +11,7 @@ If you're using [Wagmi](https://wagmi.sh/react/getting-started#use-wagmi) and wa
 import {Web3} from 'web3'
 import {useMemo} from 'react'
 import type {Chain, Client, Transport} from 'viem'
-import {type Config, useClient} from 'wagmi'
+import {type Config, useClient, useConnectorClient} from 'wagmi'
 
 export function clientToWeb3js(client?: Client<Transport, Chain>) {
     if (!client) {
@@ -23,8 +23,7 @@ export function clientToWeb3js(client?: Client<Transport, Chain>) {
     if (transport.type === 'fallback') {
         return new Web3(transport.transports[0].value.url)
     }
-
-    return new Web3(transport.url)
+    return new Web3(transport)
 }
 
 /** Action to convert a viem Client to a web3.js Instance. */
@@ -33,16 +32,94 @@ export function useWeb3js({chainId}: { chainId?: number } = {}) {
     return useMemo(() => clientToWeb3js(client), [client])
 }
 
+/** Action to convert a viem ConnectorClient to a web3.js Instance. */
+export function useWeb3jsSigner({chainId}: { chainId?: number } = {}) {
+    const {data: client} = useConnectorClient<Config>({chainId})
+    return useMemo(() => clientToWeb3js(client), [client])
+}
 ```
 
-Usage example:
+Get block data example:
 
 ```typescript
 import {useWeb3js} from '../web3/useWeb3js'
-import {mainnet} from 'wagmi/chains' // for example for mainnet
-// somewhere in your React render method
-const web3js = useWeb3js({chainId: mainnet.id})
-// ...
+import {mainnet} from 'wagmi/chains'
+import {useEffect, useState} from "react";
+
+type Block = {
+    hash: string
+    extraData: string
+    miner: string
+
+}
+
+function Block() {
+    const web3js = useWeb3js({chainId: mainnet.id})
+    const [block, setBlock] = useState<Block>()
+
+    useEffect(() => {
+        web3js.eth.getBlock(19235006).then((b) => {
+            setBlock(b as Block)
+        }).catch(console.error)
+    }, [setBlock]);
+
+
+    if (!block) return (<div>Loading...</div>)
+
+    return (
+        <>
+            <div id='hash'>{block.hash}</div>
+            <div id='extraData'>{block.extraData}</div>
+            <div id='miner'>{block.miner}</div>
+
+        </>
+)
+}
+
+export default Block
+
+```
+
+Send transaction example:
+
+```typescript
+import {mainnet} from 'wagmi/chains'
+import {useAccount, useConnect} from "wagmi";
+import {useWeb3jsSigner} from "../web3/useWeb3js";
+import {useEffect} from "react";
+
+function SendTransaction() {
+    const account = useAccount()
+    const {connectors, connect,} = useConnect()
+    const web3js = useWeb3jsSigner({chainId: mainnet.id})
+
+    useEffect(() => {
+        if (account && account.address) {
+            web3js.eth.sendTransaction({
+                from: account.address,
+                to: '0x', // some address
+                value: '0x1' // set your value
+            }).then(console.log).catch(console.error)
+        }
+    }, [account])
+
+    return (
+        <>
+            {connectors.map((connector) => (
+                <button
+                    key={connector.uid}
+                    onClick={() => connect({connector})}
+                    type="button"
+                >
+                    {connector.name}
+                </button>
+            ))}
+        </>
+    )
+}
+
+export default SendTransaction
+
 ```