36 KiB
36 KiB
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