MetaMask
diff --git a/‎CHANGELOG.md‎
Lines changed: 17 additions & 1 deletion b/‎CHANGELOG.md‎
Lines changed: 17 additions & 1 deletion
diff --git a/‎app/components/UI/Predict/components/FeaturedCarousel/FeaturedCarouselSportCard.test.tsx‎
Lines changed: 87 additions & 1 deletion b/‎app/components/UI/Predict/components/FeaturedCarousel/FeaturedCarouselSportCard.test.tsx‎
Lines changed: 87 additions & 1 deletion
diff --git a/‎app/components/UI/Predict/components/FeaturedCarousel/FeaturedCarouselSportCard.tsx‎
Lines changed: 45 additions & 5 deletions b/‎app/components/UI/Predict/components/FeaturedCarousel/FeaturedCarouselSportCard.tsx‎
Lines changed: 45 additions & 5 deletions
diff --git a/‎app/components/UI/Predict/components/PredictGameDetailsContent/PredictGameDetailsContent.tsx‎
Lines changed: 10 additions & 2 deletions b/‎app/components/UI/Predict/components/PredictGameDetailsContent/PredictGameDetailsContent.tsx‎
Lines changed: 10 additions & 2 deletions
@@ -7,12 +7,27 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [7.81.2]
+
+### Changed
+
+- Enhance PredictMarketRowItem with endAccessory prop and remove NBA champion discovery references. (#31923)
+
+### Fixed                                                                                                   
+                                                                                                              
+- Fix odds prices stale on feed cards and event page during live markets (#31922)                           
+- Fix extended sports outcome grouping, spread ordering, and live pricing (#31934)
+
 ## [7.81.1]
 
 ### Added
 
 - Adds Swap/Bridge feature to ARC mainnet. (#31413)
 
+### Changed
+
+- chore: Enhance PredictMarketRowItem with endAccessory prop and remove NBA champion discovery references (#31923)
+
 ### Fixed
 
 - Fixed the MetaMask Card section on the Money screen so the "Link card" option and funding token placeholders are only shown when the card spending token is enabled in the card feature configuration. (#31611)
@@ -12087,7 +12102,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [#957](https://github.com/MetaMask/metamask-mobile/pull/957): fix timeouts (#957)
 - [#954](https://github.com/MetaMask/metamask-mobile/pull/954): Bugfix: onboarding navigation (#954)
 
-[Unreleased]: https://github.com/MetaMask/metamask-mobile/compare/v7.81.1...HEAD
+[Unreleased]: https://github.com/MetaMask/metamask-mobile/compare/v7.81.2...HEAD
+[7.81.2]: https://github.com/MetaMask/metamask-mobile/compare/v7.81.1...v7.81.2
 [7.81.1]: https://github.com/MetaMask/metamask-mobile/compare/v7.81.0...v7.81.1
 [7.81.0]: https://github.com/MetaMask/metamask-mobile/compare/v7.80.0...v7.81.0
 [7.80.0]: https://github.com/MetaMask/metamask-mobile/compare/v7.79.1...v7.80.0
 
@@ -13,6 +13,7 @@ import {
 } from '../../types';
 import FeaturedCarouselSportCard from './FeaturedCarouselSportCard';
 import { FEATURED_CAROUSEL_TEST_IDS } from './FeaturedCarousel.testIds';
+import { useLiveMarketPrices } from '../../hooks/useLiveMarketPrices';
 
 jest.mock('@metamask/design-system-twrnc-preset', () => ({
   useTailwind: () => ({
@@ -83,6 +84,14 @@ jest.mock('../../hooks/useLiveGameUpdates', () => ({
   useLiveGameUpdates: () => ({ gameUpdate: null }),
 }));
 
+const mockGetLivePrice = jest.fn();
+jest.mock('../../hooks/useLiveMarketPrices', () => ({
+  useLiveMarketPrices: jest.fn(() => ({
+    getPrice: mockGetLivePrice,
+  })),
+}));
+const mockUseLiveMarketPrices = jest.mocked(useLiveMarketPrices);
+
 jest.mock('../../constants/sportLeagueConfigs', () => ({
   getLeagueConfig: () => ({}),
 }));
@@ -107,6 +116,24 @@ const initialState = {
   },
 };
 
+const stateWithSportCardLivePricesEnabled = (enabled: boolean) => ({
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+      RemoteFeatureFlagController: {
+        ...backgroundState.RemoteFeatureFlagController,
+        remoteFeatureFlags: {
+          ...backgroundState.RemoteFeatureFlagController?.remoteFeatureFlags,
+          predictSportCardLivePrices: {
+            enabled,
+            minimumVersion: '0.0.0',
+          },
+        },
+      },
+    },
+  },
+});
+
 const createMockOutcome = (
   tokens: PredictOutcomeToken[],
   volume = 1500000,
@@ -184,6 +211,7 @@ const createMockSportMarket = (
 describe('FeaturedCarouselSportCard', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockGetLivePrice.mockReturnValue(undefined);
   });
 
   it('renders league name and live indicator for ongoing games', () => {
@@ -257,7 +285,9 @@ describe('FeaturedCarouselSportCard', () => {
       { state: initialState },
     );
 
-    expect(getByText(strings('predict.outcome_draw'))).toBeOnTheScreen();
+    expect(
+      getByText(`${strings('predict.outcome_draw')} 20%`),
+    ).toBeOnTheScreen();
   });
 
   it.each(['nba', 'nfl'] as const)(
@@ -414,4 +444,60 @@ describe('FeaturedCarouselSportCard', () => {
       }),
     );
   });
+
+  it('renders live best ask prices when available', () => {
+    mockGetLivePrice.mockImplementation((tokenId: string) => ({
+      tokenId,
+      price: 0,
+      bestBid: 0,
+      bestAsk:
+        tokenId === 'home-token'
+          ? 0.75
+          : tokenId === 'draw-token'
+            ? 0.18
+            : 0.25,
+    }));
+    const market = createMockSportMarket();
+
+    const { getByText } = renderWithProvider(
+      <FeaturedCarouselSportCard market={market} index={0} />,
+      { state: initialState },
+    );
+
+    expect(getByText('$133.33')).toBeOnTheScreen();
+    expect(getByText('$400.00')).toBeOnTheScreen();
+    expect(getByText('75%')).toBeOnTheScreen();
+    expect(
+      getByText(`${strings('predict.outcome_draw')} 18%`),
+    ).toBeOnTheScreen();
+    expect(getByText('25%')).toBeOnTheScreen();
+  });
+
+  it('renders static prices and disables live subscriptions when the flag is off', () => {
+    mockGetLivePrice.mockImplementation((tokenId: string) => ({
+      tokenId,
+      price: 0,
+      bestBid: 0,
+      bestAsk: 0.99,
+    }));
+    const market = createMockSportMarket();
+
+    const { getByText, queryByText } = renderWithProvider(
+      <FeaturedCarouselSportCard market={market} index={0} />,
+      { state: stateWithSportCardLivePricesEnabled(false) },
+    );
+
+    expect(getByText('$166.67')).toBeOnTheScreen();
+    expect(getByText('$250.00')).toBeOnTheScreen();
+    expect(getByText('60%')).toBeOnTheScreen();
+    expect(
+      getByText(`${strings('predict.outcome_draw')} 20%`),
+    ).toBeOnTheScreen();
+    expect(getByText('40%')).toBeOnTheScreen();
+    expect(queryByText('99%')).not.toBeOnTheScreen();
+    expect(mockUseLiveMarketPrices).toHaveBeenLastCalledWith(
+      ['home-token', 'draw-token', 'away-token'],
+      { enabled: false },
+    );
+  });
 });
@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useSelector } from 'react-redux';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import {
   Box,
@@ -19,6 +20,7 @@ import Routes from '../../../../../constants/navigation/Routes';
 import {
   PredictMarket,
   PredictMarketGame,
+  PredictMarketStatus,
   PredictOutcomeToken,
 } from '../../types';
 import {
@@ -30,10 +32,13 @@ import { PredictEventValues } from '../../constants/eventNames';
 import { usePredictActionGuard } from '../../hooks/usePredictActionGuard';
 import { usePredictPreviewSheet } from '../../contexts';
 import { useLiveGameUpdates } from '../../hooks/useLiveGameUpdates';
+import { useLiveMarketPrices } from '../../hooks/useLiveMarketPrices';
 import { isDrawCapableLeague } from '../../constants/sports';
+import { selectPredictSportCardLivePricesEnabledFlag } from '../../selectors/featureFlags';
 import PredictSportTeamLogo from '../PredictSportTeamLogo/PredictSportTeamLogo';
 import { getLeagueConfig } from '../../constants/sportLeagueConfigs';
 import { parseScore } from '../../utils/gameParser';
+import { isValidPrice } from '../../utils/prices';
 import FeaturedCarouselCardFooter from './FeaturedCarouselCardFooter';
 import FeaturedCarouselPayoutRow from './FeaturedCarouselPayoutRow';
 import { FEATURED_CAROUSEL_TEST_IDS } from './FeaturedCarousel.testIds';
@@ -62,6 +67,9 @@ const FeaturedCarouselSportCard: React.FC<FeaturedCarouselSportCardProps> = ({
     useNavigation<NavigationProp<PredictNavigationParamList>>();
   const { openBuySheet } = usePredictPreviewSheet();
   const { executeGuardedAction } = usePredictActionGuard({ navigation });
+  const livePricesEnabled = useSelector(
+    selectPredictSportCardLivePricesEnabledFlag,
+  );
 
   const game = market.game as PredictMarketGame;
   const config = getLeagueConfig(game.league);
@@ -117,6 +125,31 @@ const FeaturedCarouselSportCard: React.FC<FeaturedCarouselSportCardProps> = ({
   const drawToken = showDraw
     ? outcome?.tokens?.find((t) => t.title?.toLowerCase() === 'draw')
     : undefined;
+  const tokenIds = useMemo(
+    () =>
+      [homeToken, drawToken, awayToken]
+        .map((token) => token?.id)
+        .filter((id): id is string => Boolean(id)),
+    [awayToken, drawToken, homeToken],
+  );
+  const { getPrice } = useLiveMarketPrices(tokenIds, {
+    enabled:
+      livePricesEnabled &&
+      market.status === PredictMarketStatus.OPEN &&
+      tokenIds.length > 0,
+  });
+
+  const getDisplayPrice = useCallback(
+    (token: PredictOutcomeToken): number => {
+      if (!livePricesEnabled) {
+        return token.price;
+      }
+
+      const liveBestAsk = getPrice(token.id)?.bestAsk;
+      return isValidPrice(liveBestAsk) ? liveBestAsk : token.price;
+    },
+    [getPrice, livePricesEnabled],
+  );
 
   const handleCardPress = useCallback(() => {
     navigation.navigate(Routes.PREDICT.ROOT, {
@@ -265,7 +298,7 @@ const FeaturedCarouselSportCard: React.FC<FeaturedCarouselSportCardProps> = ({
                 {game.homeTeam.name}
               </Text>
               {homeToken && (
-                <FeaturedCarouselPayoutRow price={homeToken.price} />
+                <FeaturedCarouselPayoutRow price={getDisplayPrice(homeToken)} />
               )}
             </Box>
 
@@ -279,7 +312,7 @@ const FeaturedCarouselSportCard: React.FC<FeaturedCarouselSportCardProps> = ({
                 {game.awayTeam.name}
               </Text>
               {awayToken && (
-                <FeaturedCarouselPayoutRow price={awayToken.price} />
+                <FeaturedCarouselPayoutRow price={getDisplayPrice(awayToken)} />
               )}
             </Box>
           </Box>
@@ -298,7 +331,9 @@ const FeaturedCarouselSportCard: React.FC<FeaturedCarouselSportCardProps> = ({
                     style={tw.style('font-medium')}
                     color={TextColor.SuccessDefault}
                   >
-                    {formatPercentage(Math.round(homeToken.price * 100))}
+                    {formatPercentage(
+                      Math.round(getDisplayPrice(homeToken) * 100),
+                    )}
                   </Text>
                 </Button>
               </Box>
@@ -315,7 +350,10 @@ const FeaturedCarouselSportCard: React.FC<FeaturedCarouselSportCardProps> = ({
                     style={tw.style('font-medium')}
                     color={TextColor.TextDefault}
                   >
-                    {strings('predict.outcome_draw')}
+                    {strings('predict.outcome_draw')}{' '}
+                    {formatPercentage(
+                      Math.round(getDisplayPrice(drawToken) * 100),
+                    )}
                   </Text>
                 </Button>
               </Box>
@@ -333,7 +371,9 @@ const FeaturedCarouselSportCard: React.FC<FeaturedCarouselSportCardProps> = ({
                     style={tw.style('font-medium')}
                     color={TextColor.SuccessDefault}
                   >
-                    {formatPercentage(Math.round(awayToken.price * 100))}
+                    {formatPercentage(
+                      Math.round(getDisplayPrice(awayToken) * 100),
+                    )}
                   </Text>
                 </Button>
               </Box>
 
@@ -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;