Base Blockchain Visualizer

Current Position: #0
Current Position: #0

Live Mode - Watching for new blocks

No blocks found in this range

Use the navigation buttons or scroll horizontally to explore blocks. Click on any block to select it, view details, and switch to historical mode.

About Base Viz

What is this project?

The Base Blockchain Visualizer is a real-time visualization tool that helps you explore and understand the Base blockchain (an Ethereum Layer 2 solution). It provides an intuitive interface to view blocks, track transactions, and understand the relationship between Layer 1 (Ethereum) and Layer 2 (Base) blocks.

Real-time Block Tracking
L1/L2 Block Relationships
Historical Block Exploration
Interactive Navigation
How it Works
Live Mode

Automatically tracks new blocks as they're added to the blockchain. The visualization updates in real-time, showing the latest blocks and their confirmations.

Historical Mode

Allows you to explore past blocks by searching for specific block numbers or navigating through the blockchain history.

L1/L2 Integration

Shows the relationship between Ethereum (L1) blocks and Base (L2) blocks. Each L2 block is derived from an L1 block, creating a hierarchical structure.

Data Sources

Fetches data directly from the Base blockchain RPC endpoints, providing accurate and up-to-date information about blocks and transactions.

Example Block Structure
12345678
0x1234...567842 txGas: 15,000,0000.001 gwei
L1 #19876543
5 confs
14:32:15

The sequential number of this block in the blockchain. Each new block increments this number by 1. This is the primary identifier for locating and referencing blocks.

A unique cryptographic fingerprint of the block's contents. This hash is calculated from all the data in the block and serves as a tamper-proof identifier. Even a tiny change in the block would produce a completely different hash.

The number of transactions included in this block. Each transaction represents a transfer of value, smart contract interaction, or other blockchain operation. Higher transaction counts indicate more activity.

Gas Used: The total computational work performed by all transactions in this block.

Base Fee: The minimum fee (in gwei) required to include a transaction in this block. This fee adjusts dynamically based on network congestion.

Shows which Ethereum (Layer 1) block this Base (Layer 2) block is derived from. This creates a connection between the two blockchains, allowing Base to inherit Ethereum's security while providing faster and cheaper transactions.

The number of blocks that have been added after this block. Higher confirmations mean the block is more secure and less likely to be reorganized. Blocks with 5+ confirmations are generally considered final.

The exact time when this block was mined, displayed in local time format. This helps you understand the timing and sequence of blockchain activity.

Technical Architecture
Frontend

Built with Next.js 15, React 19, and Material-UI. Uses Zustand for state management to efficiently handle real-time block data and user navigation state.

Data Layer

Connects directly to Base blockchain RPC endpoints using Viem library. Fetches block data, transaction information, and L1/L2 relationships in real-time.

Features

• Real-time block streaming and updates

• Historical block search and navigation

• L1/L2 block relationship visualization

• Responsive design with dark theme

• Persistent state management

How to Use
1. Live Mode (Default)

The application starts in live mode, automatically showing new blocks as they're added to the blockchain. Toggle the "Live Mode" switch to pause real-time updates.

2. Search for Specific Blocks

Use the search box to find a specific block number. The application will load the block and surrounding blocks for context.

3. Navigate Through History

Use the arrow buttons to move forward and backward through blocks. The current block is highlighted with a purple border and "CURRENT" indicator.

4. Explore L1 Connections

Click on L1 blocks (circular icons below) to navigate to the associated L2 blocks. This helps you understand how Base blocks are anchored to Ethereum.

5. Reset and Start Over

Use the "Reset" button to clear the current view and return to live mode with the latest blocks.