Skip to main content

Wagmi Web3.js 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