MetaMask
diff --git a/‎app/components/UI/Predict/components/PredictCryptoUpDownChart/PredictCryptoUpDownChart.test.tsx‎
Lines changed: 47 additions & 1 deletion b/‎app/components/UI/Predict/components/PredictCryptoUpDownChart/PredictCryptoUpDownChart.test.tsx‎
Lines changed: 47 additions & 1 deletion
diff --git a/‎app/components/UI/Predict/components/PredictCryptoUpDownChart/PredictCryptoUpDownChart.tsx‎
Lines changed: 24 additions & 3 deletions b/‎app/components/UI/Predict/components/PredictCryptoUpDownChart/PredictCryptoUpDownChart.tsx‎
Lines changed: 24 additions & 3 deletions
diff --git a/‎app/components/UI/Predict/components/PredictCryptoUpDownDetails/PredictCryptoUpDownDetails.test.tsx‎
Lines changed: 130 additions & 6 deletions b/‎app/components/UI/Predict/components/PredictCryptoUpDownDetails/PredictCryptoUpDownDetails.test.tsx‎
Lines changed: 130 additions & 6 deletions
@@ -1,8 +1,10 @@
 import React from 'react';
+import { PixelRatio } from 'react-native';
 import { render, screen, fireEvent } from '@testing-library/react-native';
 import PredictCryptoUpDownChart, {
   CRYPTO_UP_DOWN_FORMAT_TIME,
   CRYPTO_UP_DOWN_FORMAT_VALUE,
+  computeBottomPadding,
 } from './PredictCryptoUpDownChart';
 import { useCryptoUpDownChartData } from '../../hooks/useCryptoUpDownChartData';
 import {
@@ -107,7 +109,11 @@ describe('PredictCryptoUpDownChart', () => {
     expect(chart.props.hideControls).toBe(true);
     expect(chart.props.badge).toBe(false);
     expect(chart.props.momentum).toBe(false);
-    expect(chart.props.padding).toEqual({ top: 8, right: 64, bottom: 48 });
+    expect(chart.props.padding).toEqual({
+      top: 8,
+      right: 64,
+      bottom: computeBottomPadding(300, PixelRatio.getFontScale()),
+    });
     expect(chart.props.formatValue).toBe(CRYPTO_UP_DOWN_FORMAT_VALUE);
     expect(chart.props.formatTime).toBe(CRYPTO_UP_DOWN_FORMAT_TIME);
   });
@@ -274,6 +280,28 @@ describe('PredictCryptoUpDownChart', () => {
     expect(onCurrentPriceChange).not.toHaveBeenCalled();
   });
 
+  it('reports current price while Liveline waits for renderable data', () => {
+    const market = createMockMarket();
+    const onCurrentPriceChange = jest.fn();
+
+    mockUseCryptoUpDownChartData.mockReturnValueOnce({
+      data: [{ time: 1, value: 51000 }],
+      value: 51000,
+      loading: true,
+      isLive: true,
+      window: 300,
+    });
+
+    render(
+      <PredictCryptoUpDownChart
+        market={market}
+        onCurrentPriceChange={onCurrentPriceChange}
+      />,
+    );
+
+    expect(onCurrentPriceChange).toHaveBeenCalledWith(51000);
+  });
+
   it('does not report placeholder current price without chart data', () => {
     const market = createMockMarket();
     const onCurrentPriceChange = jest.fn();
@@ -367,4 +395,22 @@ describe('PredictCryptoUpDownChart', () => {
       expect(formatTime(input)).toBe(expected);
     });
   });
+
+  describe('computeBottomPadding', () => {
+    it.each([
+      ['small chart, default font', 280, 1.0, 64],
+      ['large chart, default font', 560, 1.0, 84],
+      ['small chart, 1.5x font', 280, 1.5, 64],
+      ['large chart, 1.5x font', 560, 1.5, 96],
+      ['large chart, 2x font', 560, 2.0, 108],
+      ['below-floor chart shrinks to floor', 100, 1.0, 64],
+    ])('%s -> %dpx', (_label, chartHeight, fontScale, expected) => {
+      expect(computeBottomPadding(chartHeight, fontScale)).toBe(expected);
+    });
+
+    it('never returns less than the minimum padding floor', () => {
+      expect(computeBottomPadding(0, 1.0)).toBeGreaterThanOrEqual(64);
+      expect(computeBottomPadding(50, 0.5)).toBeGreaterThanOrEqual(64);
+    });
+  });
 });
@@ -1,9 +1,26 @@
 import React, { useEffect, useState } from 'react';
+import { PixelRatio } from 'react-native';
 import { Box } from '@metamask/design-system-react-native';
 import { LivelineChart } from '../../../Charts/LivelineChart';
 import { useCryptoUpDownChartData } from '../../hooks/useCryptoUpDownChartData';
 import type { PredictCryptoUpDownChartProps } from './PredictCryptoUpDownChart.types';
 
