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