# 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