123 lines
2.0 KiB
Markdown
123 lines
2.0 KiB
Markdown
|
# 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`
|
||
|
|
|