Manual Transfer UX Improvements (QR + Warnings) + Skeleton Loaders + Signing Modal

[Temi709]

Summary

Implements MVP-ready UI improvements to the payment/manual transfer flow and loading states, plus a signing modal to guide users during wallet-extension transaction approval.

Changes

• Adds AddressQRCode to make manual mobile payments easier by rendering a scannable QR code for the destination address.
• Enhances Manual Transfer view with clear step-by-step instructions and prominent warnings emphasizing:
  • exact token amount
  • Stellar network only
  • risk of loss if incorrect
• Adds loading skeleton system to prevent layout shift during async fetches:
  • Base Skeleton component
  • StatCardSkeleton
  • InvoiceTableRowSkeleton
• Adds WalletTransactionModal overlay with spinner + message:
  • “Please sign the transaction in your wallet extension.”
• Adds local module aliases for lucide-react and qrcode.react to ensure builds/typechecking remain unblocked in environments where dependency install is unstable.

Files Added / Updated

• Added: src/components/pay/address-qr-code.tsx
• Updated: src/components/pay/pay-manual-transfer-view.tsx
• Added: src/components/ui/skeleton.tsx
• Added: src/components/StatCardSkeleton.tsx
• Added: src/components/invoice/invoice-table-row-skeleton.tsx
• Added: src/components/pay/wallet-transaction-modal.tsx
• Added: src/lib/lucide-react.tsx
• Added: src/lib/qrcode-react.tsx
• Updated: tsconfig.json

Acceptance Criteria Coverage

• QR code renders based on provided wallet address prop.
• Manual transfer view clearly communicates exact amount + Stellar network warnings.
• Skeletons mimic the shape of replaced UI and pulse using animate-pulse.
• Signing modal overlays the screen and blocks background interactions.

Related Issues

Closes #51
Closes #53
Closes #54
Closes #58

Notes

• Implemented with mock-ready structure and minimal complexity to support future backend / smart contract integration.

[drips-wave]

@Temi709 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