84 lines
1.3 KiB
Markdown
84 lines
1.3 KiB
Markdown
# Component Library Specification
|
|
|
|
## Overview
|
|
|
|
Reusable component library for the explorer platform.
|
|
|
|
## Design System
|
|
|
|
**Framework**: Tailwind CSS or styled-components
|
|
**Design Tokens**: Colors, typography, spacing, shadows
|
|
**Theme**: Light/dark mode support
|
|
|
|
## Component Catalog
|
|
|
|
### Common Components
|
|
|
|
- Button
|
|
- Input
|
|
- Select
|
|
- Modal
|
|
- Table
|
|
- Card
|
|
- Badge
|
|
- Tooltip
|
|
- Loading spinner
|
|
|
|
### Blockchain-Specific Components
|
|
|
|
- Address display (with copy, ENS lookup)
|
|
- Transaction hash display
|
|
- Block number display
|
|
- Token amount display (with formatting)
|
|
- Gas price display
|
|
- Status badges (success/failed/pending)
|
|
|
|
### Data Display Components
|
|
|
|
- Transaction list
|
|
- Block list
|
|
- Token list
|
|
- Log viewer
|
|
- Trace viewer
|
|
- ABI viewer
|
|
|
|
## Component API Contracts
|
|
|
|
### Address Component
|
|
|
|
```typescript
|
|
interface AddressProps {
|
|
address: string;
|
|
chainId?: number;
|
|
showCopy?: boolean;
|
|
showENS?: boolean;
|
|
truncate?: boolean;
|
|
}
|
|
```
|
|
|
|
### Transaction Component
|
|
|
|
```typescript
|
|
interface TransactionProps {
|
|
hash: string;
|
|
chainId: number;
|
|
showDetails?: boolean;
|
|
compact?: boolean;
|
|
}
|
|
```
|
|
|
|
## Styling Approach
|
|
|
|
**Recommendation**: Tailwind CSS
|
|
|
|
**Benefits**:
|
|
- Utility-first CSS
|
|
- Consistent design system
|
|
- Small bundle size
|
|
- Fast development
|
|
|
|
## References
|
|
|
|
- Frontend Architecture: See `frontend-architecture.md`
|
|
|