87 lines
1.4 KiB
Markdown
87 lines
1.4 KiB
Markdown
|
# 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`
|
||
|
|
|