[Fix] Optimize React Query Storage Usage

[BrodyHughes]

Problem

Our chrome.storage.local was experiencing significant bloat, with the react-query storage reaching ~25MB. This caused slow performance and e2e failures. This was primarily due to:

• Excessive storage of pending queries
• No throttling of storage updates
• Lack of proper garbage collection for multi-chain queries
• Storing and persisting all query states regardless of their usefulness

Changes

1. Query Client Persistence Configuration

   • Added throttling (2000ms) to prevent rapid storage updates
   • Implemented proper serialization/deserialization
   • Added buster key to help with cache invalidation
   • Reduced maxAge to 1 hour to prevent stale data accumulation

2. Asset Metadata Query Optimizations

   • Incremented persisterVersion to clear old cached data
   • Added proper error handling to prevent caching failed states
   • Implemented early returns for invalid data to reduce storage
   • Added sensible defaults for query configurations:
     • staleTime: 5 minutes
     • cacheTime: 30 minutes
     • Disabled retries to prevent unnecessary network calls
     • Added enable conditions to prevent unnecessary queries

3. Storage Layer Improvements

   • Added better error handling and logging
   • Improved type safety for stored values
   • Added debug logging for storage operations

Results

Storage usage for react-query has been reduced from ~25MB to ~2.5MB, a 90% reduction in storage usage.

Testing

• Verified storage size reduction in chrome.storage.local
• Confirmed asset metadata queries still function correctly
• Tested multi-chain query functionality
• Verified persistence across extension restarts

[BrodyHughes]

open to feedback on if theres better ways to structure this or if this seems like overkill. there may be things i'm not considering, since i am not super experienced with react-query.