fix: prevent duplicate transaction submissions with idempotency guard

[Mathew2k-hash]

fix: prevent duplicate transaction submissions with idempotency guard

───────────────────────────────────────────────────────────────────────────────────────────────

Problem

Double-clicks, rapid retries, and network ambiguity could submit the same wallet transaction
more than once. There was no in-flight guard, no idempotency identifier, and no way to
reconcile stale pending submissions against the server.

───────────────────────────────────────────────────────────────────────────────────────────────

What changed

src/utils/idempotencyKey.ts (new)

Derives a deterministic idempotency key from the canonical payment payload (sorted keys,
trimmed strings, fixed-precision amounts, case-folded asset). Same payload → same digest.
Different payload → different digest. Uses async SHA-256 via Web Crypto with a synchronous
FNV-32a fallback for environments where Web Crypto is unavailable.

src/hooks/useTransactions.ts

Three layered guards added via a new submitPayment() method:

┌────────────────┬───────────────────────┬─────────────────────────────────────────────────┐
│ Layer │ Mechanism │ Prevents │
├────────────────┼───────────────────────┼─────────────────────────────────────────────────┤
│ Mutex │ submittingRef boolean │ Concurrent calls racing through async JS │
├────────────────┼───────────────────────┼─────────────────────────────────────────────────┤
│ Payload dedup │ FNV-32a digest │ Same destination/amount/asset/memo in rapid │
│ │ comparison │ separate calls │
├────────────────┼───────────────────────┼─────────────────────────────────────────────────┤
│ Reconciliation │ reconcilePendingSubmi │ Stale in-flight records blocking retries after │
│ │ ssions() │ a network timeout │
└────────────────┴───────────────────────┴─────────────────────────────────────────────────┘

The generated Idempotency-Key is forwarded to the sender callback so it can be attached as an
HTTP header end-to-end. Guards are always released in finally so a failed submission never
permanently blocks retry.

src/components/Wallet/TransactionSigning.tsx

• Submit button disabled and shows a spinner while a submission is in-flight
• All form fields and the fee selector disabled during in-flight to prevent mutation
  mid-request
• lastSubmittedKeyRef suppresses re-fire when the user clicks submit again with identical form
  values before the response arrives
• ARIA annotations added: aria-busy, role="alert" on errors, role="status" on success,
  role="radiogroup" on fee selector, explicit htmlFor on every input — fully keyboard and
  screen-reader accessible

src/lib/api/transactionAPI.ts

Added TransactionRequestOptions interface and buildHeaders() helper. All mutating endpoints
(estimateTransactionCost, retryFailedTransaction, cancelPendingTransaction) now accept an
optional idempotencyKey and forward it as the Idempotency-Key HTTP header.

src/hooks/useWallet.ts / src/lib/wallet/walletService.ts / src/pages/wallet.tsx

sendPayment signature extended with an optional idempotencyKey argument threaded all the way
through. Fully backward-compatible — callers that don't pass the key continue to work
unchanged.

Bug fix

Corrected a pre-existing missing closing brace in walletService.importBackup that caused a
TypeScript parse error.

───────────────────────────────────────────────────────────────────────────────────────────────

Tests

New regression suite: src/hooks/useTransactions.idempotency.test.ts — 26 tests, 26 passing

Suites cover:

• Async SHA-256 key generation (same payload → same digest, different payload → different
  digest)
• Sync FNV-32a fallback
• extractDigest / samePayload helpers including malformed-key edge cases
• In-flight mutex (rapid double-click characterisation test)
• Same-payload dedup
• Failure releases the guard for retry
• reconcilePendingSubmissions with matching and non-matching server responses
• Boundary cases: empty memo/fee, large amounts, unicode memo, whitespace trimming

───────────────────────────────────────────────────────────────────────────────────────────────

Checklist

• No real pet, medical, contact, wallet, or credential data in fixtures
• TypeScript strict — zero errors in changed files (tsc --noEmit)
• Backward-compatible — no breaking changes to existing hook or component APIs
• Accessible — keyboard navigable, ARIA roles/labels on all interactive elements
• No unrelated refactors included
  closes [Frontend] Add transaction idempotency and duplicate-submit protection #859

[drips-wave]

@Mathew2k-hash 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