Skip to main content

React Hooks for Ethereum (via Wagmi)

Web3Auth supports hooks based Ethereum wallet operations in React via Wagmi. Once you have set up Wagmi using the Web3Auth Modal SDK, you can use all Wagmi hooks directly in your application—no additional wrappers or configuration are needed beyond the initial setup.

Wagmi Integration​

You need to install the wagmi and @tanstack/react-query packages and use the Web3Auth implementation of WagmiProvider for configuration.

info

The Web3Auth implementation of WagmiProvider is a custom implementation that is used to integrate with the Web3Auth Modal SDK. It is a wrapper around the WagmiProvider that makes it compatible.

With this implementation, you can use the Wagmi hooks, however no external connectors are supported. Web3Auth provides a whole suite of connectors which you can use directly for a better experience with external wallets.

npm install wagmi @tanstack/react-query
main.tsx
import "./index.css";

import ReactDOM from "react-dom/client";
import { Web3AuthProvider } from "@web3auth/modal/react";
import web3AuthContextConfig from "./web3authContext";
import { WagmiProvider } from "@web3auth/modal/react/wagmi";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

import App from "./App";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
  <Web3AuthProvider config={web3AuthContextConfig}>
    <QueryClientProvider client={queryClient}>
      <WagmiProvider>
        <App />
      </WagmiProvider>
    </QueryClientProvider>
  </Web3AuthProvider>,
);
info

Wagmi provides a comprehensive set of React hooks for Ethereum and EVM-compatible chains. Web3Auth integrates seamlessly with Wagmi, so you can use hooks like useAccount, useBalance, useSendTransaction, and more, out of the box.

Below are some examples of using Wagmi hooks in your dApp after Web3Auth and Wagmi are set up. You can note these functions work directly with Wagmi. Once you have set up Wagmi with Web3Auth, you can use any Wagmi hook as you would in a standard Wagmi application.

Get Account Balance​

import { useAccount, useBalance } from "wagmi";
import { formatUnits } from "viem";

export function Balance() {
  const { address } = useAccount();
  const { data, isLoading, error } = useBalance({ address });

  return (
    <div>
      <h2>Balance</h2>
      <div>
        {data?.value !== undefined && `${formatUnits(data.value, data.decimals)} ${data.symbol}`}{" "}
        {isLoading && "Loading..."} {error && "Error: " + error.message}
      </div>
    </div>
  );
}

Send Transaction​

import { FormEvent } from "react";
import { useWaitForTransactionReceipt, useSendTransaction, BaseError } from "wagmi";
import { Hex, parseEther } from "viem";

export function SendTransaction() {
  const { data: hash, error, isPending, sendTransaction } = useSendTransaction();

  async function submit(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    const formData = new FormData(e.target as HTMLFormElement);
    const to = formData.get("address") as Hex;
    const value = formData.get("value") as string;
    sendTransaction({ to, value: parseEther(value) });
  }

  const { isLoading: isConfirming, isSuccess: isConfirmed } = useWaitForTransactionReceipt({
    hash,
  });

  return (
    <div>
      <h2>Send Transaction</h2>
      <form onSubmit={submit}>
        <input name="address" placeholder="Address" required />
        <input name="value" placeholder="Amount (ETH)" type="number" step="0.000000001" required />
        <button disabled={isPending} type="submit">
          {isPending ? "Confirming..." : "Send"}
        </button>
      </form>
      {hash && <div>Transaction Hash: {hash}</div>}
      {isConfirming && "Waiting for confirmation..."}
      {isConfirmed && "Transaction confirmed."}
      {error && <div>Error: {(error as BaseError).shortMessage || error.message}</div>}
    </div>
  );
}

Switch Chain​

import { useChainId, useSwitchChain } from "wagmi";

export function SwitchChain() {
  const chainId = useChainId();
  const { chains, switchChain, error } = useSwitchChain();

  return (
    <div>
      <h2>Switch Chain</h2>
      <h3>Connected to {chainId}</h3>
      {chains.map((chain) => (
        <button
          disabled={chainId === chain.id}
          key={chain.id}
          onClick={() => switchChain({ chainId: chain.id })}
          type="button"
          className="card"
        >
          {chain.name}
        </button>
      ))}
      {error?.message}
    </div>
  );
}

Common Questions

The following questions can be answered using the information on this page:

  1. How do I integrate Wagmi with Web3Auth for Ethereum functionality?
  2. What packages do I need to install for Ethereum integration in Web3Auth?
  3. How do I set up the WagmiProvider with Web3Auth?
  4. What Ethereum hooks are available through Wagmi integration?
  5. How do I check an account's balance using Web3Auth and Wagmi?
  6. How can I send Ethereum transactions using Web3Auth?
  7. How do I implement chain switching in my Web3Auth dApp?
  8. Can I use external wallet connectors with Web3Auth's Wagmi implementation?
  9. How do I handle transaction confirmations with Web3Auth and Wagmi?
  10. What are the differences between Web3Auth's WagmiProvider and standard Wagmi setup?