# 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`