chore(runway): cherry-pick feat(predict): cp-7.62.0 add live price updates to action buttons (#24849)

- feat(predict): cp-7.62.0 add live price updates to action buttons
(#24838)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Integrate useLiveMarketPrices hook into PredictActionButtons to display
real-time prices from WebSocket connection. The component now:

- Subscribes to live price updates for YES/NO tokens
- Displays live prices when available with automatic fallback to static
prices
- Disables subscription when market is closed or component is loading
- Works for both standard markets and game markets

Includes comprehensive test coverage for live price functionality.

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/PRED-490

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

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

### **After**

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

## **Pre-merge author checklist**

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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.

## **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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds real-time pricing and strengthens live chart behavior.
> 
> - Integrates `useLiveMarketPrices` in `PredictActionButtons` to render
live YES/NO (and game team) prices with fallback to static; subscribes
only when market is `open` and not loading; omits claim amount for game
markets
> - Refines `PredictGameChart` live mode: only initialize when both
series have data and not fetching, prevent re-initialization, keep
series lengths synced, and preserve accumulated live data across history
refetches
> - Expands tests in `PredictActionButtons.test.tsx`,
`PredictGameChart.wrapper.test.tsx`, and related components to cover
live prices, subscription params, partial data, loading states, and edge
cases
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
99ec6ba. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->


[675b1fd](675b1fd)

Co-authored-by: Caainã Jeronimo <caainaje@gmail.com>
Co-authored-by: João Loureiro <175489935+joaoloureirop@users.noreply.github.com>

Author: 3 people

app/components/UI/Predict/components/PredictActionButtons/PredictActionButtons.test.tsx

@@ -7,7 +7,9 @@ import {
   PredictOutcome,
   PredictMarketStatus,
   Recurrence,
+  PriceUpdate,
 } from '../../types';
+import { useLiveMarketPrices } from '../../hooks/useLiveMarketPrices';
 
 jest.mock('../../../../../../locales/i18n', () => ({
   strings: jest.fn((key: string, params?: Record<string, string>) => {
@@ -18,6 +20,15 @@ jest.mock('../../../../../../locales/i18n', () => ({
   }),
 }));
 
+jest.mock('../../hooks/useLiveMarketPrices');
+const mockUseLiveMarketPrices = useLiveMarketPrices as jest.MockedFunction<
+  typeof useLiveMarketPrices
+>;
+
+const createMockGetPrice =
+  (priceMap: Map<string, PriceUpdate>) => (tokenId: string) =>
+    priceMap.get(tokenId);
+
 const createMockOutcome = (overrides = {}): PredictOutcome => ({
   id: 'outcome-1',
   providerId: 'polymarket',
@@ -92,6 +103,12 @@ const createDefaultProps = (overrides = {}) => ({
 describe('PredictActionButtons', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockUseLiveMarketPrices.mockReturnValue({
+      prices: new Map(),
+      getPrice: () => undefined,
+      isConnected: false,
+      lastUpdateTime: null,
+    });
   });
 
   describe('loading state', () => {
@@ -160,6 +177,20 @@ describe('PredictActionButtons', () => {
 
       expect(screen.queryByText(/Claim/)).not.toBeOnTheScreen();
     });
+
+    it('renders claim button without amount for game markets', () => {
+      const mockOnClaimPress = jest.fn();
+      const props = createDefaultProps({
+        market: createMockGameMarket(),
+        claimableAmount: 50.25,
+        onClaimPress: mockOnClaimPress,
+      });
+
+      renderWithProvider(<PredictActionButtons {...props} />);
+
+      expect(screen.getByTestId('action-buttons-claim')).toBeOnTheScreen();
+      expect(screen.queryByText('Claim $50.25')).not.toBeOnTheScreen();
+    });
   });
 
   describe('bet buttons for standard markets', () => {
@@ -307,4 +338,129 @@ describe('PredictActionButtons', () => {
       expect(screen.getByText('NO · 35¢')).toBeOnTheScreen();
     });
   });
+
+  describe('live price updates', () => {
+    it('displays live prices when available', () => {
+      const priceMap = new Map<string, PriceUpdate>([
+        [
+          'token-yes',
+          { tokenId: 'token-yes', price: 0.72, bestBid: 0.71, bestAsk: 0.73 },
+        ],
+        [
+          'token-no',
+          { tokenId: 'token-no', price: 0.28, bestBid: 0.27, bestAsk: 0.29 },
+        ],
+      ]);
+      mockUseLiveMarketPrices.mockReturnValue({
+        prices: priceMap,
+        getPrice: createMockGetPrice(priceMap),
+        isConnected: true,
+        lastUpdateTime: Date.now(),
+      });
+      const props = createDefaultProps();
+
+      renderWithProvider(<PredictActionButtons {...props} />);
+
+      expect(screen.getByText('YES · 72¢')).toBeOnTheScreen();
+      expect(screen.getByText('NO · 28¢')).toBeOnTheScreen();
+    });
+
+    it('falls back to static prices when live prices unavailable', () => {
+      mockUseLiveMarketPrices.mockReturnValue({
+        prices: new Map(),
+        getPrice: () => undefined,
+        isConnected: false,
+        lastUpdateTime: null,
+      });
+      const props = createDefaultProps();
+
+      renderWithProvider(<PredictActionButtons {...props} />);
+
+      expect(screen.getByText('YES · 65¢')).toBeOnTheScreen();
+      expect(screen.getByText('NO · 35¢')).toBeOnTheScreen();
+    });
+
+    it('uses partial live prices with fallback for missing tokens', () => {
+      const priceMap = new Map<string, PriceUpdate>([
+        [
+          'token-yes',
+          { tokenId: 'token-yes', price: 0.8, bestBid: 0.79, bestAsk: 0.81 },
+        ],
+      ]);
+      mockUseLiveMarketPrices.mockReturnValue({
+        prices: priceMap,
+        getPrice: createMockGetPrice(priceMap),
+        isConnected: true,
+        lastUpdateTime: Date.now(),
+      });
+      const props = createDefaultProps();
+
+      renderWithProvider(<PredictActionButtons {...props} />);
+
+      expect(screen.getByText('YES · 80¢')).toBeOnTheScreen();
+      expect(screen.getByText('NO · 35¢')).toBeOnTheScreen();
+    });
+
+    it('subscribes with correct token IDs', () => {
+      const props = createDefaultProps();
+
+      renderWithProvider(<PredictActionButtons {...props} />);
+
+      expect(mockUseLiveMarketPrices).toHaveBeenCalledWith(
+        ['token-yes', 'token-no'],
+        { enabled: true },
+      );
+    });
+
+    it('disables subscription when market is closed', () => {
+      const props = createDefaultProps({
+        market: createMockMarket({ status: PredictMarketStatus.CLOSED }),
+      });
+
+      renderWithProvider(<PredictActionButtons {...props} />);
+
+      expect(mockUseLiveMarketPrices).toHaveBeenCalledWith(
+        ['token-yes', 'token-no'],
+        { enabled: false },
+      );
+    });
+
+    it('disables subscription when loading', () => {
+      const props = createDefaultProps({ isLoading: true });
+
+      renderWithProvider(<PredictActionButtons {...props} />);
+
+      expect(mockUseLiveMarketPrices).toHaveBeenCalledWith(
+        ['token-yes', 'token-no'],
+        { enabled: false },
+      );
+    });
+
+    it('displays live prices for game markets', () => {
+      const priceMap = new Map<string, PriceUpdate>([
+        [
+          'token-yes',
+          { tokenId: 'token-yes', price: 0.55, bestBid: 0.54, bestAsk: 0.56 },
+        ],
+        [
+          'token-no',
+          { tokenId: 'token-no', price: 0.45, bestBid: 0.44, bestAsk: 0.46 },
+        ],
+      ]);
+      mockUseLiveMarketPrices.mockReturnValue({
+        prices: priceMap,
+        getPrice: createMockGetPrice(priceMap),
+        isConnected: true,
+        lastUpdateTime: Date.now(),
+      });
+      const props = createDefaultProps({
+        market: createMockGameMarket(),
+      });
+
+      renderWithProvider(<PredictActionButtons {...props} />);
+
+      expect(screen.getByText('SEA · 55¢')).toBeOnTheScreen();
+      expect(screen.getByText('DEN · 45¢')).toBeOnTheScreen();
+    });
+  });
 });

app/components/UI/Predict/components/PredictActionButtons/PredictActionButtons.tsx

@@ -5,6 +5,7 @@ import PredictClaimButton from './PredictClaimButton';
 import PredictDetailsButtonsSkeleton from '../PredictDetailsButtonsSkeleton';
 import { PredictActionButtonsProps } from './PredictActionButtons.types';
 import { PredictMarketStatus } from '../../types';
+import { useLiveMarketPrices } from '../../hooks/useLiveMarketPrices';
 
 const PredictActionButtons: React.FC<PredictActionButtonsProps> = ({
   market,
@@ -16,6 +17,16 @@ const PredictActionButtons: React.FC<PredictActionButtonsProps> = ({
   testID = 'predict-action-buttons',
 }) => {
   const isGameMarket = Boolean(market.game);
+  const isMarketOpen = market.status === PredictMarketStatus.OPEN;
+
+  const tokenIds = useMemo(
+    () => outcome.tokens.map((token) => token.id),
+    [outcome.tokens],
+  );
+
+  const { getPrice } = useLiveMarketPrices(tokenIds, {
+    enabled: isMarketOpen && !isLoading,
+  });
 
   const buttonConfig = useMemo(() => {
     const tokens = outcome.tokens;
@@ -26,27 +37,33 @@ const PredictActionButtons: React.FC<PredictActionButtonsProps> = ({
     const yesToken = tokens[0];
     const noToken = tokens[1];
 
+    const yesLivePrice = getPrice(yesToken.id);
+    const noLivePrice = getPrice(noToken.id);
+
+    const yesPrice = yesLivePrice?.price ?? yesToken.price;
+    const noPrice = noLivePrice?.price ?? noToken.price;
+
     if (isGameMarket && market.game) {
       const { awayTeam, homeTeam } = market.game;
       return {
         yesLabel: awayTeam.abbreviation,
-        yesPrice: Math.round(yesToken.price * 100),
+        yesPrice: Math.round(yesPrice * 100),
         yesTeamColor: awayTeam.color,
         noLabel: homeTeam.abbreviation,
-        noPrice: Math.round(noToken.price * 100),
+        noPrice: Math.round(noPrice * 100),
         noTeamColor: homeTeam.color,
       };
     }
 
     return {
       yesLabel: yesToken.title,
-      yesPrice: Math.round(yesToken.price * 100),
+      yesPrice: Math.round(yesPrice * 100),
       yesTeamColor: undefined,
       noLabel: noToken.title,
-      noPrice: Math.round(noToken.price * 100),
+      noPrice: Math.round(noPrice * 100),
       noTeamColor: undefined,
     };
-  }, [outcome.tokens, isGameMarket, market.game]);
+  }, [outcome.tokens, isGameMarket, market.game, getPrice]);
 
   if (isLoading) {
     return <PredictDetailsButtonsSkeleton testID={`${testID}-skeleton`} />;

app/components/UI/Predict/components/PredictGameChart/PredictGameChart.tsx

@@ -99,14 +99,23 @@ const PredictGameChart: React.FC<PredictGameChartProps> = ({
       return;
     }
 
+    if (initialDataLoadedRef.current) {
+      return;
+    }
+
+    if (isFetching) {
+      return;
+    }
+
     if (
       historicalChartData.length === 2 &&
-      historicalChartData[0].data.length > 0
+      historicalChartData[0].data.length > 0 &&
+      historicalChartData[1].data.length > 0
     ) {
       setLiveChartData(historicalChartData);
       initialDataLoadedRef.current = true;
     }
-  }, [isLive, historicalChartData]);
+  }, [isLive, historicalChartData, isFetching]);
 
   const updateLiveData = useCallback(() => {
     if (!isLive || !initialDataLoadedRef.current || prices.size === 0) return;