feat: E2E tests and UX improvements (#900-#903)

[lolandriley-wq]

Summary

This PR addresses 4 frontend issues with end-to-end testing and user experience improvements:

Commits

1. Add end-to-end Playwright tests for core send money flow #902 - E2E Tests for Send Money Flow

   • Added Playwright testing framework to frontend
   • Created E2E tests covering:
     • Happy path: wallet connect → amount entry → corridor selection → confirmation
     • Error state: insufficient balance detection
     • Error state: rate limit detection
   • Tests run on Chrome and Firefox in CI
   • Added playwright.config.ts with proper configuration

2. Add React Error Boundary recovery UI #903 - Error Boundary Recovery UI

   • Enhanced ErrorBoundary component with recovery options
   • Added 'Report Error' button with:
     • Clipboard copy of error details for support submission
     • OTel trace integration for error tracking
     • Graceful fallback to prompt() if clipboard unavailable
   • Improved error details formatting
   • Enhanced styling with tertiary button

3. Add corridor fee comparison table #900 - Corridor Fee Comparison Table

   • Created CorridorComparison.tsx component
   • Features:
     • Fetch and display all active corridors from /api/corridors
     • Sort by effective fee percentage
     • Filter by source/destination country
     • Display FX rates and delivery times
     • Responsive table design
     • onSelect callback for corridor selection

4. Add loading skeletons for async data #901 - Loading Skeleton States

   • Created SkeletonLoader.tsx with reusable components:
     • SkeletonLine for text content
     • SkeletonBlock for rectangular areas
     • SkeletonTable for tabular data
     • SkeletonList for list layouts
   • Added shimmer animation
   • Applied skeletons to:
     • RemittanceList
     • TransactionHistory
     • CorridorAnalytics
   • Smooth loading experience with no blank content areas

Acceptance Criteria Met

• ✅ E2E tests cover happy path and 2 error states; run in CI
• ✅ Error boundary shows helpful UI with retry and report buttons
• ✅ Corridor comparison table displays all corridors with filtering
• ✅ Loading skeletons shown instead of blank content
• ✅ All 4 commits maintain backward compatibility
• ✅ No breaking changes to existing components

Testing

Run locally:

# E2E tests
npm run e2e

# UI tests
npm run test

# Build
npm run build

Closes #901
Closes #902
Closes #903
Closes #900

[vercel]

@lolandriley-wq is attempting to deploy a commit to the Harold's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@lolandriley-wq 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