Web3 frontend integration is the layer that connects a browser-based UI to a live blockchain: wallet connection, reading and writing contract state, signing, and reacting to what happens on-chain. It sits directly downstream of Solidity development and token standards, turning a deployed contract into something a real user can click a button and use. The field moved fast: web3.js was the original library, ethers.js became the long-standing default, and today most new React dApps reach first for viem (a low-level, type-safe client) paired with wagmi (React hooks built on top of it) rather than hand-rolling provider calls. The single hardest mental shift for newcomers is that every write is asynchronous across three distinct stages — submitted, pending, and confirmed (or dropped/replaced) — and a production UI must render all three, not just success and failure.
What This Cheat Sheet Covers
This topic spans 15 focused tables and 134 indexed concepts. Below is a complete table-by-table outline of this topic, spanning foundational concepts through advanced details.
A jump-to index of every table row in this cheat sheet.
An interactive map of every table and concept in this topic.
Table 1: Core Libraries and Client Setup
Every Web3 frontend starts by picking a library to talk to an Ethereum node and wrapping it in a client object; the four options below cover the vast majority of production dApps, with viem now the modern low-level default.
| Library | Example | Description |
|---|---|---|
const client = createPublicClient({ chain: mainnet, transport: http() }) | Low-level, tree-shakeable, fully TypeScript-typed Ethereum client; the foundation wagmi is built on. | |
const provider = new ethers.BrowserProvider(window.ethereum) | Complete, batteries-included library for providers, signers, contracts, and utilities; current major version is v6. | |
const config = createConfig({ chains: [mainnet], transports: { [mainnet.id]: http() } }) | React Hooks library for Ethereum built on viem and TanStack Query; the standard choice for React dApps. | |
const web3 = new Web3(window.ethereum) | The original Ethereum JavaScript library; still maintained (v4) but less common than ethers/viem in new React projects. | |
createPublicClient({ chain, transport: http() }) | Read-only client for calling contracts, fetching blocks/logs, and estimating gas; requires no account. | |
createWalletClient({ transport: custom(window.ethereum) }) | Client for signing and sending transactions; backed by a JSON-RPC (browser wallet) or local (private key) account. |