Next.js 16TypeScriptTailwind CSSTanStack QueryTanStack TableRechartsWagmiViemShadcn UI

Treehouse DOR dApp

A DeFi rates and rewards dashboard that lets users monitor decentralized offered rates, analyze panelist predictions, connect wallets, stake/unstake TREE tokens, and claim on-chain rewards.

Project Overview

Built responsive DOR rates, panelist, and portfolio interfaces with Next.js, React, TypeScript, Tailwind CSS, TanStack Table, and Recharts. Created interactive prediction charts and data tables with synchronized tooltips, sticky columns, sorting, loading states, empty states, and mobile-friendly drawer/table interactions. Implemented staking, unstaking, and reward-claim flows with Wagmi contract writes, ERC-20 allowance checks, receipt tracking, cache invalidation, and success/error states. Developed TanStack Query data layers with polling, query keys, DTO mapping, and cache refresh logic for live DOR rates, panelist submissions, consensus data, and rewards. Improved form correctness with React Hook Form, Zod, Viem unit parsing, wallet balance validation, vault capacity validation, staked-balance validation, and restricted-region confirmation flows.