+const MIN_BOTTOM_PADDING_PX = 64;
+const BOTTOM_PADDING_HEIGHT_RATIO = 0.15;
+const BOTTOM_PADDING_FONT_SCALE_BOOST_PX = 24;
+
+export const computeBottomPadding = (
+  chartHeight: number,
+  fontScale: number,
+): number =>
+  Math.max(
+    MIN_BOTTOM_PADDING_PX,
+    Math.round(
+      chartHeight * BOTTOM_PADDING_HEIGHT_RATIO +
+        Math.max(0, fontScale - 1) * BOTTOM_PADDING_FONT_SCALE_BOOST_PX,
+    ),
+  );
+
 /**
  * USD whole-dollar formatter body for `LivelineChart` axis/tooltip values,
  * e.g. `1234567.89` -> `"$1,234,568"`. Serialised as a JS function body
@@ -47,12 +64,16 @@ const PredictCryptoUpDownChart: React.FC<PredictCryptoUpDownChartProps> = ({
   } = useCryptoUpDownChartData(market, targetPrice);
 
   const chartHeight = explicitHeight ?? measuredHeight;
+  const bottomPadding = computeBottomPadding(
+    chartHeight,
+    PixelRatio.getFontScale(),
+  );
 
   useEffect(() => {
-    if (!loading && data.length > 0 && Number.isFinite(value)) {
+    if (data.length > 0 && Number.isFinite(value)) {
       onCurrentPriceChange?.(value);
     }
-  }, [data.length, loading, onCurrentPriceChange, value]);
+  }, [data.length, onCurrentPriceChange, value]);
 
   return (
     <Box
@@ -77,7 +98,7 @@ const PredictCryptoUpDownChart: React.FC<PredictCryptoUpDownChartProps> = ({
           hideControls
           badge={false}
           momentum={false}
-          padding={{ top: 8, right: 64, bottom: 48 }}
+          padding={{ top: 8, right: 64, bottom: bottomPadding }}
           referenceLine={
             targetPrice ? { value: targetPrice, label: 'Target' } : undefined
           }
 
@@ -36,6 +36,7 @@ interface HeaderCompactStandardMockProps {
 interface TimeSlotPickerMockProps {
   onMarketSelected: (market: PredictMarket) => void;
   markets: PredictMarket[];
+  selectedMarketId?: string;
 }
 
 jest.mock('@metamask/design-system-twrnc-preset', () => ({
@@ -157,8 +158,15 @@ jest.mock('../TimeSlotPicker', () => {
   const { View, TouchableOpacity } = jest.requireActual('react-native');
   return {
     TimeSlotPicker: jest.fn(
-      ({ onMarketSelected, markets }: TimeSlotPickerMockProps) => (
-        <View testID="mock-time-slot-picker">
+      ({
+        onMarketSelected,
+        markets,
+        selectedMarketId,
+      }: TimeSlotPickerMockProps) => (
+        <View
+          testID="mock-time-slot-picker"
+          accessibilityLabel={`selected:${selectedMarketId ?? 'none'}`}
+        >
           {markets.map((m) => (
             <TouchableOpacity
               key={m.id}
@@ -278,6 +286,18 @@ const getChartMarketId = () => {
   return label?.match(/^market:([^;]+)/)?.[1];
 };
 
+const getChartTargetPrice = () => {
+  const chart = screen.getByTestId('mock-predict-crypto-up-down-chart');
+  const label = chart.props.accessibilityLabel as string | undefined;
+  return label?.match(/;target:(.+)$/)?.[1];
+};
+
+const getSelectedTimeSlotMarketId = () => {
+  const picker = screen.getByTestId('mock-time-slot-picker');
+  const label = picker.props.accessibilityLabel as string | undefined;
+  return label?.match(/^selected:(.+)$/)?.[1];
+};
+
 const getPositionsRowIds = () => {
   const positions = screen.queryByTestId(
     'mock-predict-crypto-up-down-positions',
@@ -534,6 +554,36 @@ describe('PredictCryptoUpDownDetails', () => {
     expect(screen.getByText('$78,000.00')).toBeOnTheScreen();
   });
 
+  it('uses market threshold as target price while fetched target is unavailable', () => {
+    const market = createMockMarket({
+      outcomes: [
+        {
+          id: 'outcome-1',
+          providerId: 'polymarket',
+          marketId: 'market-1',
+          title: 'BTC Up or Down',
+          description: '',
+          image: '',
+          status: 'open',
+          tokens: [],
+          volume: 0,
+          groupItemTitle: 'BTC',
+          groupItemThreshold: 77123,
+        },
+      ],
+    });
+    mockUsePredictSeries.mockReturnValue({ data: [market] });
+    mockUseCryptoTargetPrice.mockReturnValue({
+      data: undefined,
+      isFetching: true,
+    });
+
+    render(<PredictCryptoUpDownDetails market={market} onBack={mockOnBack} />);
+
+    expect(screen.getByText('$77,123.00')).toBeOnTheScreen();
+    expect(getChartTargetPrice()).toBe('77123');
+  });
+
   it('renders signed positive current price deltas with USD formatting', () => {
     const market = createMockMarket();
     mockChartCurrentPrice = 78010;
@@ -795,15 +845,58 @@ describe('PredictCryptoUpDownDetails', () => {
     }
   });
 
-  it('passes selected market to chart component and updates subtitle when a different time slot is selected', () => {
+  it('updates the selected time slot when a different time slot is pressed', () => {
+    const market = createMockMarket();
+
+    render(<PredictCryptoUpDownDetails market={market} onBack={mockOnBack} />);
+
+    expect(getSelectedTimeSlotMarketId()).toBe('market-1');
+
+    fireEvent.press(screen.getByTestId('mock-time-slot-market-2'));
+
+    expect(getSelectedTimeSlotMarketId()).toBe('market-2');
+  });
+
+  it('anchors the chart to the live market and keeps it stable when the user selects a future time slot', () => {
+    const now = Date.UTC(2026, 0, 1, 0, 0, 0);
+    const dateNowSpy = jest.spyOn(Date, 'now').mockReturnValue(now);
+    try {
+      const liveMarket = createMockMarket({
+        id: 'live-market',
+        endDate: new Date(now + 60_000).toISOString(),
+      });
+      const futureMarket = createMockMarket({
+        id: 'future-market',
+        endDate: new Date(now + 5 * 60_000).toISOString(),
+      });
+      mockUsePredictSeries.mockReturnValue({
+        data: [liveMarket, futureMarket],
+      });
+
+      render(
+        <PredictCryptoUpDownDetails market={liveMarket} onBack={mockOnBack} />,
+      );
+
+      expect(getChartMarketId()).toBe('live-market');
+      expect(getSelectedTimeSlotMarketId()).toBe('live-market');
+
+      fireEvent.press(screen.getByTestId('mock-time-slot-future-market'));
+
+      expect(getChartMarketId()).toBe('live-market');
+      expect(getSelectedTimeSlotMarketId()).toBe('future-market');
+    } finally {
+      dateNowSpy.mockRestore();
+    }
+  });
+
+  it('falls back to the selected market for the chart when the series has no live market', () => {
     const market = createMockMarket();
 
     render(<PredictCryptoUpDownDetails market={market} onBack={mockOnBack} />);
 
     expect(getChartMarketId()).toBe('market-1');
 
-    const timeSlot2 = screen.getByTestId('mock-time-slot-market-2');
-    fireEvent.press(timeSlot2);
+    fireEvent.press(screen.getByTestId('mock-time-slot-market-2'));
 
     expect(getChartMarketId()).toBe('market-2');
   });
@@ -980,7 +1073,7 @@ describe('PredictCryptoUpDownDetails', () => {
         scheduledCallbacks[0]();
       });
 
-      expect(getChartMarketId()).toBe('later-market');
+      expect(getSelectedTimeSlotMarketId()).toBe('later-market');
     } finally {
       clearTimeoutSpy.mockRestore();
       setTimeoutSpy.mockRestore();
@@ -1083,5 +1176,36 @@ describe('PredictCryptoUpDownDetails', () => {
         expect.objectContaining({ seriesId: 'btc-15m' }),
       );
     });
+
+    it('keeps prior seedMarkets stable when usePredictSeries transiently returns undefined after a time slot change', () => {
+      const liveMarket = createMockMarket({ id: 'market-1' });
+      const nextMarket = createMockMarket({
+        id: 'market-2',
+        endDate: '2026-04-09T19:50:00Z',
+      });
+      mockUsePredictSeries.mockReturnValue({
+        data: [liveMarket, nextMarket],
+      });
+
+      render(
+        <PredictCryptoUpDownDetails market={liveMarket} onBack={mockOnBack} />,
+      );
+
+      const getLastSeedMarketIds = () =>
+        (
+          mockUsePredictSeriesPositions.mock.calls.at(-1)?.[0].seedMarkets as {
+            id: string;
+          }[]
+        )
+          .map((m) => m.id)
+          .sort();
+
+      expect(getLastSeedMarketIds()).toEqual(['market-1', 'market-2']);
+
+      mockUsePredictSeries.mockReturnValue({ data: undefined });
+      fireEvent.press(screen.getByTestId('mock-time-slot-market-2'));
+
+      expect(getLastSeedMarketIds()).toEqual(['market-1', 'market-2']);
+    });
   });
 });