# 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`