DorkFi on Base — UI Starter (Vite + React + TS)

This is a starter repo wired for:

• Vite + React + TypeScript
• wagmi + viem contract reads/writes
• Coinbase Smart Wallet UX via OnchainKit <Wallet /> (plus injected wallet support)
• React Router routes matching the UI spec (/markets, /portfolio, /liquidate)
• Tailwind (dark UI baseline)

Most on-chain reads are placeholders until you drop in your real LendingPool ABI + addresses.

Quick start

cp .env.example .env
npm i
npm run dev

Configure contracts

Edit .env:

• VITE_LENDING_POOL_ADDRESS_MAINNET
• VITE_LENDING_POOL_ADDRESS_SEPOLIA

See docs/ for architecture, markets table, environment, and integration guides.

Replace src/contracts/abi/LendingPool.json with your real ABI and add hook wrappers in:

• src/contracts/lendingPool.ts

Where to implement the spec

• Shell / nav: src/ui/AppShell.tsx
• Wallet connect: src/ui/WalletBar.tsx
• Wrong network banner: src/ui/NetworkBanner.tsx
• Routes: src/router.tsx
• Markets list + portfolio summary: src/pages/MarketsPage.tsx
• Single market (supply/borrow forms): src/pages/MarketDetailPage.tsx
• Portfolio table: src/pages/PortfolioPage.tsx
• Liquidation list: src/pages/LiquidatePage.tsx

Notes on Coinbase Smart Wallet

OnchainKit’s <Wallet /> component is designed for connecting a Smart Wallet (passkey-friendly) and uses wagmi under the hood. You can still use wagmi hooks (useReadContract, useWriteContract, etc.) for all protocol interactions.

Next steps (recommended order)

1. Drop in real ABI + addresses (Base + Base Sepolia).
2. Implement the reads in section 7) Data Requirements of your spec.
3. Add write hooks for deposit/withdraw/borrow/repay/liquidateCrossMarket + ERC20 approvals.
4. Add pricing/oracle integration (Chainlink on Base or your oracle router).
5. Replace mock liquidation list with a subgraph/indexer.