Add transaction-state persistence across reloads to TransactionProgressModal

[1nonlypiece]

📌 Description

src/app/TransactionProgressModal.tsx loses all progress if the page reloads during a transaction, leaving users unsure whether it completed.

This issue persists transaction progress so a reload re-opens the modal at the correct step with the existing hash/copy affordances.

🎯 Requirements and Context

This is a feature / enhancement task for the CommitLabs frontend (Next.js + TypeScript). It must be implemented cleanly, fully typed, accessible, and well tested — and must not regress existing behavior.

• Persist the transaction's steps/status/hash to storage and rehydrate on mount.
• Re-open the modal at the correct step after reload; preserve copy-hash and retry affordances.
• Clear persisted state on terminal states (success/failed-acknowledged).
• No-op safely if storage is unavailable.

🛠️ Suggested Execution

1. Fork the repo and create a branch

git checkout -b feature/transaction-modal-persist

2. Implement the change

• Primary files to add or modify:
  • src/app/TransactionProgressModal.tsx — persistence + rehydrate.
  • src/components/transaction/TransactionStepTimeline.tsx — restore steps.
  • src/app/TransactionProgressModal.tsx — terminal-state cleanup.
• Add focused tests in src/app/TransactionModalPersist.test.tsx using Jest / Vitest + React Testing Library (happy-dom), covering rendering, interaction, and the edge cases below.
• Add documentation in docs/TRANSACTION_PERSIST.md describing the feature, props/API, accessibility behavior, and a usage example; cross-link it from the relevant README/docs.
• Keep the diff small and reviewer-friendly; reuse existing primitives, hooks, and the typed API client instead of duplicating logic.

3. Cover edge cases

• reload re-opens at correct step
• hash preserved
• terminal state clears storage
• storage-unavailable no-op

4. Test and commit

• Run the suite (e.g. pnpm test / pnpm vitest run) and ensure new lines are covered.
• Verify keyboard navigation, focus handling, and prefers-reduced-motion where relevant.

Example commit message

feat: persist transaction progress across reloads

✅ Guidelines

• Minimum 95% test coverage on the new/changed lines.
• Clear, reviewer-friendly documentation (props/API + usage example + accessibility notes).
• No regressions to existing components, routes, or tests.
• Fully typed (no any), accessible (labels, roles, live regions where relevant).
• Timeframe: 96 hours.

🏷️ Labels

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

💬 Community & Support

• Join the CommitLabs contributor Discord to coordinate, ask questions, and get unblocked fast: https://discord.gg/WV7tdYkJk
• Please introduce yourself in the channel before you start so we can avoid duplicate work, pair you with a reviewer, and get your PR merged quickly.
• Maintainers actively triage this channel and aim for fast, clear, respectful reviews — reach out any time you're blocked.

[greatest0fallt1me]

Hello Maintainers 👋,
I’m interested in picking up this issue and contributing to the project.
I have solid experience working across both frontend and blockchain layers, including building user interfaces with Next.js and developing Stellar smart contracts using Rust (Soroban). I’m familiar with translating Figma designs into pixel-accurate UIs, handling wallet integrations, and writing efficient, well-tested contract logic.
I focus on writing clean, maintainable code, following repository standards, and keeping communication transparent throughout the development process. I can start immediately and complete the work within the expected timeframe.
Excited to collaborate and add value to the project 🚀
Thank you!

[grantfox-oss]

🦊 GrantFox — @greatest0fallt1me 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 #950)
2. Your PR will be reviewed by the Commitlabs-Org maintainers

Good luck! Track your progress on GrantFox.