explorer-monorepo/docs/specs/frontend/action-ui.md

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