explorer-monorepo/docs/specs/frontend/explorer-ui.md

Explorer UI Structure Specification

Overview

UI structure for blockchain explorer pages.

Page Layouts

Home/Dashboard

Components:

• Network stats (TPS, block height, gas price)
• Recent blocks
• Recent transactions
• Search bar

Block Detail Page

Sections:

• Block header (number, hash, timestamp, miner)
• Block stats (gas used, transaction count)
• Transaction list
• Raw data (optional)

Transaction Detail Page

Sections:

• Transaction header (hash, status, block)
• Transaction details (from, to, value, gas)
• Receipt information
• Logs
• Traces (if available)
• Internal transactions

Address Detail Page

Sections:

• Address header (address, label, tags)
• Balance information
• Transaction list (sent/received/all)
• Token holdings
• NFT holdings (if applicable)

Token Detail Page

Sections:

• Token information (name, symbol, supply)
• Price and market data
• Holders list
• Transfer history
• Token contract (if verified)

Contract Detail Page

Sections:

• Contract address and name
• Verification status
• Source code (if verified)
• ABI
• Contract interactions
• Read functions (if verified)

Data Tables

Table Features

• Pagination
• Sorting
• Filtering
• Export (CSV)
• Column customization

Performance

• Virtual scrolling for large lists
• Lazy loading
• Infinite scroll option

Filtering and Search UI

Search Bar

• Global search
• Autocomplete
• Search suggestions
• Recent searches

Filters

• Chain selector
• Date range
• Transaction type
• Status filters

Real-Time Update Integration

Method: WebSocket subscriptions Updates:

• New blocks
• New transactions
• Balance updates
• Status changes

UI: Visual indicators for new data

Responsive Design

Breakpoints:

• Mobile: < 768px
• Tablet: 768px - 1024px
• Desktop: > 1024px

Adaptations:

• Stacked layouts on mobile
• Collapsible sections
• Mobile-optimized tables

References

• Frontend Architecture: See frontend-architecture.md
• Component Library: See component-library.md