feat(frontend): separate server state from mutable UI state - #25
Open
Fabluchy wants to merge 1 commit into
Open
Conversation
- Install @tanstack/react-query v5 as the server-state caching layer - Add QueryProvider wrapper (lib/QueryProvider.tsx) and mount in layout.tsx - Refactor lib/api.ts: replace class methods with plain async functions covering vaults, streak, discipline score, achievements, and fiat flows - Refactor types/index.ts: introduce UIPreferences type and queryKeys factory; keep server types (Vault, Streak, DisciplineScore, etc.) separate - Refactor stores/index.ts: Zustand now stores only wallet connection state and UIPreferences (persisted via zustand/middleware persist); all financial data removed from the store - Refactor hooks/useVault.ts: useVaults, useVaultById, useCreateVault, useDeposit, useWithdraw all use useQuery / useMutation; mutations invalidate the relevant query keys on success - Refactor hooks/useWallet.ts: connect/disconnect invalidate all financial query caches to prevent stale data bleeding across wallet sessions - Add hooks/useStreak.ts: useStreak, useDisciplineScore, useAchievements - Update features/vaults/VaultList.tsx: full implementation with loading skeletons, error state with retry, empty state, and vault cards - Update features/streaks/StreakTracker.tsx: full implementation with stat cards, loading skeletons, error state, and savings calendar - Fix lib/stellar.ts: remove invalid StellarWallet named import (pre-existing type error that blocked the build) Closes Vaulty-X#19
Contributor
|
please resolve conflicts |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Resolves the architectural issue where Zustand was used as both a UI state store and a server data cache for financial data (vault balances, streaks, discipline scores). This created race conditions between optimistic updates and refreshes, and prevented proper cache invalidation when the wallet or network changed.
Changes
New dependencies
@tanstack/react-query@^5— server-state caching layerNew files
src/lib/QueryProvider.tsxQueryClientwith sensible defaults (30 s stale time, 5 min GC, 2 retries, window-focus refetch) and wraps the appsrc/hooks/useStreak.tsuseStreak,useDisciplineScore,useAchievementshooks via React QueryModified files
src/app/layout.tsx<QueryProvider>src/types/index.tsUIPreferencestype,queryKeysfactory; dates changed fromDatetostringfor safe JSON round-tripssrc/lib/api.tssrc/stores/index.tsUIPreferences; financial data removed entirely; usespersistmiddlewaresrc/hooks/useVault.tsuseVaults,useVaultById,useCreateVault,useDeposit,useWithdraw; mutations invalidate relevant query keyssrc/hooks/useWallet.tsconnect/disconnectinvalidate all financial query caches, preventing stale data from bleeding across wallet sessionssrc/features/vaults/VaultList.tsxsrc/features/streaks/StreakTracker.tsxsrc/lib/stellar.tsStellarWalletnamed import that blocked the build)Acceptance criteria
QueryProviderin root layoutuseWalletclears all financial query caches on connect and disconnectpersistmiddleware is scoped toUIPreferencesand wallet connection state; no vault balances, streaks, or scoresTesting
Closes #19