Skip to content

feat(bond): add transaction-pending UX to create and withdraw actions#469

Open
samjay8 wants to merge 1 commit into
CredenceOrg:mainfrom
samjay8:feat/bond-pending-states
Open

feat(bond): add transaction-pending UX to create and withdraw actions#469
samjay8 wants to merge 1 commit into
CredenceOrg:mainfrom
samjay8:feat/bond-pending-states

Conversation

@samjay8

@samjay8 samjay8 commented Jun 29, 2026

Copy link
Copy Markdown

Closes #443

Summary

Buttons enter aria-busy loading, the confirm dialog locks during submit, and an aria-live region announces progress - preventing duplicate submissions and giving screen-reader users real-time feedback during the async Stellar transaction window.

Changes

src/pages/Bond.tsx

  • Added isPendingCreate and isPendingWithdraw local state
  • submitTransaction() helper models the async gap (mock delay) until the real Stellar API lands
  • Create Bond Button wires isLoading={isPendingCreate}; button disabled during flight
  • handleCreateBond and confirmWithdraw are now async; both guard against double-submit via isPending flag checks
  • aria-live="polite" sr-only region announces "Submitting transaction." on start and clears on success/failure
  • Error path shows a danger toast and resets pending state

src/components/ConfirmDialog.tsx

  • Added isSubmitting?: boolean prop
  • When isSubmitting: confirm button enters isLoading state, cancel button disabled, backdrop-click blocked to prevent inconsistent mid-submit dismissal

src/pages/Bond.test.tsx

  • RTL tests for pending-state aria-busy, aria-live region text, double-submit prevention, post-completion reset, and navigate-on-success
  • Uses vi.useFakeTimers() + advanceTimers to synchronously drive the mock delay

Test plan

  • npm run lint passes
  • npm run build passes
  • npm run test passes (new Bond.test.tsx pending-state coverage)

Buttons enter aria-busy loading, the confirm dialog locks during submit, and an
aria-live region announces progress, preventing duplicate submissions.

- Introduce isPendingCreate / isPendingWithdraw local state in Bond.tsx
- submitTransaction() mock wraps the async gap until the real Stellar API lands
- Create bond Button wires isLoading={isPendingCreate}; disabled during flight
- ConfirmDialog gains isSubmitting prop: confirm button enters isLoading, cancel
  disabled, backdrop-click blocked to prevent inconsistent mid-submit dismissal
- aria-live="polite" sr-only region announces "Submitting transaction…" on start
  and clears on success/failure so screen readers receive progress feedback
- Both handlers guard against double-submit via isPending checks
- Add RTL tests: aria-busy during flight, live-region text, double-submit
  prevention, post-completion reset, and navigate-on-success

Closes CredenceOrg#443
@drips-wave

drips-wave Bot commented Jun 29, 2026

Copy link
Copy Markdown

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a transaction-pending overlay/spinner state to the Bond create and withdraw actions

1 participant