← Back to all products
$13
Staking Dashboard
Dashboard for staking positions, rewards history, validator comparisons, and portfolio tracking.
TypeScriptMarkdownJSONJavaScriptReact
📁 File Structure 22 files
staking-dashboard/
├── LICENSE
├── README.md
├── package.json
├── security-notes.md
├── src/
│ ├── App.tsx
│ ├── components/
│ │ ├── ApyComparison.tsx
│ │ ├── Layout.tsx
│ │ ├── PositionsOverview.tsx
│ │ ├── ProtocolBadge.tsx
│ │ ├── ProtocolDetail.tsx
│ │ ├── RewardsTimeline.tsx
│ │ └── StatsCard.tsx
│ ├── hooks/
│ │ ├── useApyData.ts
│ │ ├── usePositions.ts
│ │ └── useRewards.ts
│ ├── lib/
│ │ ├── constants.ts
│ │ └── format.ts
│ ├── main.tsx
│ └── styles/
│ └── globals.css
├── tailwind.config.js
├── tsconfig.json
└── vite.config.ts
📖 Documentation Preview README excerpt
staking-dashboard
Multi-protocol staking positions dashboard — track Lido, Rocket Pool, native staking, and more with APY comparison and rewards timeline.
Price: $12.99 | Store: staking-kit | Product #7
Overview
staking-dashboard is a production-ready React dashboard for tracking staking positions across multiple Ethereum protocols. It provides a unified view of your staking portfolio with real-time APY comparison, cumulative rewards tracking, and per-protocol drill-down views.
Features
| Feature | Description |
|---|---|
| Positions Overview | Unified view of all staking positions across protocols |
| Protocol Detail | Drill into individual protocols — balance, rewards, APY trend chart |
| APY Comparison | Side-by-side APY matrix with multi-line trend chart |
| Rewards Timeline | 90-day cumulative rewards with daily/weekly breakdowns |
| Protocol Badges | Color-coded badges for native vs liquid staking |
| Stats Cards | KPI cards for total staked, rewards, weighted APY |
| Dark Theme | CryptoForge branded dark UI with responsive layout |
Supported Protocols
| Protocol | Token | Fee | Type |
|---|---|---|---|
| Native Solo Staking | ETH | 0% | Native |
| Lido | stETH | 10% | LST |
| Rocket Pool | rETH | 14% | LST |
| Coinbase | cbETH | 25% | LST |
| Frax Ether | sfrxETH | 10% | LST |
| Mantle Staked ETH | mETH | 10% | LST |
Installation
# Clone the product
cp -r staking-dashboard/ my-staking-dashboard/
cd my-staking-dashboard
# Install dependencies
npm install
# Start development server
npm run dev
The dashboard opens at http://localhost:3002.
Prerequisites
- Node.js 18+
- npm 9+ or pnpm 8+
... continues with setup instructions, usage examples, and more.
📄 Code Sample .js preview
tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
darkMode: "class",
theme: {
extend: {
colors: {
cf: {
bg: {
DEFAULT: "#0D0D1A",
card: "#13132B",
hover: "#1A1A3E",
input: "#0A0A15",
},
primary: {
DEFAULT: "#FF6B00",
light: "#FF8A33",
dark: "#CC5500",
muted: "rgba(255, 107, 0, 0.15)",
},
accent: {
DEFAULT: "#FFD700",
light: "#FFE44D",
muted: "rgba(255, 215, 0, 0.15)",
},
text: {
DEFAULT: "#E8E8F0",
muted: "#8888AA",
dim: "#555577",
},
success: "#00D97E",
danger: "#FF4D6A",
warning: "#FFB020",
border: "#2A2A4A",
},
},
fontFamily: {
sans: ['"Inter"', "system-ui", "-apple-system", "sans-serif"],
mono: ['"JetBrains Mono"', '"Fira Code"', "monospace"],
},
boxShadow: {
glow: "0 0 20px rgba(255, 107, 0, 0.15)",
"glow-accent": "0 0 20px rgba(255, 215, 0, 0.15)",
},
animation: {
"pulse-slow": "pulse 3s ease-in-out infinite",
},
},
},
plugins: [],
# ... 2 more lines ...