Skip to content

Fix/shared settings state#941

Open
d3v-active wants to merge 4 commits into
LabsCrypt:mainfrom
d3v-active:fix/shared-settings-state
Open

Fix/shared settings state#941
d3v-active wants to merge 4 commits into
LabsCrypt:mainfrom
d3v-active:fix/shared-settings-state

Conversation

@d3v-active

Copy link
Copy Markdown

This PR addresses four distinct issues raised for the FlowFi frontend:

1. useSettings Shared State Refactor

  • Issue: useSettings hook previously held per-instance state without a shared store or storage listener, meaning settings changes did not propagate across components or tabs.
  • Fix: Re-implemented the useSettings hook using a shared source of truth paired with a subscriber pattern.
  • Additions: Added a window storage event listener to automatically sync settings across different browser tabs.
  • Tests: Included unit tests asserting multiple consumers correctly reflect changes simultaneously without remounting, and tests verifying cross-tab synchronization.

closes #854

2. useIncomingStreams Unit Tests

  • Issue: Missing critical behavior tests for useIncomingStreams and useWithdrawIncomingStream hooks.
  • Fix: Created comprehensive unit tests in useIncomingStreams.test.ts validating query key shapes and hook execution conditions.
  • Tests Added:
    • Validated that useIncomingStreams stays reliably disabled (prevents fetches) when publicKey is null or undefined.
    • Verified useWithdrawIncomingStream correctly rejects immediately when the user session is missing.
    • Mocked dependencies using a QueryClientProvider wrapper to securely verify onSuccess query invalidation behavior.

closes #855

3. TokenStep Accessibility Improvements

  • Issue: Stream token cards conveyed selection solely visually via borders and colors, breaking expectations for assistive technology users.
  • Fix: Applied proper semantic ARIA attributes.
    • Exposed individual item selected states via role="radio" and aria-checked bindings on the token buttons.
    • Grouped token buttons securely inside a role="radiogroup" wrapper with an accessible group label (aria-labelledby).
    • Correlated validation errors back to the group context using aria-describedby.

closes #859

4. Dashboard Data Fetching Optimization (React Query Migration)

  • Issue: Dashboard re-fetched the full snapshot manually per SSE event with no debounce, which caused request storms and out-of-order state modifications.
  • Fix: Fully migrated DashboardSnapshot data fetching to useQuery utilizing @tanstack/react-query.
  • Enhancements:
    • Bound an AbortSignal all the way down to the API calls inside fetchStreams to correctly cancel trailing pending requests when an SSE invalidates the cache again.
    • Capitalized on queryClient.invalidateQueries automatically coalescing and deduplicating redundant sequential SSE-triggered invalidations, natively preventing request storms.
    • Refactored local optimistic state modifiers to properly utilize queryClient.setQueryData replacing standard React component state.

closes #857

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