Add full monorepo: virtual-banker, backend, frontend, docs, scripts, deployment
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
122
docs/specs/frontend/explorer-ui.md
Normal file
122
docs/specs/frontend/explorer-ui.md
Normal file
@@ -0,0 +1,122 @@
|
||||
# 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`
|
||||
|
||||
Reference in New Issue
Block a user