Ethereum - lesson 1 | HackIndia Skills

Key point

Core idea

A dapp does not hold the user’s wallet. It asks the wallet for permission, then asks it to sign or send specific requests.

Your React app is the screen. The wallet is the signer. The blockchain is the source of truth.

The three parts

A wallet dapp has three moving parts. Your React UI shows buttons, data, loading states, and errors. Wagmi gives React hooks for Ethereum work. Viem handles Ethereum requests and data under the hood.

TanStack Query manages async state and caching. Since current Wagmi setup uses it directly, you should think in states: idle, loading, success, error, pending transaction, confirmed.

Your to-do

User flow

Do each one yourself, then tap it to tick it off. The ticks are only a checklist for you: they are not marked or scored.

Connect the wallet and get permission to view accounts.
Check the connected chain, such as Sepolia for testing.
Read contract state with a view or pure function.
Ask the wallet to send a transaction for a write function.
Show the transaction hash, then wait for the receipt.
Handle rejection, pending wallet requests, wrong chain, and failed transactions.

0 of 6 done

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

Reads versus writes

A read calls a read-only Solidity function, usually view or pure. It does not change blockchain state and does not require the user to pay gas.

A write changes blockchain state. The wallet must show the transaction. If the user confirms, the transaction is broadcast and your dapp receives a hash. A hash is not the same as confirmation.

Common mistake

Beginners often stop after getting a transaction hash. That only means the transaction was submitted. Your UI still needs to wait until it is included in a block and then show the result.

Another common mistake is hiding what the user signs. Good dapps show the action, contract, chain, and key values before the wallet popup opens.

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.