Governance Voting Dashboard with Real-Time Proposal Tracking

[JamesEjembi]

Problem Statement

VRN token holders need a transparent governance interface to participate in protocol decisions. A voting dashboard must be built showing active/passed/defeated proposals, detailed proposal pages with vote distribution, delegate voting, proposal creation with on-chain parameter simulation, and vote history with gas cost tracking.

Technical Bounds

• Proposal list: paginated with status filter (active, passed, defeated, queued, executed).
• Proposal detail: description (markdown), vote distribution (pie chart + table), vote action panel, debate section.
• Voting: quadratic or token-weighted depending on proposal type; cost preview before confirm.
• Delegate: assign vote power, view delegation stats, revoke delegation.
• Creation: form with markdown editor, parameter inputs, calldata builder, deposit display.
• Vote history: per-user table with proposal, choice, power, tx hash, gas cost, timestamp.

Steps

1. Build ProposalList with infinite scroll and status filter tabs.
2. Build ProposalDetail page with rendered markdown, vote pie chart (Recharts), vote panel.
3. Implement VotePanel with power slider, cost preview, castVote call via wallet.
4. Build DelegateManager component: search delegates, view stats, delegate/revoke.
5. Build ProposalCreator with markdown editor (react-md-editor), parameter form, and propose() interaction.
6. Build VoteHistoryTable with pagination, CSV export, and gas cost column.