15. Web2 to Web3: Scaffold-ETH + Solidity Review
Overview
Section titled “Overview”This is the backbone lesson of the module — nearly two hours that walk through Scaffold-ETH 2 end to end while reviewing the Solidity you’ll write inside it. Scaffold-ETH 2 is an opinionated starter kit that wires together a contract toolchain and a React frontend so you can focus on your logic instead of boilerplate. Understanding its structure is what makes Lab 3 and the SpeedRun challenges approachable.
Key concepts
Section titled “Key concepts”- What Scaffold-ETH 2 is — a batteries-included full-stack template built on Next.js (React frontend), RainbowKit (wallet connection UI), wagmi/viem (typed provider/signer hooks), and Hardhat or Foundry (contract dev, testing, deployment). You get all of these pre-integrated.
- Bootstrapping — you scaffold a project with
npx create-eth@latest. No manual wiring of frontend to contracts; the template does it. - Monorepo layout — two packages:
packages/hardhat(your contracts, tests, and deploy scripts) andpackages/nextjs(the frontend). Knowing which package a file lives in is half the battle when you’re finding your way around. - The dev loop — run a local chain, deploy your contract to it, and the frontend picks up the contract’s address and ABI automatically. Edit contract → redeploy → the UI reflects it.
- The Debug Contracts page — a generated UI that exposes every function of your deployed contract as a form. It lets you call reads and sends without writing any frontend code — the fastest way to test a contract by hand.
- Typed hooks — Scaffold-ETH wraps wagmi so reading and writing your contract from React
is a hook call (
useScaffoldReadContract/useScaffoldWriteContract) with your ABI’s types baked in, connecting directly to the provider/signer idea from lesson 14.
Common pitfalls
Section titled “Common pitfalls”- Getting lost in the monorepo. When something’s missing, first ask: contract side
(
packages/hardhat) or frontend side (packages/nextjs)? - Editing a contract but forgetting to redeploy, so the frontend still talks to the old one.
- Ignoring the Debug Contracts page and hand-writing frontend calls too early. Use the generated UI to verify the contract first.
- Trying to absorb all two hours passively. Build alongside it; this lesson is a workshop, not a talk.
Check yourself
Section titled “Check yourself”- What are the two packages in a Scaffold-ETH 2 project, and what lives in each?
- What does the Debug Contracts page let you do without writing frontend code?
- After you change and redeploy a contract, why does the frontend “just know” the new address and ABI?
Watch the Video
Section titled “Watch the Video”
Web2 to Web3: Scaffold-ETH + Solidity Review
Video credit: Austin Griffith · Duration: 1 hour 52 minutes