DAO Voting UI is a modern, open-source Web3 interface for decentralized autonomous organization (DAO) governance. Connect your wallet, browse on-chain proposals, cast votes, and create new proposals—all from a single Next.js application wired to Governor-compatible smart contracts.
DAO Voting UI is a purpose-built governance console for DAOs using OpenZeppelin Governor-style contracts on Ethereum (and compatible chains). It provides:
- Proposal list & detail – View all proposals with state, votes (for / against / abstain), and timelines
- On-chain voting – Cast votes directly from a connected wallet (MetaMask, Coinbase Wallet, etc.)
- Create proposals – Submit new governance proposals with targets, calldata, and descriptions
- Voting power – See your voting weight at proposal snapshot block
- Single config – Point the app at your Governor contract and chain via one config file
Built with Next.js 16, Wagmi 3, viem, React Query, and Tailwind CSS for a fast, type-safe, and maintainable stack.
| Feature | Description |
|---|---|
| Wallet connection | Injected (MetaMask) and Coinbase Wallet; Wagmi handles state and chain switching |
| Proposal discovery | Fetches proposals from ProposalCreated events and enriches with state/votes |
| Vote casting | For / Against / Abstain with optional reason; uses castVote / castVoteWithReason |
| Create proposal | Form for targets, values, calldatas, and description; calls Governor propose |
| Caching & refresh | React Query caches on-chain reads; configurable stale time and refetch |
| Responsive UI | Tailwind-based layout; loading, empty, and error states per component |
- Framework: Next.js 16 (App Router)
- Web3: Wagmi 3 + viem for reads/writes and wallet connectivity
- Data: TanStack React Query for server state and caching
- Styling: Tailwind CSS 4
- State: Zustand (optional local state)
- Language: TypeScript 5
- Node.js 18+ (recommended: 20+)
- pnpm (or npm / yarn / bun)
# Clone the repository
git clone https://github.com/KuchikiRenji/dao-voting-ui.git
cd dao-voting-ui
# Install dependencies
pnpm install
# Start development server
pnpm devOpen http://localhost:3000. Use Enter the console to go to the DAO voting page.
pnpm build
pnpm startGovernor contract and network are configured in one place: constants/governorConfig.ts.
| Setting | Description |
|---|---|
NETWORK |
Target chain (default: Sepolia); use any Wagmi chain |
GOVERNOR_ADDRESS |
Deployed Governor contract address |
GOVERNOR_ABI |
ABI with events/functions used by the app (ProposalCreated, state, proposalVotes, castVote, propose, etc.) |
Optional environment variable:
NEXT_PUBLIC_GOVERNOR_START_BLOCK– Block number to start scanning forProposalCreated(default: 0). Set to deployment block for large chains to speed up initial load.
After changing the config, restart the dev server. No other code changes are required.
app/
page.tsx # Landing
dao/
page.tsx # Proposal list + create form
[id]/page.tsx # Single proposal detail & voting
components/ # ProposalCard, ProposalDetail, VoteButtons, etc.
hooks/ # useProposals, useProposal, useVote, useCreateProposal, …
lib/
governance.ts # Governor reads (getProposals, getProposal) via viem
formatters.ts # Title extraction, date formatting
constants/
governorConfig.ts # Network, address, ABI
providers/
web3.tsx # WagmiProvider + QueryClientProvider
For full data flow and hook responsibilities, see docs/architecture.md.
| Command | Description |
|---|---|
pnpm dev |
Start Next.js dev server |
pnpm build |
Production build |
pnpm start |
Run production server |
pnpm lint |
Run ESLint |
KuchikiRenji
- GitHub: github.com/KuchikiRenji
- Email: KuchikiRenji@outlook.com
- Discord:
kuchiki_renji
This project is private by default. See the repository for license terms.
DAO · governance · voting · Ethereum · Web3 · Next.js · Wagmi · viem · Governor contract · decentralized · blockchain · React · TypeScript · Tailwind