422 lines
36 KiB
Markdown
422 lines
36 KiB
Markdown
# Wireframes & Mockups: ISO-20022 Combo Builder
|
|
|
|
## Overview
|
|
This document provides detailed wireframe sketches and mockup specifications for the five key screens of the Combo Builder v2.
|
|
|
|
---
|
|
|
|
## 1. Main Builder Canvas
|
|
|
|
### Desktop Layout (1024px+)
|
|
```
|
|
┌────────────────────────────────────────────────────────────────────────────────────────────┐
|
|
│ 🏠 CurrenciCombo [User: john@example.com] [LEI: ✓] [Wallet: 0x1234...5678] [⚙️] │
|
|
├──────────────┬──────────────────────────────────────────────────────────────────────────────┤
|
|
│ │ │
|
|
│ ADAPTER │ CANVAS (Drop Zone) │
|
|
│ PALETTE │ │
|
|
│ │ ┌────────────────────────────────────────────────────────────────────┐ │
|
|
│ [Filter: All]│ │ Step 1: Borrow [Edit] [Remove] │ │
|
|
│ │ │ 💰 CBDC_USD: 100,000 | Collateral: TokenX:123 [⋮⋮] │ │
|
|
│ DeFi: │ │ ✓ LEI | ✓ KYC | ✓ AML │ │
|
|
│ ┌──────────┐ │ └────────────────────────────────────────────────────────────────────┘ │
|
|
│ │ 🔄 Swap │ │ │
|
|
│ │ 💰 Borrow│ │ ┌────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ 📊 Deposit│ │ │ Step 2: Swap [Edit] [Remove] │ │
|
|
│ │ 🌉 Bridge │ │ │ 🔄 CBDC_USD → CBDC_EUR: 100,000 → 90,000 [⋮⋮] │ │
|
|
│ └──────────┘ │ │ ✓ LEI | ✓ KYC | Slippage: 0.5% │ │
|
|
│ │ └────────────────────────────────────────────────────────────────────┘ │
|
|
│ Fiat/DTL: │ │
|
|
│ ┌──────────┐ │ ┌────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ 📤 Pay │ │ │ Step 3: Pay [Edit] [Remove] │ │
|
|
│ │ 💳 Repay │ │ │ 📤 EUR: 78,000 to IBAN: DE89...3000 [⋮⋮] │ │
|
|
│ │ 🌐 Transfer│ │ │ ✓ LEI | ✓ KYC | ✓ AML | Beneficiary: Verified │ │
|
|
│ └──────────┘ │ └────────────────────────────────────────────────────────────────────┘ │
|
|
│ │ │
|
|
│ Compliance: │ ┌────────────────────────────────────────────────────────────────────┐ │
|
|
│ ✓ LEI │ │ Drop zone: Drag adapters here to add steps │ │
|
|
│ ✓ KYC │ │ or click [+] to add from list │ │
|
|
│ ✓ AML │ └────────────────────────────────────────────────────────────────────┘ │
|
|
│ ✓ DID │ │
|
|
└──────────────┴──────────────────────────────────────────────────────────────────────────────┘
|
|
┌────────────────────────────────────────────────────────────────────────────────────────────┐
|
|
│ SUMMARY PANEL │
|
|
│ ┌──────────────────────┬──────────────────────┬──────────────────────┬─────────────────┐│
|
|
│ │ Initial Funds │ You will receive │ Fees │ Actions ││
|
|
│ │ 100,000 CBDC_USD │ ~78,000 EUR │ 0.2% (200 USD) │ [Simulate] [✓] ││
|
|
│ │ (from wallet) │ (estimated) │ Included │ [Review & Sign] ││
|
|
│ └──────────────────────┴──────────────────────┴──────────────────────┴─────────────────┘│
|
|
│ Compliance: ✓ LEI ✓ KYC ✓ AML ✓ DID | Simulation: [Toggle: OFF] │
|
|
└────────────────────────────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Key Elements
|
|
- **Left Sidebar (240px)**: Adapter palette with DeFi and Fiat/DTL sections
|
|
- **Center Canvas (flexible)**: Drop zone and step cards
|
|
- **Bottom Panel (60px)**: Summary with initial funds, output, fees, actions
|
|
- **Header**: User identity, compliance badges, wallet connection
|
|
|
|
---
|
|
|
|
## 2. Step Configuration Drawer
|
|
|
|
### Layout
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────────┐
|
|
│ Configure Step: Swap [✕ Close] │
|
|
├─────────────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ Step Type: Swap [🔄] │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ From Token │ │
|
|
│ │ [CBDC_USD ▼] Balance: 150,000 │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ Amount │ │
|
|
│ │ [100,000] USD │ │
|
|
│ │ [Use Max] [Use 50%] [Use 25%] │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ To Token │ │
|
|
│ │ [CBDC_EUR ▼] Balance: 0 │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ Minimum Receive (Auto-calculated) │ │
|
|
│ │ [90,000] EUR Expected: ~90,000 EUR │ │
|
|
│ │ Based on current liquidity (0.5% slippage) │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ Slippage Tolerance │ │
|
|
│ │ ○ 0.1% ○ 0.5% ○ 1.0% ● Custom: [0.5] % │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ────────────────────────────────────────────────────────────────────────── │
|
|
│ │
|
|
│ Compliance Requirements │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ ☑ LEI Required │ │
|
|
│ │ [5493000IBP32UQZ0KL24] ✓ Verified │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ ☑ KYC Status │ │
|
|
│ │ Level 2 Verified (Expires: 2026-12-31) ✓ Valid │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ ☑ AML Check │ │
|
|
│ │ Last check: 2025-01-15 ✓ Passed │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ Step Dependencies │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ This step receives output from: Step 1 (Borrow) │ │
|
|
│ │ Input: 100,000 CBDC_USD │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌──────────────┐ ┌──────────────┐ │
|
|
│ │ [Save] │ │ [Cancel] │ │
|
|
│ └──────────────┘ └──────────────┘ │
|
|
└─────────────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Key Features
|
|
- **Slide-up drawer**: From bottom (mobile) or side (desktop)
|
|
- **Auto-population**: Compliance fields from user session
|
|
- **Real-time validation**: Balance checks, slippage calculations
|
|
- **Dependency visualization**: Shows which previous steps feed this step
|
|
- **Token selector**: Dropdown with balances and search
|
|
|
|
---
|
|
|
|
## 3. Simulation Results Panel (Optional)
|
|
|
|
### Layout
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────────┐
|
|
│ Simulation Results [✕ Close] │
|
|
├─────────────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ Status: ✓ Simulation Successful │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ Execution Summary │ │
|
|
│ │ │ │
|
|
│ │ Step 1: Borrow │ │
|
|
│ │ ✓ 100,000 CBDC_USD borrowed │ │
|
|
│ │ ✓ Collateral locked: TokenX:123 │ │
|
|
│ │ ✓ LTV: 45% (within limit) │ │
|
|
│ │ │ │
|
|
│ │ Step 2: Swap │ │
|
|
│ │ ✓ 100,000 CBDC_USD → 90,000 CBDC_EUR │ │
|
|
│ │ ✓ Slippage: 0.3% (within tolerance) │ │
|
|
│ │ ✓ Liquidity: Sufficient (Pool: 500,000 EUR) │ │
|
|
│ │ │ │
|
|
│ │ Step 3: Pay │ │
|
|
│ │ ✓ 78,000 EUR sent to IBAN: DE89...3000 │ │
|
|
│ │ ✓ ISO-20022 pacs.008 generated │ │
|
|
│ │ ✓ Bank confirmation: Pending │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ Cost Estimates │ │
|
|
│ │ │ │
|
|
│ │ Gas Estimate: 450,000 gas │ │
|
|
│ │ Estimated Cost: $25.50 (at 50 gwei) │ │
|
|
│ │ Network: Ethereum Mainnet │ │
|
|
│ │ │ │
|
|
│ │ Platform Fee: 0.2% (200 USD) │ │
|
|
│ │ Total Cost: $225.50 │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ Risk Analysis │ │
|
|
│ │ │ │
|
|
│ │ Slippage Risk: Low (0.3% expected) │ │
|
|
│ │ Liquidity Risk: Low (Pool depth: 500k EUR) │ │
|
|
│ │ Compliance Risk: None (All checks passed) │ │
|
|
│ │ Network Risk: Low (Gas price stable) │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌──────────────┐ ┌──────────────┐ ┌──────────────┐ │
|
|
│ │ [Run Again] │ │ [Export] │ │ [Proceed] │ │
|
|
│ └──────────────┘ └──────────────┘ └──────────────┘ │
|
|
└─────────────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Key Features
|
|
- **Modal overlay**: Centered on desktop, full-screen on mobile
|
|
- **Step-by-step results**: Visual checkmarks for each step
|
|
- **Cost breakdown**: Gas, fees, total cost
|
|
- **Risk analysis**: Slippage, liquidity, compliance, network risks
|
|
- **Action buttons**: Run again, export results, proceed to sign
|
|
|
|
---
|
|
|
|
## 4. Compliance Status Dashboard Overlay
|
|
|
|
### Layout
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────────┐
|
|
│ Compliance Status [✕ Dismiss] │
|
|
├─────────────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ Identity Verification │ │
|
|
│ │ │ │
|
|
│ │ ✓ LEI: 5493000IBP32UQZ0KL24 │ │
|
|
│ │ Legal Entity: Example Corp Ltd. │ │
|
|
│ │ Status: Active │ │
|
|
│ │ │ │
|
|
│ │ ✓ DID: did:web:example.com:user:123 │ │
|
|
│ │ Issuer: Entra Verified ID │ │
|
|
│ │ Status: Verified │ │
|
|
│ │ │ │
|
|
│ │ ✓ KYC: Level 2 Verified │ │
|
|
│ │ Provider: Onfido │ │
|
|
│ │ Expires: 2026-12-31 │ │
|
|
│ │ Status: Valid │ │
|
|
│ │ │ │
|
|
│ │ ✓ AML: Passed │ │
|
|
│ │ Last Check: 2025-01-15 │ │
|
|
│ │ Provider: Chainalysis │ │
|
|
│ │ Status: Clean │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌───────────────────────────────────────────────────────────────────────┐ │
|
|
│ │ Current Workflow Compliance │ │
|
|
│ │ │ │
|
|
│ │ Requirements: │ │
|
|
│ │ • LEI: Required for all steps ✓ Provided │ │
|
|
│ │ • KYC: Level 2 required for fiat steps ✓ Met │ │
|
|
│ │ • AML: Required for payments > 10k EUR ✓ Passed │ │
|
|
│ │ • DID: Required for notarization ✓ Verified │ │
|
|
│ │ │ │
|
|
│ │ Missing Requirements: None │ │
|
|
│ └───────────────────────────────────────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌──────────────┐ ┌──────────────┐ │
|
|
│ │ [Update] │ │ [Details] │ │
|
|
│ └──────────────┘ └──────────────┘ │
|
|
└─────────────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Key Features
|
|
- **Expandable overlay**: Triggered from compliance badge in header
|
|
- **Identity details**: Full LEI, DID, KYC, AML information
|
|
- **Workflow validation**: Checks compliance for current workflow
|
|
- **Expiration warnings**: Alerts if credentials expiring soon
|
|
- **Quick actions**: Update identity, view detailed compliance report
|
|
|
|
---
|
|
|
|
## 5. Adapter Selection Modal
|
|
|
|
### Layout
|
|
```
|
|
┌─────────────────────────────────────────────────────────────────────────────┐
|
|
│ Select Adapter Type [✕ Close] │
|
|
├─────────────────────────────────────────────────────────────────────────────┤
|
|
│ │
|
|
│ Filter: [● All] [○ DeFi] [○ Fiat/DTL] [○ Whitelisted Only] │
|
|
│ Search: [Search adapters...] │
|
|
│ │
|
|
│ ┌──────────────────────────────────┬──────────────────────────────────────┐ │
|
|
│ │ DeFi Protocols │ │ Fiat/DTL Rails │ │
|
|
│ ├──────────────────────────────────┤ ├──────────────────────────────────────┤ │
|
|
│ │ │ │ │ │
|
|
│ │ ┌──────────────────────────────┐ │ │ ┌──────────────────────────────┐ │ │
|
|
│ │ │ 🔄 Uniswap V3 │ │ │ │ 📤 ISO-20022 Pay │ │ │
|
|
│ │ │ Swap on Uniswap V3 │ │ │ │ Send payment via ISO-20022 │ │ │
|
|
│ │ │ ✓ Approved | v3.0.1 │ │ │ │ ✓ Approved | v1.2.0 │ │ │
|
|
│ │ └──────────────────────────────┘ │ │ └──────────────────────────────┘ │ │
|
|
│ │ │ │ │ │
|
|
│ │ ┌──────────────────────────────┐ │ │ ┌──────────────────────────────┐ │ │
|
|
│ │ │ 💰 Aave │ │ │ │ 💳 SWIFT MT │ │ │
|
|
│ │ │ Lend/borrow on Aave │ │ │ │ SWIFT message transfer │ │ │
|
|
│ │ │ ✓ Approved | v3.0.5 │ │ │ │ ✓ Approved | v2.1.0 │ │ │
|
|
│ │ └────────────────────────────┘ │ │ └──────────────────────────────┘ │ │
|
|
│ │ │ │ │ │
|
|
│ │ ┌──────────────────────────────┐ │ │ ┌──────────────────────────────┐ │ │
|
|
│ │ │ 📊 Compound │ │ │ │ 🌐 SEPA │ │ │
|
|
│ │ │ Lend/borrow on Compound │ │ │ │ SEPA credit transfer │ │ │
|
|
│ │ │ ✓ Approved | v2.8.0 │ │ │ │ ✓ Approved | v1.0.3 │ │ │
|
|
│ │ └──────────────────────────────┘ │ │ └──────────────────────────────┘ │ │
|
|
│ │ │ │ │ │
|
|
│ │ ┌──────────────────────────────┐ │ │ ┌──────────────────────────────┐ │ │
|
|
│ │ │ 🌉 Bridge │ │ │ │ 🏦 FedNow │ │ │
|
|
│ │ │ Cross-chain bridge │ │ │ │ FedNow instant payment │ │ │
|
|
│ │ │ ⚠ Deprecated | v1.5.0 │ │ │ │ ✓ Approved | v1.0.0 │ │ │
|
|
│ │ └──────────────────────────────┘ │ │ └──────────────────────────────┘ │ │
|
|
│ │ │ │ │ │
|
|
│ └──────────────────────────────────┴──────────────────────────────────────┘ │
|
|
│ │
|
|
│ Selected: ISO-20022 Pay │
|
|
│ │
|
|
│ ┌──────────────┐ ┌──────────────┐ │
|
|
│ │ [Add] │ │ [Cancel] │ │
|
|
│ └──────────────┘ └──────────────┘ │
|
|
└─────────────────────────────────────────────────────────────────────────────┘
|
|
```
|
|
|
|
### Key Features
|
|
- **Two-column layout**: DeFi protocols on left, Fiat/DTL rails on right
|
|
- **Filter tabs**: All, DeFi, Fiat/DTL, Whitelisted Only
|
|
- **Search bar**: Quick search for specific adapters
|
|
- **Adapter cards**: Show name, description, approval status, version
|
|
- **Status indicators**: ✓ Approved, ⚠ Deprecated, 🔒 Restricted
|
|
|
|
---
|
|
|
|
## 6. Mobile Responsive Layouts
|
|
|
|
### Mobile Builder Canvas (<768px)
|
|
```
|
|
┌─────────────────────────┐
|
|
│ [☰] CurrenciCombo [⚙️] │
|
|
├─────────────────────────┤
|
|
│ [User] [Wallet] [LEI ✓] │
|
|
├─────────────────────────┤
|
|
│ │
|
|
│ Step 1: Borrow │
|
|
│ 💰 CBDC_USD: 100k │
|
|
│ [Edit] [Remove] │
|
|
│ │
|
|
│ Step 2: Swap │
|
|
│ 🔄 USD → EUR │
|
|
│ [Edit] [Remove] │
|
|
│ │
|
|
│ Step 3: Pay │
|
|
│ 📤 EUR to IBAN │
|
|
│ [Edit] [Remove] │
|
|
│ │
|
|
│ [+ Add Step] │
|
|
│ │
|
|
├─────────────────────────┤
|
|
│ Initial: 100k USD │
|
|
│ Receive: ~78k EUR │
|
|
│ Fees: 0.2% │
|
|
│ [Simulate] [Review] │
|
|
└─────────────────────────┘
|
|
```
|
|
|
|
### Mobile Adapter Palette (Bottom Sheet)
|
|
```
|
|
┌─────────────────────────┐
|
|
│ Adapters [✕] │
|
|
├─────────────────────────┤
|
|
│ [All] [DeFi] [Fiat] │
|
|
├─────────────────────────┤
|
|
│ 🔄 Swap │
|
|
│ 💰 Borrow │
|
|
│ 📊 Deposit │
|
|
│ 🌉 Bridge │
|
|
│ ─────────────────────── │
|
|
│ 📤 ISO-20022 Pay │
|
|
│ 💳 SWIFT MT │
|
|
│ 🌐 SEPA │
|
|
│ 🏦 FedNow │
|
|
└─────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## 7. Visual Design Tokens
|
|
|
|
### Colors
|
|
- **Primary**: #000000 (Black)
|
|
- **Secondary**: #3B82F6 (Blue)
|
|
- **Success**: #10B981 (Green)
|
|
- **Warning**: #F59E0B (Yellow)
|
|
- **Error**: #EF4444 (Red)
|
|
- **Background**: #FFFFFF (White), #F9FAFB (Gray-50)
|
|
- **Border**: #E5E7EB (Gray-200)
|
|
|
|
### Typography
|
|
- **Font Family**: Inter (UI), Fira Code (Monospace)
|
|
- **H1**: 24px/32px, Bold
|
|
- **H2**: 18px/24px, Semibold
|
|
- **Body**: 14px/20px, Regular
|
|
- **Small**: 12px/16px, Regular
|
|
|
|
### Spacing
|
|
- **Unit**: 4px base
|
|
- **Card Padding**: 16px
|
|
- **Section Gap**: 24px
|
|
- **Element Gap**: 8px
|
|
|
|
### Icons
|
|
- **Step Icons**: Emoji (💰, 🔄, 💳, 📤)
|
|
- **UI Icons**: Lucide React (24px, stroke-width: 2)
|
|
|
|
---
|
|
|
|
## 8. Interaction States
|
|
|
|
### Drag & Drop States
|
|
- **Dragging**: Opacity 50%, cursor: grabbing
|
|
- **Over Drop Zone**: Blue outline, background: blue-50
|
|
- **Invalid Drop**: Red outline, error message
|
|
|
|
### Button States
|
|
- **Default**: Black background, white text
|
|
- **Hover**: Gray-800 background
|
|
- **Active**: Gray-700 background
|
|
- **Disabled**: Gray-300 background, cursor: not-allowed
|
|
|
|
### Step Card States
|
|
- **Default**: White background, border
|
|
- **Hover**: Shadow-md
|
|
- **Selected**: Blue border, blue-50 background
|
|
- **Error**: Red border, red-50 background
|
|
|
|
---
|
|
|
|
**Document Version**: 1.0
|
|
**Last Updated**: 2025-01-15
|
|
**Author**: Design Team
|
|
|