Skip to main content

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:})
const [block, setBlock] = useState<Block>()

useEffect(() => {
web3js.eth.getBlock(19235006).then((b) => {
setBlock(b as Block)
}, [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:})

useEffect(() => {
if (account && account.address) {
from: account.address,
to: '0x', // some address
value: '0x1' // set your value
}, [account])

return (
{ => (
onClick={() => connect({connector})}

export default SendTransaction


This repository contains an example Wagmi app that demonstrates how to interact with the Ethereum blockchain using the web3.js library