design: tx receipt share as image

[lockoabosede8-byte]

Closes #481

Summary

Introduces an enhanced TransactionReceiptShare component that generates compact, branded receipt images for sharing via chat or social media. The component provides three aspect ratios, a privacy toggle, clipboard copy with fallback, and full WCAG 2.1 AA accessibility.

Key Changes

Component (TransactionReceiptShare.tsx)

• Aspect ratio selector — compact card, square (1:1), wide banner (16:9) with visual toggle buttons and aria-pressed state
• Hide amount privacy toggle — masks the amount with •••••• in the generated image; includes a visible "Hidden for privacy" badge on the card
• Copy-image to clipboard — uses ClipboardItem API with PNG blob; falls back gracefully to file download when clipboard is unavailable or blocked
• Download as PNG — 2x retina resolution via html2canvas; sanitized filename from transaction ID
• Accessible toast notifications — replaces window.alert() with a styled toast (role="status", aria-live="polite", auto-dismiss at 4s, manual dismiss button); supports success/error/info variants
• Sensitive field protection — sender and recipient wallet addresses use user-select: none + data-sensitive="true" with shield icon indicators and descriptive aria-label
• Proper async flow control — canvas.toBlob promisified to ensure isCapturing state correctly gates buttons until clipboard/download completes
• Toast timer cleanup — useEffect cleanup prevents state updates on unmounted component

Styles (TransactionReceiptShare.css)

• Three receipt card variants: .tx-receipt-card--compact, --square (1:1), --wide (16:9)
• Toast animations with prefers-reduced-motion override
• RTL support via CSS logical properties (inset-inline-end, text-align: start/end)
• forced-colors: active support (Windows High Contrast)
• Print styles (@media print) with A4/US Letter support, monochrome optimization
• Responsive: control bar stacks vertically on narrow viewports; button text hidden below 380px
• Scoped .tx-sr-only utility class

Tests (TransactionReceiptShare.test.tsx)

• 65 tests, all passing
• Coverage: 98.85% statements, 98.18% branches, 100% functions, 100% lines — exceeds 95% minimum
• Tests cover: rendering, status variants, hide-amount toggle, aspect ratio switching, download (success, error, null canvas), copy-image (clipboard success, clipboard fallback, null canvas, null blob, html2canvas error, missing ClipboardItem), toast lifecycle (auto-dismiss, manual dismiss, info variant, unmount cleanup), sensitive fields, accessibility (6 axe audits across states), RTL rendering, edge cases (long strings, empty memo, all statuses), and 5 snapshots

Documentation (docs/uiux/tx-receipt-share-as-image.md)

• Comprehensive design doc covering: purpose, features, component API, usage example, edge cases, file structure, dependencies, testing, and before/after comparison

Config (vite.config.ts)

• Added TransactionReceiptShare.tsx to coverage include array
• Added 95% threshold enforcement for all four metrics

Accessibility (WCAG 2.1 AA)

Feature	Implementation
Roles	toolbar, region, status, group
Live regions	aria-live="polite" on toast and hidden SR-only region
State	aria-pressed on toggles, aria-busy during capture
Labels	All buttons have descriptive aria-label
Keyboard	All controls are <button> elements with visible :focus-visible rings
Axe	Zero violations across 6 audits (default, hidden amount, square, wide, toast visible, RTL)
Forced colors	Borders and focus rings use system colors
Reduced motion	Toast animation and transitions disabled

Responsive Design

• Controls stack vertically below 480px
• Button text hidden below 380px (icons remain)
• Aspect ratio constraints relax on mobile
• Card padding reduces on narrow viewports

Edge Cases Covered

Scenario	Handling
Missing issuer logo	Renders issuer name only
Very long wallet addresses / TX IDs	word-break: break-all with max-width: 60%
Empty memo	Memo row not rendered
Clipboard API unavailable	Falls back to file download with info toast
html2canvas returns null	Error toast displayed, isCapturing reset
canvas.toBlob returns null	Error toast displayed, isCapturing reset
html2canvas throws	Error toast displayed per action (download/copy)
RTL text direction	Logical CSS properties handle layout inversion
Component unmounts with active toast	useEffect cleanup clears timer
Print (A4 / US Letter)	Controls hidden, card flattened, content preserved

Before / After

Before

• Single compact layout only
• window.alert() for feedback
• No aspect ratio options
• No RTL support
• No forced-colors support
• No toast notification system
• ~18 tests

After

• Three aspect ratios with visual selector
• Accessible toast system with success/error/info variants and auto-dismiss
• Full RTL, forced-colors, and reduced-motion support
• Proper async flow control (no premature button re-enable)
• 65 tests with 98%+ coverage across all metrics
• Comprehensive design documentation

Testing

npm run lint          # 0 errors
npx vitest run ...TransactionReceiptShare.test.tsx  # 65 tests pass
npx vitest run ...TransactionReceiptShare.test.tsx --coverage  # 98.85% / 98.18% / 100% / 100%
npx tsc --noEmit      # No errors in TransactionReceiptShare files

[drips-wave]

@lockoabosede8-byte Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits