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