← Back to all products
$15
Sequencer Dashboard
Monitor sequencer health, transaction throughput, gas costs, and L1 batch submission status.
TypeScriptMarkdownJSONReact
📁 File Structure 21 files
sequencer-dashboard/
├── README.md
├── package.json
├── public/
│ └── index.html
├── security-notes.md
├── src/
│ ├── App.tsx
│ ├── components/
│ │ ├── AlertsPanel.tsx
│ │ ├── CostPanel.tsx
│ │ ├── Header.tsx
│ │ ├── HealthPanel.tsx
│ │ ├── SequencerConfig.tsx
│ │ └── ThroughputChart.tsx
│ ├── hooks/
│ │ ├── useCostBreakdown.ts
│ │ ├── useSequencerMetrics.ts
│ │ └── useThroughputHistory.ts
│ ├── index.css
│ ├── main.tsx
│ ├── types/
│ │ └── index.ts
│ └── utils/
│ └── format.ts
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts
📖 Documentation Preview README excerpt
Sequencer Dashboard
Real-time sequencer health monitoring dashboard with block production graphs, inclusion histograms, and gas cost tracking.
Price: $14.99 | License: MIT | Category: Frontend | Runtime: Node.js 18+
Overview
sequencer-dashboard is a React dashboard for monitoring rollup sequencer health in real time. It displays block production rate, transaction inclusion latency distributions, gas cost trends, and sequencer uptime — all updated live via WebSocket connections to your L2 node.
Designed for rollup operators who need a heads-up display for their sequencer. Works with any OP Stack, Arbitrum, or EVM-compatible rollup.
Features
- Real-time health monitoring — Live sequencer status with uptime tracking and block height
- Block production graphs — Line charts of blocks per minute with anomaly highlighting
- Transaction inclusion histograms — Distribution of submission-to-inclusion latency
- Gas cost tracking — L1 batch posting costs and L2 gas utilization over time
- WebSocket live updates — All metrics stream in real time, no polling
- Responsive dark theme — CryptoForge branded UI with mobile-friendly layout
- Configurable alerts — Visual + audio alerts for missed blocks or degraded health
Tech Stack
| Package | Purpose |
|---|---|
| React 18 | UI framework |
| TypeScript | Type safety |
| Vite | Build tool |
| TailwindCSS | Utility-first CSS |
| wagmi | Ethereum React hooks |
| viem | Low-level EVM client |
| Recharts | Charts and visualizations |
| WebSocket | Real-time data streaming |
Quick Start
Prerequisites
- Node.js 18+
- An L2 RPC endpoint (HTTP + WebSocket)
Install & Run
npm install
npm run dev
The dashboard opens at http://localhost:5173.
Production Build
npm run build
npm run preview
... continues with setup instructions, usage examples, and more.
📄 Code Sample .ts preview
tailwind.config.ts
/** @type {import('tailwindcss').Config} */
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
darkMode: 'class',
theme: {
extend: {
colors: {
cf: {
primary: '#FF6B00',
'primary-dim': '#CC5500',
accent: '#FFD700',
bg: '#0D0D1A',
'bg-deep': '#080812',
surface: '#141420',
'surface-2': '#1E1E2E',
'surface-3': '#252538',
border: '#2a2a3a',
text: '#E0E0E0',
'text-muted': '#8888aa',
success: '#00E676',
warning: '#FF9100',
error: '#FF1744',
},
},
fontFamily: {
heading: ['JetBrains Mono', 'monospace'],
body: ['Inter', 'sans-serif'],
accent: ['Space Grotesk', 'sans-serif'],
},
},
},
plugins: [],
};