"[UI/UX Design] Design TransactionProgressModal retry and copy-hash affordances for failed transactions"

[1nonlypiece]

[UI/UX Design] Design TransactionProgressModal retry and copy-hash affordances for failed transactions

Description

src/app/TransactionProgressModal.tsx shows pending and result states but lacks a defined failure recovery layout. Design a failure state with a retry CTA, a copy-transaction-hash control, and a link to the network error page at src/app/network-error/page.tsx, so users can recover or share diagnostics after a Stellar submission fails.

Requirements and context

• Must be secure, tested, and documented
• Should be efficient and easy to review
• Reuse the dark modal surface and button hierarchy from existing modals
• Provide an accessible copy-to-clipboard control with success feedback
• Differentiate retryable failures (RPC timeout) from terminal failures
• Announce status transitions via aria-live

Suggested execution

• Fork the repo and create a branch
• git checkout -b feature/tx-progress-failure-recovery
• Implement changes
  • Add the failure branch UI to src/app/TransactionProgressModal.tsx
  • Add render tests for retry and copy behaviors under tests/
  • Document the pattern in docs/error-handling.md
  • Validate clipboard fallback and focus return on close
• Test and commit
  • Run tests, cover edge cases
  • Include test output and notes

Example commit message

feat: add retry and copy-hash recovery to TransactionProgressModal failure state

Guidelines

• Minimum 95 percent test coverage
• Clear documentation
• Timeframe: 96 hours