Created
April 9, 2026 16:25
-
-
Save danielsimao/cdfe6dc8cd9ff09bf0468b3fac432cc6 to your computer and use it in GitHub Desktop.
BOB Activity Sidebar Wireframe Concepts — Issue #1673
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>BOB Activity Sidebar — Wireframe Concepts</title> | |
| <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| <style> | |
| :root { | |
| --primary-500: #F35D00; | |
| --primary-600: #DD5500; | |
| --primary-400: #FF7A2E; | |
| --grey-50: #F5F5F6; | |
| --grey-100: #E1E2E4; | |
| --grey-200: #B6B7B9; | |
| --grey-300: #2D2F33; | |
| --grey-400: #1A1C20; | |
| --grey-500: #131518; | |
| --grey-600: #0E1013; | |
| --grey-700: #0A0B0D; | |
| --grey-800: #050608; | |
| --green-400: #4ADE80; | |
| --green-500: #22C55E; | |
| --red-400: #F87171; | |
| --red-500: #EF4444; | |
| --yellow-400: #FACC15; | |
| --blue-400: #60A5FA; | |
| --font-body: 'DM Sans', sans-serif; | |
| --font-mono: 'JetBrains Mono', monospace; | |
| --radius-sm: 6px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --radius-xl: 16px; | |
| --radius-full: 9999px; | |
| } | |
| * { margin: 0; padding: 0; box-sizing: border-box; } | |
| body { | |
| font-family: var(--font-body); | |
| background: #08090B; | |
| color: var(--grey-50); | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| } | |
| /* PAGE LAYOUT */ | |
| .page-header { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| padding: 48px 40px 32px; | |
| border-bottom: 1px solid var(--grey-300); | |
| } | |
| .page-header h1 { font-size: 32px; font-weight: 700; letter-spacing: -0.5px; margin-bottom: 8px; } | |
| .page-header h1 span { color: var(--primary-500); } | |
| .page-header p { color: var(--grey-200); font-size: 15px; max-width: 680px; } | |
| .ratings-caveat { | |
| margin-top: 16px; padding: 12px 16px; background: var(--grey-600); | |
| border-radius: var(--radius-md); font-size: 13px; color: var(--grey-200); | |
| border-left: 3px solid var(--primary-500); | |
| } | |
| .context-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; } | |
| .context-chip { | |
| font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: var(--radius-full); | |
| background: var(--grey-400); color: var(--grey-100); border: 1px solid var(--grey-300); | |
| } | |
| /* CONCEPT SECTIONS */ | |
| .concept-section { | |
| max-width: 1400px; margin: 0 auto; padding: 48px 40px; | |
| border-bottom: 1px solid var(--grey-300); | |
| } | |
| .concept-label { | |
| display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; | |
| text-transform: uppercase; letter-spacing: 1.5px; color: var(--primary-500); margin-bottom: 8px; | |
| } | |
| .concept-label .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary-500); } | |
| .concept-title { font-size: 26px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 6px; } | |
| .concept-bet { font-size: 15px; color: var(--grey-200); margin-bottom: 32px; max-width: 600px; } | |
| .mockup-grid { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 16px; margin-bottom: 32px; } | |
| .mockup-col { flex-shrink: 0; } | |
| .mockup-label { | |
| font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; | |
| color: var(--grey-200); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; | |
| } | |
| .state-pill { | |
| font-size: 10px; padding: 2px 8px; border-radius: var(--radius-full); | |
| background: var(--grey-400); color: var(--grey-100); letter-spacing: 0.5px; | |
| } | |
| /* SIDEBAR FRAME */ | |
| .sidebar-frame { | |
| width: 360px; background: var(--grey-600); border-radius: var(--radius-xl); | |
| border: 1px solid var(--grey-300); overflow: hidden; | |
| } | |
| .sidebar-header { | |
| padding: 16px 20px 0; display: flex; align-items: center; justify-content: space-between; | |
| } | |
| .sidebar-header .addr { | |
| font-size: 14px; font-weight: 500; color: var(--grey-50); | |
| display: flex; align-items: center; gap: 6px; | |
| } | |
| .dot-green { width: 8px; height: 8px; border-radius: 50%; background: var(--green-500); } | |
| .sidebar-close { | |
| width: 28px; height: 28px; border-radius: var(--radius-sm); background: var(--grey-400); | |
| border: 1px solid var(--grey-300); color: var(--grey-200); | |
| display: flex; align-items: center; justify-content: center; font-size: 14px; cursor: pointer; | |
| } | |
| .sidebar-tabs { | |
| display: flex; padding: 12px 20px 0; border-bottom: 1px solid var(--grey-300); | |
| } | |
| .sidebar-tab { | |
| flex: 1; text-align: center; padding: 8px 0 12px; font-size: 13px; font-weight: 500; | |
| color: var(--grey-200); cursor: pointer; position: relative; | |
| } | |
| .sidebar-tab.active { color: var(--grey-50); } | |
| .sidebar-tab.active::after { | |
| content: ''; position: absolute; bottom: -1px; left: 0; right: 0; | |
| height: 2px; background: var(--primary-500); border-radius: 2px 2px 0 0; | |
| } | |
| .sidebar-body { padding: 0; min-height: 420px; max-height: 420px; overflow-y: auto; } | |
| /* MODAL FRAME */ | |
| .modal-frame { | |
| width: 420px; background: var(--grey-600); border-radius: var(--radius-xl); | |
| border: 1px solid var(--grey-300); overflow: hidden; | |
| } | |
| .modal-header { | |
| padding: 20px 24px 16px; display: flex; align-items: center; | |
| justify-content: space-between; border-bottom: 1px solid var(--grey-300); | |
| } | |
| .modal-header h3 { font-size: 16px; font-weight: 600; } | |
| .modal-body { padding: 20px 24px 24px; } | |
| /* SHARED: TOKEN AVATARS */ | |
| .token-avatar { width: 36px; height: 36px; border-radius: 50%; position: relative; flex-shrink: 0; } | |
| .token-avatar.sm { width: 28px; height: 28px; } | |
| .token-avatar.lg { width: 40px; height: 40px; } | |
| .token-icon { | |
| width: 100%; height: 100%; border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 14px; font-weight: 700; color: #fff; | |
| } | |
| .token-icon.sm { font-size: 11px; } | |
| .token-icon.lg { font-size: 16px; } | |
| .token-icon.btc { background: #F7931A; } | |
| .token-icon.eth { background: #627EEA; } | |
| .token-icon.usdc { background: #2775CA; } | |
| .token-icon.wbtc { background: #E3A944; } | |
| .chain-badge { | |
| position: absolute; bottom: -2px; right: -2px; width: 14px; height: 14px; | |
| border-radius: 50%; border: 2px solid var(--grey-600); | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 7px; font-weight: 700; color: #fff; | |
| } | |
| .chain-badge.sm { width: 12px; height: 12px; font-size: 6px; } | |
| .chain-badge.bitcoin { background: #F7931A; } | |
| .chain-badge.bob-chain { background: var(--primary-500); } | |
| /* SPLIT LOGO */ | |
| .split-logo { | |
| width: 36px; height: 36px; border-radius: 50%; position: relative; | |
| overflow: hidden; flex-shrink: 0; | |
| } | |
| .split-logo .left, .split-logo .right { | |
| position: absolute; top: 0; width: 50%; height: 100%; | |
| } | |
| .split-logo .left { left: 0; } | |
| .split-logo .right { right: 0; } | |
| .split-logo .divider { | |
| position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; | |
| background: var(--grey-600); z-index: 1; | |
| } | |
| .split-logo .chain-badge { z-index: 2; } | |
| /* STATUS */ | |
| .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } | |
| .status-dot.processing { background: var(--green-400); animation: pulse-green 2s infinite; } | |
| @keyframes pulse-green { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } | |
| @keyframes spin { to { transform: rotate(360deg); } } | |
| .spinner-sm { | |
| width: 14px; height: 14px; border: 2px solid var(--grey-300); | |
| border-top-color: var(--primary-500); border-radius: 50%; | |
| animation: spin 0.8s linear infinite; flex-shrink: 0; | |
| } | |
| .status-pill { | |
| font-size: 11px; font-weight: 500; padding: 3px 8px; | |
| border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: 5px; | |
| } | |
| .status-pill.processing { background: rgba(74, 222, 128, 0.12); color: var(--green-400); } | |
| .status-pill.completed { background: var(--grey-400); color: var(--grey-100); } | |
| .status-pill.failed { background: rgba(248, 113, 113, 0.12); color: var(--red-400); } | |
| .arrow-right { color: var(--grey-200); font-size: 12px; flex-shrink: 0; } | |
| /* ASSESSMENT */ | |
| .assessment-grid { | |
| display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); | |
| gap: 16px; margin-bottom: 24px; | |
| } | |
| .assessment-row { | |
| display: flex; justify-content: space-between; align-items: center; | |
| padding: 10px 14px; background: var(--grey-500); border-radius: var(--radius-md); | |
| border: 1px solid var(--grey-300); | |
| } | |
| .assessment-label { font-size: 13px; color: var(--grey-100); } | |
| .assessment-badge { | |
| font-size: 11px; font-weight: 600; padding: 3px 10px; | |
| border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.5px; | |
| } | |
| .badge-low { background: rgba(74, 222, 128, 0.15); color: var(--green-400); } | |
| .badge-med { background: rgba(250, 204, 21, 0.15); color: var(--yellow-400); } | |
| .badge-high { background: rgba(248, 113, 113, 0.15); color: var(--red-400); } | |
| .badge-high-good { background: rgba(74, 222, 128, 0.15); color: var(--green-400); } | |
| .component-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; } | |
| .comp-tag { | |
| font-size: 12px; font-weight: 500; padding: 4px 10px; | |
| border-radius: var(--radius-full); font-family: var(--font-mono); | |
| } | |
| .comp-tag.reuse { background: rgba(74,222,128,0.12); color: var(--green-400); border: 1px solid rgba(74,222,128,0.2); } | |
| .comp-tag.extend { background: rgba(250,204,21,0.12); color: var(--yellow-400); border: 1px solid rgba(250,204,21,0.2); } | |
| .comp-tag.new { background: rgba(96,165,250,0.12); color: var(--blue-400); border: 1px solid rgba(96,165,250,0.2); } | |
| .pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; } | |
| .pros-cons h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } | |
| .pro-title { color: var(--green-400); } | |
| .con-title { color: var(--red-400); } | |
| .pros-cons ul { list-style: none; font-size: 13px; color: var(--grey-100); } | |
| .pros-cons li { padding: 4px 0; padding-left: 16px; position: relative; } | |
| .pros li::before { content: '+'; position: absolute; left: 0; color: var(--green-400); font-weight: 700; font-size: 11px; } | |
| .cons li::before { content: '\2212'; position: absolute; left: 0; color: var(--red-400); font-weight: 700; font-size: 11px; } | |
| /* COMPARISON / RECOMMENDATION */ | |
| .comparison-section, .recommendation-section { | |
| max-width: 1400px; margin: 0 auto; padding: 48px 40px; | |
| } | |
| .comparison-section { border-bottom: 1px solid var(--grey-300); } | |
| .recommendation-section { padding-bottom: 80px; } | |
| .comparison-section h2, .recommendation-section h2 { font-size: 24px; font-weight: 700; margin-bottom: 24px; } | |
| .comp-table { width: 100%; border-collapse: collapse; font-size: 13px; } | |
| .comp-table th, .comp-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--grey-300); } | |
| .comp-table th { | |
| font-weight: 600; color: var(--grey-200); text-transform: uppercase; | |
| letter-spacing: 0.5px; font-size: 11px; background: var(--grey-500); | |
| } | |
| .comp-table th:first-child { border-radius: var(--radius-md) 0 0 0; } | |
| .comp-table th:last-child { border-radius: 0 var(--radius-md) 0 0; } | |
| .comp-table td { color: var(--grey-100); } | |
| .rec-card { | |
| background: var(--grey-500); border: 1px solid var(--primary-500); | |
| border-radius: var(--radius-xl); padding: 28px; margin-bottom: 20px; | |
| } | |
| .rec-card h3 { font-size: 18px; font-weight: 700; color: var(--primary-500); margin-bottom: 8px; } | |
| .rec-card p { font-size: 14px; color: var(--grey-100); line-height: 1.6; } | |
| .rec-secondary { | |
| background: var(--grey-600); border: 1px solid var(--grey-300); | |
| border-radius: var(--radius-xl); padding: 24px; margin-bottom: 16px; | |
| } | |
| .rec-secondary h4 { font-size: 14px; font-weight: 600; margin-bottom: 6px; } | |
| .rec-secondary p { font-size: 13px; color: var(--grey-200); line-height: 1.5; } | |
| .cta-text { | |
| margin-top: 24px; padding: 16px 20px; background: var(--grey-600); | |
| border-radius: var(--radius-md); border-left: 3px solid var(--primary-500); | |
| font-size: 14px; color: var(--grey-100); | |
| } | |
| /* ===== CONCEPT A ===== */ | |
| .ca-list-item { | |
| display: flex; align-items: center; gap: 12px; padding: 14px 20px; | |
| cursor: pointer; transition: background 0.15s; | |
| border-bottom: 1px solid rgba(45,47,51,0.5); | |
| } | |
| .ca-list-item:hover { background: rgba(255,255,255,0.03); } | |
| .ca-item-content { flex: 1; min-width: 0; } | |
| .ca-item-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; } | |
| .ca-item-action { font-size: 13px; font-weight: 500; color: var(--grey-50); } | |
| .ca-item-time { font-size: 12px; color: var(--grey-200); } | |
| .ca-item-bottom { display: flex; align-items: center; justify-content: space-between; } | |
| .ca-item-amounts { font-size: 12px; color: var(--grey-200); display: flex; align-items: center; gap: 4px; } | |
| .ca-timeline { padding: 4px 0; } | |
| .ca-step { display: flex; gap: 14px; position: relative; } | |
| .ca-step:not(:last-child) { padding-bottom: 24px; } | |
| .ca-step-indicator { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 24px; } | |
| .ca-step-dot { | |
| width: 24px; height: 24px; border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; | |
| font-size: 11px; flex-shrink: 0; z-index: 1; | |
| } | |
| .ca-step-dot.done { background: var(--green-500); color: #fff; } | |
| .ca-step-dot.active { background: var(--primary-500); color: #fff; } | |
| .ca-step-dot.pending { background: var(--grey-400); color: var(--grey-200); border: 1.5px solid var(--grey-300); } | |
| .ca-step-line { width: 2px; flex: 1; margin-top: 4px; } | |
| .ca-step-line.done { background: var(--green-500); } | |
| .ca-step-line.active { background: linear-gradient(to bottom, var(--primary-500), var(--grey-300)); } | |
| .ca-step-line.pending { background: var(--grey-300); } | |
| .ca-step-content { flex: 1; padding-top: 2px; } | |
| .ca-step-title { font-size: 13px; font-weight: 500; color: var(--grey-50); margin-bottom: 2px; } | |
| .ca-step-meta { font-size: 11px; color: var(--grey-200); display: flex; align-items: center; gap: 8px; } | |
| .ca-step-link { color: var(--primary-400); text-decoration: none; font-size: 11px; font-family: var(--font-mono); } | |
| /* ===== CONCEPT B ===== */ | |
| .cb-list-item { | |
| margin: 8px 12px; padding: 14px 16px; background: var(--grey-500); | |
| border-radius: var(--radius-lg); border: 1px solid var(--grey-300); | |
| cursor: pointer; transition: border-color 0.15s, background 0.15s; | |
| } | |
| .cb-list-item:hover { border-color: rgba(243,93,0,0.3); background: rgba(243,93,0,0.03); } | |
| .cb-item-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } | |
| .cb-item-label { font-size: 12px; font-weight: 500; color: var(--grey-200); } | |
| .cb-token-row { display: flex; align-items: center; gap: 10px; } | |
| .cb-token-info { display: flex; flex-direction: column; } | |
| .cb-token-amount { font-size: 15px; font-weight: 600; color: var(--grey-50); } | |
| .cb-token-chain { font-size: 11px; color: var(--grey-200); } | |
| .cb-arrow { | |
| width: 28px; height: 28px; border-radius: 50%; background: var(--grey-400); | |
| border: 1px solid var(--grey-300); display: flex; align-items: center; | |
| justify-content: center; color: var(--grey-200); font-size: 12px; flex-shrink: 0; | |
| } | |
| .cb-step-card { | |
| padding: 14px; background: var(--grey-500); border-radius: var(--radius-md); | |
| border: 1px solid var(--grey-300); margin-bottom: 8px; | |
| display: flex; align-items: center; gap: 12px; | |
| } | |
| .cb-step-icon { | |
| width: 32px; height: 32px; border-radius: 50%; | |
| display: flex; align-items: center; justify-content: center; font-size: 13px; flex-shrink: 0; | |
| } | |
| .cb-step-icon.done { background: rgba(74,222,128,0.15); color: var(--green-400); } | |
| .cb-step-icon.active { background: rgba(243,93,0,0.15); color: var(--primary-400); } | |
| .cb-step-icon.pending { background: var(--grey-400); color: var(--grey-200); } | |
| .cb-step-content { flex: 1; } | |
| .cb-step-title { font-size: 13px; font-weight: 500; color: var(--grey-50); } | |
| .cb-step-sub { font-size: 11px; color: var(--grey-200); } | |
| .cb-step-time { font-size: 12px; color: var(--grey-200); text-align: right; white-space: nowrap; } | |
| /* ===== CONCEPT C ===== */ | |
| .cc-active-section { padding: 12px 16px 4px; } | |
| .cc-section-label { | |
| font-size: 10px; font-weight: 600; text-transform: uppercase; | |
| letter-spacing: 1.2px; color: var(--grey-200); padding: 0 4px; margin-bottom: 8px; | |
| } | |
| .cc-active-card { | |
| padding: 16px; background: linear-gradient(135deg, rgba(243,93,0,0.08), rgba(243,93,0,0.02)); | |
| border-radius: var(--radius-lg); border: 1px solid rgba(243,93,0,0.2); | |
| cursor: pointer; margin-bottom: 8px; | |
| } | |
| .cc-active-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; } | |
| .cc-active-label { font-size: 12px; font-weight: 600; color: var(--primary-400); display: flex; align-items: center; gap: 6px; } | |
| .cc-active-timer { font-size: 12px; font-family: var(--font-mono); color: var(--primary-400); } | |
| .cc-progress-bar { height: 3px; background: var(--grey-400); border-radius: 2px; margin-bottom: 12px; overflow: hidden; } | |
| .cc-progress-fill { height: 100%; border-radius: 2px; background: var(--primary-500); } | |
| .cc-active-tokens { display: flex; align-items: center; gap: 8px; } | |
| .cc-active-amount { font-size: 14px; font-weight: 600; color: var(--grey-50); } | |
| .cc-active-step { font-size: 11px; color: var(--grey-200); margin-top: 6px; } | |
| .section-divider { display: flex; align-items: center; gap: 8px; padding: 12px 20px 4px; } | |
| .section-divider span { | |
| font-size: 10px; font-weight: 600; text-transform: uppercase; | |
| letter-spacing: 1.2px; color: var(--grey-200); white-space: nowrap; | |
| } | |
| .section-divider::after { content: ''; flex: 1; height: 1px; background: var(--grey-300); } | |
| .cc-completed-item { | |
| display: flex; align-items: center; gap: 10px; padding: 10px 20px; | |
| cursor: pointer; border-bottom: 1px solid rgba(45,47,51,0.3); transition: background 0.15s; | |
| } | |
| .cc-completed-item:hover { background: rgba(255,255,255,0.02); } | |
| .cc-check { | |
| width: 18px; height: 18px; border-radius: 50%; background: var(--grey-400); | |
| color: var(--grey-200); display: flex; align-items: center; justify-content: center; | |
| font-size: 10px; flex-shrink: 0; | |
| } | |
| .cc-completed-content { flex: 1; font-size: 13px; color: var(--grey-200); } | |
| .cc-completed-time { font-size: 11px; color: var(--grey-200); opacity: 0.6; } | |
| .cc-modal-status { text-align: center; padding: 24px 0 20px; } | |
| .cc-modal-icon { | |
| width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 12px; | |
| display: flex; align-items: center; justify-content: center; font-size: 24px; | |
| } | |
| .cc-modal-icon.processing { background: rgba(243,93,0,0.12); color: var(--primary-400); } | |
| .cc-modal-icon.done { background: rgba(74,222,128,0.12); color: var(--green-400); } | |
| .cc-modal-title { font-size: 18px; font-weight: 600; margin-bottom: 4px; } | |
| .cc-modal-subtitle { font-size: 13px; color: var(--grey-200); } | |
| /* SHARED MODAL ELEMENTS */ | |
| .modal-amount-row { | |
| display: flex; align-items: center; justify-content: space-between; | |
| padding: 16px; background: var(--grey-500); border-radius: var(--radius-md); | |
| border: 1px solid var(--grey-300); margin-bottom: 20px; | |
| } | |
| .modal-amount-side { display: flex; align-items: center; gap: 10px; } | |
| .modal-amount-text { display: flex; flex-direction: column; } | |
| .modal-amount-value { font-size: 16px; font-weight: 600; color: var(--grey-50); } | |
| .modal-amount-chain { font-size: 11px; color: var(--grey-200); } | |
| .modal-arrow { font-size: 16px; color: var(--grey-200); } | |
| .completion-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--grey-200); margin-bottom: 16px; } | |
| /* EMPTY STATE */ | |
| .empty-state { | |
| display: flex; flex-direction: column; align-items: center; justify-content: center; | |
| padding: 60px 32px; text-align: center; | |
| } | |
| .empty-icon { | |
| width: 64px; height: 64px; border-radius: 50%; background: var(--grey-500); | |
| border: 1px solid var(--grey-300); display: flex; align-items: center; | |
| justify-content: center; font-size: 24px; color: var(--grey-200); margin-bottom: 16px; | |
| } | |
| .empty-title { font-size: 15px; font-weight: 600; color: var(--grey-50); margin-bottom: 6px; } | |
| .empty-desc { font-size: 13px; color: var(--grey-200); margin-bottom: 20px; max-width: 240px; } | |
| .empty-cta { | |
| padding: 10px 20px; background: var(--primary-500); color: #fff; border: none; | |
| border-radius: var(--radius-md); font-size: 13px; font-weight: 600; | |
| cursor: pointer; font-family: var(--font-body); transition: background 0.15s; | |
| } | |
| .empty-cta:hover { background: var(--primary-600); } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- HEADER --> | |
| <div class="page-header"> | |
| <h1>Activity Sidebar — <span>Wireframe Concepts</span></h1> | |
| <p>Redesign of the BOB app activity sidebar for Gateway swap transactions. Simplified list items with a new detail modal replacing inline expansion. Scope: onramp, offramp, L0 swap only.</p> | |
| <div class="ratings-caveat"> | |
| <em>Ratings are qualitative judgments based on available information. Treat them as directional signals for comparison between concepts, not objective measurements.</em> | |
| </div> | |
| <div class="context-chips"> | |
| <span class="context-chip">Desktop sidebar (360px)</span> | |
| <span class="context-chip">Dark theme</span> | |
| <span class="context-chip">Swap types only</span> | |
| <span class="context-chip">Activity = default tab</span> | |
| <span class="context-chip">No filters</span> | |
| <span class="context-chip">Modal on click</span> | |
| <span class="context-chip">Issue #1673</span> | |
| </div> | |
| </div> | |
| <!-- ==================== CONCEPT A ==================== --> | |
| <div class="concept-section"> | |
| <div class="concept-label"><span class="dot"></span> Concept A</div> | |
| <h2 class="concept-title">Compact Timeline</h2> | |
| <p class="concept-bet">Maximum information density in minimum space. Uniswap-inspired single-row entries with a split token logo, verb-tense status labels, and a Relay-style vertical timeline in the detail modal. Shows the most history at a glance.</p> | |
| <div class="mockup-grid"> | |
| <!-- Empty State --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Sidebar <span class="state-pill">Empty</span></div> | |
| <div class="sidebar-frame"> | |
| <div class="sidebar-header"> | |
| <span class="addr"><span class="dot-green"></span> 0x8a3...f2d1</span> | |
| <div class="sidebar-close">×</div> | |
| </div> | |
| <div class="sidebar-tabs"> | |
| <div class="sidebar-tab active">Activity</div> | |
| <div class="sidebar-tab">Wallet</div> | |
| </div> | |
| <div class="sidebar-body"> | |
| <div class="empty-state"> | |
| <div class="empty-icon">↻</div> | |
| <div class="empty-title">No swaps yet</div> | |
| <div class="empty-desc">Your cross-chain swap history will appear here once you make your first trade.</div> | |
| <button class="empty-cta">Start Swapping</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- List State --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Sidebar <span class="state-pill">Active</span></div> | |
| <div class="sidebar-frame"> | |
| <div class="sidebar-header"> | |
| <span class="addr"><span class="dot-green"></span> 0x8a3...f2d1</span> | |
| <div class="sidebar-close">×</div> | |
| </div> | |
| <div class="sidebar-tabs"> | |
| <div class="sidebar-tab active">Activity</div> | |
| <div class="sidebar-tab">Wallet</div> | |
| </div> | |
| <div class="sidebar-body"> | |
| <div class="ca-list-item"> | |
| <div class="split-logo"><div class="left" style="background:#F7931A;"></div><div class="divider"></div><div class="right" style="background:#2775CA;"></div><div class="chain-badge bitcoin">₿</div></div> | |
| <div class="ca-item-content"> | |
| <div class="ca-item-top"><span class="ca-item-action">Swapping</span><span class="ca-item-time">2 min ago</span></div> | |
| <div class="ca-item-bottom"><span class="ca-item-amounts">0.5 BTC <span class="arrow-right">→</span> 1,200 USDC</span><span class="status-pill processing"><span class="status-dot processing" style="width:6px;height:6px;"></span> Processing</span></div> | |
| </div> | |
| </div> | |
| <div class="ca-list-item"> | |
| <div class="split-logo"><div class="left" style="background:#2775CA;"></div><div class="divider"></div><div class="right" style="background:#F7931A;"></div><div class="chain-badge bob-chain">B</div></div> | |
| <div class="ca-item-content"> | |
| <div class="ca-item-top"><span class="ca-item-action">Swapped</span><span class="ca-item-time">1 hour ago</span></div> | |
| <div class="ca-item-bottom"><span class="ca-item-amounts">500 USDC <span class="arrow-right">→</span> 0.21 BTC</span><span class="status-pill completed">Completed</span></div> | |
| </div> | |
| </div> | |
| <div class="ca-list-item"> | |
| <div class="split-logo"><div class="left" style="background:#F7931A;"></div><div class="divider"></div><div class="right" style="background:#627EEA;"></div><div class="chain-badge bitcoin">₿</div></div> | |
| <div class="ca-item-content"> | |
| <div class="ca-item-top"><span class="ca-item-action">Swapped</span><span class="ca-item-time">3 hours ago</span></div> | |
| <div class="ca-item-bottom"><span class="ca-item-amounts">1.2 BTC <span class="arrow-right">→</span> 2,800 USDC</span><span class="status-pill completed">Completed</span></div> | |
| </div> | |
| </div> | |
| <div class="ca-list-item"> | |
| <div class="split-logo"><div class="left" style="background:#E3A944;"></div><div class="divider"></div><div class="right" style="background:#F7931A;"></div><div class="chain-badge bob-chain">B</div></div> | |
| <div class="ca-item-content"> | |
| <div class="ca-item-top"><span class="ca-item-action">Swap failed</span><span class="ca-item-time">Yesterday</span></div> | |
| <div class="ca-item-bottom"><span class="ca-item-amounts">0.8 WBTC <span class="arrow-right">→</span> 0.79 BTC</span><span class="status-pill failed">Failed</span></div> | |
| </div> | |
| </div> | |
| <div class="ca-list-item"> | |
| <div class="split-logo"><div class="left" style="background:#F7931A;"></div><div class="divider"></div><div class="right" style="background:#E3A944;"></div><div class="chain-badge bitcoin">₿</div></div> | |
| <div class="ca-item-content"> | |
| <div class="ca-item-top"><span class="ca-item-action">Swapped</span><span class="ca-item-time">2 days ago</span></div> | |
| <div class="ca-item-bottom"><span class="ca-item-amounts">0.3 BTC <span class="arrow-right">→</span> 0.29 WBTC</span><span class="status-pill completed">Completed</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Detail Modal - Completed --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Detail Modal <span class="state-pill">Completed</span></div> | |
| <div class="modal-frame"> | |
| <div class="modal-header"><h3>Swap Details</h3><div class="sidebar-close">×</div></div> | |
| <div class="modal-body"> | |
| <div class="modal-amount-row"> | |
| <div class="modal-amount-side"> | |
| <div class="token-avatar"><div class="token-icon btc">₿</div><div class="chain-badge bitcoin">₿</div></div> | |
| <div class="modal-amount-text"><span class="modal-amount-value">0.5 BTC</span><span class="modal-amount-chain">on Bitcoin</span></div> | |
| </div> | |
| <span class="modal-arrow">→</span> | |
| <div class="modal-amount-side"> | |
| <div class="token-avatar"><div class="token-icon usdc">$</div><div class="chain-badge bob-chain">B</div></div> | |
| <div class="modal-amount-text"><span class="modal-amount-value">1,200 USDC</span><span class="modal-amount-chain">on BOB</span></div> | |
| </div> | |
| </div> | |
| <div class="completion-badge">✓ Completed in 12 min</div> | |
| <div class="ca-timeline"> | |
| <div class="ca-step"> | |
| <div class="ca-step-indicator"><div class="ca-step-dot done">✓</div><div class="ca-step-line done"></div></div> | |
| <div class="ca-step-content"><div class="ca-step-title">BTC sent on Bitcoin</div><div class="ca-step-meta"><span>3 min</span><a href="#" class="ca-step-link">abc...d3f ↗</a></div></div> | |
| </div> | |
| <div class="ca-step"> | |
| <div class="ca-step-indicator"><div class="ca-step-dot done">✓</div><div class="ca-step-line done"></div></div> | |
| <div class="ca-step-content"><div class="ca-step-title">Swap</div><div class="ca-step-meta"><span>8 min</span></div></div> | |
| </div> | |
| <div class="ca-step"> | |
| <div class="ca-step-indicator"><div class="ca-step-dot done">✓</div></div> | |
| <div class="ca-step-content"><div class="ca-step-title">USDC received on BOB</div><div class="ca-step-meta"><span>1 min</span><a href="#" class="ca-step-link">e4f...8a2 ↗</a></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Detail Modal - Processing --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Detail Modal <span class="state-pill">Processing</span></div> | |
| <div class="modal-frame"> | |
| <div class="modal-header"><h3>Swap Details</h3><div class="sidebar-close">×</div></div> | |
| <div class="modal-body"> | |
| <div class="modal-amount-row"> | |
| <div class="modal-amount-side"> | |
| <div class="token-avatar"><div class="token-icon btc">₿</div><div class="chain-badge bitcoin">₿</div></div> | |
| <div class="modal-amount-text"><span class="modal-amount-value">0.5 BTC</span><span class="modal-amount-chain">on Bitcoin</span></div> | |
| </div> | |
| <span class="modal-arrow">→</span> | |
| <div class="modal-amount-side"> | |
| <div class="token-avatar"><div class="token-icon usdc">$</div><div class="chain-badge bob-chain">B</div></div> | |
| <div class="modal-amount-text"><span class="modal-amount-value">1,200 USDC</span><span class="modal-amount-chain">on BOB</span></div> | |
| </div> | |
| </div> | |
| <div class="completion-badge"><span class="spinner-sm" style="width:12px;height:12px;border-width:1.5px;"></span> Processing · 4:32 elapsed</div> | |
| <div class="ca-timeline"> | |
| <div class="ca-step"> | |
| <div class="ca-step-indicator"><div class="ca-step-dot done">✓</div><div class="ca-step-line done"></div></div> | |
| <div class="ca-step-content"><div class="ca-step-title">BTC sent on Bitcoin</div><div class="ca-step-meta"><span>3 min</span><a href="#" class="ca-step-link">abc...d3f ↗</a></div></div> | |
| </div> | |
| <div class="ca-step"> | |
| <div class="ca-step-indicator"><div class="ca-step-dot active" style="font-size:9px;">●</div><div class="ca-step-line active"></div></div> | |
| <div class="ca-step-content"><div class="ca-step-title">Swap</div><div class="ca-step-meta"><span style="color:var(--primary-400);">~10 min remaining</span></div></div> | |
| </div> | |
| <div class="ca-step"> | |
| <div class="ca-step-indicator"><div class="ca-step-dot pending">3</div></div> | |
| <div class="ca-step-content"><div class="ca-step-title" style="color:var(--grey-200);">USDC received on BOB</div><div class="ca-step-meta"><span>Waiting</span></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--grey-100);">Component Reuse</h3> | |
| <div class="component-tags"> | |
| <span class="comp-tag reuse">✓ Modal</span><span class="comp-tag reuse">✓ Avatar</span><span class="comp-tag reuse">✓ Tabs</span><span class="comp-tag reuse">✓ Spinner</span><span class="comp-tag reuse">✓ Chip</span><span class="comp-tag reuse">✓ Skeleton</span> | |
| <span class="comp-tag extend">⚙ StatusBadge</span><span class="comp-tag extend">⚙ TransactionDetails</span> | |
| <span class="comp-tag new">★ SplitLogo</span><span class="comp-tag new">★ TimelineStep</span><span class="comp-tag new">★ SwapDetailModal</span> | |
| </div> | |
| <h3 style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--grey-100);">Assessment</h3> | |
| <div class="assessment-grid"> | |
| <div class="assessment-row"><span class="assessment-label">UX Viability</span><span class="assessment-badge badge-high-good">High</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Market Fit</span><span class="assessment-badge badge-high-good">High</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Implementation Complexity</span><span class="assessment-badge badge-low">Low</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Design Complexity</span><span class="assessment-badge badge-med">Medium</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Integration Risk</span><span class="assessment-badge badge-low">Low</span></div> | |
| </div> | |
| <div class="pros-cons"> | |
| <div class="pros"><h4 class="pro-title">Pros</h4><ul> | |
| <li>Shows 5+ entries without scrolling — best for active traders</li> | |
| <li>Split logo is an instant visual differentiator, proven at Uniswap scale</li> | |
| <li>Verb-tense labels ("Swapping"/"Swapped") communicate state without reading status pill</li> | |
| <li>Timeline modal is the most intuitive mental model for multi-step swaps</li> | |
| <li>Lowest implementation complexity — mostly layout changes to existing components</li> | |
| </ul></div> | |
| <div class="cons"><h4 class="con-title">Cons</h4><ul> | |
| <li>Split logo is visually small — harder to identify tokens at a glance</li> | |
| <li>Dense rows may feel cramped for less experienced crypto users</li> | |
| <li>Amounts in a single line can truncate with long token names</li> | |
| <li>No visual differentiation between active/completed entries besides the status pill</li> | |
| </ul></div> | |
| </div> | |
| </div> | |
| <!-- ==================== CONCEPT B ==================== --> | |
| <div class="concept-section"> | |
| <div class="concept-label"><span class="dot"></span> Concept B</div> | |
| <h2 class="concept-title">Rich Cards</h2> | |
| <p class="concept-bet">Visual clarity over density. Each swap is a distinct card with prominent token avatars, chain badges, and separated amounts. Near Intents icon treatment with Relay-style step cards in the modal. Optimised for scannability over quantity.</p> | |
| <div class="mockup-grid"> | |
| <!-- Empty State --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Sidebar <span class="state-pill">Empty</span></div> | |
| <div class="sidebar-frame"> | |
| <div class="sidebar-header"><span class="addr"><span class="dot-green"></span> 0x8a3...f2d1</span><div class="sidebar-close">×</div></div> | |
| <div class="sidebar-tabs"><div class="sidebar-tab active">Activity</div><div class="sidebar-tab">Wallet</div></div> | |
| <div class="sidebar-body"> | |
| <div class="empty-state"> | |
| <div class="empty-icon" style="border:1px dashed var(--grey-300);background:transparent;">⇄</div> | |
| <div class="empty-title">No transactions</div> | |
| <div class="empty-desc">Swap BTC to any asset across chains. Your history will show up here.</div> | |
| <button class="empty-cta">Make your first swap →</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- List State --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Sidebar <span class="state-pill">Active</span></div> | |
| <div class="sidebar-frame"> | |
| <div class="sidebar-header"><span class="addr"><span class="dot-green"></span> 0x8a3...f2d1</span><div class="sidebar-close">×</div></div> | |
| <div class="sidebar-tabs"><div class="sidebar-tab active">Activity</div><div class="sidebar-tab">Wallet</div></div> | |
| <div class="sidebar-body"> | |
| <div class="cb-list-item" style="border-color:rgba(243,93,0,0.25);background:rgba(243,93,0,0.03);"> | |
| <div class="cb-item-header"><span class="status-pill processing"><span class="status-dot processing" style="width:6px;height:6px;"></span> Swapping</span><span class="cb-item-label">2 min ago</span></div> | |
| <div class="cb-token-row"> | |
| <div class="token-avatar"><div class="token-icon btc">₿</div><div class="chain-badge bitcoin">₿</div></div> | |
| <div class="cb-token-info"><span class="cb-token-amount">0.5 BTC</span><span class="cb-token-chain">on Bitcoin</span></div> | |
| <div class="cb-arrow">→</div> | |
| <div class="token-avatar"><div class="token-icon usdc">$</div><div class="chain-badge bob-chain">B</div></div> | |
| <div class="cb-token-info"><span class="cb-token-amount">1,200 USDC</span><span class="cb-token-chain">on BOB</span></div> | |
| </div> | |
| </div> | |
| <div class="cb-list-item"> | |
| <div class="cb-item-header"><span class="status-pill completed">✓ Swapped</span><span class="cb-item-label">1 hour ago</span></div> | |
| <div class="cb-token-row"> | |
| <div class="token-avatar"><div class="token-icon usdc">$</div><div class="chain-badge bob-chain">B</div></div> | |
| <div class="cb-token-info"><span class="cb-token-amount">500 USDC</span><span class="cb-token-chain">on BOB</span></div> | |
| <div class="cb-arrow">→</div> | |
| <div class="token-avatar"><div class="token-icon btc">₿</div><div class="chain-badge bitcoin">₿</div></div> | |
| <div class="cb-token-info"><span class="cb-token-amount">0.21 BTC</span><span class="cb-token-chain">on Bitcoin</span></div> | |
| </div> | |
| </div> | |
| <div class="cb-list-item" style="border-color:rgba(248,113,113,0.2);"> | |
| <div class="cb-item-header"><span class="status-pill failed">✗ Failed</span><span class="cb-item-label">Yesterday</span></div> | |
| <div class="cb-token-row"> | |
| <div class="token-avatar"><div class="token-icon wbtc">W</div><div class="chain-badge bob-chain">B</div></div> | |
| <div class="cb-token-info"><span class="cb-token-amount">0.8 WBTC</span><span class="cb-token-chain">on BOB</span></div> | |
| <div class="cb-arrow">→</div> | |
| <div class="token-avatar"><div class="token-icon btc">₿</div><div class="chain-badge bitcoin">₿</div></div> | |
| <div class="cb-token-info"><span class="cb-token-amount">0.79 BTC</span><span class="cb-token-chain">on Bitcoin</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Detail Modal - Completed --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Detail Modal <span class="state-pill">Completed</span></div> | |
| <div class="modal-frame"> | |
| <div class="modal-header"><h3>Swap Details</h3><div class="sidebar-close">×</div></div> | |
| <div class="modal-body"> | |
| <div class="modal-amount-row"> | |
| <div class="modal-amount-side"> | |
| <div class="token-avatar lg"><div class="token-icon lg btc">₿</div><div class="chain-badge bitcoin">₿</div></div> | |
| <div class="modal-amount-text"><span class="modal-amount-value">0.5 BTC</span><span class="modal-amount-chain">on Bitcoin</span></div> | |
| </div> | |
| <span class="modal-arrow">→</span> | |
| <div class="modal-amount-side"> | |
| <div class="token-avatar lg"><div class="token-icon lg usdc">$</div><div class="chain-badge bob-chain">B</div></div> | |
| <div class="modal-amount-text"><span class="modal-amount-value">1,200 USDC</span><span class="modal-amount-chain">on BOB</span></div> | |
| </div> | |
| </div> | |
| <div class="completion-badge">✓ Completed in 12 min · 1 hour ago</div> | |
| <div style="display:flex;flex-direction:column;gap:8px;"> | |
| <div class="cb-step-card"><div class="cb-step-icon done">✓</div><div class="cb-step-content"><div class="cb-step-title">BTC sent on Bitcoin</div><div class="cb-step-sub"><a href="#" class="ca-step-link">abc...d3f ↗</a></div></div><span class="cb-step-time">3 min</span></div> | |
| <div class="cb-step-card"><div class="cb-step-icon done">✓</div><div class="cb-step-content"><div class="cb-step-title">Swap</div><div class="cb-step-sub">Gateway bridge</div></div><span class="cb-step-time">8 min</span></div> | |
| <div class="cb-step-card"><div class="cb-step-icon done">✓</div><div class="cb-step-content"><div class="cb-step-title">USDC received on BOB</div><div class="cb-step-sub"><a href="#" class="ca-step-link">e4f...8a2 ↗</a></div></div><span class="cb-step-time">1 min</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Detail Modal - Processing --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Detail Modal <span class="state-pill">Processing</span></div> | |
| <div class="modal-frame"> | |
| <div class="modal-header"><h3>Swap Details</h3><div class="sidebar-close">×</div></div> | |
| <div class="modal-body"> | |
| <div class="modal-amount-row"> | |
| <div class="modal-amount-side"> | |
| <div class="token-avatar lg"><div class="token-icon lg btc">₿</div><div class="chain-badge bitcoin">₿</div></div> | |
| <div class="modal-amount-text"><span class="modal-amount-value">0.5 BTC</span><span class="modal-amount-chain">on Bitcoin</span></div> | |
| </div> | |
| <span class="modal-arrow">→</span> | |
| <div class="modal-amount-side"> | |
| <div class="token-avatar lg"><div class="token-icon lg usdc">$</div><div class="chain-badge bob-chain">B</div></div> | |
| <div class="modal-amount-text"><span class="modal-amount-value">1,200 USDC</span><span class="modal-amount-chain">on BOB</span></div> | |
| </div> | |
| </div> | |
| <div class="completion-badge"><span class="spinner-sm" style="width:12px;height:12px;border-width:1.5px;"></span> Processing · 4:32 elapsed</div> | |
| <div style="display:flex;flex-direction:column;gap:8px;"> | |
| <div class="cb-step-card"><div class="cb-step-icon done">✓</div><div class="cb-step-content"><div class="cb-step-title">BTC sent on Bitcoin</div><div class="cb-step-sub"><a href="#" class="ca-step-link">abc...d3f ↗</a></div></div><span class="cb-step-time">3 min</span></div> | |
| <div class="cb-step-card" style="border-color:rgba(243,93,0,0.3);background:rgba(243,93,0,0.04);"><div class="cb-step-icon active"><span class="spinner-sm" style="width:14px;height:14px;border-width:2px;"></span></div><div class="cb-step-content"><div class="cb-step-title">Swap</div><div class="cb-step-sub" style="color:var(--primary-400);">~10 min remaining</div></div><span class="cb-step-time" style="color:var(--primary-400);">1:32</span></div> | |
| <div class="cb-step-card" style="opacity:0.5;"><div class="cb-step-icon pending">3</div><div class="cb-step-content"><div class="cb-step-title">USDC received on BOB</div><div class="cb-step-sub">Waiting</div></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--grey-100);">Component Reuse</h3> | |
| <div class="component-tags"> | |
| <span class="comp-tag reuse">✓ Modal</span><span class="comp-tag reuse">✓ Avatar</span><span class="comp-tag reuse">✓ Tabs</span><span class="comp-tag reuse">✓ Card</span><span class="comp-tag reuse">✓ Spinner</span><span class="comp-tag reuse">✓ Chip</span><span class="comp-tag reuse">✓ Skeleton</span> | |
| <span class="comp-tag extend">⚙ StatusBadge</span><span class="comp-tag extend">⚙ TransactionDetails</span> | |
| <span class="comp-tag new">★ SwapCard</span><span class="comp-tag new">★ StepCard</span><span class="comp-tag new">★ SwapDetailModal</span> | |
| </div> | |
| <h3 style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--grey-100);">Assessment</h3> | |
| <div class="assessment-grid"> | |
| <div class="assessment-row"><span class="assessment-label">UX Viability</span><span class="assessment-badge badge-high-good">High</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Market Fit</span><span class="assessment-badge badge-high-good">High</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Implementation Complexity</span><span class="assessment-badge badge-med">Medium</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Design Complexity</span><span class="assessment-badge badge-med">Medium</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Integration Risk</span><span class="assessment-badge badge-low">Low</span></div> | |
| </div> | |
| <div class="pros-cons"> | |
| <div class="pros"><h4 class="pro-title">Pros</h4><ul> | |
| <li>Each card is immediately scannable — token pair, amounts, and chain all visible without reading</li> | |
| <li>Near Intents-style icon treatment matches the requirement exactly (asset icon + chain sub-badge)</li> | |
| <li>"on Bitcoin" / "on BOB" chain labels eliminate ambiguity for cross-chain swaps</li> | |
| <li>Card borders provide natural visual grouping and hover affordance</li> | |
| <li>Step cards in modal give each step equal visual weight — clearer than dots on a line</li> | |
| </ul></div> | |
| <div class="cons"><h4 class="con-title">Cons</h4><ul> | |
| <li>Only fits ~3 cards in viewport — users with many swaps need to scroll more</li> | |
| <li>More vertical space per entry means active traders see less history at a glance</li> | |
| <li>Card-in-card nesting (sidebar card → step cards in modal) can feel heavy</li> | |
| <li>Higher implementation effort — new SwapCard component with responsive token row</li> | |
| <li>Border color variations per state (orange/red) need careful theming</li> | |
| </ul></div> | |
| </div> | |
| </div> | |
| <!-- ==================== CONCEPT C ==================== --> | |
| <div class="concept-section"> | |
| <div class="concept-label"><span class="dot"></span> Concept C</div> | |
| <h2 class="concept-title">Status-Led</h2> | |
| <p class="concept-bet">Active transactions get premium visual real estate with progress bars and elapsed timers. Completed transactions recede into a compact history list. Inspired by Jumper's active/completed split. Best for users who care most about in-flight swaps.</p> | |
| <div class="mockup-grid"> | |
| <!-- Empty State --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Sidebar <span class="state-pill">Empty</span></div> | |
| <div class="sidebar-frame"> | |
| <div class="sidebar-header"><span class="addr"><span class="dot-green"></span> 0x8a3...f2d1</span><div class="sidebar-close">×</div></div> | |
| <div class="sidebar-tabs"><div class="sidebar-tab active">Activity</div><div class="sidebar-tab">Wallet</div></div> | |
| <div class="sidebar-body"> | |
| <div class="empty-state"> | |
| <div class="empty-icon" style="background:rgba(243,93,0,0.08);border-color:rgba(243,93,0,0.2);color:var(--primary-400);">⇄</div> | |
| <div class="empty-title">Ready to swap?</div> | |
| <div class="empty-desc">Bridge BTC to any chain in minutes. Your active and completed swaps will appear here.</div> | |
| <button class="empty-cta">Start Swapping</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- List State --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Sidebar <span class="state-pill">Active</span></div> | |
| <div class="sidebar-frame"> | |
| <div class="sidebar-header"><span class="addr"><span class="dot-green"></span> 0x8a3...f2d1</span><div class="sidebar-close">×</div></div> | |
| <div class="sidebar-tabs"><div class="sidebar-tab active">Activity</div><div class="sidebar-tab">Wallet</div></div> | |
| <div class="sidebar-body"> | |
| <div class="cc-active-section"> | |
| <div class="cc-section-label">In Progress</div> | |
| <div class="cc-active-card"> | |
| <div class="cc-active-header"> | |
| <span class="cc-active-label"><span class="spinner-sm" style="width:12px;height:12px;border-width:1.5px;border-top-color:var(--primary-400);"></span> Swapping</span> | |
| <span class="cc-active-timer">4:32</span> | |
| </div> | |
| <div class="cc-progress-bar"><div class="cc-progress-fill" style="width:45%;"></div></div> | |
| <div class="cc-active-tokens"> | |
| <div class="token-avatar sm"><div class="token-icon sm btc">₿</div><div class="chain-badge sm bitcoin">₿</div></div> | |
| <span class="cc-active-amount">0.5 BTC</span> | |
| <span class="arrow-right">→</span> | |
| <div class="token-avatar sm"><div class="token-icon sm usdc">$</div><div class="chain-badge sm bob-chain">B</div></div> | |
| <span class="cc-active-amount">1,200 USDC</span> | |
| </div> | |
| <div class="cc-active-step">Step 2/3 · Swap in progress · ~10 min left</div> | |
| </div> | |
| </div> | |
| <div class="section-divider"><span>Completed</span></div> | |
| <div class="cc-completed-item"><div class="cc-check">✓</div><div class="cc-completed-content">500 USDC → 0.21 BTC</div><span class="cc-completed-time">1h ago</span></div> | |
| <div class="cc-completed-item"><div class="cc-check">✓</div><div class="cc-completed-content">1.2 BTC → 2,800 USDC</div><span class="cc-completed-time">3h ago</span></div> | |
| <div class="cc-completed-item"><div class="cc-check" style="background:rgba(248,113,113,0.15);color:var(--red-400);">✗</div><div class="cc-completed-content" style="color:var(--red-400);opacity:0.8;">0.8 WBTC → 0.79 BTC <span style="font-size:11px;opacity:0.6;">(failed)</span></div><span class="cc-completed-time">1d ago</span></div> | |
| <div class="cc-completed-item"><div class="cc-check">✓</div><div class="cc-completed-content">0.3 BTC → 0.29 WBTC</div><span class="cc-completed-time">2d ago</span></div> | |
| <div class="cc-completed-item"><div class="cc-check">✓</div><div class="cc-completed-content">2.0 BTC → 4,600 USDC</div><span class="cc-completed-time">3d ago</span></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Detail Modal - Processing --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Detail Modal <span class="state-pill">Processing</span></div> | |
| <div class="modal-frame"> | |
| <div class="modal-header"><h3>Swap Details</h3><div class="sidebar-close">×</div></div> | |
| <div class="modal-body"> | |
| <div class="cc-modal-status"> | |
| <div class="cc-modal-icon processing"><span class="spinner-sm" style="width:28px;height:28px;border-width:3px;border-top-color:var(--primary-400);border-color:rgba(243,93,0,0.2);"></span></div> | |
| <div class="cc-modal-title">Swapping</div> | |
| <div class="cc-modal-subtitle">0.5 BTC → 1,200 USDC · 4:32 elapsed</div> | |
| </div> | |
| <div class="cc-progress-bar" style="margin-bottom:20px;height:4px;"><div class="cc-progress-fill" style="width:45%;"></div></div> | |
| <div class="ca-timeline"> | |
| <div class="ca-step"><div class="ca-step-indicator"><div class="ca-step-dot done">✓</div><div class="ca-step-line done"></div></div><div class="ca-step-content"><div class="ca-step-title">BTC sent on Bitcoin</div><div class="ca-step-meta"><span>3 min</span><a href="#" class="ca-step-link">abc...d3f ↗</a></div></div></div> | |
| <div class="ca-step"><div class="ca-step-indicator"><div class="ca-step-dot active" style="font-size:9px;">●</div><div class="ca-step-line active"></div></div><div class="ca-step-content"><div class="ca-step-title">Swap</div><div class="ca-step-meta"><span style="color:var(--primary-400);">~10 min remaining</span></div></div></div> | |
| <div class="ca-step"><div class="ca-step-indicator"><div class="ca-step-dot pending">3</div></div><div class="ca-step-content"><div class="ca-step-title" style="color:var(--grey-200);">USDC received on BOB</div><div class="ca-step-meta"><span>Waiting</span></div></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Detail Modal - Completed --> | |
| <div class="mockup-col"> | |
| <div class="mockup-label">Detail Modal <span class="state-pill">Completed</span></div> | |
| <div class="modal-frame"> | |
| <div class="modal-header"><h3>Swap Details</h3><div class="sidebar-close">×</div></div> | |
| <div class="modal-body"> | |
| <div class="cc-modal-status"> | |
| <div class="cc-modal-icon done">✓</div> | |
| <div class="cc-modal-title">Swap Complete</div> | |
| <div class="cc-modal-subtitle">0.5 BTC → 1,200 USDC · Completed in 12 min</div> | |
| </div> | |
| <div class="ca-timeline"> | |
| <div class="ca-step"><div class="ca-step-indicator"><div class="ca-step-dot done">✓</div><div class="ca-step-line done"></div></div><div class="ca-step-content"><div class="ca-step-title">BTC sent on Bitcoin</div><div class="ca-step-meta"><span>3 min</span><a href="#" class="ca-step-link">abc...d3f ↗</a></div></div></div> | |
| <div class="ca-step"><div class="ca-step-indicator"><div class="ca-step-dot done">✓</div><div class="ca-step-line done"></div></div><div class="ca-step-content"><div class="ca-step-title">Swap</div><div class="ca-step-meta"><span>8 min</span></div></div></div> | |
| <div class="ca-step"><div class="ca-step-indicator"><div class="ca-step-dot done">✓</div></div><div class="ca-step-content"><div class="ca-step-title">USDC received on BOB</div><div class="ca-step-meta"><span>1 min</span><a href="#" class="ca-step-link">e4f...8a2 ↗</a></div></div></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <h3 style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--grey-100);">Component Reuse</h3> | |
| <div class="component-tags"> | |
| <span class="comp-tag reuse">✓ Modal</span><span class="comp-tag reuse">✓ Avatar</span><span class="comp-tag reuse">✓ Tabs</span><span class="comp-tag reuse">✓ Spinner</span><span class="comp-tag reuse">✓ ProgressBar</span><span class="comp-tag reuse">✓ Chip</span><span class="comp-tag reuse">✓ Skeleton</span> | |
| <span class="comp-tag extend">⚙ StatusBadge</span> | |
| <span class="comp-tag new">★ ActiveSwapCard</span><span class="comp-tag new">★ CompletedSwapRow</span><span class="comp-tag new">★ TimelineStep</span><span class="comp-tag new">★ SwapDetailModal</span><span class="comp-tag new">★ StatusHeader</span> | |
| </div> | |
| <h3 style="font-size:14px;font-weight:600;margin-bottom:12px;color:var(--grey-100);">Assessment</h3> | |
| <div class="assessment-grid"> | |
| <div class="assessment-row"><span class="assessment-label">UX Viability</span><span class="assessment-badge badge-high-good">High</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Market Fit</span><span class="assessment-badge badge-med">Medium</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Implementation Complexity</span><span class="assessment-badge badge-high">High</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Design Complexity</span><span class="assessment-badge badge-high">High</span></div> | |
| <div class="assessment-row"><span class="assessment-label">Integration Risk</span><span class="assessment-badge badge-med">Medium</span></div> | |
| </div> | |
| <div class="pros-cons"> | |
| <div class="pros"><h4 class="pro-title">Pros</h4><ul> | |
| <li>Active swaps are impossible to miss — progress bar + timer gives real-time feedback</li> | |
| <li>Completed history is ultra-compact, showing 5+ entries easily</li> | |
| <li>"Step 2/3" inline label communicates progress without opening the modal</li> | |
| <li>Progress-first modal with large status icon gives immediate emotional feedback</li> | |
| <li>Best for the "anxious BTC depositor" who keeps checking swap status</li> | |
| </ul></div> | |
| <div class="cons"><h4 class="con-title">Cons</h4><ul> | |
| <li>Two entirely different row layouts (active card vs. completed row) increases implementation scope</li> | |
| <li>Completed rows lose token icons and chain context — amounts alone are ambiguous</li> | |
| <li>Progress bar implies precise progress, but actual swap timing is unpredictable</li> | |
| <li>When no swaps are active, the "In Progress" section is empty — wastes space</li> | |
| <li>Most divergent from competitor patterns — less familiar to DeFi users</li> | |
| </ul></div> | |
| </div> | |
| </div> | |
| <!-- ==================== COMPARISON ==================== --> | |
| <div class="comparison-section"> | |
| <h2>Comparison</h2> | |
| <table class="comp-table"> | |
| <thead><tr><th>Dimension</th><th>A: Compact Timeline</th><th>B: Rich Cards</th><th>C: Status-Led</th></tr></thead> | |
| <tbody> | |
| <tr><td>UX Viability</td><td><span class="assessment-badge badge-high-good">High</span></td><td><span class="assessment-badge badge-high-good">High</span></td><td><span class="assessment-badge badge-high-good">High</span></td></tr> | |
| <tr><td>Market Fit</td><td><span class="assessment-badge badge-high-good">High</span></td><td><span class="assessment-badge badge-high-good">High</span></td><td><span class="assessment-badge badge-med">Medium</span></td></tr> | |
| <tr><td>Implementation Complexity</td><td><span class="assessment-badge badge-low">Low</span></td><td><span class="assessment-badge badge-med">Medium</span></td><td><span class="assessment-badge badge-high">High</span></td></tr> | |
| <tr><td>Design Complexity</td><td><span class="assessment-badge badge-med">Medium</span></td><td><span class="assessment-badge badge-med">Medium</span></td><td><span class="assessment-badge badge-high">High</span></td></tr> | |
| <tr><td>Integration Risk</td><td><span class="assessment-badge badge-low">Low</span></td><td><span class="assessment-badge badge-low">Low</span></td><td><span class="assessment-badge badge-med">Medium</span></td></tr> | |
| <tr><td>Component Reuse</td><td>8 reused, 3 new</td><td>9 reused, 3 new</td><td>9 reused, 5 new</td></tr> | |
| <tr><td>Entries visible (no scroll)</td><td>5+</td><td>~3</td><td>1 active + 4 completed</td></tr> | |
| <tr><td>Closest competitor</td><td>Uniswap + Relay</td><td>Near Intents + Relay</td><td>Jumper (adapted)</td></tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <!-- ==================== RECOMMENDATION ==================== --> | |
| <div class="recommendation-section"> | |
| <h2>Recommendation</h2> | |
| <div class="rec-card"> | |
| <h3>Primary: Concept A — Compact Timeline</h3> | |
| <p>Best balances the requirements with implementation pragmatism. The split logo is a strong visual differentiator that communicates "swap" instantly. The compact row layout fits the most history in the 360px sidebar, which matters for active traders. The vertical timeline modal is the most intuitive pattern for multi-step processes (validated by Relay and Uniswap). Most importantly, it has the lowest implementation complexity — the row layout is close to the existing <code>TransactionDetails</code> component, the timeline is a clean new component, and it reuses the existing <code>Modal</code> as-is.</p> | |
| </div> | |
| <div class="rec-secondary"> | |
| <h4>Runner-up: Concept B — Rich Cards</h4> | |
| <p>Wins if the team values visual clarity over density. The explicit "on Bitcoin" / "on BOB" chain labels and full-size token avatars are more accessible for newer crypto users. Choose this if the primary audience skews less experienced, or if the sidebar typically shows only 1-3 recent swaps. The step cards in the modal are also slightly more informative than timeline dots.</p> | |
| </div> | |
| <div class="rec-secondary"> | |
| <h4>What to validate first</h4> | |
| <p>The split logo assumption (Concept A). It's the most novel element and could be confusing at 36px for less common token pairs. Validate by showing 5+ token pairs and confirming they're identifiable. If split logo doesn't test well, Concept A falls back gracefully to individual token avatars (like Concept B) with minimal layout changes — making it a hybrid of A's density with B's clarity.</p> | |
| </div> | |
| <div class="cta-text"> | |
| Which concept would you like to develop further? I can explore it in more detail, break it into an implementation plan, or prototype it. | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment