Cherry-picking commits from main to release/7.81.2-ota for PR #31801 (#31935)

- perf(predict): fix JS-thread FPS collapse on market details with live
prices cp-7.82.0 (#31801)

## **Description**

This PR fixes severe JS-thread performance degradation on the Predict
market details screen (`PredictMarketDetails` /
`PredictGameDetailsContent`). When opening a market with a live price
feed — most noticeably a live soccer game — the JS thread FPS would
collapse to near 0, making the screen unusable.

**Reason for the change:** The live Polymarket WebSocket price stream
drives high-frequency updates. The code was (1) doing an
`O(subscriptions × tokens)` `new Set(key.split(','))` allocation on
*every* incoming price message, and (2) re-rendering the entire details
screen on every single message because nothing was throttled or
memoized. Profiling showed `performWorkOnRoot` (React render) consuming
~70% of the trace, with `new Set()`/`Object.assign`/`JSON.stringify`
allocation churn dominating self-time.

**Improvements:**

- **`WebSocketManager`**
- Precompute the parsed `Set<tokenId>` per subscription once at
subscribe time instead of rebuilding it (`new Set(key.split(','))`) on
every message. This removes the single largest self-time hotspot.
- Coalesce/throttle price emission with a leading + trailing edge
(250ms, mirroring the existing orderbook throttle) so subscribers are
notified at most ~4×/sec instead of at the full WebSocket message rate.
- Clean up the new timer/buffer/Set state on disconnect and full
cleanup.
- **`useLiveMarketPrices`** — skip the state update entirely when an
incoming tick carries no actual value change
(`price`/`bestBid`/`bestAsk`), preventing redundant re-renders.
- **`usePredictPrices`** — memoize the per-render
`JSON.stringify(queries)` so it only runs when the queries change.
- **`useOpenOutcomes`**
- Disable the live price subscription for game markets, where its result
is never rendered (the game branch runs its own subscriptions). Removed
a redundant full-screen re-render source.
- Preserve object identity for outcomes/tokens whose computed price did
not change, so only rows that actually changed get a new reference.
- **`PredictMarketDetails`** — memoize
`handleBackPress`/`handleBuyPress`/`handleClaimPress` so stable
callbacks no longer defeat child memoization.
- **`PredictGameDetailsContent`** and **`PredictMarketOutcome`** — wrap
in `React.memo` so a parent re-render no longer re-renders these
subtrees/rows when their props are unchanged.

**Result:** JS-thread FPS went from ~0 → mid-50s on live game events,
and regular markets from ~25–35 → comparable smoothness, with re-renders
now scoped to the components whose data actually changed.

## **Changelog**

CHANGELOG entry: Fixed severe performance degradation on the Predict
market details screen for markets with live price updates.

## **Related issues**

Fixes:
[PRED-1014](https://consensyssoftware.atlassian.net/browse/PRED-1014)

## **Manual testing steps**

```gherkin
Feature: Predict market details performance with live prices

  Scenario: user opens a live game market
    Given a live soccer game market is available in Predict
    And the JS-thread FPS monitor / performance overlay is enabled
    When the user opens the PredictGameDetailsContent screen
    Then the screen remains responsive
    And the JS-thread FPS stays in a healthy range (not collapsing toward 0)

  Scenario: user opens a regular market with live prices
    Given a regular open market with live price updates is available in Predict
    When the user opens the PredictMarketDetails screen
    Then the outcomes list updates live without re-rendering unchanged rows
    And the JS-thread FPS stays in a healthy range

  Scenario: live prices still update correctly
    Given the user is on a market details screen
    When the underlying token prices change over the WebSocket feed
    Then the displayed prices/odds update to reflect the new values
```

## **Screenshots/Recordings**

### **Before**

<!-- [screenshots/recordings] -->



https://github.com/user-attachments/assets/1cc444f5-a693-4584-80f8-072305a3147c



### **After**

<!-- [screenshots/recordings] -->



https://github.com/user-attachments/assets/1fe95b3c-1fb4-4fa0-a794-8450cbe08f88


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding

Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling

guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

#### Performance checks (if applicable)

- [x] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [x] I've tested with a power user scenario
- Use these [power-user

SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [x] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and

[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance

Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


[PRED-1014]:

https://consensyssoftware.atlassian.net/browse/PRED-1014?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
[716f9a8](716f9a8)

[PRED-1014]:
https://consensyssoftware.atlassian.net/browse/PRED-1014?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ

Co-authored-by: Luis Taniça <matallui@gmail.com>

Author: runway-github[bot]

app/components/UI/Predict/components/PredictGameDetailsContent/PredictGameDetailsContent.tsx

@@ -12,7 +12,7 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import React, { useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import { Pressable, RefreshControl, ScrollView } from 'react-native';
 import {
   SafeAreaView,
@@ -37,7 +37,9 @@ import { PREDICT_GAME_DETAILS_CONTENT_TEST_IDS } from './PredictGameDetailsConte
 
 const CHIPS_STICKY_INDEX = 2;
 
-const PredictGameDetailsContent: React.FC<PredictGameDetailsContentProps> = ({
+const PredictGameDetailsContentComponent: React.FC<
+  PredictGameDetailsContentProps
+> = ({
   market,
   onBack,
   onRefresh,
@@ -231,4 +233,10 @@ const PredictGameDetailsContent: React.FC<PredictGameDetailsContentProps> = ({
   );
 };
 
+// Memoized so a parent (PredictMarketDetails) re-render driven by its own live
+// subscriptions does not re-render this entire subtree when our props are
+// unchanged. The screen's live odds updates are driven by this component's own
+// hooks instead.
+const PredictGameDetailsContent = memo(PredictGameDetailsContentComponent);
+
 export default PredictGameDetailsContent;

app/components/UI/Predict/components/PredictMarketOutcome/PredictMarketOutcome.tsx

@@ -8,7 +8,7 @@ import {
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
-import React from 'react';
+import React, { memo } from 'react';
 import { Image, View } from 'react-native';
 import { strings } from '../../../../../../locales/i18n';
 import Button, {
@@ -50,7 +50,7 @@ interface PredictMarketOutcomeProps {
 
 const MAX_LABEL_LENGTH = 6;
 
-const PredictMarketOutcome: React.FC<PredictMarketOutcomeProps> = ({
+const PredictMarketOutcomeComponent: React.FC<PredictMarketOutcomeProps> = ({
   market,
   outcome,
   entryPoint = PredictEventValues.ENTRY_POINT.PREDICT_FEED,
@@ -221,4 +221,9 @@ const PredictMarketOutcome: React.FC<PredictMarketOutcomeProps> = ({
   );
 };
 
+// Memoized so that in a live-updating outcomes list only the rows whose
+// `outcome` reference actually changed re-render. Relies on useOpenOutcomes
+// preserving identity for unchanged outcomes/tokens.
+const PredictMarketOutcome = memo(PredictMarketOutcomeComponent);
+
 export default PredictMarketOutcome;

app/components/UI/Predict/hooks/useLiveMarketPrices.ts

@@ -74,6 +74,10 @@ export const useLiveMarketPrices = (
 
   const isMountedRef = useRef(true);
   const tokenIdsRef = useRef(tokenIds);
+  // Mirrors the latest `prices` map so we can detect no-op ticks without
+  // adding `prices` to `handlePriceUpdates`' dependencies. Kept in sync inside
+  // every state updater below.
+  const pricesRef = useRef(prices);
 
   // Use JSON.stringify to avoid key collisions if token IDs contain commas
   const tokenIdsKey = useMemo(
@@ -95,11 +99,30 @@ export const useLiveMarketPrices = (
       liveMarketPriceCache.set(update.tokenId, { price: update, updatedAt });
     });
 
+    // Skip the state update entirely when none of the incoming values differ
+    // from what we already have. This prevents a re-render of the whole
+    // subscriber tree for redundant ticks that carry no visible change.
+    const current = pricesRef.current;
+    const hasChange = updates.some((update) => {
+      const existing = current.get(update.tokenId);
+      return (
+        !existing ||
+        existing.price !== update.price ||
+        existing.bestBid !== update.bestBid ||
+        existing.bestAsk !== update.bestAsk
+      );
+    });
+
+    if (!hasChange) {
+      return;
+    }
+
     setPrices((prevPrices) => {
       const newPrices = new Map(prevPrices);
       updates.forEach((update) => {
         newPrices.set(update.tokenId, update);
       });
+      pricesRef.current = newPrices;
       return newPrices;
     });
 
@@ -125,6 +148,7 @@ export const useLiveMarketPrices = (
           nextPrices.set(tokenId, cachedPrice);
         }
       });
+      pricesRef.current = nextPrices;
       return nextPrices;
     });
 

app/components/UI/Predict/hooks/usePredictPrices.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import Engine from '../../../../core/Engine';
 import Logger from '../../../../util/Logger';
 import { DevLogger } from '../../../../core/SDKConnect/utils/DevLogger';
@@ -62,7 +62,10 @@ export const usePredictPrices = (
     }
   }, [enabled]);
 
-  const queriesKey = JSON.stringify(queries);
+  // Memoize so the (potentially large) serialization only runs when the
+  // queries array identity actually changes, not on every re-render driven
+  // by live price ticks.
+  const queriesKey = useMemo(() => JSON.stringify(queries), [queries]);
 
   const fetchPrices = useCallback(async () => {
     if (!enabled) {

app/components/UI/Predict/providers/polymarket/WebSocketManager.test.ts

@@ -2268,6 +2268,9 @@ describe('WebSocketManager', () => {
         ],
         timestamp: '2025-01-12T12:00:01Z',
       });
+      // Price emission is throttled: the first message flushes immediately
+      // (leading edge) and the second is coalesced into the trailing flush.
+      jest.advanceTimersByTime(250);
 
       expect(throwingCallback).toHaveBeenCalledTimes(2);
       expect(healthyCallback).toHaveBeenCalledTimes(2);
@@ -2311,7 +2314,7 @@ describe('WebSocketManager', () => {
         context: {
           name: 'WebSocketManager',
           data: {
-            method: 'handleMarketMessage',
+            method: 'flushMarketPriceUpdates',
             subscriptionKey: 'token1',
           },
         },

app/components/UI/Predict/providers/polymarket/WebSocketManager.ts

@@ -32,6 +32,7 @@ const RTDS_CRYPTO_PRICES_CHAINLINK_TOPIC = 'crypto_prices_chainlink';
 const RTDS_PING_INTERVAL_MS = 5000;
 const DEFAULT_THROTTLE_INTERVAL_MS = 16;
 const ORDERBOOK_EMIT_THROTTLE_MS = 250;
+const MARKET_PRICE_EMIT_THROTTLE_MS = 250;
 
 const HEARTBEAT_CHECK_INTERVAL_MS = 5000;
 const MARKET_STALE_THRESHOLD_MS = 60000;
@@ -90,7 +91,16 @@ export class WebSocketManager {
 
   private gameSubscriptions: Map<string, Set<GameUpdateCallback>> = new Map();
   private priceSubscriptions: Map<string, Set<PriceUpdateCallback>> = new Map();
+  // Parsed token-id set per subscription key, precomputed once at subscribe
+  // time so the high-frequency message handler never re-runs
+  // `key.split(',')` + `new Set(...)` per message.
+  private priceSubscriptionTokenSets: Map<string, Set<string>> = new Map();
   private marketPriceCache: Map<string, PriceUpdate> = new Map();
+  // Coalesced price emission: token ids that changed since the last flush, plus
+  // the leading/trailing throttle timer. Avoids re-rendering subscribers at the
+  // full WebSocket message rate.
+  private marketPricePendingTokenIds: Set<string> = new Set();
+  private marketPriceEmitTimer: ReturnType<typeof setTimeout> | null = null;
   private orderbookSubscriptions: Map<string, Set<OrderbookCallback>> =
     new Map();
   private orderbookState: Map<
@@ -385,6 +395,10 @@ export class WebSocketManager {
     if (!callbacks) {
       callbacks = new Set();
       this.priceSubscriptions.set(subscriptionKey, callbacks);
+      this.priceSubscriptionTokenSets.set(
+        subscriptionKey,
+        new Set(subscriptionKey.split(',').filter(Boolean)),
+      );
     }
     callbacks.add(callback);
 
@@ -425,6 +439,7 @@ export class WebSocketManager {
         subscriptionCallbacks.delete(callback);
         if (subscriptionCallbacks.size === 0) {
           this.priceSubscriptions.delete(subscriptionKey);
+          this.priceSubscriptionTokenSets.delete(subscriptionKey);
           const remainingPriceTokenIds = this.getSubscribedMarketTokenIds();
           const tokenIdsToUnsubscribe = tokenIds.filter(
             (tokenId) =>
@@ -580,6 +595,74 @@ export class WebSocketManager {
     };
   }
 
+  /**
+   * Throttle market price fan-out with a leading + trailing edge, mirroring
+   * {@link scheduleOrderbookEmit}. The first change in a window is delivered
+   * immediately; subsequent changes within the window are batched and flushed
+   * once when the window closes.
+   */
+  private scheduleMarketPriceEmit(): void {
+    if (this.marketPriceEmitTimer === null) {
+      this.flushMarketPriceUpdates();
+      this.marketPriceEmitTimer = setTimeout(() => {
+        this.marketPriceEmitTimer = null;
+        if (this.marketPricePendingTokenIds.size > 0) {
+          this.flushMarketPriceUpdates();
+        }
+      }, MARKET_PRICE_EMIT_THROTTLE_MS);
+    }
+  }
+
+  private flushMarketPriceUpdates(): void {
+    if (this.marketPricePendingTokenIds.size === 0) {
+      return;
+    }
+
+    const changedTokenIds = this.marketPricePendingTokenIds;
+    this.marketPricePendingTokenIds = new Set();
+
+    this.priceSubscriptions.forEach((callbacks, key) => {
+      if (callbacks.size === 0) {
+        return;
+      }
+      const subscribedTokenIds = this.priceSubscriptionTokenSets.get(key);
+      if (!subscribedTokenIds) {
+        return;
+      }
+
+      const relevantUpdates: PriceUpdate[] = [];
+      changedTokenIds.forEach((tokenId) => {
+        if (subscribedTokenIds.has(tokenId)) {
+          const cached = this.marketPriceCache.get(tokenId);
+          if (cached) {
+            relevantUpdates.push(cached);
+          }
+        }
+      });
+
+      if (relevantUpdates.length === 0) {
+        return;
+      }
+
+      callbacks.forEach((callback) => {
+        try {
+          callback(relevantUpdates);
+        } catch (error) {
+          DevLogger.log('WebSocketManager: Market price subscriber failed', {
+            error,
+            subscriptionKey: key,
+          });
+          Logger.error(
+            this.toError(error),
+            this.getErrorContext('flushMarketPriceUpdates', 'market', {
+              subscriptionKey: key,
+            }),
+          );
+        }
+      });
+    });
+  }
+
   private emitOrderbookSnapshot(tokenId: string): void {
     const cached = this.orderbookState.get(tokenId);
     const callbacks = this.orderbookSubscriptions.get(tokenId);
@@ -737,36 +820,12 @@ export class WebSocketManager {
 
       updates.forEach((update) => {
         this.marketPriceCache.set(update.tokenId, update);
+        this.marketPricePendingTokenIds.add(update.tokenId);
       });
 
-      this.priceSubscriptions.forEach((callbacks, key) => {
-        const subscribedTokenIds = new Set(key.split(','));
-        const relevantUpdates = updates.filter((u) =>
-          subscribedTokenIds.has(u.tokenId),
-        );
-
-        if (relevantUpdates.length > 0) {
-          callbacks.forEach((callback) => {
-            try {
-              callback(relevantUpdates);
-            } catch (error) {
-              DevLogger.log(
-                'WebSocketManager: Market price subscriber failed',
-                {
-                  error,
-                  subscriptionKey: key,
-                },
-              );
-              Logger.error(
-                this.toError(error),
-                this.getErrorContext('handleMarketMessage', 'market', {
-                  subscriptionKey: key,
-                }),
-              );
-            }
-          });
-        }
-      });
+      // Coalesce emission instead of fanning out synchronously on every
+      // message. Live odds stream far faster than the UI needs to render.
+      this.scheduleMarketPriceEmit();
 
       // Intentionally NOT forwarding `price_change` to orderbook subscribers.
       // The payload only carries `best_bid` / `best_ask` (no per-level
@@ -970,6 +1029,11 @@ export class WebSocketManager {
     this.cleanupMarketConnection();
     this.marketReconnectAttempts = 0;
     this.marketPriceCache.clear();
+    if (this.marketPriceEmitTimer) {
+      clearTimeout(this.marketPriceEmitTimer);
+      this.marketPriceEmitTimer = null;
+    }
+    this.marketPricePendingTokenIds.clear();
     // Drop cached orderbook state so a future reconnect doesn't replay a
     // stale snapshot to subscribers. The provider's REST bootstrap and the
     // next live `book` event will repopulate. Also flush throttle timers so
@@ -1357,6 +1421,7 @@ export class WebSocketManager {
     this.disconnectAll();
     this.gameSubscriptions.clear();
     this.priceSubscriptions.clear();
+    this.priceSubscriptionTokenSets.clear();
     this.cryptoPriceSubscriptions.clear();
     this.marketPriceCache.clear();
     this.orderbookSubscriptions.clear();