feat(perps): disk-backed cold-start cache for instant data display

app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.test.tsx

@@ -63,13 +63,33 @@ jest.mock('../../providers/PerpsStreamManager', () => ({
     prices: {
       subscribeToSymbols: jest.fn(() => jest.fn()),
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
+    },
+    positions: {
+      subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
+    },
+    orders: {
+      subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
+    },
+    fills: {
+      subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
+    },
+    account: {
+      subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
+    },
+    marketData: {
+      subscribe: jest.fn(() => jest.fn()),
+      getMarkets: jest.fn(),
+      getSnapshot: jest.fn(() => null),
+    },
+    oiCaps: {
+      subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
-    positions: { subscribe: jest.fn(() => jest.fn()) },
-    orders: { subscribe: jest.fn(() => jest.fn()) },
-    fills: { subscribe: jest.fn(() => jest.fn()) },
-    account: { subscribe: jest.fn(() => jest.fn()) },
-    marketData: { subscribe: jest.fn(() => jest.fn()), getMarkets: jest.fn() },
-    oiCaps: { subscribe: jest.fn(() => jest.fn()) },
   })),
   PerpsStreamProvider: ({ children }: { children: React.ReactNode }) =>
     children,

app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.test.tsx

@@ -808,18 +808,23 @@ const createMockStreamManager = () => {
         };
       },
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
     orders: {
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
     positions: {
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
     fills: {
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
     account: {
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
     topOfBook: {
       subscribeToSymbol: ({
@@ -842,13 +847,16 @@ const createMockStreamManager = () => {
           subscribers.delete(id);
         };
       },
+      getSnapshot: jest.fn(() => null),
     },
     marketData: {
       subscribe: jest.fn(() => jest.fn()),
       getMarkets: jest.fn(),
+      getSnapshot: jest.fn(() => null),
     },
     oiCaps: {
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
   };
 };

app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.test.tsx

@@ -73,11 +73,26 @@ jest.mock('../../providers/PerpsStreamManager', () => ({
   PerpsStreamProvider: ({ children }: { children: React.ReactNode }) =>
     children,
   usePerpsStream: jest.fn(() => ({
-    prices: { subscribe: jest.fn(() => jest.fn()) },
-    positions: { subscribe: jest.fn(() => jest.fn()) },
-    orders: { subscribe: jest.fn(() => jest.fn()) },
-    account: { subscribe: jest.fn(() => jest.fn()) },
-    marketData: { subscribe: jest.fn(() => jest.fn()) },
+    prices: {
+      subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
+    },
+    positions: {
+      subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
+    },
+    orders: {
+      subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
+    },
+    account: {
+      subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
+    },
+    marketData: {
+      subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
+    },
   })),
 }));
 

app/components/UI/Perps/__mocks__/serviceMocks.ts

@@ -94,6 +94,14 @@ export const createMockInfrastructure =
       rewards: {
         getPerpsDiscountForAccount: jest.fn().mockResolvedValue(0),
       },
+
+      // === Disk Cache (cold-start persistence) ===
+      diskCache: {
+        getItem: jest.fn().mockResolvedValue(null),
+        getItemSync: jest.fn().mockReturnValue(null),
+        setItem: jest.fn().mockResolvedValue(undefined),
+        removeItem: jest.fn().mockResolvedValue(undefined),
+      },
     }) as unknown as jest.Mocked<PerpsPlatformDependencies>;
 
 /**

app/components/UI/Perps/adapters/mobileInfrastructure.test.ts

@@ -60,6 +60,16 @@ jest.mock('../providers/PerpsStreamManager', () => ({
   getStreamManagerInstance: jest.fn(),
 }));
 
+jest.mock('../../../../store/storage-wrapper', () => ({
+  __esModule: true,
+  default: {
+    getItem: jest.fn().mockResolvedValue('cached-value'),
+    getItemSync: jest.fn().mockReturnValue('cached-sync-value'),
+    setItem: jest.fn().mockResolvedValue(undefined),
+    removeItem: jest.fn().mockResolvedValue(undefined),
+  },
+}));
+
 jest.mock('../../../../core/Engine', () => ({
   context: {
     RewardsController: {
@@ -214,6 +224,58 @@ describe('createMobileInfrastructure', () => {
       expect(result).toBe(5);
     });
   });
+
+  describe('diskCache', () => {
+    it('delegates getItem to StorageWrapper.getItem', async () => {
+      const StorageWrapper = jest.requireMock(
+        '../../../../store/storage-wrapper',
+      ).default;
+      const infra = createMobileInfrastructure();
+
+      const value = await infra.diskCache.getItem('test-key');
+
+      expect(StorageWrapper.getItem).toHaveBeenCalledWith('test-key');
+      expect(value).toBe('cached-value');
+    });
+
+    it('delegates getItemSync to StorageWrapper.getItemSync', () => {
+      const StorageWrapper = jest.requireMock(
+        '../../../../store/storage-wrapper',
+      ).default;
+      const infra = createMobileInfrastructure();
+
+      const value = infra.diskCache.getItemSync?.('test-key');
+
+      expect(StorageWrapper.getItemSync).toHaveBeenCalledWith('test-key');
+      expect(value).toBe('cached-sync-value');
+    });
+
+    it('delegates setItem to StorageWrapper.setItem', async () => {
+      const StorageWrapper = jest.requireMock(
+        '../../../../store/storage-wrapper',
+      ).default;
+      const infra = createMobileInfrastructure();
+
+      await infra.diskCache.setItem('test-key', 'test-value');
+
+      expect(StorageWrapper.setItem).toHaveBeenCalledWith(
+        'test-key',
+        'test-value',
+      );
+    });
+
+    it('delegates removeItem to StorageWrapper.removeItem', async () => {
+      const StorageWrapper = jest.requireMock(
+        '../../../../store/storage-wrapper',
+      ).default;
+      const infra = createMobileInfrastructure();
+
+      const result = await infra.diskCache.removeItem('test-key');
+
+      expect(StorageWrapper.removeItem).toHaveBeenCalledWith('test-key');
+      expect(result).toBeUndefined();
+    });
+  });
 });
 
 describe('createMobileClientConfig', () => {

app/components/UI/Perps/adapters/mobileInfrastructure.ts

@@ -6,6 +6,7 @@
  */
 
 import Logger from '../../../../util/Logger';
+import StorageWrapper from '../../../../store/storage-wrapper';
 import { DevLogger } from '../../../../core/SDKConnect/utils/DevLogger';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { AnalyticsEventBuilder } from '../../../../util/analytics/AnalyticsEventBuilder';
@@ -287,6 +288,16 @@ export function createMobileInfrastructure(): PerpsPlatformDependencies {
     // === Cache Invalidation ===
     cacheInvalidator: createCacheInvalidatorAdapter(),
 
+    // === Disk Cache (cold-start persistence via MMKV) ===
+    diskCache: {
+      getItem: (key: string) => StorageWrapper.getItem(key),
+      getItemSync: (key: string) => StorageWrapper.getItemSync(key),
+      setItem: (key: string, value: string) =>
+        StorageWrapper.setItem(key, value),
+      removeItem: (key: string) =>
+        StorageWrapper.removeItem(key).then(() => undefined),
+    },
+
     // === Rewards (DI — no RewardsController in Core yet) ===
     rewards: {
       getPerpsDiscountForAccount(

app/components/UI/Perps/components/PerpsBottomSheetTooltip/PerpsBottomSheetTooltip.test.tsx

@@ -65,6 +65,7 @@ const createMockStreamManager = (): Partial<PerpsStreamManager> => ({
     cleanupPrewarm: jest.fn(),
     clearCache: jest.fn(),
     disconnect: jest.fn(),
+    getSnapshot: jest.fn(() => null),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } as any,
 
@@ -76,6 +77,7 @@ const createMockStreamManager = (): Partial<PerpsStreamManager> => ({
     cleanupPrewarm: jest.fn(),
     clearCache: jest.fn(),
     disconnect: jest.fn(),
+    getSnapshot: jest.fn(() => null),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } as any,
 
@@ -86,6 +88,7 @@ const createMockStreamManager = (): Partial<PerpsStreamManager> => ({
     cleanupPrewarm: jest.fn(),
     clearCache: jest.fn(),
     disconnect: jest.fn(),
+    getSnapshot: jest.fn(() => null),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } as any,
 
@@ -96,6 +99,7 @@ const createMockStreamManager = (): Partial<PerpsStreamManager> => ({
     cleanupPrewarm: jest.fn(),
     clearCache: jest.fn(),
     disconnect: jest.fn(),
+    getSnapshot: jest.fn(() => null),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } as any,
 
@@ -106,6 +110,7 @@ const createMockStreamManager = (): Partial<PerpsStreamManager> => ({
     cleanupPrewarm: jest.fn(),
     clearCache: jest.fn(),
     disconnect: jest.fn(),
+    getSnapshot: jest.fn(() => null),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } as any,
 
@@ -115,6 +120,7 @@ const createMockStreamManager = (): Partial<PerpsStreamManager> => ({
     refresh: jest.fn(() => Promise.resolve()),
     prewarm: jest.fn(() => jest.fn()),
     clearCache: jest.fn(),
+    getSnapshot: jest.fn(() => null),
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } as any,
 });

app/components/UI/Perps/components/PerpsTabControlBar/PerpsTabControlBar.test.tsx

@@ -16,21 +16,27 @@ jest.mock('../../providers/PerpsStreamManager', () => ({
   usePerpsStream: jest.fn(() => ({
     account: {
       subscribe: jest.fn(() => jest.fn()), // Returns unsubscribe function
+      getSnapshot: jest.fn(() => null),
     },
     positions: {
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
     orders: {
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
     fills: {
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
     prices: {
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
     marketData: {
       subscribe: jest.fn(() => jest.fn()),
+      getSnapshot: jest.fn(() => null),
     },
   })),
   PerpsStreamProvider: ({ children }: { children: React.ReactNode }) =>

app/components/UI/Perps/constants/perpsConfig.ts

@@ -292,6 +292,13 @@ export function getPerpsProviderChainId(
   return PERPS_PROVIDER_CHAIN_IDS[provider]?.[network];
 }
 
+// Re-export disk cache constants from controller layer
+export {
+  PERPS_DISK_CACHE_MARKETS,
+  PERPS_DISK_CACHE_USER_DATA,
+  PERPS_DISK_CACHE_THROTTLE_MS,
+} from '@metamask/perps-controller/constants/perpsConfig';
+
 /** Source identifiers for PerpsConnectionManager.connect/ensureConnected/resumeFromForeground calls. */
 export const PERPS_CONNECTION_SOURCE = {
   WALLET_ROOT_MOUNT: 'wallet_root_mount',