Add full monorepo: virtual-banker, backend, frontend, docs, scripts, deployment
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
defiQUG
86
docs/specs/frontend/action-ui.md
Normal file
86
docs/specs/frontend/action-ui.md
Normal file
@@ -0,0 +1,86 @@
|
||||
# Action Layer UI Specification
|
||||
|
||||
## Overview
|
||||
|
||||
UI specifications for swap, bridge, and wallet interaction interfaces.
|
||||
|
||||
## Swap Interface
|
||||
|
||||
### Components
|
||||
|
||||
- Token selector (from/to)
|
||||
- Amount input
|
||||
- Swap quote display
|
||||
- Slippage settings
|
||||
- Gas estimate
|
||||
- Execute button
|
||||
|
||||
### Flow
|
||||
|
||||
1. Select tokens
|
||||
2. Enter amount
|
||||
3. Display quote
|
||||
4. Adjust slippage (optional)
|
||||
5. Connect wallet
|
||||
6. Approve token (if needed)
|
||||
7. Execute swap
|
||||
8. Show transaction status
|
||||
|
||||
## Bridge Interface
|
||||
|
||||
### Components
|
||||
|
||||
- Chain selector (from/to)
|
||||
- Token selector
|
||||
- Amount input
|
||||
- Bridge quote display
|
||||
- Estimated time
|
||||
- Execute button
|
||||
|
||||
### Flow
|
||||
|
||||
Similar to swap with chain selection
|
||||
|
||||
## Wallet Connection UI
|
||||
|
||||
### Connection Options
|
||||
|
||||
- WalletConnect
|
||||
- Browser extension (MetaMask, etc.)
|
||||
- Hardware wallet
|
||||
- Embedded wallet
|
||||
|
||||
### UI Elements
|
||||
|
||||
- Connection modal
|
||||
- Wallet list
|
||||
- Connection status
|
||||
- Disconnect option
|
||||
|
||||
## Transaction Confirmation Flows
|
||||
|
||||
### Confirmation Steps
|
||||
|
||||
1. Review transaction details
|
||||
2. Show risk warnings (if any)
|
||||
3. Gas fee display
|
||||
4. Final confirmation
|
||||
5. Transaction pending
|
||||
6. Success/failure status
|
||||
|
||||
## Portfolio View
|
||||
|
||||
### Components
|
||||
|
||||
- Total portfolio value
|
||||
- Token list with balances
|
||||
- Value breakdown
|
||||
- Transaction history
|
||||
- Quick actions (swap, bridge, send)
|
||||
|
||||
## References
|
||||
|
||||
- Frontend Architecture: See `frontend-architecture.md`
|
||||
- Swap Engine: See `../actions/swap-engine.md`
|
||||
- Bridge Engine: See `../actions/bridge-engine.md`
|
||||
|
||||
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`
|
||||
|
||||
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`
|
||||
|
||||
75
docs/specs/frontend/frontend-architecture.md
Normal file
75
docs/specs/frontend/frontend-architecture.md
Normal file
@@ -0,0 +1,75 @@
|
||||
# Frontend Architecture Specification
|
||||
|
||||
## Overview
|
||||
|
||||
Frontend architecture for the explorer platform web application.
|
||||
|
||||
## Framework Selection
|
||||
|
||||
**Recommendation**: Next.js (React framework)
|
||||
|
||||
**Rationale**:
|
||||
- Server-side rendering (SSR) for SEO
|
||||
- API routes for backend integration
|
||||
- Excellent React ecosystem
|
||||
- Good performance
|
||||
- TypeScript support
|
||||
|
||||
## Component Architecture
|
||||
|
||||
### Structure
|
||||
|
||||
```
|
||||
src/
|
||||
├── components/ # Reusable components
|
||||
│ ├── blocks/
|
||||
│ ├── transactions/
|
||||
│ ├── addresses/
|
||||
│ └── common/
|
||||
├── pages/ # Next.js pages/routes
|
||||
├── hooks/ # Custom React hooks
|
||||
├── services/ # API clients
|
||||
├── store/ # State management
|
||||
├── types/ # TypeScript types
|
||||
└── utils/ # Utility functions
|
||||
```
|
||||
|
||||
## State Management
|
||||
|
||||
**Strategy**: Zustand or Redux Toolkit
|
||||
|
||||
**Global State**:
|
||||
- User authentication
|
||||
- Wallet connection
|
||||
- Selected chain
|
||||
- UI preferences
|
||||
|
||||
**Local State**: Component-level state with React hooks
|
||||
|
||||
## Routing Structure
|
||||
|
||||
**Routes**:
|
||||
- `/`: Home/Dashboard
|
||||
- `/blocks`: Block list
|
||||
- `/blocks/[number]`: Block detail
|
||||
- `/transactions/[hash]`: Transaction detail
|
||||
- `/addresses/[address]`: Address detail
|
||||
- `/tokens`: Token list
|
||||
- `/tokens/[address]`: Token detail
|
||||
- `/contracts/[address]`: Contract detail
|
||||
- `/search`: Search results
|
||||
- `/swap`: Swap interface
|
||||
- `/bridge`: Bridge interface
|
||||
- `/vtm`: Virtual Teller Machine
|
||||
|
||||
## Build and Deployment
|
||||
|
||||
**Build Tool**: Next.js built-in
|
||||
**Deployment**: Vercel, AWS, or self-hosted
|
||||
**Environment**: Development, staging, production
|
||||
|
||||
## References
|
||||
|
||||
- Component Library: See `component-library.md`
|
||||
- Explorer UI: See `explorer-ui.md`
|
||||
|
||||
69
docs/specs/frontend/vtm-ui.md
Normal file
69
docs/specs/frontend/vtm-ui.md
Normal file
@@ -0,0 +1,69 @@
|
||||
# VTM UI Integration Specification
|
||||
|
||||
## Overview
|
||||
|
||||
UI integration for Virtual Teller Machine (VTM) with Soul Machines digital human.
|
||||
|
||||
## Digital Human Embedding
|
||||
|
||||
### Container
|
||||
|
||||
**Position**: Modal overlay or side panel
|
||||
**Size**: Responsive, minimum 600x400px
|
||||
**Z-index**: High (overlay other content)
|
||||
|
||||
### Integration Points
|
||||
|
||||
- Session initialization
|
||||
- Conversation display
|
||||
- User input (text/voice)
|
||||
- Workflow step indicators
|
||||
|
||||
## Conversation Interface
|
||||
|
||||
### Components
|
||||
|
||||
- Digital human video/avatar
|
||||
- Message history
|
||||
- Input field (text)
|
||||
- Voice input button
|
||||
- Workflow progress indicator
|
||||
|
||||
### Message Display
|
||||
|
||||
- User messages (right-aligned)
|
||||
- Assistant messages (left-aligned)
|
||||
- System messages (centered)
|
||||
- Typing indicators
|
||||
|
||||
## Workflow Step Indicators
|
||||
|
||||
### Progress Indicator
|
||||
|
||||
**Display**:
|
||||
- Current step
|
||||
- Completed steps
|
||||
- Remaining steps
|
||||
- Estimated time
|
||||
|
||||
**Visual**: Progress bar or step list
|
||||
|
||||
## Human Escalation UI
|
||||
|
||||
### Escalation Trigger
|
||||
|
||||
**Button**: "Talk to Human Agent"
|
||||
**Status**: Show when human agent available
|
||||
**Transfer**: Smooth transition to human agent
|
||||
|
||||
### Escalation Status
|
||||
|
||||
- Waiting for agent
|
||||
- Connected to agent
|
||||
- Agent typing indicator
|
||||
|
||||
## References
|
||||
|
||||
- VTM Integration: See `../vtm/soul-machines-integration.md`
|
||||
- Frontend Architecture: See `frontend-architecture.md`
|
||||
|
||||
Reference in New Issue
Block a user