[UI/UX] Implement Stellar Transaction Receipt / Success Screens

[Queenode]

🟢 Priority: Medium
Difficulty: Medium
Estimated Effort: 2-3 days
Relevant Files: src/components/payments/ReceiptModal.tsx
Labels: enhancement, priority:medium, ui

Requirements

1. High-Fidelity Success UI

   • After a successful contribution or payout, do not just show a small toast. Show a full-screen or large modal success state with a celebratory animation (e.g., Lottie confetti).
   • Display a highly polished "Receipt" card that shows the exact amount, timestamp, Network Fee (XLM), and the Stellar Transaction Hash with a link to the explorer.

2. Screenshot Optimization

   • Ensure the Receipt card is designed in a way that looks good when a user takes a screenshot on their phone to share with friends.

[OluRemiFour]

Hi Maintainer,
Interested in working on this issue. I'll implement the requested changes and ensure everything is properly tested before submission.

[LeoRicch]

I have experience building polished React/TypeScript UI components with a strong focus on user experience, responsive design, and payment flows. I've implemented modal-based success states, transaction receipts, and reusable UI components that balance aesthetics with maintainability.

For this enhancement, I would replace the existing toast with a dedicated success modal that includes a celebratory animation (such as Lottie confetti) and a premium receipt layout. The receipt would clearly display the transaction amount, timestamp, Stellar network fee (XLM), and transaction hash with a direct link to the Stellar explorer. I would also optimize the layout for mobile screenshots by using clean spacing, strong visual hierarchy, and a share-friendly card design. The implementation would prioritize accessibility, responsiveness, and reusable components while ensuring transaction data is presented accurately and consistently.