L2FREE - L2 Chain Status Monitor

A Nuxt.js frontend application for monitoring Layer 2 chain status and providing an escape hatch mechanism to bypass sequencer censorship.

Features

Main Dashboard

• Chain Overview: Monitor 6 major L2 chains (Arbitrum, Optimism, Base, zkSync Era, Linea, Scroll)
• Real-time Status: Live status indicators (Live, Degraded, Down)
• Batch Monitoring: Time since last batch with live countdown timer
• Censorship Detection: Status indicators (None, Suspected, Confirmed)
• Visual Indicators: Color-coded status for quick recognition

Chain Detail View

• Network Information: RPC URL, L1 Contract address, Sequencer address
• Live Timer: Real-time countdown showing time since last batch
• Warning System: Visual alerts when batch intervals are exceeded
• Censorship Alerts: Contextual warnings for suspected/confirmed censorship
• Escape Hatch Form: Submit transactions directly to L1

L2FREE Functionality

• Direct L1 Submission: Bypass sequencer by submitting transactions to Layer 1
• Form Validation: Address format and numeric validation
• Transaction Fields:
  • Destination address (with Ethereum address validation)
  • Amount in ETH (numeric input with step precision)
  • Optional data field (hex-encoded)
• User Guidance: Clear explanations of the process and trade-offs
• Feedback: Success/error messages for transaction submissions

Technology Stack

• Framework: Nuxt.js 3.8.2 with Vue 3
• Language: TypeScript 5.3.3
• Styling: Tailwind CSS via @nuxtjs/tailwindcss
• Build Tool: Nuxt.js built-in Vite

Getting Started

Prerequisites

• Node.js 18.x or higher
• npm or yarn package manager

Installation

# Install dependencies
npm install

Development

# Start the development server
npm run dev

Open http://localhost:3000 in your browser.

Build

# Create a production build
npm run build

# Preview the production build
npm run preview

Generate Static Site

# Generate static site
npm run generate

Project Structure

l2free/
├── assets/
│   └── css/
│       └── main.css         # Global styles
├── components/              # Vue components
│   ├── BypassSequencer.vue  # Escape hatch form
│   ├── ChainCard.vue        # Chain status card
│   └── Timer.vue            # Live countdown timer
├── composables/             # Composable functions
│   ├── useRollups.ts         # Chain data and management
│   └── useUtils.ts          # Helper utilities
├── pages/                   # Nuxt pages (file-based routing)
│   ├── index.vue            # Main dashboard
│   └── chain/
│       └── [id].vue         # Dynamic chain detail page
├── types/                   # TypeScript type definitions
│   └── chain.ts             # Chain-related types
├── app.vue                  # Root component with layout
├── nuxt.config.ts           # Nuxt configuration
└── tailwind.config.ts       # Tailwind configuration

Chain Data

The application includes mock data for the following L2 chains:

• Arbitrum One
• Optimism
• Base
• zkSync Era
• Linea
• Scroll

Each chain includes:

• Network details (RPC URL, contracts)
• Status monitoring (liveness, censorship)
• Batch submission timestamps
• Expected batch intervals

How the Escape Hatch Works

1. Transaction Encoding: Your transaction is encoded and prepared for L1 submission
2. L1 Contract Submission: The transaction is submitted directly to the L1 contract
3. Queue Validation: The L1 contract validates and queues your transaction
4. State Root Update: The transaction is included in the next state root update
5. L2 Execution: Your transaction executes on L2 without going through the sequencer

Trade-offs

• Higher Costs: L1 gas fees are significantly higher than L2
• Slower Processing: L1 transactions take longer to finalize
• Censorship Resistance: Guaranteed inclusion regardless of sequencer behavior

Development Notes

• The application uses Vue 3 Composition API with <script setup> syntax
• Client-side timers show live countdown updates using Vue reactivity
• All chain data is currently mocked for demonstration purposes
• Form submissions are simulated (no actual blockchain interactions)
• The application is fully responsive and works on mobile devices
• File-based routing powered by Nuxt.js

License

See LICENSE file for details.