Transfer components

Components

Status badge

Communicates the current state of a transfer. Uses color and a dot indicator — never color alone.

Amount input

Combines a large numeric input with a currency tag. Shows live conversion rate below.

• Input accepts numbers only with auto-formatting
• Currency tag is tappable to switch currencies
• Conversion rate updates in real time
• Supports both fiat and crypto amounts

Transaction row

Displays a single transfer in the mobile transaction history. Shows recipient avatar, name, date, amount, currency, and status badge.

• Rows are tappable to view transfer details
• Amount is right-aligned for scannability
• Status badge is always visible without scrolling

Transfer stepper

Vertical step indicator for the transfer flow. Shows completed, active, and upcoming steps with connecting lines.

• Steps: Send → Review → Confirm
• Completed steps show a check icon
• Active step is highlighted with primary color
• Upcoming steps are muted

Camera capture

Visual KYC viewfinder component with two variants: document (ID card frame with corner marks) and selfie (circular frame). Designed as a showcase pattern — no native camera API.

• Document variant: rectangular frame with 856:540 aspect ratio (standard ID) and L-shaped corner marks
• Selfie variant: circular frame (160px diameter) with round border
• Shutter button: 64px double-circle pattern (outer ring + inner fill)
• Captured state switches to "Use Photo" and "Retake" buttons
• Self-contained dark UI — no dark mode override needed

QR scanner

QR code scanner viewfinder with animated scan line. Shows scanning and success states. Includes optional manual entry link.

• Square scan window: 65% parent width, max 280px
• 4 L-shaped corner marks (28px)
• Animated scan line moves top-to-bottom repeatedly
• Success state: green check icon replaces scan line, corners turn green
• Manual entry button with keyboard icon
• Self-contained dark UI — no dark mode override needed

Receipt view

Compound component displaying transfer receipts with status header, tear-line separator, key-value rows, and action footer.

Sub-components:

• ReceiptView — root container with status header
• ReceiptViewSection — grouped rows with optional title
• ReceiptViewRow — label + value pair using dl/dt/dd semantics
• ReceiptViewActions — footer with action buttons

Structure:

• Header: status icon + title + subtitle (date)
• Tear line: CSS radial-gradient scalloped edge
• Body: key-value rows in sections
• Footer: download/share buttons

Contact card

Tappable card displaying a contact's avatar, name, country flag, payment method, and optional detail. Used in the recipient selection grid on the Send start screen.

Visual structure

• Vertical flex layout, center-aligned
• Avatar at top with initials fallback
• Name, payment method with country flag, optional detail
• Hover: background and shadow transition

Design and accessibility

• Status badges use color + dot + text — accessible to color-blind users
• Amount input has visible label and aria-describedby for conversion rate
• Transaction rows are keyboard-focusable with enter to view details
• Touch targets are 48px minimum on all interactive elements
• Camera capture shutter button has descriptive aria-label per variant
• QR scanner scan-line animation respects prefers-reduced-motion: reduce
• Receipt view uses semantic article root, dl/dt/dd for key-value pairs
• Contact card uses <button> element for full keyboard accessibility