Client storage indexdb 280

[somotochukwu-dev]

Summary

Implements an IndexedDB-based client-side sync layer for historical metrics data, reducing bandwidth consumption and enabling instantaneous startup times by serving cached data from local storage.

Changes

New Files

• src/lib/indexeddb.ts — IndexedDB utility module providing CRUD operations for historical price data points. Creates a stellarflow-history database with a priceHistory object store, indexed by asset pair, timestamp, and a compound index for efficient time-range queries. Includes automatic pruning of records older than 7 days.

• src/app/hooks/useHistoricalSync.ts — Hook that subscribes to live WebSocket price data and automatically syncs it to IndexedDB. Batches writes in 50-point chunks with a 10-second flush interval to avoid excessive transactions. Periodically prunes stale data.

• src/app/hooks/useHistoricalData.ts — Hooks for reading historical data from IndexedDB:

  • useHistoricalData — query with time range and limit filters, includes a refresh() callback
  • useLatestHistoricalData — fetch the N most recent data points for instant startup rendering
  • useHistoricalAssetPairs — discover all stored asset pairs

• src/app/components/providers/HistoryProvider.tsx — Wires the sync layer into the React component tree.

Modified Files

• src/types/index.ts — Added HistoricalDataPoint interface with fields assetPair, timestamp, price, decimals, source, confidenceScore

• src/app/layout.tsx — Added SocketProvider and HistoryProvider to the root provider tree

Technical Details

• Sync strategy: WebSocket price updates are batched and flushed to IndexedDB asynchronously. Deduplication is handled via compound keys ({assetPair}_{timestamp}), preventing duplicate entries from overlapping delta updates.
• Read strategy: Components use the provided hooks to query IndexedDB directly on mount, eliminating network round-trips for historical data. Data is sorted by timestamp ascending.
• Retention: Old records are automatically pruned after 7 days, configurable via the retentionDays parameter in pruneDataPoints().
• Error handling: All IndexedDB operations are wrapped in promises with proper error propagation. The sync hook silently swallows write errors to avoid disrupting the UI.

Closes #280

[drips-wave]

@somotochukwu-dev 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