Ethereum - lesson 1 | HackIndia Skills

Ethereum - lesson 1 | HackIndia Skills | HackIndia

Example

Mental model

This is not full code for the repo yet. Use it as a map for what each screen state must show later.

User opens dapp
  -> sees Connect Wallet

User connects wallet
  -> dapp shows address and chain

Dapp reads contract
  -> UI shows current value

User clicks write action
  -> wallet opens with signing or transaction details

User confirms
  -> dapp gets transaction hash
  -> dapp shows Pending
  -> dapp waits for receipt
  -> dapp shows Confirmed or Failed

User rejects
  -> dapp shows Request rejected

User already has wallet popup open
  -> dapp shows Check your wallet, request already pending

Tip

Use AI well

Ask an AI tool to draw your dapp state machine before coding. Then check that it includes connect, chain check, read, write, pending hash, receipt, rejected request, and pending wallet request.

Do not accept code that uses old Wagmi v1 patterns or eth_sign examples. Current lessons in this track use Wagmi 3, Viem 2, and clear signing details.

Prompt:
I am building a React Ethereum dapp using Wagmi 3, Viem 2, and TanStack Query.
Create a simple UI state machine for:
connect wallet, check chain, read contract, send transaction, show hash, wait for receipt, handle user rejection, handle already pending wallet request.
Keep it beginner-friendly.

How a Wallet Dapp Works

Core idea

The three parts

User flow

Mental model

Reads versus writes

Common mistake

Use AI well

Do this now

Quick check