Wagmi Web3js Adapter
Reference Implementation
If you're using 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:
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<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)
}
/** 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])
}
/** 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 examples
Get block data example:
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<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:
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
tip
This repository contains an example Wagmi app that demonstrates how to interact with the Ethereum blockchain using the web3.js library