A minimal Base dapp built with Vite + React + wagmi v2.
| Feature | Details |
|---|---|
| 🔗 Wallet connect | Injected provider (MetaMask, etc.) + WalletConnect |
| 🔵 Base networks | Base Mainnet & Base Sepolia; auto network-switch prompt |
| 💰 ETH balance | Live balance for the connected address |
| 🌐 ENS resolution | Shows ENS name if one is registered on mainnet |
| 📡 Network stats | Live block number, gas price, block time, TPS |
| 💸 Send ETH | Simple form with wallet confirmation + receipt tracking |
| 📋 Tx history | In-session log of the last 10 transactions with Basescan links |
| 🌉 Quick links | Bridge, Explorer, Docs |
- Vite — build tool
- React 18 — UI
- wagmi v2 — EVM hooks
- viem — low-level Ethereum client
- TanStack Query v5 — async state
npm install
npm run devOpen http://localhost:5173 and connect your wallet.
Replace YOUR_WALLETCONNECT_PROJECT_ID in src/wagmi.js with your project ID
from WalletConnect Cloud.
src/
├── components/
│ ├── AddressLabel.jsx # ENS / short-address display
│ ├── BlockTicker.jsx # Live block number in header
│ ├── GasPrice.jsx # Current gas price in Gwei
│ ├── NetworkStats.jsx # Chain info card
│ ├── SendEth.jsx # Send ETH form
│ └── TxHistory.jsx # Session tx log + useTxHistory hook
├── hooks/
│ └── useBlockNumber.js # Shared block-number hook
├── App.jsx
├── index.css
├── main.jsx
└── wagmi.js # Chain + connector config