Skip to content

feat: query devtools, error boundary, real-time P&L polling, and funding countdown#100

Merged
IbrahimIjai merged 1 commit into
SO4-Markets:mainfrom
ijeoma270:feat/issues-63-64-65-66
May 27, 2026
Merged

feat: query devtools, error boundary, real-time P&L polling, and funding countdown#100
IbrahimIjai merged 1 commit into
SO4-Markets:mainfrom
ijeoma270:feat/issues-63-64-65-66

Conversation

@ijeoma270
Copy link
Copy Markdown
Contributor

Fixes #63
Fixes #64
Fixes #65
Fixes #66

What changed

#63 — TanStack Query DevTools in dev mode

  • Added @tanstack/react-query-devtools to devDependencies in apps/web/package.json
  • QueryProvider conditionally renders <ReactQueryDevtools initialIsOpen={false} /> behind import.meta.env.DEV; Vite tree-shakes it from production bundles entirely

#64 — Global error boundary + query error fallback UI

  • QueryProvider now creates a QueryCache with an onError callback: logs to console.error in dev, fires a red Sonner toast with parseSorobanError() message for user-visible failures; auth-related errors (401/403/unauthorized/unauthenticated) are silently skipped
  • New ErrorPage component (app/error-page.tsx) — renders a centred "Something went wrong" message with a Reload button
  • ErrorBoundary class component added to AppProviders — wraps the whole tree, calls getDerivedStateFromError / componentDidCatch, renders <ErrorPage onReset={...} /> on failure and resets state when the user clicks Reload

#65 — Real-time P&L polling for open positions

  • usePositions: refetchInterval lowered from 15 0005 000 ms so P&L, liquidation price, and funding debt update roughly every 5 s
  • Added refetchIntervalInBackground: false — network requests pause automatically when the tab is hidden; disconnecting the wallet already stops polling via enabled: !!account

#66 — Live funding countdown timer in PositionsList

  • New useFundingRate hook (hooks/useFundingRate.ts) returns { ratePerHour, nextEpochTs } computed from the standard 8-hour funding epoch schedule; refreshes every 60 s
  • Added fundingRate key to the central queryKeys factory
  • useFundingCountdown (private hook inside PositionsList) runs a setInterval every second, diffs Date.now() against nextEpochTs, and formats remaining time as "Xh Xm" or "Xm"; the interval is cleaned up via the useEffect return
  • PositionsList gains a Next Funding column visible on all open-position rows

How to test

#63 — run bun dev, open the app, a floating ⚛ button appears in the bottom-right corner in dev mode.

#64 — throw inside any child component (throw new Error("test")); the app renders the reload page. For query errors, mock a failing query; a red toast appears within seconds.

#65 — open the Trade page with a connected wallet and watch the P&L column refresh roughly every 5 s. Switch to another browser tab and confirm no network requests fire (DevTools → Network).

#66 — open the Trade page with positions loaded; the Next Funding column counts down in real-time (updates every second). Verify it resets after each 8-hour epoch.

Issue SO4-Markets#63 — TanStack Query DevTools in dev mode
- Add @tanstack/react-query-devtools to devDependencies
- Render <ReactQueryDevtools initialIsOpen={false} /> inside QueryProvider
  guarded by import.meta.env.DEV; excluded from production bundle

Issue SO4-Markets#64 — Global error boundary + query error fallback UI
- QueryProvider: add QueryCache onError handler that logs to console in
  dev and fires a Sonner toast via parseSorobanError(); auth errors
  (401/403/unauthorized) are silently skipped
- New ErrorPage component (app/error-page.tsx) with a "Reload" button
- ErrorBoundary class component wraps AppProviders; renders ErrorPage on
  unhandled render errors, resets state on button click

Issue SO4-Markets#65 — Real-time P&L polling for open positions
- usePositions: refetchInterval 15 000 → 5 000 ms for near-real-time
  P&L / liquidation price updates
- Add refetchIntervalInBackground: false so network requests pause when
  the browser tab is backgrounded; wallet disconnect already stops
  polling via enabled: !!account

Issue SO4-Markets#66 — Live funding countdown timer in PositionsList
- New useFundingRate hook returns nextEpochTs (next 8-hour epoch) and
  ratePerHour; adds fundingRate query key to the central key factory
- useFundingCountdown (inside PositionsList) drives a setInterval tick
  every second and formats the remaining time as "Xh Xm"
- PositionsList: new "Next Funding" column shows the shared countdown
  for all open-position rows

Closes SO4-Markets#63
Closes SO4-Markets#64
Closes SO4-Markets#65
Closes SO4-Markets#66
@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented May 27, 2026

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

@IbrahimIjai IbrahimIjai merged commit 4d6fcc0 into SO4-Markets:main May 27, 2026
1 check failed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

2 participants