Implement Offline Notice and Network Reconnection Recovery Banner

[Cjay-Cyber-2]

Description — what to implement and the why/impact.

Implement a persistent yet non-intrusive offline detection banner that alerts users when internet connectivity drops and automatically triggers data refetching and state synchronization upon reconnection.

Context & Requirements — background, constraints, design references, edge cases;

Network stability can vary, especially when interacting with Stellar RPC nodes and external APIs. Clear notification of offline status prevents user confusion during failed submissions.

Acceptance Criteria — a checklist ("- [ ] ...") of specific, testable conditions that define "done`.

• Create src/components/ui/OfflineBanner.tsx utilizing browser navigator.onLine events.
• Integrate React Query network status callbacks to refresh stale queries upon reconnection.
• Style using neobrutalist warning colors and bold borders.

Implementation Guidance — likely files/modules to touch and a suggested approach

Create the banner component and include it in the root layout file (src/app/layout.tsx).

Testing & Validation — how the contributor should prove it works

Simulate offline/online events in Vitest and verify banner visibility and query invalidation triggers.

Submission Guidelines — must open a PR that includes "Closes #"; assignment is required before starting.

---

Wave complexity: Medium

[JohnArayaE]

Hi! I’d be happy to take this issue.

I can implement the OfflineBanner.tsx component using navigator.onLine events, integrate React Query reconnection handling to refresh stale data, and add it to the root layout with the requested neobrutalist warning styling.

I’ll also cover the offline/online behavior in Vitest, including banner visibility and query invalidation on reconnection.

I can have the PR ready within 1 day and will make sure it includes Closes # as requested.

Please assign the issue to me before I start.

[ignabarrionuevo]

Hi! I'm a Systems Engineering student with experience in web development and programming. I work with HTML, CSS, JavaScript, React, Git/GitHub, C++, and Arduino. I'm looking for small projects where I can gain real-world development experience while delivering quality work. I'm particularly interested in frontend tasks, bug fixes, simple features, automation, and improving existing projects. I'm responsible, willing to learn, and committed to completing tasks properly and communicating clearly throughout the project.

[ZacLou]

Hi, I'd like to work on this issue.\n\nPlan:\n- Create src/components/ui/OfflineBanner.tsx that listens to window online/offline events and displays a non-intrusive banner using the project's neobrutalist warning color tokens.\n- Integrate React Query's online/offline network-mode callbacks to invalidate/refetch stale queries when the browser comes back online.\n- Include the banner in src/app/layout.tsx so it is present across all routes.\n- Add Vitest tests that simulate offline/online events and verify banner visibility plus query-invalidation behavior.\n\nETA: 1 day.\n\nStellar address: GDJF2F45C375PS4FVELH5XMA2N7V4G5BKMSPFOYZSQ2QYNYD32DHQGGM

[Ranjeet2063]

Hey folks,

I can tackle Implement Offline Notice and Network Reconnection Recovery Banner. Proposed implementation roadmap:

• Analysis: Inspect current behavior and edge cases in mergepay/mergepay-web
• Implementation: Deliver a clean, modular solution for Implement Offline Notice and Network Reconnection Recovery Banner adhering strictly to mergepay/mergepay-web's architecture.
• Testing: Cover implementation with automated unit tests for edge cases and core workflows.
• PR: Atomic commit with clean git hygiene and passing CI

Let me know if this approach looks good and please assign!