Validator Monitor — Preview

📁 File Structure 21 files

validator-monitor/ ├── LICENSE ├── README.md ├── package.json ├── security-notes.md ├── src/ │ ├── App.tsx │ ├── components/ │ │ ├── AlertFeed.tsx │ │ ├── AttestationChart.tsx │ │ ├── Layout.tsx │ │ ├── PerformanceCard.tsx │ │ ├── StatusBadge.tsx │ │ ├── ValidatorDetail.tsx │ │ └── ValidatorGrid.tsx │ ├── hooks/ │ │ ├── useAlerts.ts │ │ └── useValidators.ts │ ├── lib/ │ │ ├── constants.ts │ │ └── format.ts │ ├── main.tsx │ └── styles/ │ └── globals.css ├── tailwind.config.js ├── tsconfig.json └── vite.config.ts

📖 Documentation Preview README excerpt

validator-monitor

Real-time React dashboard for Ethereum validator monitoring — attestations, proposals, sync committees, and alerts.

Price: $12.99 | Store: staking-kit | Product #1

Overview

validator-monitor is a production-ready React dashboard for tracking Ethereum Beacon Chain validators. It connects to the Beacon API (Lighthouse, Prysm, Teku, Lodestar) and displays real-time validator performance data with attestation charts, alert feeds, and status badges.

Features

Feature	Description
Validator Grid	Overview of all tracked validators with status indicators
Validator Detail	Drill into individual validator — balance, effectiveness, proposals
Attestation Chart	7-day attestation inclusion distance and effectiveness chart
Performance Cards	KPI cards for balance, effectiveness rate, proposals, sync duties
Alert Feed	Real-time alerts for missed attestations, proposals, slashing risk
Status Badges	Color-coded badges for active, pending, exited, slashed states
Dark Theme	CryptoForge branded dark UI with responsive layout

Installation


# Clone the product
cp -r validator-monitor/ my-validator-monitor/
cd my-validator-monitor

# Install dependencies
npm install

# Start development server
npm run dev

The dashboard opens at http://localhost:3000.

Prerequisites

Node.js 18+
npm 9+ or pnpm 8+
A Beacon API endpoint (Lighthouse, Prysm, Teku, or Lodestar)

Configuration

1. Set your validator indices

Edit src/lib/constants.ts:


export const TRACKED_VALIDATORS: number[] = [
  123456, 234567, 345678,  // Your validator indices
];

*... 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 ...