[dimka90]

Issue 43: Show realtime connection health and data freshness across the app

Problem: The /markets filter bar's pulsing green dot is decoration — it pulses whether the socket is connected, the Stellar RPC is down, or the backend has been asleep. SourceTag is defined twice inline, carries no ledger or timestamp, and every on-chain read discards latestLedger, so React Query's wall-clock dataUpdatedAt is the only freshness signal. The buy button never refuses a stale read, and nothing in the navbar reports the real state of the three data paths.

Resolution:

• Health model (lib/stellar/health.ts): probeRpc (ok / degraded / down, latest ledger + age, degraded when the ledger has not advanced for >30 s) and probeBackend (GET /health, outside /api/v1, 8 s timeout, envelope-checked). createHealthMonitor runs both on an interval with per-probe exponential backoff, resets on success, pauses while document.hidden, and probes immediately on visibilitychange→visible and online.
• Provider + hook (lib/health/HealthProvider.tsx, mounted in app/layout.tsx inside WalletProvider): combines the two probes with the realtime socket state (useRealtimeStatus() added to lib/realtime/RealtimeProvider.tsx, observing connect / disconnect / connect_error / reconnect_attempt) and exposes useHealth() → { socket, rpc, backend, overall, retry }, rendering a deterministic checking state on the server so hydration matches.
• Navbar indicator (components/layout/HealthIndicator.tsx): button left of the bell with a coloured dot and a text label (Live / Degraded / Offline / Checking), aria-expanded, Escape-closable popover listing Socket, Stellar RPC and Backend API with ledger and last-checked time plus "Retry now".
• Shared SourceTag (components/ui/source-tag.tsx): one implementation replacing both inline copies in app/markets/page.tsx and app/markets/quick-view/page.tsx; shows ledger N · 12 s ago in the tooltip and to screen readers, re-renders at most every 5 s through a single shared ticker (lib/health/useTicker.ts), and switches to a stale variant past staleAfterSec (default 60).
• Ledger stamping: OnChainMarketView now carries ledger from simulatedWithLedger, so chain-sourced tags say which ledger they came from rather than only client wall-clock time.
• Removed decoration: the pulsing dot in the /markets FilterBar is gone; NETWORK_LABEL renders as plain text.
• Staleness guard: quick-view's handleBuy refuses to build a transaction while rpc.status === "down", and refreshes the market read before signing when it is older than 60 s.

Verification: npm run typecheck clean · npm run lint 0 errors (35 pre-existing warnings) · npm test 194 passed / 26 files, including the 13 new cases in lib/stellar/__tests__/health.test.ts (probe ok / degraded / down, backend envelope + timeout, monitor backoff + reset, hidden-tab pause + visibility probe, isStale).

Excluded from this slice (documented, not silently dropped): the copy-trade staleness guard, the optional useChainFreshness(queryKey) accessor, and the docs/architecture.md / docs/manual-test.md sections called for in the issue's step 9. Health probing is status-only — it does not back data queries (issue #87) and adds no offline cache (#123) or RPC failover (#120).

Closes #43
Closes #44
Closes #45
Closes #46

[vercel]

@Yilkash is attempting to deploy a commit to the Marvel's projects Team on Vercel.

A member of the Team first needs to authorize it.

[drips-wave]

@dimka90 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