From 718b2ccceeb5f48590f1c3de8116ac9620e7db85 Mon Sep 17 00:00:00 2001
From: Oleksii Kosynskyi <oleksii.kosynskyi@gmail.com>
Date: Wed, 14 Feb 2024 19:38:16 -0500
Subject: [PATCH 1/4] add wagmi documentation

---
 docs/docs/guides/wagmi_usage/_category_.yml |  5 ++
 docs/docs/guides/wagmi_usage/wagmi.md       | 51 +++++++++++++++++++++
 2 files changed, 56 insertions(+)
 create mode 100644 docs/docs/guides/wagmi_usage/_category_.yml
 create mode 100644 docs/docs/guides/wagmi_usage/wagmi.md

diff --git a/docs/docs/guides/wagmi_usage/_category_.yml b/docs/docs/guides/wagmi_usage/_category_.yml
new file mode 100644
index 00000000000..a314e00849b
--- /dev/null
+++ b/docs/docs/guides/wagmi_usage/_category_.yml
@@ -0,0 +1,5 @@
+label: '🔄 Wagmi usage'
+collapsible: true
+collapsed: true
+link: null
+position: 11
diff --git a/docs/docs/guides/wagmi_usage/wagmi.md b/docs/docs/guides/wagmi_usage/wagmi.md
new file mode 100644
index 00000000000..d2e500cf5df
--- /dev/null
+++ b/docs/docs/guides/wagmi_usage/wagmi.md
@@ -0,0 +1,51 @@
+---
+sidebar_position: 1
+sidebar_label: 'Wagmi Web3js Adaptor'
+title: 'Wagmi Web3js Adaptor'
+---
+
+If you're using [Wagmi](https://wagmi.sh/react/getting-started#use-wagmi) and want to add web3.js, use this provider in your project:
+
+
+```typescript
+import {Web3} from 'web3'
+import {useMemo} from 'react'
+import type {Chain, Client, Transport} from 'viem'
+import {type Config, useClient} from 'wagmi'
+
+export function clientToWeb3js(client?: Client<Transport, Chain>) {
+    if (!client) {
+        return new Web3()
+    }
+
+    const {transport} = client
+
+    if (transport.type === 'fallback') {
+        return new Web3(transport.transports[0].value.url)
+    }
+
+    return new Web3(transport.url)
+}
+
+/** Action to convert a viem Client to a web3.js Instance. */
+export function useWeb3js({chainId}: { chainId?: number } = {}) {
+    const client = useClient<Config>({chainId})
+    return useMemo(() => clientToWeb3js(client), [client])
+}
+
+```
+
+Usage 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})
+// ...
+```
+
+
+:::tip
+To learn about Wagmi and how to set up a Wagmi project, please follow this [link](https://wagmi.sh/react/getting-started#use-wagmi)
+::: 

From 5e7126e1783df0cb4fe542b19bb33879ec728427 Mon Sep 17 00:00:00 2001
From: Oleksii Kosynskyi <oleksii.kosynskyi@gmail.com>
Date: Tue, 20 Feb 2024 19:22:19 -0500
Subject: [PATCH 2/4] add link to repo

---
 docs/docs/guides/wagmi_usage/wagmi.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/docs/guides/wagmi_usage/wagmi.md b/docs/docs/guides/wagmi_usage/wagmi.md
index d2e500cf5df..b19cf1309b7 100644
--- a/docs/docs/guides/wagmi_usage/wagmi.md
+++ b/docs/docs/guides/wagmi_usage/wagmi.md
@@ -47,5 +47,5 @@ const web3js = useWeb3js({chainId: mainnet.id})
 
 
 :::tip
-To learn about Wagmi and how to set up a Wagmi project, please follow this [link](https://wagmi.sh/react/getting-started#use-wagmi)
+[This repository](https://github.com/avkos/wagmi-web3js-example-app) contains an example Wagmi app that demonstrates how to interact with the Ethereum blockchain using the web3.js library
 ::: 

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 3/4] 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
+
 ```
 
 

From f6d9982a8a2b52780dd00c9019b09a1cd4e6c1ee Mon Sep 17 00:00:00 2001
From: Oleksii Kosynskyi <oleksii.kosynskyi@gmail.com>
Date: Wed, 21 Feb 2024 17:56:04 -0500
Subject: [PATCH 4/4] fixes

---
 docs/docs/guides/wagmi_usage/wagmi.md | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/docs/docs/guides/wagmi_usage/wagmi.md b/docs/docs/guides/wagmi_usage/wagmi.md
index 02795bc4cf8..9a3044c3767 100644
--- a/docs/docs/guides/wagmi_usage/wagmi.md
+++ b/docs/docs/guides/wagmi_usage/wagmi.md
@@ -1,10 +1,12 @@
 ---
 sidebar_position: 1
-sidebar_label: 'Wagmi Web3js Adaptor'
-title: 'Wagmi Web3js Adaptor'
+sidebar_label: 'Wagmi Web3js Adapter'
+title: 'Wagmi Web3js Adapter'
 ---
 
-If you're using [Wagmi](https://wagmi.sh/react/getting-started#use-wagmi) and want to add web3.js, use this provider in your project:
+
+### Reference Implementation
+If you're using [Wagmi](https://wagmi.sh/react/getting-started#use-wagmi) and want to add web3.js, use this code in your project. This snippet will help you to convert a `Viem` client to a `web3.js` instance for signing transactions and interacting with the blockchain:
 
 
 ```typescript
@@ -39,6 +41,7 @@ export function useWeb3jsSigner({chainId}: { chainId?: number } = {}) {
 }
 ```
 
+### Usage examples
 Get block data example:
 
 ```typescript