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..9a3044c3767 --- /dev/null +++ b/docs/docs/guides/wagmi_usage/wagmi.md @@ -0,0 +1,131 @@ +--- +sidebar_position: 1 +sidebar_label: 'Wagmi Web3js Adapter' +title: 'Wagmi Web3js Adapter' +--- + + +### 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 +import {Web3} from 'web3' +import {useMemo} from 'react' +import type {Chain, Client, Transport} from 'viem' +import {type Config, useClient, useConnectorClient} from 'wagmi' + +export function clientToWeb3js(client?: Client) { + if (!client) { + return new Web3() + } + + const {transport} = client + + if (transport.type === 'fallback') { + return new Web3(transport.transports[0].value.url) + } + return new Web3(transport) +} + +/** Action to convert a viem Client to a web3.js Instance. */ +export function useWeb3js({chainId}: { chainId?: number } = {}) { + const client = useClient({chainId}) + 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({chainId}) + return useMemo(() => clientToWeb3js(client), [client]) +} +``` + +### Usage examples +Get block data example: + +```typescript +import {useWeb3js} from '../web3/useWeb3js' +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() + + useEffect(() => { + web3js.eth.getBlock(19235006).then((b) => { + setBlock(b as Block) + }).catch(console.error) + }, [setBlock]); + + + if (!block) return (
Loading...
) + + return ( + <> +
{block.hash}
+
{block.extraData}
+
{block.miner}
+ + +) +} + +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) => ( + + ))} + + ) +} + +export default SendTransaction + +``` + + +:::tip +[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 +:::