L1 Cost Tracker

$10

Track L1 data posting costs, gas usage per batch, and projected monthly L1 expenditures.

📁 18 files

TypeScriptMarkdownJSONReact

📁 File Structure 18 files

l1-cost-tracker/ ├── README.md ├── package.json ├── public/ │ └── index.html ├── security-notes.md ├── src/ │ ├── App.tsx │ ├── components/ │ │ ├── CostChart.tsx │ │ ├── CostSummaryPanel.tsx │ │ ├── GasMetricsPanel.tsx │ │ ├── ProjectionPanel.tsx │ │ └── RecentBatches.tsx │ ├── hooks/ │ │ └── useCostData.ts │ ├── index.css │ ├── main.tsx │ ├── types/ │ │ └── index.ts │ └── utils/ │ └── format.ts ├── tailwind.config.ts ├── tsconfig.json └── vite.config.ts

📖 Documentation Preview README excerpt

L1 Cost Tracker

Dashboard tracking L1 batch posting costs vs L2 fee revenue for rollup profitability analysis.

Price: $9.99 | License: MIT | Category: Frontend | Runtime: Node.js 18+

Overview

l1-cost-tracker is a React dashboard that visualizes the economics of running a rollup. It tracks L1 batch submission costs, aggregates L2 fee revenue, and renders profitability over time with interactive charts. Connect it to any OP Stack or EVM-compatible rollup to see whether your chain is profitable.

Built with Vite, TypeScript, and TailwindCSS for a fast, responsive experience with CryptoForge's dark theme.

Features

L1 batch submission cost tracking — Monitor every batch posted to L1 with gas and ETH cost breakdowns
L2 fee revenue aggregation — Track sequencer revenue from L2 transaction fees
Profitability visualization — Line charts showing revenue minus cost over configurable time windows
Blob vs calldata cost breakdown — See which posting method is used per batch and its cost
Batch-by-batch explorer — Table view with per-batch gas, size, and cost details
Export to CSV — Download cost data for external analysis

Tech Stack

Package	Purpose
React 18	UI framework
TypeScript	Type safety
Vite	Build tool
TailwindCSS	Utility-first CSS
viem	EVM chain interaction
Recharts	Charts and visualizations

Quick Start

Prerequisites

Node.js 18+
An L1 RPC endpoint and an L2 RPC endpoint

Install & Run


npm install
npm run dev

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

Production Build


npm run build
npm run preview

Deploy the dist/ folder to any static host (Vercel, Netlify, Cloudflare Pages).

File Structure

... 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/**/*.{ts,tsx}'], darkMode: 'class', theme: { extend: { colors: { cf: { orange: '#FF6B00', dark: '#0A0A0F', card: '#12121A', border: '#1E1E2E', text: '#A0A0B0', }, }, fontFamily: { mono: ['JetBrains Mono', 'monospace'], sans: ['Inter', 'sans-serif'], }, }, }, plugins: [], };

Buy Now — $10 Back to Products