Add optimistic UI updates for executeSettlement/cancelSettlement in SettlementsPanel

[Jagadeeshftw]

📌 Description

SettlementsPanel (src/components/SettlementsPanel.tsx) calls executeSettlement/cancelSettlement (src/lib/settlementsApi.ts) and, per the README, reports success/failure via a toast. It's unclear whether the table reflects the new status immediately or waits for a full refetch, which on a slower connection leaves the row showing a stale "pending" status right after the user confirms the action.

🧩 Requirements and context

• On execute/cancel, optimistically flip the affected row's status locally before the network response returns.
• On failure, roll back to the previous status and show an error toast (the existing failure-toast behavior).
• On success, reconcile with the server response in case any other field (e.g. fee) changed.

🛠️ Suggested execution

• Update SettlementsPanel.tsx's state handling around the executeSettlement/cancelSettlement calls to apply an optimistic update with rollback.
• Extend src/components/SettlementsPanel.test.tsx with success and failure scenarios asserting the optimistic update and rollback respectively.
• Apply the same pattern to SettlementDetail.tsx's own execute/cancel actions if it duplicates this logic.

✅ Acceptance criteria

• Row status updates immediately on confirm, before the network response.
• A failed request rolls back the optimistic update and shows an error toast.
• A successful request reconciles with the server's actual response.

🔒 Security notes

No new attack surface; purely a perceived-latency UX improvement backed by the same authoritative server response.

📋 Guidelines

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

[Glam26]

Hi! I'd like to work on this issue.

This is a nice UX improvement that makes settlement actions feel much more responsive while still treating the server as the source of truth.

My approach would be:

• Update SettlementsPanel.tsx to use optimistic state updates:

  • Save the current settlement state before issuing the request.
  • Immediately update the affected row's status locally when the user confirms an execute/cancel action.
  • Keep the existing loading/disabled behavior to prevent duplicate submissions.

• Handle the request outcome:

  • Success: replace the optimistic row with the server response so any additional changes (fees, timestamps, metadata, etc.) are reflected accurately.
  • Failure: restore the previous row state and continue showing the existing error toast.

• Review SettlementDetail.tsx:

  • If it contains similar execute/cancel logic, apply the same optimistic-update pattern there so behavior is consistent throughout the application.
  • If the logic is duplicated, I'll look for an opportunity to share the implementation without introducing unnecessary abstraction.

• Expand the test suite in SettlementsPanel.test.tsx to cover:

  • Optimistic status update immediately after confirmation.
  • Successful reconciliation with the server response.
  • Failed request rollback to the previous state.
  • Existing error toast behavior remaining intact.

The final PR will demonstrate that:

• The row status changes immediately before the network request completes.
• Failed requests restore the original status and display the error toast.
• Successful requests reconcile with the server response instead of leaving optimistic placeholder data.

I'd be happy to work on this issue. It's a focused improvement with clear user-facing benefits and good test coverage opportunities.

[Primex-hub]

I would love to solve this issue and I can submit within 24hrs

[DARAKU17]

I have a lot of experience with Python, JS and Rust. I can handle this issue

[grantfox-oss]

🦊 GrantFox — @Glam26 has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #76)
2. Your PR will be reviewed by the AnchorNet-Org maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign | FWC26 campaign!

@Glam26's PR #417 was approved and merged by @Jagadeeshftw.

🏆 @Glam26: You earned 40 FoxPoints for this contribution! Your current tier: Builder (1,527 total points). Track your full progress on GrantFox.

👏 Great work, @Glam26! Keep contributing to AnchorNet-Org.