intermediate · blockchain
dApp frontends with ethers.js, viem and wagmi
The web side of web3: connecting wallets, reading and writing contracts from React, and a UX that survives pending transactions, wrong networks and rejected signatures.
·
By Amit Chakraborty — Kolkata, India · Remote worldwide
What you will be able to do
Build a React dApp that connects any wallet, reads contract state, sends transactions and never leaves the user guessing what happened.
Syllabus — 10 chapters
- 1. Providers, signers and RPC — Know what a provider can do, what needs a signer, and where the RPC fits.
- 2. ethers.js v6 in practice — Read balances, call contracts and parse events with the v6 API.
- 3. viem and why it exists — Compare viem's typed clients with ethers, and choose per project.
- 4. wagmi hooks in React — Read and write contracts with hooks, caching and refetching included.
- 5. Wallet connection with RainbowKit — Support injected, WalletConnect and smart wallets from one button.
- 6. Transaction UX — Show pending, confirmed, replaced and failed states honestly.
- 7. Sign-In with Ethereum — Authenticate a user with a signature and a server-side session.
- 8. Indexing events for a fast UI — Stop scanning the chain from the browser; use an indexer.
- 9. Testing a dApp frontend — Run against a local chain and mock the wallet in tests.
- 10. Shipping: networks, env and errors — Handle chain switches, RPC outages and user-rejected requests.
0 of 10 published. A new chapter every Saturday evening. Free to read.
Learn it free, elsewhere too
The documentation, videos, books and practice sites worth your time on this subject. All free. None of it is mine.