Payment drawer state uses router.replace: the back button cannot close the drawer

[usmanimamu17-create]

Problem

PaymentsView (src/components/payments/payments-view.tsx) syncs the drawer with the URL by replacing history:

function openDrawer(id: string) {
  setSelectedPaymentId(id);
  router.replace(`/payments?paymentId=${id}`, { scroll: false });
}
function closeDrawer() {
  setSelectedPaymentId(null);
  router.replace("/payments", { scroll: false });
}

Using replace means opening the drawer does not create a history entry. Consequences:

• The browser back button cannot close the drawer: an operator who drilled into a payment and reaches for Back (muscle memory, or the browser's gesture) leaves the payments page entirely instead of closing the drawer — then Back again returns to the payments page with the drawer still open.
• The URL state is not navigable: ?paymentId=X cannot be shared in a way that opens the drawer and allows Back-to-list (replace destroys the list→detail history).
• The deliberate scroll: false and replace choices show intent, but the interaction model (drawer as a state overlay vs. a navigation) is undocumented and inconsistent with how the app treats other detail states.

Root cause

The drawer was modeled as URL state (replace) rather than a navigation step (push), with no exploration of the back-button semantics.

Why this is architecturally hard

1. Switching to router.push makes Back close the drawer naturally but adds history entries for open/close cycles (a full drawer session pollutes history) — the design must decide between push-with-popstate-handling and replace-with-a-visible-close-affordance.
2. The drawer's onClose (via the PaymentDetailDrawer component) must coordinate with the popstate event so the browser Back and the X button stay in sync — a state-sync pattern (listen for popstate when the drawer is open) that must be tested.
3. The same URL-sync choice will be needed by the outages detail drawer/work and the settings panels; the decision should be a documented convention, not per-view.

Proposed design

Either (a) use router.push for open and handle popstate to close on Back, or (b) keep replace and add an explicit, keyboard-accessible close affordance plus a "open in page" link; document the chosen convention and test the back-button behavior (Playwright or unit with mocked router).

Acceptance criteria

Service

• The back button either closes the drawer (push model) or the close path is unambiguous and discoverable (replace model).
• Drawer open state and URL stay in sync across Back/X navigation.

Tests

• A test covers Back-while-drawer-open behavior.
• Existing payments-view tests pass.

Out of scope

The payments React Query migration (tracked separately).

Getting started

npm test -- payments-view

Good first files to read: src/components/payments/payments-view.tsx, src/components/payments/payment-detail-drawer.tsx.

[ARAPHI20]

@ARAPHI20 has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

Hello Maintainer, I’ve reviewed the issue and understand the requirements. As a Web3 Developer and Data Analyst, I have the right skills to handle this effectively and deliver a clean solution that meets the acceptance criteria. I’m ready to start immediately. Kindly assign it to me.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ARAPHI20 to this issue.

[AbdulSnk]

@AbdulSnk has applied to work on this issue as part of the Stellar Wave Program's 8th wave.

I would like to apply for this issue.

Proposed Approach:

Router Navigation Refactoring: Replace router.replace with router.push (or manage state via controlled URL params/browser history) when opening the payment drawer so that opening the drawer creates a distinct history entry.

Back Button Handling: Ensure browser and hardware back button actions cleanly dismiss the drawer and pop the history state instead of redirecting the user out of the current page context.

State Synchronization: Bind drawer visibility state listeners to history popstate events so closing via back button and closing via UI trigger (X button/overlay click) stay in sync.

Testing & Verification: Add component and integration tests verifying history state management, correct back button pop behavior, and smooth drawer toggle transitions.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @AbdulSnk to this issue.

[drips-wave]

Congratulations, @AbdulSnk! 🎉 Your application was accepted by the repo's maintainers, and the issue is due on August 31, 2026.

🧑‍💻 @AbdulSnk: Please resolve the issue such that the repo's maintainers have enough time to review your contribution before the due date. You'll earn Points for completing the issue on-time, which will make you eligible for a share of the Stellar Wave Program's reward pool.

Warning

When opening a PR, please link it to this issue to ensure it gets tracked accurately. Points are awarded when this issue is marked as completed by the maintainer.

🤠 Repo maintainers: Please keep an eye on the contributor's progress and review their work before the due date. You can manage this issue, including adjusting its complexity and points, here.

🌊 Happy Wave 🌊

[drips-wave]

This issue has been completed by @AbdulSnk as part of the Stellar Wave Program's 8th Wave 🥳

😎 @AbdulSnk: You earned 200 Points for completing this issue! After the current Wave ends, you'll be eligible for a percentage of the Wave's reward pool based on the percentage of total points you've earned. Learn more here. You can also Leave a review to share your experience working on this issue.

🧑‍💻 Repo maintainers: How'd the contributor do? Leave a review to share your experience working with them.