Skip to content

feat(hooks): add useOnlineStatus and offline banner that gates tx actions#460

Open
Nuel-ship-it wants to merge 1 commit into
CredenceOrg:mainfrom
Nuel-ship-it:feat/use-online-status
Open

feat(hooks): add useOnlineStatus and offline banner that gates tx actions#460
Nuel-ship-it wants to merge 1 commit into
CredenceOrg:mainfrom
Nuel-ship-it:feat/use-online-status

Conversation

@Nuel-ship-it

Copy link
Copy Markdown

Summary

Closes #447

Adds browser connectivity detection so the app proactively warns the user when offline and disables transaction actions instead of silently failing.

Changes

src/hooks/useOnlineStatus.ts (new)

  • Returns boolean initialised from navigator.onLine
  • Subscribes to online/offline window events with cleanup on unmount
  • Guards for environments without navigator/window (defaults to true)

src/components/Layout.tsx

  • Renders an offline Banner (warning severity, role="alert") inside <main> when offline
  • Banner dismisses automatically on reconnect — announced once per transition

src/pages/Bond.tsx

  • Disables Create bond button and AmountInput when offline
  • Passes isOnline to BondRow to disable each Withdraw button
  • Inline offline banner with id="offline-banner" for aria-describedby

src/pages/TrustScore.tsx

  • Disables Look up score button when offline
  • Inline offline banner with id="ts-offline-banner" for aria-describedby

Tests

  • src/hooks/useOnlineStatus.test.ts — 6 Vitest unit tests (init, transitions, cleanup)
  • src/pages/offline.test.tsx — 10 RTL integration tests (Layout banner, Bond/TrustScore buttons)

Test results

Baseline (main): 119 failed / 782 passed
This branch: 112 failed / 789 passed — +16 new passing tests, no regressions

Acceptance criteria

Requirement Status
useOnlineStatus with cleanup + no-window guard
Offline banner in Layout (warning, aria-live)
Bond create/withdraw actions disabled offline
Trust Score lookup disabled offline
Banner dismissed on reconnect
Accessible: announced once, aria-describedby on disabled buttons
Vitest + RTL coverage ≥ 90% of new code ✅ 16 tests
No new lint/build errors

…actions

Subscribes to online/offline events, shows a warning banner in Layout, and
disables Bond create/withdraw and Trust Score lookup buttons while disconnected.

- src/hooks/useOnlineStatus.ts: hook with navigator.onLine init, event listeners,
  window/navigator guard for non-browser environments, cleanup on unmount
- src/components/Layout.tsx: offline Banner (warning, aria-live via role=alert)
  shown only when offline, dismissed automatically on reconnect
- src/pages/Bond.tsx: passes isOnline to BondRow; disables Withdraw, Create bond,
  and AmountInput when offline; shows inline offline banner with id for aria-describedby
- src/pages/TrustScore.tsx: disables Look up score button when offline; shows
  inline offline banner with id for aria-describedby
- src/hooks/useOnlineStatus.test.ts: Vitest unit tests (init, online/offline
  transitions, cleanup on unmount)
- src/pages/offline.test.tsx: RTL integration tests for Layout banner, Bond
  disabled actions, and TrustScore disabled lookup

Closes CredenceOrg#447
@drips-wave

drips-wave Bot commented Jun 28, 2026

Copy link
Copy Markdown

@Nuel-ship-it 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add a useOnlineStatus hook and surface an offline banner that disables transaction actions

1 participant