Skip to content

Implement optimistic UI updates for payment submissions #362

Description

@Kingsman-99

Overview

After submitting a payment the UI waits for on-chain confirmation before updating. Add optimistic updates so the progress bar and funded amount reflect the payment immediately while confirmation is pending.

Acceptance Criteria

  • On payment submit, immediately update the invoice's funded_amount in the React Query cache
  • Progress bar animates to the new value within 200 ms of form submission
  • "Pending" badge shown on the invoice card while confirmation is in-flight
  • On confirmation success: badge removed, cache refreshed with on-chain data
  • On confirmation failure: roll back the optimistic update; show error toast with "Try Again"
  • Optimistic update keyed by transaction hash — multiple in-flight payments handled independently
  • Works for both regular pay_invoice and delegated payments
  • Unit tests: mock confirmation success path, mock confirmation failure rollback

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions