Add a TransactionProgressModal step timeline with per-step status and elapsed time

[1nonlypiece]

📌 Description

src/app/TransactionProgressModal.tsx shows transaction progress but as a single
status rather than a stepped timeline (build → sign → submit → confirm). Users
cannot tell which phase a slow transaction is stuck in.

This issue adds a per-step transaction timeline with elapsed-time indicators.

Goal: make multi-phase transactions transparent and reassuring.

🎯 Requirements and Context

• Define explicit phases and drive them from the transaction lifecycle the modal
  already observes.
• Each step shows pending/active/done/failed with elapsed time on the active step.
• Failed step keeps the timeline visible alongside retry/copy-hash affordances.
• Respect prefers-reduced-motion; announce phase changes via live region.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b feature/transaction-progress-timeline

2. Implement changes

• New component src/components/transaction/TransactionStepTimeline.tsx.
• Wire into src/app/TransactionProgressModal.tsx.
• Add src/components/transaction/TransactionStepTimeline.test.tsx (RTL with
  fake timers).
• Add docs/TRANSACTION_TIMELINE.md.

3. Test and commit

• Run the repo test suite: pnpm test
• Cover edge cases: failure mid-phase, fast completion, elapsed-time updates.

Example commit message

feat: stepped transaction progress timeline with elapsed time

✅ Guidelines

• Minimum 95% test coverage on new/changed lines.
• Clear, reviewer-friendly documentation.
• Timeframe: 96 hours.

🏷️ Labels

type-enhancement · area-frontend · MAYBE REWARDED · GRANTFOX OSS ·
OFFICIAL CAMPAIGN

💬 Community & Support

• Join the CommitLabs contributor Discord: https://discord.gg/WV7tdYkJk
• Please introduce yourself before you start so we can avoid duplicate work.

[yunus-dev-codecrafter]

@yunus-dev-codecrafter has applied to work on this issue as part of the Stellar Wave Program's 6th wave.

Hi! I've carefully reviewed the entire task description and fully understand the requirements and expected outcome.
I have experience working on similar tasks and I'm confident I can complete this within about an hour. I'd be happy to take ownership of this issue and submit a clean, well-tested solution promptly.
If it's available, please assign it to me. Thank you!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @yunus-dev-codecrafter to this issue.

[grantfox-oss]

🦊 GrantFox — @yunus-dev-codecrafter has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #703)
2. Your PR will be reviewed by the Commitlabs-Org maintainers

Good luck! Track your progress on GrantFox.

[drips-wave]

Congratulations, @yunus-dev-codecrafter! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on June 30, 2026.

🧑‍💻 @yunus-dev-codecrafter: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@yunus-dev-codecrafter's PR #902 was approved and merged by @1nonlypiece.

🏆 @yunus-dev-codecrafter: You earned 40 FoxPoints for this contribution! Your current tier: Builder (1,871 total points). Track your full progress on GrantFox.

👏 Great work, @yunus-dev-codecrafter! Keep contributing to Commitlabs-Org.

[drips-wave]

This issue has been completed by @yunus-dev-codecrafter as part of the Stellar Wave Program's 6th Wave 🥳

😎 @yunus-dev-codecrafter: You earned 100 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.