Staking, Delegation & Rewards System
Token Staking Platform
A token staking, delegation, and rewards system for a decentralized Web3 network. The platform supports airdrop eligibility verification, staking with lockup periods, validator delegation, and comprehensive reward tracking.
Core Design Goals
Radical Clarity
Every balance, state, and action is unambiguous
Progressive Disclosure
Complexity appears only when relevant
Financial Trust
Calm, predictable, institutional UI
System Consistency
One mental model across all flows
Three-Layer Design System
The platform is organized into three distinct layers, each with specific purposes and interaction patterns.
Landing Page & Statistics
The landing page communicates the network's mission and provides real-time statistics, with an embedded staking widget for immediate action.
Guided Claim Flow
A three-step guided flow (Eligibility, Claim, Stake) with clear criteria breakdowns. Each eligibility criterion shows pass/fail status with token amounts, building to a clear total.
Explicit State Management
The staking dashboard separates Staked Balance, Rewards Earned, and APR into distinct cards. Stake/Unstake/Claim Rewards are explicit tabs, with lockup periods always visible.
Validator Selection & Management
The delegation view separates My Delegations from All Validators, with filterable states (Active, Deactivating, Inactive). Commission rates and voting power are transparent.
My Delegations
- -Validator name with link
- -Staked amount per validator
- -Rewards earned per delegation
- -Individual APR display
- -Quick Stake/More actions
All Validators
- -Voting Power ranking
- -Commission rate (with max cap)
- -Status filter: Active (125), Deactivating (1), Inactive (85)
- -Stake/Unstake/Claim Rewards actions
Receipts & Countdown Timers
Pending unstakes are tracked with countdown timers showing exact time remaining. Each receipt shows validator, amount, and claim availability with a maximum of 20 pending withdrawals.
Receipt Details
- +Validator name per unstake
- +Amount being unstaked (125 tokens)
- +Countdown timer: 3 d, 21 hr, 12 min
- +Individual CLAIM buttons
- +Maximum 20 pending withdrawals note
Each unstaking request creates a separate receipt with its own countdown, allowing users to track multiple validators independently.
Stats Dashboard
A comprehensive statistics dashboard showing network health metrics with time-series charts for daily data scraped and cumulative tokens collected.
- - Rows of Data
- - Tokens Collected
- - Daily Multimodal (GB)
- - URLs Indexed
- - Data Scraped in GB
- - Time filter: 7/14/21 days
- - Area chart visualization
- - Tokens Collected over time
- - Interactive tooltips
- - Trend analysis
Design Decisions
Explicit State Separation
- +Staked, Unstaking, Rewards, Available as independent balances
- +No combined or ambiguous totals
- +Each state has dedicated UI treatment
- +Clear transitions between states
Financial UI Discipline
- +Minimal color palette (black, white, lime accent)
- +No decorative motion or animation
- +Institutional tone throughout
- +Mobile-first, desktop-complete parity
A complete staking ecosystem that treats users as financially literate adults. Every interaction is explicit, every state is visible, and every action has clear consequences communicated upfront.
Full desktop and mobile parity for Web3 financial operations.