A real-time Hive blockchain curation dashboard built with Next.js 14, TypeScript, and Recharts.
- Voting Power Gauge: Real-time VP monitoring with current and max vote value display
- Account Stats: HP, RC, reputation, and balance tracking
- Vote History Feed: Recent votes with estimated values and VP at time of vote
- Top Authors Chart: Bar chart showing most voted authors
- VP Over Time: Line chart tracking voting power changes across vote history
- Multi-Node Failover: Automatic RPC node switching for reliability
- Next.js 14 (App Router)
- TypeScript
- Tailwind CSS
- Recharts (data visualization)
- @hiveio/dhive (Hive blockchain client)
npm installnpm run devOpen http://localhost:3000 to view the dashboard.
npm run build
npm startmantecurated-live/
├── app/
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Main dashboard page
│ └── globals.css # Global styles
├── components/
│ ├── VotingPowerGauge.tsx # VP circular gauge
│ ├── AccountStatsCard.tsx # Account stats display
│ ├── RecentVotesFeed.tsx # Vote history feed
│ ├── TopAuthorsChart.tsx # Bar chart component
│ └── VPOverTimeChart.tsx # Line chart component
├── lib/
│ ├── hive.ts # dhive client & API calls
│ └── votemath.ts # VP & vote value calculations
└── types/
└── hive.ts # TypeScript interfaces
All API calls follow patterns from the hive-master-skill:
- Client Failover: Multiple RPC nodes with automatic switching
- Parallel Fetching: Account, global props, reward fund, and price data fetched concurrently
- VP Calculation: 20% regeneration per day (5 days full)
- Vote Value Formula:
rshares × reward_balance ÷ recent_claims × hive_price
Default account: mantecurated
To change default, edit app/page.tsx:
const [accountName, setAccountName] = useState('your-account');Configured failover nodes in lib/hive.ts:
- api.hive.blog
- api.deathwing.me
- hive-api.arcange.eu
- api.openhive.network
MIT