diff --git a/app/__mocks__/rive-react-native.tsx b/app/__mocks__/rive-react-native.tsx
index 3bb07b3ad13..470c340b5c0 100644
--- a/app/__mocks__/rive-react-native.tsx
+++ b/app/__mocks__/rive-react-native.tsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useImperativeHandle } from 'react';
+import React, { forwardRef, useImperativeHandle, useEffect } from 'react';
 import { View, ViewProps } from 'react-native';
 
 export interface RiveRef {
@@ -27,6 +27,7 @@ type MockRiveProps = ViewProps & {
   alignment?: string;
   autoplay?: boolean;
   stateMachineName?: string;
+  onPlay?: () => void;
 };
 
 const DEFAULT_TEST_ID = 'mock-rive-animation';
@@ -48,12 +49,19 @@ const updateLastMockedMethods = (methods: RiveRef) => {
 };
 
 const RiveMock = forwardRef<RiveRef, MockRiveProps>(
-  ({ testID = DEFAULT_TEST_ID, mockedMethods, ...viewProps }, ref) => {
+  ({ testID = DEFAULT_TEST_ID, mockedMethods, onPlay, ...viewProps }, ref) => {
     const methods = createMockedMethods(mockedMethods);
     updateLastMockedMethods(methods);
 
     useImperativeHandle(ref, () => methods, [methods]);
 
+    useEffect(() => {
+      if (onPlay) {
+        onPlay();
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     return <View testID={testID} {...viewProps} />;
   },
 );
diff --git a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.constants.ts b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.constants.ts
index 0fe149de8b3..7e7bade3f07 100644
--- a/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.constants.ts
+++ b/app/component-library/components/BottomSheets/BottomSheet/foundation/BottomSheetDialog/BottomSheetDialog.constants.ts
@@ -8,7 +8,7 @@ import { AnimationDuration } from '../../../../../constants/animation.constants'
  * The animation duration used for initial render.
  */
 export const DEFAULT_BOTTOMSHEETDIALOG_DISPLAY_DURATION =
-  AnimationDuration.Regularly;
+  AnimationDuration.Fast;
 /**
  * This number represents the swipe speed to meet the velocity threshold.
  */
diff --git a/app/components/UI/FoxAnimation/FoxAnimation.tsx b/app/components/UI/FoxAnimation/FoxAnimation.tsx
index 5b09b4e5b90..59ecef3fea4 100644
--- a/app/components/UI/FoxAnimation/FoxAnimation.tsx
+++ b/app/components/UI/FoxAnimation/FoxAnimation.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { StyleSheet, Platform, View } from 'react-native';
 import Rive, { Alignment, Fit, RiveRef } from 'rive-react-native';
 import { useSafeAreaInsets, EdgeInsets } from 'react-native-safe-area-context';
@@ -77,6 +77,8 @@ const FoxAnimation = ({
   const insets = useSafeAreaInsets();
   const styles = createStyles(hasFooter, insets);
 
+  const [isPlaying, setIsPlaying] = useState(false);
+
   const showFoxAnimation = useCallback(async () => {
     if (foxRef.current && trigger) {
       try {
@@ -88,8 +90,10 @@ const FoxAnimation = ({
   }, [foxRef, trigger]);
 
   useEffect(() => {
-    showFoxAnimation();
-  }, [showFoxAnimation]);
+    if (isPlaying) {
+      showFoxAnimation();
+    }
+  }, [showFoxAnimation, isPlaying]);
 
   return (
     <View style={[styles.foxAnimationWrapper]}>
@@ -99,9 +103,11 @@ const FoxAnimation = ({
         source={FoxAnimationRive}
         fit={Fit.Contain}
         alignment={Alignment.Center}
-        autoplay={false}
         stateMachineName="FoxRaiseUp"
         testID="fox-animation"
+        onPlay={() => {
+          setIsPlaying(true);
+        }}
       />
     </View>
   );
diff --git a/app/components/UI/MultichainBridgeTransactionListItem/MultichainBridgeTransactionListItem.tsx b/app/components/UI/MultichainBridgeTransactionListItem/MultichainBridgeTransactionListItem.tsx
index 3111a06a043..d4d208af8e1 100644
--- a/app/components/UI/MultichainBridgeTransactionListItem/MultichainBridgeTransactionListItem.tsx
+++ b/app/components/UI/MultichainBridgeTransactionListItem/MultichainBridgeTransactionListItem.tsx
@@ -23,6 +23,12 @@ import {
 } from '../Bridge/utils/transaction-history';
 import { ethers } from 'ethers';
 import { formatAmountWithThreshold } from '../../../util/number';
+import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrapper';
+import Badge, {
+  BadgeVariant,
+} from '../../../component-library/components/Badges/Badge';
+import { getNetworkImageSource } from '../../../util/networks';
+import { parseCaipAssetType } from '@metamask/utils';
 
 const MultichainBridgeTransactionListItem = ({
   transaction,
@@ -60,7 +66,25 @@ const MultichainBridgeTransactionListItem = ({
       appTheme,
       osColorScheme,
     );
-    return <Image source={icon} style={style.icon} resizeMode="stretch" />;
+    const chainId = parseCaipAssetType(
+      bridgeHistoryItem.quote.srcAsset.assetId,
+    ).chainId;
+    if (!chainId)
+      return <Image source={icon} style={style.icon} resizeMode="stretch" />;
+
+    const networkImageSource = getNetworkImageSource({ chainId });
+    return (
+      <BadgeWrapper
+        badgeElement={
+          <Badge
+            variant={BadgeVariant.Network}
+            imageSource={networkImageSource}
+          />
+        }
+      >
+        <Image source={icon} style={style.icon} resizeMode="stretch" />
+      </BadgeWrapper>
+    );
   };
 
   // Does not apply to swaps
diff --git a/app/components/UI/OnboardingAnimation/OnboardingAnimation.tsx b/app/components/UI/OnboardingAnimation/OnboardingAnimation.tsx
index 08120537ead..b2e5d8f88a0 100644
--- a/app/components/UI/OnboardingAnimation/OnboardingAnimation.tsx
+++ b/app/components/UI/OnboardingAnimation/OnboardingAnimation.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { View, Animated, Easing, StyleSheet } from 'react-native';
 import Rive, { Fit, Alignment, RiveRef } from 'rive-react-native';
 
@@ -67,6 +73,8 @@ const OnboardingAnimation = ({
   const { themeAppearance } = useAppThemeFromContext();
   const styles = createStyles();
 
+  const [isPlaying, setIsPlaying] = useState(false);
+
   const moveLogoUp = useCallback(() => {
     Animated.parallel([
       Animated.timing(logoPosition, {
@@ -118,10 +126,10 @@ const OnboardingAnimation = ({
   ]);
 
   useEffect(() => {
-    if (startOnboardingAnimation) {
+    if (startOnboardingAnimation && isPlaying) {
       startRiveAnimation();
     }
-  }, [startOnboardingAnimation, startRiveAnimation]);
+  }, [startRiveAnimation, startOnboardingAnimation, isPlaying]);
 
   return (
     <>
@@ -141,9 +149,11 @@ const OnboardingAnimation = ({
             source={MetaMaskWordmarkAnimation}
             fit={Fit.Contain}
             alignment={Alignment.Center}
-            autoplay={false}
             stateMachineName="WordmarkBuildUp"
             testID="metamask-wordmark-animation"
+            onPlay={() => {
+              setIsPlaying(true);
+            }}
           />
         </Animated.View>
       </View>
diff --git a/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.test.tsx b/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.test.tsx
index 9c649ad1c7c..b2ce11bec30 100644
--- a/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.test.tsx
+++ b/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.test.tsx
@@ -205,23 +205,25 @@ jest.mock('../../hooks/usePerpsMarketStats', () => ({
   }),
 }));
 
-const mockRefreshCandleData = jest.fn();
-jest.mock('../../hooks/usePerpsPositionData', () => ({
-  usePerpsPositionData: () => ({
-    candleData: [
-      {
-        time: 1234567890,
-        open: 45000,
-        high: 45500,
-        low: 44500,
-        close: 45200,
-        volume: 1000,
-      },
-    ],
-    isLoadingHistory: false,
-    error: null,
-    refreshCandleData: mockRefreshCandleData,
+jest.mock('../../hooks/stream/usePerpsLiveCandles', () => ({
+  usePerpsLiveCandles: () => ({
+    candleData: {
+      coin: 'BTC',
+      interval: '1h',
+      candles: [
+        {
+          time: 1234567890,
+          open: '45000',
+          high: '45500',
+          low: '44500',
+          close: '45200',
+          volume: '1000',
+        },
+      ],
+    },
+    isLoading: false,
     hasHistoricalData: true,
+    error: null,
   }),
 }));
 
@@ -464,7 +466,6 @@ describe('PerpsMarketDetailsView', () => {
   // Clean up mocks after each test
   afterEach(() => {
     jest.clearAllMocks();
-    mockRefreshCandleData.mockClear();
     mockRefreshOrders.mockClear();
     mockRefreshMarketStats.mockClear();
     mockNavigate.mockClear();
@@ -756,8 +757,8 @@ describe('PerpsMarketDetailsView', () => {
         await refreshControl.props.onRefresh();
       });
 
-      // Should refresh candle data by default
-      expect(mockRefreshCandleData).toHaveBeenCalledTimes(1);
+      // Note: Candle data now uses WebSocket streaming (usePerpsLiveCandles)
+      // so no manual refresh is needed - data updates automatically
     });
 
     it('refreshes candle data when position tab is active', async () => {
@@ -790,8 +791,7 @@ describe('PerpsMarketDetailsView', () => {
         await refreshControl.props.onRefresh();
       });
 
-      // Assert - Only candle data refreshes since positions update via WebSocket
-      expect(mockRefreshCandleData).toHaveBeenCalledTimes(1);
+      // Assert - Candle data uses WebSocket streaming, no manual refresh needed
       // refreshPosition is a no-op for WebSocket, so we don't expect it to be called
       expect(mockRefreshPosition).not.toHaveBeenCalled();
     });
@@ -845,9 +845,8 @@ describe('PerpsMarketDetailsView', () => {
         await refreshControl.props.onRefresh();
       });
 
-      // Assert - Only candle data refreshes (all other data updates via WebSocket)
-      expect(mockRefreshCandleData).toHaveBeenCalledTimes(1);
-      // Market stats, positions, and orders update via WebSocket, no manual refresh
+      // Assert - All data now updates via WebSocket, no manual refresh needed
+      // Market stats, candles, positions, and orders update via WebSocket
       expect(mockRefreshMarketStats).not.toHaveBeenCalled();
       expect(mockRefreshPosition).not.toHaveBeenCalled();
       expect(mockRefreshOrders).not.toHaveBeenCalled();
@@ -883,8 +882,8 @@ describe('PerpsMarketDetailsView', () => {
         await refreshControl.props.onRefresh();
       });
 
-      // Assert - Only candle data refreshes (positions update via WebSocket)
-      expect(mockRefreshCandleData).toHaveBeenCalledTimes(1);
+      // Assert - Candle data now uses WebSocket streaming (no manual refresh)
+      // Positions also update via WebSocket
       expect(mockRefreshPosition).not.toHaveBeenCalled();
     });
 
@@ -912,15 +911,13 @@ describe('PerpsMarketDetailsView', () => {
         await refreshControl.props.onRefresh();
       });
 
-      // Verify refresh functions were called
-      expect(mockRefreshCandleData).toHaveBeenCalledTimes(1);
+      // Note: Candle data now uses WebSocket streaming (no manual refresh needed)
     });
 
-    it('handles errors during refresh operation', async () => {
-      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
-      const mockRefreshPosition = jest
-        .fn()
-        .mockRejectedValue(new Error('Refresh failed'));
+    it('handles refresh gracefully with WebSocket streaming', async () => {
+      // Note: Candle data now uses WebSocket streaming, so refresh is a no-op
+      // This test verifies the refresh control doesn't break with WebSocket data
+      const mockRefreshPosition = jest.fn();
 
       mockUseHasExistingPosition.mockReturnValue({
         hasPosition: false,
@@ -930,10 +927,6 @@ describe('PerpsMarketDetailsView', () => {
         refreshPosition: mockRefreshPosition,
       });
 
-      mockRefreshCandleData.mockRejectedValue(
-        new Error('Candle data refresh failed'),
-      );
-
       const { getByTestId } = renderWithProvider(
         <PerpsConnectionProvider>
           <PerpsMarketDetailsView />
@@ -949,18 +942,14 @@ describe('PerpsMarketDetailsView', () => {
       );
       const refreshControl = scrollView.props.refreshControl;
 
-      // Trigger the refresh
+      // Trigger the refresh - should complete without errors
       await act(async () => {
         await refreshControl.props.onRefresh();
       });
 
-      // Should log error
-      expect(consoleErrorSpy).toHaveBeenCalledWith(
-        expect.stringContaining('Failed to refresh'),
-        expect.any(Error),
-      );
-
-      consoleErrorSpy.mockRestore();
+      // Refresh control should exist and be functional
+      expect(refreshControl).toBeDefined();
+      expect(refreshControl.props.refreshing).toBe(false);
     });
   });
 
diff --git a/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx b/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx
index 5ab2440f0f3..b3cd4c1964a 100644
--- a/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx
+++ b/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx
@@ -38,7 +38,7 @@ import type {
   PerpsMarketData,
   PerpsNavigationParamList,
 } from '../../controllers/types';
-import { usePerpsPositionData } from '../../hooks/usePerpsPositionData';
+import { usePerpsLiveCandles } from '../../hooks/stream/usePerpsLiveCandles';
 import { usePerpsMarketStats } from '../../hooks/usePerpsMarketStats';
 import { useHasExistingPosition } from '../../hooks/useHasExistingPosition';
 import { CandlePeriod, TimeDuration } from '../../constants/chartConfig';
@@ -65,6 +65,9 @@ import {
 } from '../../hooks/usePerpsDataMonitor';
 import { usePerpsMeasurement } from '../../hooks/usePerpsMeasurement';
 import { usePerpsLiveOrders, usePerpsLiveAccount } from '../../hooks/stream';
+import { usePerpsABTest } from '../../utils/abTesting/usePerpsABTest';
+import { BUTTON_COLOR_TEST } from '../../utils/abTesting/tests';
+import { selectPerpsButtonColorTestVariant } from '../../selectors/featureFlags';
 import PerpsMarketTabs from '../../components/PerpsMarketTabs/PerpsMarketTabs';
 import type { PerpsTabId } from '../../components/PerpsMarketTabs/PerpsMarketTabs.types';
 import PerpsOICapWarning from '../../components/PerpsOICapWarning';
@@ -94,7 +97,6 @@ import { useConfirmNavigation } from '../../../../Views/confirmations/hooks/useC
 import Engine from '../../../../../core/Engine';
 import { setPerpsChartPreferredCandlePeriod } from '../../../../../actions/settings';
 import { selectPerpsChartPreferredCandlePeriod } from '../../selectors/chartPreferences';
-import Skeleton from '../../../../../component-library/components/Skeleton/Skeleton';
 
 interface MarketDetailsRouteParams {
   market: PerpsMarketData;
@@ -180,6 +182,15 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
 
   const { account } = usePerpsLiveAccount();
 
+  // A/B Testing: Button color test (TAT-1937)
+  const {
+    variantName: buttonColorVariant,
+    isEnabled: isButtonColorTestEnabled,
+  } = usePerpsABTest({
+    test: BUTTON_COLOR_TEST,
+    featureFlagSelector: selectPerpsButtonColorTestVariant,
+  });
+
   // TP/SL order selection state - track TP and SL separately
   const [activeTPOrderId, setActiveTPOrderId] = useState<string | null>(null);
   const [activeSLOrderId, setActiveSLOrderId] = useState<string | null>(null);
@@ -325,12 +336,16 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
   // Get comprehensive market statistics
   const marketStats = usePerpsMarketStats(market?.symbol || '');
 
-  const { candleData, isLoadingHistory, refreshCandleData, hasHistoricalData } =
-    usePerpsPositionData({
-      coin: market?.symbol || '',
-      selectedDuration: TimeDuration.YEAR_TO_DATE,
-      selectedInterval: selectedCandlePeriod,
-    });
+  const {
+    candleData,
+    isLoading: isLoadingHistory,
+    fetchMoreHistory,
+  } = usePerpsLiveCandles({
+    coin: market?.symbol || '',
+    interval: selectedCandlePeriod,
+    duration: TimeDuration.YEAR_TO_DATE,
+    throttleMs: 1000,
+  });
 
   // Check if user has an existing position for this market
   const { isLoading: isLoadingPosition, existingPosition } =
@@ -394,6 +409,10 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
       [PerpsEventProperties.SOURCE]:
         source || PerpsEventValues.SOURCE.PERP_MARKETS,
       [PerpsEventProperties.OPEN_POSITION]: !!existingPosition,
+      // A/B Test context (TAT-1937) - for baseline exposure tracking
+      ...(isButtonColorTestEnabled && {
+        [PerpsEventProperties.AB_TEST_BUTTON_COLOR]: buttonColorVariant,
+      }),
     },
   });
 
@@ -434,15 +453,14 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
       // Reset chart view to default position
       chartRef.current?.resetToDefault();
 
-      if (candleData) {
-        await refreshCandleData();
-      }
+      // WebSocket streaming provides real-time data - no manual refresh needed
+      // Just reset the UI state and the chart will update automatically
     } catch (error) {
-      console.error('Failed to refresh candle data:', error);
+      console.error('Failed to refresh chart state:', error);
     } finally {
       setRefreshing(false);
     }
-  }, [candleData, refreshCandleData]);
+  }, []);
 
   // Handle order selection for chart integration
   const handleOrderSelect = useCallback(
@@ -551,6 +569,20 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
         return;
       }
 
+      // Track AB test on button press (TAT-1937)
+      if (isButtonColorTestEnabled) {
+        track(MetaMetricsEvents.PERPS_UI_INTERACTION, {
+          [PerpsEventProperties.INTERACTION_TYPE]:
+            PerpsEventValues.INTERACTION_TYPE.TAP,
+          [PerpsEventProperties.ASSET]: market.symbol,
+          [PerpsEventProperties.DIRECTION]:
+            direction === 'long'
+              ? PerpsEventValues.DIRECTION.LONG
+              : PerpsEventValues.DIRECTION.SHORT,
+          [PerpsEventProperties.AB_TEST_BUTTON_COLOR]: buttonColorVariant,
+        });
+      }
+
       navigateToOrder({
         direction,
         asset: market.symbol,
@@ -563,6 +595,8 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
       track,
       navigateToOrder,
       market?.symbol,
+      isButtonColorTestEnabled,
+      buttonColorVariant,
     ],
   );
 
@@ -697,22 +731,17 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
         >
           {/* TradingView Chart Section */}
           <View style={[styles.section, styles.chartSection]}>
-            {hasHistoricalData ? (
-              <TradingViewChart
-                ref={chartRef}
-                candleData={candleData}
-                height={350}
-                visibleCandleCount={visibleCandleCount}
-                tpslLines={tpslLines}
-                testID={`${PerpsMarketDetailsViewSelectorsIDs.CONTAINER}-tradingview-chart`}
-              />
-            ) : (
-              <Skeleton
-                height={350}
-                width="100%"
-                testID={`${PerpsMarketDetailsViewSelectorsIDs.CONTAINER}-chart-skeleton`}
-              />
-            )}
+            {/* Always render chart to avoid WebView remount on interval changes */}
+            <TradingViewChart
+              ref={chartRef}
+              candleData={candleData}
+              height={350}
+              visibleCandleCount={visibleCandleCount}
+              tpslLines={tpslLines}
+              symbol={market?.symbol}
+              onNeedMoreHistory={fetchMoreHistory}
+              testID={`${PerpsMarketDetailsViewSelectorsIDs.CONTAINER}-tradingview-chart`}
+            />
 
             {/* Candle Period Selector */}
             <PerpsCandlePeriodSelector
@@ -806,29 +835,53 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
           {hasLongShortButtons && !isAtOICap && (
             <View style={styles.actionsContainer}>
               <View style={styles.actionButtonWrapper}>
-                <ButtonSemantic
-                  severity={ButtonSemanticSeverity.Success}
-                  onPress={handleLongPress}
-                  isFullWidth
-                  size={ButtonSizeRNDesignSystem.Lg}
-                  isDisabled={isAtOICap}
-                  testID={PerpsMarketDetailsViewSelectorsIDs.LONG_BUTTON}
-                >
-                  {strings('perps.market.long')}
-                </ButtonSemantic>
+                {buttonColorVariant === 'monochrome' ? (
+                  <Button
+                    variant={ButtonVariants.Secondary}
+                    size={ButtonSize.Lg}
+                    width={ButtonWidthTypes.Full}
+                    label={strings('perps.market.long')}
+                    onPress={handleLongPress}
+                    isDisabled={isAtOICap}
+                    testID={PerpsMarketDetailsViewSelectorsIDs.LONG_BUTTON}
+                  />
+                ) : (
+                  <ButtonSemantic
+                    severity={ButtonSemanticSeverity.Success}
+                    onPress={handleLongPress}
+                    isFullWidth
+                    size={ButtonSizeRNDesignSystem.Lg}
+                    isDisabled={isAtOICap}
+                    testID={PerpsMarketDetailsViewSelectorsIDs.LONG_BUTTON}
+                  >
+                    {strings('perps.market.long')}
+                  </ButtonSemantic>
+                )}
               </View>
 
               <View style={styles.actionButtonWrapper}>
-                <ButtonSemantic
-                  severity={ButtonSemanticSeverity.Danger}
-                  onPress={handleShortPress}
-                  isFullWidth
-                  size={ButtonSizeRNDesignSystem.Lg}
-                  isDisabled={isAtOICap}
-                  testID={PerpsMarketDetailsViewSelectorsIDs.SHORT_BUTTON}
-                >
-                  {strings('perps.market.short')}
-                </ButtonSemantic>
+                {buttonColorVariant === 'monochrome' ? (
+                  <Button
+                    variant={ButtonVariants.Secondary}
+                    size={ButtonSize.Lg}
+                    width={ButtonWidthTypes.Full}
+                    label={strings('perps.market.short')}
+                    onPress={handleShortPress}
+                    isDisabled={isAtOICap}
+                    testID={PerpsMarketDetailsViewSelectorsIDs.SHORT_BUTTON}
+                  />
+                ) : (
+                  <ButtonSemantic
+                    severity={ButtonSemanticSeverity.Danger}
+                    onPress={handleShortPress}
+                    isFullWidth
+                    size={ButtonSizeRNDesignSystem.Lg}
+                    isDisabled={isAtOICap}
+                    testID={PerpsMarketDetailsViewSelectorsIDs.SHORT_BUTTON}
+                  >
+                    {strings('perps.market.short')}
+                  </ButtonSemantic>
+                )}
               </View>
             </View>
           )}
diff --git a/app/components/UI/Perps/components/TradingViewChart/TradingViewChart.tsx b/app/components/UI/Perps/components/TradingViewChart/TradingViewChart.tsx
index beef163d6ed..f4ef89a6dc0 100644
--- a/app/components/UI/Perps/components/TradingViewChart/TradingViewChart.tsx
+++ b/app/components/UI/Perps/components/TradingViewChart/TradingViewChart.tsx
@@ -44,7 +44,9 @@ interface TradingViewChartProps {
   height?: number;
   tpslLines?: TPSLLines;
   onChartReady?: () => void;
+  onNeedMoreHistory?: () => void; // Callback when user scrolls to left edge and needs more historical data
   visibleCandleCount?: number; // Number of candles to display (for zoom level)
+  symbol?: string; // Expected symbol for validation (prevents stale data from previous market)
   testID?: string;
 }
 
@@ -61,7 +63,9 @@ const TradingViewChart = React.forwardRef<
       height = 350,
       tpslLines,
       onChartReady,
+      onNeedMoreHistory,
       visibleCandleCount = 45, // Default to 45 visible candles
+      symbol,
       testID,
     },
     ref,
@@ -77,6 +81,11 @@ const TradingViewChart = React.forwardRef<
       close: string;
       time: number;
     } | null>(null);
+    // Buffer for candle data that arrives before WebView is ready (Android fix)
+    const pendingCandleDataRef = useRef<{
+      data: CandleData;
+      timestamp: number;
+    } | null>(null);
 
     // Format OHLC values using the same formatting as the header
     const formattedOhlcData = useMemo(() => {
@@ -222,6 +231,17 @@ const TradingViewChart = React.forwardRef<
               }
               setOhlcData(message.data);
               break;
+            case 'NEED_MORE_HISTORY':
+              // User scrolled to left edge - request more historical data
+              DevLogger.log(
+                'TradingViewChart: Received NEED_MORE_HISTORY from WebView',
+                {
+                  currentDataLength: message.currentDataLength,
+                  visibleRange: message.visibleRange,
+                },
+              );
+              onNeedMoreHistory?.();
+              break;
             default:
               break;
           }
@@ -232,7 +252,7 @@ const TradingViewChart = React.forwardRef<
           );
         }
       },
-      [onChartReady, ohlcData],
+      [onChartReady, onNeedMoreHistory, ohlcData],
     );
 
     // Convert CandleData to format expected by TradingView Lightweight Charts
@@ -299,14 +319,56 @@ const TradingViewChart = React.forwardRef<
 
     // Send real candle data to chart
     useEffect(() => {
-      if (!isChartReady || !webViewRef.current) return;
+      // If chart is not ready, buffer the data for later
+      if (!isChartReady) {
+        if (candleData?.candles && candleData.candles.length > 0) {
+          // Validate before buffering
+          if (!symbol || candleData.coin === symbol) {
+            pendingCandleDataRef.current = {
+              data: candleData,
+              timestamp: Date.now(),
+            };
+          }
+        }
+        return;
+      }
+
+      // Chart is ready - send data
+      if (!webViewRef.current) return;
 
       let dataToSend = null;
       let dataSource = 'none';
+      let dataToUse: CandleData | null = null;
+
+      // Check for pending buffered data first (Android case)
+      if (pendingCandleDataRef.current) {
+        dataToUse = pendingCandleDataRef.current.data;
+        pendingCandleDataRef.current = null; // Clear buffer
+      } else if (candleData?.candles && candleData.candles.length > 0) {
+        dataToUse = candleData;
+      }
 
-      // Prioritize real data over sample data
-      if (candleData?.candles && candleData.candles.length > 0) {
-        dataToSend = formatCandleData(candleData);
+      // If no data available, clear the chart to prevent stale data display
+      if (!dataToUse?.candles?.length) {
+        webViewRef.current.postMessage(
+          JSON.stringify({
+            type: 'CLEAR_DATA',
+          }),
+        );
+        return;
+      }
+
+      if (dataToUse?.candles && dataToUse.candles.length > 0) {
+        // DEFENSIVE: Validate candle data matches expected symbol
+        if (symbol && dataToUse.coin !== symbol) {
+          DevLogger.log(
+            'TradingViewChart: Ignoring mismatched candleData',
+            `Expected: ${symbol}, Got: ${dataToUse.coin}`,
+          );
+          return;
+        }
+
+        dataToSend = formatCandleData(dataToUse);
         dataSource = 'real';
       }
 
@@ -325,6 +387,7 @@ const TradingViewChart = React.forwardRef<
       formatCandleData,
       candleData,
       visibleCandleCount,
+      symbol,
     ]);
 
     // Update auxiliary lines when they change
@@ -406,22 +469,23 @@ const TradingViewChart = React.forwardRef<
           twClassName="overflow-hidden rounded-lg"
           style={{ height, width: '100%', minHeight: height }} // eslint-disable-line react-native/no-inline-styles
         >
-          {/* Show skeleton while chart is loading */}
-          {!isChartReady && (
-            <Skeleton
-              height={height}
-              width="100%"
-              // eslint-disable-next-line react-native/no-inline-styles
-              style={{
-                position: 'absolute',
-                zIndex: 10,
-                backgroundColor: theme.colors.background.default,
-              }} // eslint-disable-line react-native/no-inline-styles
-              testID={`${
-                testID || TradingViewChartSelectorsIDs.CONTAINER
-              }-skeleton`}
-            />
-          )}
+          {/* Show skeleton when chart is loading AND (no data OR data doesn't match symbol) */}
+          {!isChartReady &&
+            (!candleData || (symbol && candleData.coin !== symbol)) && (
+              <Skeleton
+                height={height}
+                width="100%"
+                // eslint-disable-next-line react-native/no-inline-styles
+                style={{
+                  position: 'absolute',
+                  zIndex: 10,
+                  backgroundColor: theme.colors.background.default,
+                }} // eslint-disable-line react-native/no-inline-styles
+                testID={`${
+                  testID || TradingViewChartSelectorsIDs.CONTAINER
+                }-skeleton`}
+              />
+            )}
           {Platform.OS === 'android' ? (
             <GestureDetector gesture={Gesture.Pinch()}>
               {webViewElement}
diff --git a/app/components/UI/Perps/components/TradingViewChart/TradingViewChartTemplate.tsx b/app/components/UI/Perps/components/TradingViewChart/TradingViewChartTemplate.tsx
index 3fa0097ac3b..40782bbab20 100644
--- a/app/components/UI/Perps/components/TradingViewChart/TradingViewChartTemplate.tsx
+++ b/app/components/UI/Perps/components/TradingViewChart/TradingViewChartTemplate.tsx
@@ -304,10 +304,64 @@ export const createTradingViewChartTemplate = (
         window.lastLogicalRange = null;
         window.panVelocity = 0;
         window.panningDisableTime = 300; // ms to disable zoom restrictions after panning stops
-        
+
         // Reset prevention variables
         window.hasUserInteracted = false; // Track if user has ever interacted with the chart
         window.lastDataLength = 0; // Track actual data changes vs rerenders
+
+        // Edge detection variables for historical data loading
+        window.lastHistoryFetchTime = 0;
+        window.HISTORY_FETCH_COOLDOWN = 2000; // 2 seconds cooldown between fetches
+        window.EDGE_THRESHOLD = 5; // Consider "at edge" if within 5 candles from start
+        // Set up edge detection for loading more historical data
+        window.setupEdgeDetection = function() {
+            if (!window.chart) {
+                console.log('📊 TradingView: Cannot set up edge detection - chart not ready');
+                return;
+            }
+
+            try {
+                // Subscribe to visible logical range changes
+                window.chart.timeScale().subscribeVisibleLogicalRangeChange((range) => {
+                    if (!range || !window.allCandleData || window.allCandleData.length === 0) {
+                        return;
+                    }
+
+                    // Check if we're near the left edge (oldest data)
+                    const isAtLeftEdge = range.from <= window.EDGE_THRESHOLD;
+
+                    if (isAtLeftEdge) {
+                        const now = Date.now();
+                        const timeSinceLastFetch = now - window.lastHistoryFetchTime;
+
+                        // Throttle to avoid spam requests
+                        if (timeSinceLastFetch < window.HISTORY_FETCH_COOLDOWN) {
+                            return;
+                        }
+
+                        // Update last fetch time
+                        window.lastHistoryFetchTime = now;
+
+                        console.log('📊 TradingView: Reached left edge - requesting more history');
+
+                        // Send message to React Native to fetch more historical data
+                        if (window.ReactNativeWebView) {
+                            window.ReactNativeWebView.postMessage(JSON.stringify({
+                                type: 'NEED_MORE_HISTORY',
+                                timestamp: new Date().toISOString(),
+                                currentDataLength: window.allCandleData.length,
+                                visibleRange: { from: range.from, to: range.to }
+                            }));
+                        }
+                    }
+                });
+
+                console.log('📊 TradingView: Edge detection set up successfully');
+            } catch (error) {
+                console.error('📊 TradingView: Error setting up edge detection:', error);
+            }
+        };
+
         // Step 2: Create chart
         function createChart() {
             if (!window.LightweightCharts) {
@@ -490,7 +544,10 @@ export const createTradingViewChartTemplate = (
                         type: 'CHART_READY',
                         timestamp: new Date().toISOString()
                     }));
-                } 
+                }
+
+                // Set up edge detection for loading more historical data
+                window.setupEdgeDetection();
             } catch (error) {
                 console.error('TradingView: Error creating chart:', error);
             }
@@ -1078,6 +1135,14 @@ export const createTradingViewChartTemplate = (
                             }
                         }
                         break;
+                    case 'CLEAR_DATA':
+                        // Clear chart data (e.g., during market switch)
+                        if (window.candlestickSeries) {
+                            window.candlestickSeries.setData([]);
+                            window.allCandleData = [];
+                            console.log('📊 TradingView: Cleared chart data');
+                        }
+                        break;
                     case 'ADD_AUXILIARY_LINES':
                         if (window.chart && message.lines) {
                             window.updatePriceLines(message.lines);
diff --git a/app/components/UI/Perps/constants/buttonColors.ts b/app/components/UI/Perps/constants/buttonColors.ts
new file mode 100644
index 00000000000..7e65d512489
--- /dev/null
+++ b/app/components/UI/Perps/constants/buttonColors.ts
@@ -0,0 +1,89 @@
+/**
+ * Button color configurations for A/B testing
+ *
+ * This module provides mappings between color names (from A/B test variants)
+ * and ButtonSemantic severity values used in the UI.
+ */
+
+import { ButtonSemanticSeverity } from '../../../../component-library/components-temp/Buttons/ButtonSemantic/ButtonSemantic.types';
+import type { ButtonColorVariant } from '../utils/abTesting/types';
+
+/**
+ * Maps color names to ButtonSemantic severity values
+ */
+const COLOR_TO_SEVERITY_MAP = {
+  green: ButtonSemanticSeverity.Success,
+  red: ButtonSemanticSeverity.Danger,
+  // Note: ButtonSemantic doesn't have a native "white" or "neutral" severity.
+  // For the monochrome variant, we use Success for both directions.
+  // This creates a neutral appearance by removing the semantic distinction.
+  // Alternative approaches could include:
+  // 1. Using a different button component (ButtonPrimary/ButtonSecondary)
+  // 2. Adding a new Neutral severity to ButtonSemanticSeverity
+  // 3. Applying custom styling overrides
+  white: ButtonSemanticSeverity.Success,
+  blue: ButtonSemanticSeverity.Success,
+  orange: ButtonSemanticSeverity.Danger,
+} as const;
+
+/**
+ * Converts a button color variant to ButtonSemantic severity values
+ *
+ * @param colors - Button color configuration from A/B test variant
+ * @returns Object with severity values for long and short buttons
+ *
+ * @example
+ * ```typescript
+ * const colors = { long: 'green', short: 'red' };
+ * const severities = getButtonSeverities(colors);
+ * // Returns: { long: ButtonSemanticSeverity.Success, short: ButtonSemanticSeverity.Danger }
+ * ```
+ */
+export function getButtonSeverities(colors: ButtonColorVariant): {
+  long: ButtonSemanticSeverity;
+  short: ButtonSemanticSeverity;
+} {
+  return {
+    long: COLOR_TO_SEVERITY_MAP[colors.long],
+    short: COLOR_TO_SEVERITY_MAP[colors.short],
+  };
+}
+
+/**
+ * Default button colors (control variant)
+ * Used as fallback when A/B test is disabled
+ */
+export const DEFAULT_BUTTON_COLORS: ButtonColorVariant = {
+  long: 'green',
+  short: 'red',
+};
+
+/**
+ * Gets the button severity for a specific direction
+ *
+ * @param direction - Trading direction ('long' or 'short')
+ * @param colors - Button color configuration
+ * @returns ButtonSemantic severity value
+ *
+ * @example
+ * ```typescript
+ * const severity = getButtonSeverityForDirection('long', { long: 'green', short: 'red' });
+ * // Returns: ButtonSemanticSeverity.Success
+ * ```
+ */
+export function getButtonSeverityForDirection(
+  direction: 'long' | 'short',
+  colors: ButtonColorVariant,
+): ButtonSemanticSeverity {
+  const severities = getButtonSeverities(colors);
+  return severities[direction];
+}
+
+/**
+ * Type guard to check if a color is valid
+ */
+export function isValidButtonColor(
+  color: string,
+): color is keyof typeof COLOR_TO_SEVERITY_MAP {
+  return color in COLOR_TO_SEVERITY_MAP;
+}
diff --git a/app/components/UI/Perps/constants/eventNames.ts b/app/components/UI/Perps/constants/eventNames.ts
index f2a66810215..4f023661231 100644
--- a/app/components/UI/Perps/constants/eventNames.ts
+++ b/app/components/UI/Perps/constants/eventNames.ts
@@ -104,6 +104,12 @@ export const PerpsEventProperties = {
   // PnL Hero Card properties
   IMAGE_SELECTED: 'image_selected',
   TAB_NUMBER: 'tab_number',
+
+  // A/B testing properties (flat per test for multiple concurrent tests)
+  // Only include AB test properties when test is enabled (event not sent when disabled)
+  // Button color test (TAT-1937)
+  AB_TEST_BUTTON_COLOR: 'ab_test_button_color',
+  // Future tests: add as AB_TEST_{TEST_NAME} (no _ENABLED property needed)
 } as const;
 
 /**
@@ -236,4 +242,12 @@ export const PerpsEventValues = {
     FUNDING: 'funding',
     DEPOSITS: 'deposits',
   },
+  // A/B testing values
+  AB_TEST: {
+    // Test IDs
+    BUTTON_COLOR_TEST: 'button_color_test',
+    // Button color test variants
+    CONTROL: 'control',
+    MONOCHROME: 'monochrome',
+  },
 } as const;
diff --git a/app/components/UI/Perps/controllers/PerpsController.ts b/app/components/UI/Perps/controllers/PerpsController.ts
index 089c4e8b845..cb978580726 100644
--- a/app/components/UI/Perps/controllers/PerpsController.ts
+++ b/app/components/UI/Perps/controllers/PerpsController.ts
@@ -76,6 +76,7 @@ import type {
   PerpsControllerConfig,
   Position,
   SubscribeAccountParams,
+  SubscribeCandlesParams,
   SubscribeOICapsParams,
   SubscribeOrderFillsParams,
   SubscribeOrdersParams,
@@ -1637,6 +1638,7 @@ export class PerpsController extends BaseController<
     coin: string,
     interval: CandlePeriod,
     limit: number = 100,
+    endTime?: number,
   ): Promise<CandleData> {
     const provider = this.getActiveProvider();
     return MarketDataService.fetchHistoricalCandles({
@@ -1644,6 +1646,7 @@ export class PerpsController extends BaseController<
       coin,
       interval,
       limit,
+      endTime,
       context: this.createServiceContext('fetchHistoricalCandles'),
     });
   }
@@ -1922,6 +1925,29 @@ export class PerpsController extends BaseController<
     }
   }
 
+  /**
+   * Subscribe to live candle updates
+   */
+  subscribeToCandles(params: SubscribeCandlesParams): () => void {
+    try {
+      const provider = this.getActiveProvider();
+      return provider.subscribeToCandles(params);
+    } catch (error) {
+      Logger.error(
+        ensureError(error),
+        this.getErrorContext('subscribeToCandles', {
+          coin: params.coin,
+          interval: params.interval,
+          duration: params.duration,
+        }),
+      );
+      // Return a no-op unsubscribe function
+      return () => {
+        // No-op: Provider not initialized
+      };
+    }
+  }
+
   /**
    * Subscribe to open interest cap updates
    * Zero additional network overhead - data comes from existing webData3 subscription
diff --git a/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.ts b/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.ts
index 9dbb3ccc0c9..af0f17adfb7 100644
--- a/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.ts
+++ b/app/components/UI/Perps/controllers/providers/HyperLiquidProvider.ts
@@ -107,6 +107,7 @@ import type {
   Position,
   ReadyToTradeResult,
   SubscribeAccountParams,
+  SubscribeCandlesParams,
   SubscribeOICapsParams,
   SubscribeOrderFillsParams,
   SubscribeOrdersParams,
@@ -4699,6 +4700,13 @@ export class HyperLiquidProvider implements IPerpsProvider {
     return this.subscriptionService.subscribeToOICaps(params);
   }
 
+  /**
+   * Subscribe to live candle updates
+   */
+  subscribeToCandles(params: SubscribeCandlesParams): () => void {
+    return this.clientService.subscribeToCandles(params);
+  }
+
   /**
    * Configure live data settings
    */
diff --git a/app/components/UI/Perps/controllers/services/MarketDataService.test.ts b/app/components/UI/Perps/controllers/services/MarketDataService.test.ts
index 572b0a4271d..76fb2868900 100644
--- a/app/components/UI/Perps/controllers/services/MarketDataService.test.ts
+++ b/app/components/UI/Perps/controllers/services/MarketDataService.test.ts
@@ -881,7 +881,7 @@ describe('MarketDataService', () => {
       expect(result).toEqual(mockCandleData);
       expect(
         hyperLiquidProvider.clientService.fetchHistoricalCandles,
-      ).toHaveBeenCalledWith('BTC', '1h', 100);
+      ).toHaveBeenCalledWith('BTC', '1h', 100, undefined);
       expect(trace).toHaveBeenCalledWith(
         expect.objectContaining({ name: 'Perps Fetch Historical Candles' }),
       );
diff --git a/app/components/UI/Perps/controllers/services/MarketDataService.ts b/app/components/UI/Perps/controllers/services/MarketDataService.ts
index e91488bdff9..55faf00e35c 100644
--- a/app/components/UI/Perps/controllers/services/MarketDataService.ts
+++ b/app/components/UI/Perps/controllers/services/MarketDataService.ts
@@ -647,9 +647,10 @@ export class MarketDataService {
     coin: string;
     interval: CandlePeriod;
     limit?: number;
+    endTime?: number;
     context: ServiceContext;
   }): Promise<CandleData> {
-    const { provider, coin, interval, limit = 100, context } = options;
+    const { provider, coin, interval, limit = 100, endTime, context } = options;
     const traceId = uuidv4();
     let traceData: { success: boolean; error?: string } | undefined;
 
@@ -673,6 +674,7 @@ export class MarketDataService {
             coin: string,
             interval: CandlePeriod,
             limit: number,
+            endTime?: number,
           ) => Promise<CandleData>;
         };
       };
@@ -685,6 +687,7 @@ export class MarketDataService {
           coin,
           interval,
           limit,
+          endTime,
         );
 
       traceData = { success: true };
@@ -708,6 +711,7 @@ export class MarketDataService {
             coin,
             interval,
             limit,
+            endTime,
           },
         },
       });
diff --git a/app/components/UI/Perps/controllers/types/index.ts b/app/components/UI/Perps/controllers/types/index.ts
index b8a0c015cec..64ff98deef5 100644
--- a/app/components/UI/Perps/controllers/types/index.ts
+++ b/app/components/UI/Perps/controllers/types/index.ts
@@ -13,6 +13,8 @@ export * from '../../types/navigation';
 
 // Import adapter types
 import type { RawHyperLiquidLedgerUpdate } from '../../utils/hyperLiquidAdapter';
+import type { CandleData } from '../../types/perps-types';
+import type { CandlePeriod, TimeDuration } from '../../constants/chartConfig';
 
 // User history item for deposits and withdrawals
 export interface UserHistoryItem {
@@ -611,6 +613,14 @@ export interface SubscribeOICapsParams {
   accountId?: CaipAccountId; // Optional: defaults to selected account
 }
 
+export interface SubscribeCandlesParams {
+  coin: string;
+  interval: CandlePeriod;
+  duration?: TimeDuration;
+  callback: (data: CandleData) => void;
+  onError?: (error: Error) => void;
+}
+
 export interface LiquidationPriceParams {
   entryPrice: number;
   leverage: number;
@@ -798,6 +808,7 @@ export interface IPerpsProvider {
   subscribeToOrders(params: SubscribeOrdersParams): () => void;
   subscribeToAccount(params: SubscribeAccountParams): () => void;
   subscribeToOICaps(params: SubscribeOICapsParams): () => void;
+  subscribeToCandles(params: SubscribeCandlesParams): () => void;
 
   // Live data configuration
   setLiveDataConfig(config: Partial<LiveDataConfig>): void;
diff --git a/app/components/UI/Perps/hooks/index.ts b/app/components/UI/Perps/hooks/index.ts
index 09744dbfb21..04321bc4d60 100644
--- a/app/components/UI/Perps/hooks/index.ts
+++ b/app/components/UI/Perps/hooks/index.ts
@@ -24,7 +24,6 @@ export { usePerpsConnection } from './usePerpsConnection';
 export { usePerpsPortfolioBalance } from './usePerpsPortfolioBalance';
 
 // Live data hooks (WebSocket subscriptions)
-export { usePerpsPositionData } from './usePerpsPositionData';
 export { usePerpsPrices } from './usePerpsPrices';
 
 // Asset metadata hooks
diff --git a/app/components/UI/Perps/hooks/stream/index.ts b/app/components/UI/Perps/hooks/stream/index.ts
index 567f5e10386..f3925ae1d01 100644
--- a/app/components/UI/Perps/hooks/stream/index.ts
+++ b/app/components/UI/Perps/hooks/stream/index.ts
@@ -8,6 +8,7 @@ export {
 export { usePerpsLiveFills } from './usePerpsLiveFills';
 export { usePerpsLiveAccount } from './usePerpsLiveAccount';
 export { usePerpsTopOfBook } from './usePerpsTopOfBook';
+export { usePerpsLiveCandles } from './usePerpsLiveCandles';
 
 // Export types for convenience
 export type { UsePerpsLivePricesOptions } from './usePerpsLivePrices';
@@ -22,6 +23,10 @@ export type {
   UsePerpsTopOfBookOptions,
   TopOfBookData,
 } from './usePerpsTopOfBook';
+export type {
+  UsePerpsLiveCandlesOptions,
+  UsePerpsLiveCandlesReturn,
+} from './usePerpsLiveCandles';
 
 // Re-export types from controllers
 export type {
diff --git a/app/components/UI/Perps/hooks/stream/usePerpsLiveCandles.test.ts b/app/components/UI/Perps/hooks/stream/usePerpsLiveCandles.test.ts
new file mode 100644
index 00000000000..81ffc3c450a
--- /dev/null
+++ b/app/components/UI/Perps/hooks/stream/usePerpsLiveCandles.test.ts
@@ -0,0 +1,487 @@
+import { renderHook, act } from '@testing-library/react-native';
+import { usePerpsLiveCandles } from './usePerpsLiveCandles';
+import { CandlePeriod, TimeDuration } from '../../constants/chartConfig';
+import type { CandleData } from '../../types/perps-types';
+
+// Mock the stream provider
+const mockCandleSubscribe = jest.fn();
+const mockFetchHistoricalCandles = jest.fn();
+
+jest.mock('../../providers/PerpsStreamManager', () => ({
+  usePerpsStream: jest.fn(() => ({
+    candles: {
+      subscribe: mockCandleSubscribe,
+      fetchHistoricalCandles: mockFetchHistoricalCandles,
+    },
+  })),
+}));
+
+// Mock DevLogger to suppress logs in tests
+jest.mock('../../../../../core/SDKConnect/utils/DevLogger');
+
+describe('usePerpsLiveCandles', () => {
+  const mockCandleData: CandleData = {
+    coin: 'BTC',
+    interval: CandlePeriod.ONE_HOUR,
+    candles: [
+      {
+        time: 1700000000000,
+        open: '50000',
+        high: '51000',
+        low: '49000',
+        close: '50500',
+        volume: '100',
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockFetchHistoricalCandles.mockReset();
+  });
+
+  it('subscribes to candles on mount', () => {
+    mockCandleSubscribe.mockReturnValue(jest.fn());
+
+    renderHook(() =>
+      usePerpsLiveCandles({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+      }),
+    );
+
+    expect(mockCandleSubscribe).toHaveBeenCalledWith({
+      coin: 'BTC',
+      interval: CandlePeriod.ONE_HOUR,
+      duration: TimeDuration.ONE_DAY,
+      callback: expect.any(Function),
+      throttleMs: 1000,
+      onError: expect.any(Function),
+    });
+  });
+
+  it('unsubscribes on unmount', () => {
+    const mockUnsubscribe = jest.fn();
+    mockCandleSubscribe.mockReturnValue(mockUnsubscribe);
+
+    const { unmount } = renderHook(() =>
+      usePerpsLiveCandles({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+      }),
+    );
+
+    unmount();
+
+    expect(mockUnsubscribe).toHaveBeenCalled();
+  });
+
+  it('resubscribes when coin changes', () => {
+    const mockUnsubscribe = jest.fn();
+    mockCandleSubscribe.mockReturnValue(mockUnsubscribe);
+
+    const { rerender } = renderHook(
+      ({ coin }) =>
+        usePerpsLiveCandles({
+          coin,
+          interval: CandlePeriod.ONE_HOUR,
+          duration: TimeDuration.ONE_DAY,
+        }),
+      {
+        initialProps: { coin: 'BTC' },
+      },
+    );
+
+    expect(mockCandleSubscribe).toHaveBeenCalledTimes(1);
+
+    // Change coin
+    rerender({ coin: 'ETH' });
+
+    // Should unsubscribe from old and subscribe to new
+    expect(mockUnsubscribe).toHaveBeenCalled();
+    expect(mockCandleSubscribe).toHaveBeenCalledTimes(2);
+    expect(mockCandleSubscribe).toHaveBeenLastCalledWith({
+      coin: 'ETH',
+      interval: CandlePeriod.ONE_HOUR,
+      duration: TimeDuration.ONE_DAY,
+      callback: expect.any(Function),
+      throttleMs: 1000,
+      onError: expect.any(Function),
+    });
+  });
+
+  it('resubscribes when interval changes', () => {
+    const mockUnsubscribe = jest.fn();
+    mockCandleSubscribe.mockReturnValue(mockUnsubscribe);
+
+    const { rerender } = renderHook(
+      ({ interval }) =>
+        usePerpsLiveCandles({
+          coin: 'BTC',
+          interval,
+          duration: TimeDuration.ONE_DAY,
+        }),
+      {
+        initialProps: { interval: CandlePeriod.ONE_HOUR },
+      },
+    );
+
+    expect(mockCandleSubscribe).toHaveBeenCalledTimes(1);
+
+    // Change interval
+    rerender({ interval: CandlePeriod.FIVE_MINUTES });
+
+    // Should resubscribe
+    expect(mockUnsubscribe).toHaveBeenCalled();
+    expect(mockCandleSubscribe).toHaveBeenCalledTimes(2);
+    expect(mockCandleSubscribe).toHaveBeenLastCalledWith({
+      coin: 'BTC',
+      interval: CandlePeriod.FIVE_MINUTES,
+      duration: TimeDuration.ONE_DAY,
+      callback: expect.any(Function),
+      throttleMs: 1000,
+      onError: expect.any(Function),
+    });
+  });
+
+  it('handles empty coin gracefully', () => {
+    mockCandleSubscribe.mockReturnValue(jest.fn());
+
+    const { result } = renderHook(() =>
+      usePerpsLiveCandles({
+        coin: '',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+      }),
+    );
+
+    // Empty coin returns stable empty data object, not null
+    expect(result.current.candleData).toEqual({
+      coin: '',
+      interval: CandlePeriod.ONE_HOUR,
+      candles: [],
+    });
+    expect(result.current.isLoading).toBe(false);
+    expect(mockCandleSubscribe).not.toHaveBeenCalled();
+  });
+
+  it('rejects updates with mismatched coin', async () => {
+    let capturedCallback: (data: CandleData) => void = jest.fn();
+    mockCandleSubscribe.mockImplementation((params) => {
+      capturedCallback = params.callback;
+      return jest.fn();
+    });
+
+    const { result } = renderHook(() =>
+      usePerpsLiveCandles({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+      }),
+    );
+
+    // Send update for wrong coin
+    const wrongCoinData: CandleData = {
+      ...mockCandleData,
+      coin: 'ETH',
+    };
+
+    act(() => {
+      capturedCallback(wrongCoinData);
+    });
+
+    // Should not update
+    expect(result.current.candleData).toBeNull();
+    expect(result.current.isLoading).toBe(true);
+  });
+
+  it('rejects updates with mismatched interval', async () => {
+    let capturedCallback: (data: CandleData) => void = jest.fn();
+    mockCandleSubscribe.mockImplementation((params) => {
+      capturedCallback = params.callback;
+      return jest.fn();
+    });
+
+    const { result } = renderHook(() =>
+      usePerpsLiveCandles({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+      }),
+    );
+
+    // Send update for wrong interval
+    const wrongIntervalData: CandleData = {
+      ...mockCandleData,
+      interval: CandlePeriod.FIVE_MINUTES,
+    };
+
+    act(() => {
+      capturedCallback(wrongIntervalData);
+    });
+
+    // Should not update
+    expect(result.current.candleData).toBeNull();
+    expect(result.current.isLoading).toBe(true);
+  });
+
+  it('ignores null or undefined updates', () => {
+    let capturedCallback: (data: CandleData) => void = jest.fn();
+    mockCandleSubscribe.mockImplementation((params) => {
+      capturedCallback = params.callback;
+      return jest.fn();
+    });
+
+    const { result } = renderHook(() =>
+      usePerpsLiveCandles({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+      }),
+    );
+
+    // Send null
+    act(() => {
+      capturedCallback(null as unknown as CandleData);
+    });
+
+    // Should not update state
+    expect(result.current.candleData).toBeNull();
+    expect(result.current.isLoading).toBe(true);
+
+    // Send undefined
+    act(() => {
+      capturedCallback(undefined as unknown as CandleData);
+    });
+
+    // Should not update state
+    expect(result.current.candleData).toBeNull();
+    expect(result.current.isLoading).toBe(true);
+  });
+
+  it('uses default throttle of 1000ms', () => {
+    mockCandleSubscribe.mockReturnValue(jest.fn());
+
+    renderHook(() =>
+      usePerpsLiveCandles({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+      }),
+    );
+
+    expect(mockCandleSubscribe).toHaveBeenCalledWith({
+      coin: 'BTC',
+      interval: CandlePeriod.ONE_HOUR,
+      duration: TimeDuration.ONE_DAY,
+      callback: expect.any(Function),
+      throttleMs: 1000,
+      onError: expect.any(Function),
+    });
+  });
+
+  it('resets state when coin changes', () => {
+    mockCandleSubscribe.mockReturnValue(jest.fn());
+
+    const { result, rerender } = renderHook(
+      ({ coin }) =>
+        usePerpsLiveCandles({
+          coin,
+          interval: CandlePeriod.ONE_HOUR,
+          duration: TimeDuration.ONE_DAY,
+        }),
+      {
+        initialProps: { coin: 'BTC' },
+      },
+    );
+
+    // Verify initial state
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.candleData).toBeNull();
+
+    rerender({ coin: 'ETH' });
+
+    // State should be reset for new coin
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.candleData).toBeNull();
+  });
+
+  it('resets state when interval changes', () => {
+    mockCandleSubscribe.mockReturnValue(jest.fn());
+
+    const { result, rerender } = renderHook(
+      ({ interval }) =>
+        usePerpsLiveCandles({
+          coin: 'BTC',
+          interval,
+          duration: TimeDuration.ONE_DAY,
+        }),
+      {
+        initialProps: { interval: CandlePeriod.ONE_HOUR },
+      },
+    );
+
+    // Verify initial state
+    expect(result.current.isLoading).toBe(true);
+
+    rerender({ interval: CandlePeriod.FIVE_MINUTES });
+
+    // State should be reset for new interval
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.candleData).toBeNull();
+  });
+
+  it('resubscribes when duration changes', () => {
+    const mockUnsubscribe = jest.fn();
+    mockCandleSubscribe.mockReturnValue(mockUnsubscribe);
+
+    const { rerender } = renderHook(
+      ({ duration }) =>
+        usePerpsLiveCandles({
+          coin: 'BTC',
+          interval: CandlePeriod.ONE_HOUR,
+          duration,
+        }),
+      {
+        initialProps: { duration: TimeDuration.ONE_DAY },
+      },
+    );
+
+    expect(mockCandleSubscribe).toHaveBeenCalledTimes(1);
+
+    rerender({ duration: TimeDuration.ONE_WEEK });
+
+    expect(mockUnsubscribe).toHaveBeenCalled();
+    expect(mockCandleSubscribe).toHaveBeenCalledTimes(2);
+    expect(mockCandleSubscribe).toHaveBeenLastCalledWith({
+      coin: 'BTC',
+      interval: CandlePeriod.ONE_HOUR,
+      duration: TimeDuration.ONE_WEEK,
+      callback: expect.any(Function),
+      throttleMs: 1000,
+      onError: expect.any(Function),
+    });
+  });
+
+  it('passes custom throttleMs to subscription', () => {
+    mockCandleSubscribe.mockReturnValue(jest.fn());
+
+    renderHook(() =>
+      usePerpsLiveCandles({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        throttleMs: 2000,
+      }),
+    );
+
+    expect(mockCandleSubscribe).toHaveBeenCalledWith({
+      coin: 'BTC',
+      interval: CandlePeriod.ONE_HOUR,
+      duration: TimeDuration.ONE_DAY,
+      callback: expect.any(Function),
+      throttleMs: 2000,
+      onError: expect.any(Function),
+    });
+  });
+
+  it('handles subscription error gracefully', () => {
+    const subscriptionError = new Error('WebSocket connection failed');
+    mockCandleSubscribe.mockImplementation(() => {
+      throw subscriptionError;
+    });
+
+    const { result } = renderHook(() =>
+      usePerpsLiveCandles({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+      }),
+    );
+
+    expect(result.current.error).toEqual(subscriptionError);
+    expect(result.current.isLoading).toBe(false);
+    expect(result.current.candleData).toBeNull();
+  });
+
+  it('does not fetch more history when coin is empty', async () => {
+    mockCandleSubscribe.mockReturnValue(jest.fn());
+
+    const { result } = renderHook(() =>
+      usePerpsLiveCandles({
+        coin: '',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+      }),
+    );
+
+    await act(async () => {
+      await result.current.fetchMoreHistory();
+    });
+
+    expect(mockFetchHistoricalCandles).not.toHaveBeenCalled();
+    expect(result.current.isLoadingMore).toBe(false);
+  });
+
+  it('fetches more historical candles successfully', async () => {
+    mockCandleSubscribe.mockReturnValue(jest.fn());
+    mockFetchHistoricalCandles.mockResolvedValue(undefined);
+
+    const { result } = renderHook(() =>
+      usePerpsLiveCandles({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+      }),
+    );
+
+    await act(async () => {
+      await result.current.fetchMoreHistory();
+    });
+
+    expect(mockFetchHistoricalCandles).toHaveBeenCalledWith(
+      'BTC',
+      CandlePeriod.ONE_HOUR,
+      TimeDuration.ONE_DAY,
+    );
+  });
+
+  it('sets isLoadingMore during fetch', async () => {
+    let resolvePromise: (() => void) | undefined;
+    const fetchPromise = new Promise<void>((resolve) => {
+      resolvePromise = resolve;
+    });
+
+    mockCandleSubscribe.mockReturnValue(jest.fn());
+    mockFetchHistoricalCandles.mockReturnValue(fetchPromise);
+
+    const { result } = renderHook(() =>
+      usePerpsLiveCandles({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+      }),
+    );
+
+    let fetchPromiseFromHook: Promise<void> | undefined;
+
+    act(() => {
+      fetchPromiseFromHook = result.current.fetchMoreHistory();
+    });
+
+    expect(result.current.isLoadingMore).toBe(true);
+
+    await act(async () => {
+      if (resolvePromise) {
+        resolvePromise();
+      }
+      if (fetchPromiseFromHook) {
+        await fetchPromiseFromHook;
+      }
+    });
+
+    expect(result.current.isLoadingMore).toBe(false);
+  });
+});
diff --git a/app/components/UI/Perps/hooks/stream/usePerpsLiveCandles.ts b/app/components/UI/Perps/hooks/stream/usePerpsLiveCandles.ts
new file mode 100644
index 00000000000..97964eac09b
--- /dev/null
+++ b/app/components/UI/Perps/hooks/stream/usePerpsLiveCandles.ts
@@ -0,0 +1,225 @@
+import { useEffect, useState, useRef } from 'react';
+import { usePerpsStream } from '../../providers/PerpsStreamManager';
+import type { CandleData } from '../../types/perps-types';
+import { CandlePeriod, TimeDuration } from '../../constants/chartConfig';
+import { PERPS_CONSTANTS } from '../../constants/perpsConfig';
+import DevLogger from '../../../../../core/SDKConnect/utils/DevLogger';
+import Logger from '../../../../../util/Logger';
+import { ensureError } from '../../utils/perpsErrorHandler';
+
+// Stable empty candle data reference to prevent re-renders
+const EMPTY_CANDLE_DATA: CandleData = {
+  coin: '',
+  interval: CandlePeriod.ONE_HOUR,
+  candles: [],
+};
+
+export interface UsePerpsLiveCandlesOptions {
+  /** The coin symbol (e.g., "BTC", "ETH") */
+  coin: string;
+  /** The candle interval (e.g., "1m", "5m", "15m") */
+  interval: CandlePeriod;
+  /** The duration for historical data (e.g., "1d", "7d", "1M") - currently informational only */
+  duration: TimeDuration;
+  /** Throttle delay in milliseconds (default: 1000ms) */
+  throttleMs?: number;
+}
+
+export interface UsePerpsLiveCandlesReturn {
+  /** Candle data with historical and live updates */
+  candleData: CandleData | null;
+  /** Whether we're waiting for the first real WebSocket data */
+  isLoading: boolean;
+  /** Whether we're fetching additional historical candles */
+  isLoadingMore: boolean;
+  /** Whether we have received any historical data */
+  hasHistoricalData: boolean;
+  /** Error state (if any) */
+  error: Error | null;
+  /** Fetch more historical candles before the current oldest candle */
+  fetchMoreHistory: () => Promise<void>;
+}
+
+/**
+ * Hook for real-time candle updates via WebSocket subscription
+ * Replaces the old polling-based usePerpsPositionData hook
+ *
+ * This hook provides:
+ * - Initial historical candle data via REST API
+ * - Live candle updates via WebSocket
+ * - Automatic cache sharing across components using the same coin+interval
+ *
+ * Example usage:
+ * ```
+ * const { candleData, isLoading } = usePerpsLiveCandles({
+ *   coin: 'BTC',
+ *   interval: CandlePeriod.ONE_HOUR,
+ *   duration: TimeDuration.ONE_DAY,
+ *   throttleMs: 1000
+ * });
+ * ```
+ *
+ * @param options - Configuration options for the hook
+ * @returns Object containing candle data, loading state, and error state
+ */
+export function usePerpsLiveCandles(
+  options: UsePerpsLiveCandlesOptions,
+): UsePerpsLiveCandlesReturn {
+  const { coin, interval, duration, throttleMs = 1000 } = options;
+  const stream = usePerpsStream();
+  const [candleData, setCandleData] = useState<CandleData | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [isLoadingMore, setIsLoadingMore] = useState(false);
+  const [error, setError] = useState<Error | null>(null);
+  const hasReceivedFirstUpdate = useRef(false);
+
+  useEffect(() => {
+    // Reset state immediately when coin or interval changes to prevent stale data
+    setCandleData(null);
+    setIsLoading(true);
+    setError(null);
+    hasReceivedFirstUpdate.current = false;
+
+    if (!coin) {
+      setCandleData(EMPTY_CANDLE_DATA);
+      setIsLoading(false);
+      return;
+    }
+
+    try {
+      const unsubscribe = stream.candles.subscribe({
+        coin,
+        interval,
+        duration,
+        callback: (newCandleData) => {
+          // null/undefined means no cached data yet, keep loading state
+          if (newCandleData === null || newCandleData === undefined) {
+            return;
+          }
+
+          // DEFENSIVE: Validate incoming data matches current subscription
+          // This prevents race conditions when switching coins where old subscription
+          // might deliver data after new subscription starts
+          if (
+            newCandleData.coin !== coin ||
+            newCandleData.interval !== interval
+          ) {
+            DevLogger.log('usePerpsLiveCandles: REJECTED - Validation failed', {
+              reason: 'Coin or interval mismatch',
+              expectedCoin: coin,
+              receivedCoin: newCandleData.coin,
+              expectedInterval: interval,
+              receivedInterval: newCandleData.interval,
+            });
+            return;
+          }
+
+          // We have real data now (either empty array or candles)
+          if (!hasReceivedFirstUpdate.current) {
+            hasReceivedFirstUpdate.current = true;
+            setIsLoading(false);
+          }
+
+          setCandleData(newCandleData);
+        },
+        throttleMs,
+        onError: (err: Error) => {
+          const errorInstance = ensureError(err);
+
+          // Log to Sentry: async subscription initialization failure
+          Logger.error(errorInstance, {
+            tags: {
+              feature: PERPS_CONSTANTS.FEATURE_NAME,
+              component: 'usePerpsLiveCandles',
+            },
+            context: {
+              name: 'candle_subscription_async',
+              data: {
+                operation: 'subscribe_async_error',
+                coin,
+                interval,
+              },
+            },
+          });
+
+          setError(errorInstance);
+          setIsLoading(false);
+        },
+      });
+
+      return () => {
+        unsubscribe();
+      };
+    } catch (err) {
+      const errorInstance = err instanceof Error ? err : new Error(String(err));
+
+      // Log to Sentry: subscription setup failure prevents live updates
+      Logger.error(ensureError(errorInstance), {
+        tags: {
+          feature: PERPS_CONSTANTS.FEATURE_NAME,
+          component: 'usePerpsLiveCandles',
+        },
+        context: {
+          name: 'candle_subscription',
+          data: {
+            operation: 'subscribe',
+            coin,
+            interval,
+          },
+        },
+      });
+
+      setError(errorInstance);
+      setIsLoading(false);
+      return;
+    }
+  }, [stream, coin, interval, duration, throttleMs]);
+
+  const hasHistoricalData =
+    candleData !== null && candleData.candles.length > 0;
+
+  /**
+   * Fetch additional historical candles before the current oldest candle
+   * Used when user scrolls to the left edge of the chart
+   */
+  const fetchMoreHistory = async (): Promise<void> => {
+    if (!coin || isLoadingMore) {
+      return;
+    }
+
+    try {
+      setIsLoadingMore(true);
+      DevLogger.log('usePerpsLiveCandles: Fetching more historical candles', {
+        coin,
+        interval,
+        duration,
+      });
+
+      await stream.candles.fetchHistoricalCandles(coin, interval, duration);
+
+      DevLogger.log(
+        'usePerpsLiveCandles: Successfully fetched more historical candles',
+        { coin, interval, duration },
+      );
+    } catch (err) {
+      const errorInstance = err instanceof Error ? err : new Error(String(err));
+      DevLogger.log('usePerpsLiveCandles: Error fetching more history', {
+        coin,
+        interval,
+        error: errorInstance.message,
+      });
+      setError(errorInstance);
+    } finally {
+      setIsLoadingMore(false);
+    }
+  };
+
+  return {
+    candleData,
+    isLoading,
+    isLoadingMore,
+    hasHistoricalData,
+    error,
+    fetchMoreHistory,
+  };
+}
diff --git a/app/components/UI/Perps/hooks/usePerpsMarketStats.test.ts b/app/components/UI/Perps/hooks/usePerpsMarketStats.test.ts
index 9d9679e5605..f31899ef2ea 100644
--- a/app/components/UI/Perps/hooks/usePerpsMarketStats.test.ts
+++ b/app/components/UI/Perps/hooks/usePerpsMarketStats.test.ts
@@ -12,12 +12,12 @@ jest.mock('../../../../core/Engine', () => ({
 }));
 
 // Mock the dependent hooks
-jest.mock('./usePerpsPositionData');
+jest.mock('./stream/usePerpsLiveCandles');
 
 import Engine from '../../../../core/Engine';
-import { usePerpsPositionData } from './usePerpsPositionData';
+import { usePerpsLiveCandles } from './stream/usePerpsLiveCandles';
 
-const mockedUsePerpsPositionData = jest.mocked(usePerpsPositionData);
+const mockedUsePerpsLiveCandles = jest.mocked(usePerpsLiveCandles);
 const mockSubscribeToPrices = Engine.context.PerpsController
   .subscribeToPrices as jest.Mock;
 
@@ -75,12 +75,13 @@ describe('usePerpsMarketStats', () => {
       callback([mockPriceData.BTC]);
       return jest.fn();
     });
-    mockedUsePerpsPositionData.mockReturnValue({
+    mockedUsePerpsLiveCandles.mockReturnValue({
       candleData: mockCandleData,
-      priceData: null,
-      isLoadingHistory: false,
-      refreshCandleData: jest.fn(),
+      isLoading: false,
+      isLoadingMore: false,
       hasHistoricalData: true,
+      error: null,
+      fetchMoreHistory: jest.fn(),
     });
 
     // Act: Render the hook with a symbol
@@ -100,12 +101,13 @@ describe('usePerpsMarketStats', () => {
   it('indicates loading state when candle data is not yet available', () => {
     // Arrange: Set up state with no candle data
     mockSubscribeToPrices.mockImplementation(() => jest.fn());
-    mockedUsePerpsPositionData.mockReturnValue({
+    mockedUsePerpsLiveCandles.mockReturnValue({
       candleData: null,
-      priceData: null,
-      isLoadingHistory: true,
-      refreshCandleData: jest.fn(),
+      isLoading: true,
+      isLoadingMore: false,
       hasHistoricalData: false,
+      error: null,
+      fetchMoreHistory: jest.fn(),
     });
 
     // Act: Render the hook
@@ -119,12 +121,13 @@ describe('usePerpsMarketStats', () => {
   it('displays default values when no market data is available', () => {
     // Arrange: Set up empty market data state
     mockSubscribeToPrices.mockImplementation(() => jest.fn());
-    mockedUsePerpsPositionData.mockReturnValue({
+    mockedUsePerpsLiveCandles.mockReturnValue({
       candleData: null,
-      priceData: null,
-      isLoadingHistory: false,
-      refreshCandleData: jest.fn(),
+      isLoading: false,
+      isLoadingMore: false,
       hasHistoricalData: false,
+      error: null,
+      fetchMoreHistory: jest.fn(),
     });
 
     // Act: Render the hook
@@ -156,12 +159,13 @@ describe('usePerpsMarketStats', () => {
       return jest.fn();
     });
 
-    mockedUsePerpsPositionData.mockReturnValue({
+    mockedUsePerpsLiveCandles.mockReturnValue({
       candleData: mockCandleData,
-      priceData: null,
-      isLoadingHistory: false,
-      refreshCandleData: jest.fn(),
+      isLoading: false,
+      isLoadingMore: false,
       hasHistoricalData: true,
+      error: null,
+      fetchMoreHistory: jest.fn(),
     });
 
     const { result } = renderHook(() => usePerpsMarketStats('BTC'));
@@ -184,12 +188,13 @@ describe('usePerpsMarketStats', () => {
       return jest.fn();
     });
 
-    mockedUsePerpsPositionData.mockReturnValue({
+    mockedUsePerpsLiveCandles.mockReturnValue({
       candleData: mockCandleData,
-      priceData: null,
-      isLoadingHistory: false,
-      refreshCandleData: jest.fn(),
+      isLoading: false,
+      isLoadingMore: false,
       hasHistoricalData: true,
+      error: null,
+      fetchMoreHistory: jest.fn(),
     });
 
     const { result } = renderHook(() => usePerpsMarketStats('BTC'));
diff --git a/app/components/UI/Perps/hooks/usePerpsMarketStats.ts b/app/components/UI/Perps/hooks/usePerpsMarketStats.ts
index c0dcc06b89c..910d2ca38bb 100644
--- a/app/components/UI/Perps/hooks/usePerpsMarketStats.ts
+++ b/app/components/UI/Perps/hooks/usePerpsMarketStats.ts
@@ -10,7 +10,7 @@ import {
   PRICE_RANGES_UNIVERSAL,
 } from '../utils/formatUtils';
 import { calculate24hHighLow } from '../utils/marketUtils';
-import { usePerpsPositionData } from './usePerpsPositionData';
+import { usePerpsLiveCandles } from './stream/usePerpsLiveCandles';
 
 interface MarketStats {
   high24h: string;
@@ -41,11 +41,12 @@ export const usePerpsMarketStats = (
   const [marketData, setMarketData] = useState<MarketDataUpdate>({});
   const [initialPrice, setInitialPrice] = useState<number | undefined>();
 
-  // Get candlestick data for 24h high/low calculation
-  const { candleData, refreshCandleData } = usePerpsPositionData({
+  // Get candlestick data for 24h high/low calculation via WebSocket streaming
+  const { candleData } = usePerpsLiveCandles({
     coin: symbol,
-    selectedInterval: CandlePeriod.ONE_HOUR, // Use 1h candles for 24h calculation
-    selectedDuration: TimeDuration.ONE_DAY,
+    interval: CandlePeriod.ONE_HOUR, // Use 1h candles for 24h calculation
+    duration: TimeDuration.ONE_DAY,
+    throttleMs: 1000,
   });
 
   // Subscribe to market data updates (funding, open interest, volume)
@@ -141,12 +142,11 @@ export const usePerpsMarketStats = (
     };
   }, [candleData, marketData, initialPrice]);
 
-  // Refresh function to reload market data
+  // Refresh function - no-op since WebSocket provides real-time updates
   const refresh = useCallback(async () => {
-    // Refresh candle data for updated 24h high/low
-    await refreshCandleData();
-    // Market data (funding, volume, etc.) will update via WebSocket subscriptions
-  }, [refreshCandleData]);
+    // WebSocket streaming automatically provides real-time updates
+    // No manual refresh needed - data is always current
+  }, []);
 
   // Memoize the final return object to prevent unnecessary re-renders
   return useMemo(
diff --git a/app/components/UI/Perps/hooks/usePerpsPositionData.test.ts b/app/components/UI/Perps/hooks/usePerpsPositionData.test.ts
deleted file mode 100644
index 62f91eae401..00000000000
--- a/app/components/UI/Perps/hooks/usePerpsPositionData.test.ts
+++ /dev/null
@@ -1,1471 +0,0 @@
-import { act, renderHook } from '@testing-library/react-hooks';
-import Engine from '../../../../core/Engine';
-import { CandlePeriod, TimeDuration } from '../constants/chartConfig';
-import { usePerpsPositionData } from './usePerpsPositionData';
-
-// Type definitions for test helpers
-interface PriceUpdate {
-  coin: string;
-  price?: number;
-}
-
-type PriceCallback = (updates: PriceUpdate[]) => void;
-
-interface SubscribeToPricesParams {
-  symbols: string[];
-  callback: PriceCallback;
-}
-
-// Mock DevLogger
-jest.mock('../../../../core/SDKConnect/utils/DevLogger', () => ({
-  log: jest.fn(),
-}));
-
-// Mock Engine
-jest.mock('../../../../core/Engine', () => ({
-  context: {
-    PerpsController: {
-      fetchHistoricalCandles: jest.fn(),
-      subscribeToPrices: jest.fn(),
-    },
-  },
-}));
-
-// Mock Redux selector
-jest.mock('react-redux', () => ({
-  useSelector: jest.fn(() => 'initialized'), // Default to initialized state
-}));
-
-jest.mock('../selectors/perpsController', () => ({
-  selectPerpsInitializationState: jest.fn(),
-}));
-
-describe('usePerpsPositionData', () => {
-  const mockFetchHistoricalCandles = Engine.context.PerpsController
-    .fetchHistoricalCandles as jest.Mock;
-  const mockSubscribeToPrices = Engine.context.PerpsController
-    .subscribeToPrices as jest.Mock;
-
-  const mockCandleData = {
-    coin: 'ETH',
-    interval: CandlePeriod.ONE_HOUR,
-    candles: [
-      {
-        time: 1234567890,
-        open: '3000',
-        high: '3100',
-        low: '2900',
-        close: '3050',
-        volume: '1000',
-      },
-    ],
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockFetchHistoricalCandles.mockResolvedValue(mockCandleData);
-    mockSubscribeToPrices.mockReturnValue(jest.fn()); // Default unsubscribe function
-  });
-
-  afterEach(() => {
-    // Reset mocks to default behavior after each test
-    mockSubscribeToPrices.mockReturnValue(jest.fn());
-  });
-
-  it('should fetch historical candles on mount', async () => {
-    await act(async () => {
-      renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await new Promise((resolve) => setTimeout(resolve, 0));
-    });
-
-    expect(mockFetchHistoricalCandles).toHaveBeenCalledWith('ETH', '1h', 24);
-  });
-
-  // Price subscriptions have been removed - use usePerpsLivePrices for real-time prices
-
-  // Price data updates have been moved to usePerpsLivePrices hook
-
-  it('should handle loading state correctly', async () => {
-    const { result } = renderHook(() =>
-      usePerpsPositionData({
-        coin: 'ETH',
-        selectedInterval: CandlePeriod.ONE_HOUR,
-        selectedDuration: TimeDuration.ONE_DAY,
-      }),
-    );
-
-    // Initially loading
-    expect(result.current.isLoadingHistory).toBe(true);
-
-    // Wait for historical data to load
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 0));
-    });
-
-    expect(result.current.isLoadingHistory).toBe(false);
-    expect(result.current.candleData).toEqual(mockCandleData);
-  });
-
-  // Unsubscribe test removed - no subscriptions to clean up anymore
-
-  it('should handle errors in fetching historical data', async () => {
-    const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
-    mockFetchHistoricalCandles.mockRejectedValue(new Error('Failed to fetch'));
-
-    const { result } = renderHook(() =>
-      usePerpsPositionData({
-        coin: 'ETH',
-        selectedInterval: CandlePeriod.ONE_HOUR,
-        selectedDuration: TimeDuration.ONE_DAY,
-      }),
-    );
-
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 100)); // Give more time for async operations
-    });
-
-    expect(result.current.isLoadingHistory).toBe(false);
-    expect(result.current.candleData).toBe(null);
-    expect(consoleErrorSpy).toHaveBeenCalledWith(
-      'Error loading historical candles:',
-      expect.any(Error),
-    );
-
-    consoleErrorSpy.mockRestore();
-  });
-
-  it('should handle refreshCandleData loading states correctly', async () => {
-    const { result } = renderHook(() =>
-      usePerpsPositionData({
-        coin: 'ETH',
-        selectedInterval: CandlePeriod.ONE_HOUR,
-        selectedDuration: TimeDuration.ONE_DAY,
-      }),
-    );
-
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 0));
-    });
-
-    expect(result.current.isLoadingHistory).toBe(false);
-
-    let resolvePromise: (value: typeof mockCandleData) => void;
-    mockFetchHistoricalCandles.mockImplementationOnce(
-      () =>
-        new Promise((resolve) => {
-          resolvePromise = resolve;
-        }),
-    );
-
-    let refreshPromise: Promise<void>;
-    act(() => {
-      refreshPromise = result.current.refreshCandleData();
-    });
-
-    expect(result.current.isLoadingHistory).toBe(true);
-
-    act(() => {
-      resolvePromise(mockCandleData);
-    });
-
-    await act(async () => {
-      await refreshPromise;
-    });
-
-    expect(result.current.isLoadingHistory).toBe(false);
-    expect(mockFetchHistoricalCandles).toHaveBeenCalledTimes(2);
-  });
-
-  it('returns same candle reference when data is identical during refresh', async () => {
-    const { result } = renderHook(() =>
-      usePerpsPositionData({
-        coin: 'ETH',
-        selectedInterval: CandlePeriod.ONE_HOUR,
-        selectedDuration: TimeDuration.ONE_DAY,
-      }),
-    );
-
-    await act(async () => {
-      await new Promise((resolve) => setTimeout(resolve, 0));
-    });
-
-    const initialCandleRef = result.current.candleData;
-
-    mockFetchHistoricalCandles.mockResolvedValue(mockCandleData);
-
-    await act(async () => {
-      await result.current.refreshCandleData();
-    });
-
-    expect(result.current.candleData).toBe(initialCandleRef);
-  });
-
-  describe('getCurrentCandleStartTime', () => {
-    it('calculates correct start time for 1 minute candles', async () => {
-      const mockDate = new Date('2024-01-01T10:35:45.123Z').getTime();
-      jest.spyOn(Date, 'now').mockReturnValue(mockDate);
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_MINUTE,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      expect(result.current).toBeDefined();
-
-      jest.restoreAllMocks();
-    });
-
-    it('calculates correct start time for 3 minute candles', async () => {
-      const mockDate = new Date('2024-01-01T10:35:45.123Z').getTime();
-      jest.spyOn(Date, 'now').mockReturnValue(mockDate);
-
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.THREE_MINUTES,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: 3000 }]);
-      });
-
-      const expectedStartTime =
-        Math.floor(mockDate / (3 * 60 * 1000)) * (3 * 60 * 1000);
-
-      expect(result.current.candleData?.candles).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({
-            time: expectedStartTime,
-            open: '3050',
-            close: '3000',
-          }),
-        ]),
-      );
-
-      jest.restoreAllMocks();
-    });
-
-    it('calculates correct start time for different intervals', async () => {
-      const intervals = [
-        { period: CandlePeriod.FIVE_MINUTES, expectedMinute: 35 }, // Should round to 35 (nearest 5-min boundary)
-        { period: CandlePeriod.FIFTEEN_MINUTES, expectedMinute: 30 }, // Should round to 30 (nearest 15-min boundary)
-        { period: CandlePeriod.THIRTY_MINUTES, expectedMinute: 30 }, // Should round to 30 (nearest 30-min boundary)
-        { period: CandlePeriod.ONE_HOUR, expectedMinute: 0 }, // Should round to top of hour
-      ];
-
-      for (const { period } of intervals) {
-        // Arrange
-        const mockDate = new Date('2024-01-01T10:35:45.123Z').getTime();
-        jest.spyOn(Date, 'now').mockReturnValue(mockDate);
-
-        const { result } = renderHook(() =>
-          usePerpsPositionData({
-            coin: 'ETH',
-            selectedInterval: period,
-            selectedDuration: TimeDuration.ONE_DAY,
-          }),
-        );
-
-        // Act
-        await act(async () => {
-          await new Promise((resolve) => setTimeout(resolve, 0));
-        });
-
-        // Assert
-        expect(result.current).toBeDefined();
-
-        jest.restoreAllMocks();
-      }
-    });
-
-    it('handles edge case intervals correctly', async () => {
-      const edgeCases = [
-        CandlePeriod.TWO_HOURS,
-        CandlePeriod.FOUR_HOURS,
-        CandlePeriod.EIGHT_HOURS,
-        CandlePeriod.TWELVE_HOURS,
-        CandlePeriod.ONE_DAY,
-      ];
-
-      for (const period of edgeCases) {
-        const { result } = renderHook(() =>
-          usePerpsPositionData({
-            coin: 'ETH',
-            selectedInterval: period,
-            selectedDuration: TimeDuration.ONE_WEEK,
-          }),
-        );
-
-        await act(async () => {
-          await new Promise((resolve) => setTimeout(resolve, 0));
-        });
-
-        expect(result.current).toBeDefined();
-      }
-    });
-  });
-
-  describe('subscribeToPriceUpdates', () => {
-    it('handles successful price subscription', async () => {
-      // Arrange
-      const mockUnsubscribe = jest.fn();
-      mockSubscribeToPrices.mockReturnValue(mockUnsubscribe);
-
-      renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Act
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Assert
-      expect(mockSubscribeToPrices).toHaveBeenCalledWith({
-        symbols: ['ETH'],
-        callback: expect.any(Function),
-      });
-    });
-
-    it('handles price subscription errors', async () => {
-      // Arrange
-      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
-      mockSubscribeToPrices.mockImplementation(() => {
-        throw new Error('Subscription failed');
-      });
-
-      renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Act
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Assert
-      expect(consoleErrorSpy).toHaveBeenCalledWith(
-        'Error subscribing to price updates:',
-        expect.any(Error),
-      );
-
-      consoleErrorSpy.mockRestore();
-    });
-
-    it('filters price updates for correct coin', async () => {
-      // Arrange
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn(); // unsubscribe function
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Act
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Simulate price updates with multiple coins
-      const mockPriceUpdates = [
-        { coin: 'BTC', price: 45000 },
-        { coin: 'ETH', price: 3000 }, // Should match
-        { coin: 'MATIC', price: 1.5 },
-      ];
-
-      await act(async () => {
-        priceCallback?.(mockPriceUpdates);
-      });
-
-      // Assert - Should have received the ETH price update
-      expect(result.current.priceData).toEqual({ coin: 'ETH', price: 3000 });
-    });
-  });
-
-  describe('live candle building', () => {
-    it('creates new live candle from first price update', async () => {
-      // Arrange
-      const mockDate = new Date('2024-01-01T10:00:00.000Z').getTime();
-      jest.spyOn(Date, 'now').mockReturnValue(mockDate);
-
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Act
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Simulate first price update
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: 3000 }]);
-      });
-
-      // Assert - Should create new live candle
-      const expectedStartTime =
-        Math.floor(mockDate / (60 * 60 * 1000)) * (60 * 60 * 1000);
-
-      expect(result.current.candleData?.candles).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({
-            time: expectedStartTime,
-            open: '3050',
-            high: '3050',
-            low: '3000',
-            close: '3000',
-            volume: '0',
-          }),
-        ]),
-      );
-
-      jest.restoreAllMocks();
-    });
-
-    it('updates existing live candle with new high/low', async () => {
-      // Arrange
-      const mockDate = new Date('2024-01-01T10:00:00.000Z').getTime();
-      jest.spyOn(Date, 'now').mockReturnValue(mockDate);
-
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Act - First price update
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: 3000 }]);
-      });
-
-      // Second price update with higher price
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: 3100 }]);
-      });
-
-      // Third price update with lower price
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: 2900 }]);
-      });
-
-      // Assert - Should update high/low correctly
-      const expectedStartTime =
-        Math.floor(mockDate / (60 * 60 * 1000)) * (60 * 60 * 1000);
-
-      expect(result.current.candleData?.candles).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({
-            time: expectedStartTime,
-            open: '3050', // Original
-            high: '3100', // Updated to max
-            low: '2900', // Updated to min
-            close: '2900', // Latest price
-            volume: '0',
-          }),
-        ]),
-      );
-
-      jest.restoreAllMocks();
-    });
-
-    it('creates new live candle when time period changes', async () => {
-      // Arrange
-      let currentTime = new Date('2024-01-01T10:00:00.000Z').getTime();
-      jest.spyOn(Date, 'now').mockImplementation(() => currentTime);
-
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Act - First price update
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: 3000 }]);
-      });
-
-      // Move to next hour
-      currentTime = new Date('2024-01-01T11:00:00.000Z').getTime();
-
-      // Second price update in new time period
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: 3200 }]);
-      });
-
-      // Assert - Should have at least the live candle from second update
-      expect(result.current.candleData?.candles).toEqual(
-        expect.arrayContaining([
-          expect.objectContaining({
-            open: '3000', // Opens at previous candle's close price
-            close: '3200',
-          }),
-        ]),
-      );
-
-      jest.restoreAllMocks();
-    });
-
-    it('handles price updates with missing price data', async () => {
-      // Arrange - Mock empty historical data so we can test live candle creation only
-      mockFetchHistoricalCandles.mockResolvedValue({
-        coin: 'ETH',
-        interval: CandlePeriod.ONE_HOUR,
-        candles: [],
-      });
-
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Act - Price update without price field
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH' }]); // Missing price field
-      });
-
-      // Assert - Should have empty candles array (no historical + no live candle created)
-      expect(result.current.candleData?.candles).toEqual(undefined);
-
-      // Assert - priceData should be set to the update object (even without price field)
-      // The hook doesn't validate price field existence, just coin matching
-      expect(result.current.priceData).toEqual({ coin: 'ETH' });
-    });
-
-    it('does not update priceData when no matching coin is found', async () => {
-      // Arrange
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Act - Price update for different coin
-      await act(async () => {
-        priceCallback?.([{ coin: 'BTC', price: 50000 }]); // Different coin
-      });
-
-      // Assert - priceData should remain null (no matching coin)
-      expect(result.current.priceData).toBeNull();
-    });
-  });
-
-  describe('periodic refresh logic', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-    });
-
-    afterEach(() => {
-      jest.useRealTimers();
-      jest.restoreAllMocks();
-    });
-
-    it('sets up refresh interval based on candle period', async () => {
-      // Arrange
-      const mockSetInterval = jest.spyOn(global, 'setInterval');
-
-      // Act
-      renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_MINUTE,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Wait for initial effects to run
-      await act(async () => {
-        jest.runOnlyPendingTimers();
-        await Promise.resolve();
-      });
-
-      // Assert - Should set up 1-minute refresh interval
-      expect(mockSetInterval).toHaveBeenCalledWith(
-        expect.any(Function),
-        60 * 1000, // 1 minute in ms
-      );
-    });
-
-    it('refreshes data at correct intervals', async () => {
-      // Arrange
-      renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.FIVE_MINUTES,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Wait for initial load and clear the initial call
-      await act(async () => {
-        jest.runOnlyPendingTimers();
-        await Promise.resolve();
-      });
-
-      mockFetchHistoricalCandles.mockClear();
-
-      // Act - Fast-forward 5 minutes
-      act(() => {
-        jest.advanceTimersByTime(5 * 60 * 1000);
-      });
-
-      // Wait for refresh to complete
-      await act(async () => {
-        await Promise.resolve();
-      });
-
-      // Assert - Should have called fetch again
-      expect(mockFetchHistoricalCandles).toHaveBeenCalledTimes(1);
-    });
-
-    it('handles refresh errors gracefully', async () => {
-      // Arrange
-      const consoleErrorSpy = jest.spyOn(console, 'error').mockImplementation();
-
-      renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_MINUTE,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Wait for initial setup
-      await act(async () => {
-        jest.runOnlyPendingTimers();
-        await Promise.resolve();
-      });
-
-      // Make refresh fail
-      mockFetchHistoricalCandles.mockRejectedValueOnce(
-        new Error('Refresh failed'),
-      );
-
-      // Act - Trigger refresh
-      act(() => {
-        jest.advanceTimersByTime(60 * 1000);
-      });
-
-      // Wait for error to be logged
-      await act(async () => {
-        await Promise.resolve();
-      });
-
-      // Assert
-      expect(consoleErrorSpy).toHaveBeenCalledWith(
-        'Error refreshing candle data:',
-        expect.any(Error),
-      );
-
-      consoleErrorSpy.mockRestore();
-    });
-
-    it('clears refresh interval on unmount', async () => {
-      // Arrange
-      const mockClearInterval = jest.spyOn(global, 'clearInterval');
-
-      const { unmount } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Wait for setup to complete
-      await act(async () => {
-        jest.runOnlyPendingTimers();
-        await Promise.resolve();
-      });
-
-      // Act
-      unmount();
-
-      // Assert
-      expect(mockClearInterval).toHaveBeenCalled();
-    });
-  });
-
-  describe('live candle merging logic', () => {
-    it('merges live candle with historical data correctly', async () => {
-      // Arrange
-      const historicalData = {
-        coin: 'ETH',
-        interval: CandlePeriod.ONE_HOUR,
-        candles: [
-          {
-            time: 1640995200000,
-            open: '2900',
-            high: '3000',
-            low: '2800',
-            close: '2950',
-            volume: '1000',
-          },
-          {
-            time: 1640998800000,
-            open: '2950',
-            high: '3050',
-            low: '2900',
-            close: '3000',
-            volume: '1100',
-          },
-        ],
-      };
-
-      mockFetchHistoricalCandles.mockResolvedValue(historicalData);
-
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Act - Add live candle with new time
-      const newCandleTime = 1641002400000; // Different from historical
-      jest.spyOn(Date, 'now').mockReturnValue(newCandleTime);
-
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: 3100 }]);
-      });
-
-      // Assert - Should have 3 candles (2 historical + 1 live)
-      expect(result.current.candleData?.candles).toHaveLength(3);
-      expect(result.current.candleData?.candles[2]).toEqual(
-        expect.objectContaining({
-          time: Math.floor(newCandleTime / (60 * 60 * 1000)) * (60 * 60 * 1000),
-          open: '3000', // Open price is the close of the previous candle
-          close: '3100',
-        }),
-      );
-
-      jest.restoreAllMocks();
-    });
-
-    it('replaces existing historical candle with live version', async () => {
-      // Arrange
-      const existingCandleTime = 1640998800000;
-      const historicalData = {
-        coin: 'ETH',
-        interval: CandlePeriod.ONE_HOUR,
-        candles: [
-          {
-            time: existingCandleTime,
-            open: '2950',
-            high: '3050',
-            low: '2900',
-            close: '3000',
-            volume: '1100',
-          },
-        ],
-      };
-
-      mockFetchHistoricalCandles.mockResolvedValue(historicalData);
-
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Act - Update with same time as existing candle
-      jest.spyOn(Date, 'now').mockReturnValue(existingCandleTime + 1800000); // 30 min later, same hour
-
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: 3200 }]);
-      });
-
-      // Assert - Should still have 1 candle, but updated with live data
-      expect(result.current.candleData?.candles).toHaveLength(1);
-      expect(result.current.candleData?.candles[0]).toEqual(
-        expect.objectContaining({
-          time: existingCandleTime,
-          high: '3200', // Updated high
-          close: '3200', // Updated close
-        }),
-      );
-
-      jest.restoreAllMocks();
-    });
-
-    it('handles missing live candle gracefully', async () => {
-      // Arrange
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Act
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Assert - Without live candle, should return original historical data
-      expect(result.current.candleData).toEqual(mockCandleData);
-    });
-
-    it('handles missing historical data with live candle', async () => {
-      // Arrange
-      mockFetchHistoricalCandles.mockResolvedValue(null);
-
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Act - Add live candle without historical data
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: 3000 }]);
-      });
-
-      // Assert - Should return null (no historical data to merge with)
-      expect(result.current.candleData).toBeNull();
-    });
-  });
-
-  describe('refresh intervals for different periods', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-    });
-
-    afterEach(() => {
-      jest.useRealTimers();
-      jest.restoreAllMocks();
-    });
-
-    it('uses correct refresh interval for each candle period', async () => {
-      const periodIntervals = [
-        { period: CandlePeriod.ONE_MINUTE, expectedMs: 60 * 1000 },
-        { period: CandlePeriod.THREE_MINUTES, expectedMs: 3 * 60 * 1000 },
-        { period: CandlePeriod.FIVE_MINUTES, expectedMs: 5 * 60 * 1000 },
-        { period: CandlePeriod.FIFTEEN_MINUTES, expectedMs: 15 * 60 * 1000 },
-        { period: CandlePeriod.THIRTY_MINUTES, expectedMs: 30 * 60 * 1000 },
-        { period: CandlePeriod.ONE_HOUR, expectedMs: 60 * 60 * 1000 },
-        { period: CandlePeriod.TWO_HOURS, expectedMs: 2 * 60 * 60 * 1000 },
-        { period: CandlePeriod.FOUR_HOURS, expectedMs: 4 * 60 * 60 * 1000 },
-      ];
-
-      for (const { period, expectedMs } of periodIntervals) {
-        // Arrange
-        const mockSetInterval = jest
-          .spyOn(global, 'setInterval')
-          .mockImplementation(() => 123 as unknown as NodeJS.Timeout);
-
-        // Act
-        const { unmount } = renderHook(() =>
-          usePerpsPositionData({
-            coin: 'ETH',
-            selectedInterval: period,
-            selectedDuration: TimeDuration.ONE_DAY,
-          }),
-        );
-
-        // Wait for effects to run
-        await act(async () => {
-          jest.runAllTimers();
-          await Promise.resolve();
-        });
-
-        // Assert
-        expect(mockSetInterval).toHaveBeenCalledWith(
-          expect.any(Function),
-          expectedMs,
-        );
-
-        // Cleanup
-        unmount();
-        mockSetInterval.mockRestore();
-        jest.clearAllTimers();
-      }
-    });
-
-    it('uses default refresh interval for unknown periods', async () => {
-      // Arrange
-      const mockSetInterval = jest
-        .spyOn(global, 'setInterval')
-        .mockImplementation(() => 456 as unknown as NodeJS.Timeout);
-
-      // Act
-      const { unmount } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: 'unknown' as CandlePeriod,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Wait for effects to run
-      await act(async () => {
-        jest.runAllTimers();
-        await Promise.resolve();
-      });
-
-      // Assert - Should use default 1 hour interval
-      expect(mockSetInterval).toHaveBeenCalledWith(
-        expect.any(Function),
-        60 * 60 * 1000,
-      );
-
-      // Cleanup
-      unmount();
-      mockSetInterval.mockRestore();
-    });
-  });
-
-  describe('prop changes and re-initialization', () => {
-    it('refetches data when coin changes', async () => {
-      // Arrange
-      const { rerender } = renderHook((props) => usePerpsPositionData(props), {
-        initialProps: {
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        },
-      });
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Clear initial call
-      mockFetchHistoricalCandles.mockClear();
-
-      // Act - Change coin
-      rerender({
-        coin: 'BTC',
-        selectedInterval: CandlePeriod.ONE_HOUR,
-        selectedDuration: TimeDuration.ONE_DAY,
-      });
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Assert
-      expect(mockFetchHistoricalCandles).toHaveBeenCalledWith('BTC', '1h', 24);
-    });
-
-    it('refetches data when interval changes', async () => {
-      // Arrange
-      const { rerender } = renderHook((props) => usePerpsPositionData(props), {
-        initialProps: {
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        },
-      });
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      mockFetchHistoricalCandles.mockClear();
-
-      // Act - Change interval
-      rerender({
-        coin: 'ETH',
-        selectedInterval: CandlePeriod.FIVE_MINUTES,
-        selectedDuration: TimeDuration.ONE_DAY,
-      });
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Assert
-      expect(mockFetchHistoricalCandles).toHaveBeenCalledWith('ETH', '5m', 288); // calculateCandleCount result (1 day / 5min intervals)
-    });
-
-    it('refetches data when duration changes', async () => {
-      // Arrange
-      const { rerender } = renderHook((props) => usePerpsPositionData(props), {
-        initialProps: {
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        },
-      });
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      mockFetchHistoricalCandles.mockClear();
-
-      // Act - Change duration
-      rerender({
-        coin: 'ETH',
-        selectedInterval: CandlePeriod.ONE_HOUR,
-        selectedDuration: TimeDuration.ONE_WEEK,
-      });
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Assert
-      expect(mockFetchHistoricalCandles).toHaveBeenCalledWith('ETH', '1h', 168); // calculateCandleCount result (1 week / 1h intervals)
-    });
-  });
-
-  describe('edge cases and error scenarios', () => {
-    it('handles invalid price update format', async () => {
-      // Arrange
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Act - Invalid price format
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: NaN }]); // Invalid number
-      });
-
-      // Assert - Should handle gracefully without throwing
-      expect(result.current.priceData).toEqual({
-        coin: 'ETH',
-        price: NaN,
-      });
-    });
-
-    it('handles empty historical candle response', async () => {
-      // Arrange
-      mockFetchHistoricalCandles.mockResolvedValue({
-        coin: 'ETH',
-        interval: CandlePeriod.ONE_HOUR,
-        candles: [],
-      });
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Act
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Assert
-      expect(result.current.candleData?.candles).toEqual(undefined);
-      expect(result.current.isLoadingHistory).toBe(false);
-    });
-
-    it('handles null historical candle response', async () => {
-      // Arrange
-      mockFetchHistoricalCandles.mockResolvedValue(null);
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      // Act
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Assert
-      expect(result.current.candleData).toBeNull();
-      expect(result.current.isLoadingHistory).toBe(false);
-    });
-
-    it('handles price updates for wrong coin', async () => {
-      // Arrange
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Act - Price update for different coin
-      await act(async () => {
-        priceCallback?.([{ coin: 'BTC', price: 45000 }]);
-      });
-
-      // Assert - Should not update priceData
-      expect(result.current.priceData).toBeNull();
-    });
-
-    it('handles malformed price update array', async () => {
-      // Arrange
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        }),
-      );
-
-      await act(async () => {
-        await new Promise((resolve) => setTimeout(resolve, 0));
-      });
-
-      // Act & Assert - Malformed update should throw TypeError due to null.find()
-      expect(() => {
-        act(() => {
-          priceCallback?.(null as unknown as PriceUpdate[]); // Invalid format - will cause TypeError
-        });
-      }).toThrow("Cannot read properties of null (reading 'find')");
-
-      // Assert - priceData should remain null due to error
-      expect(result.current.priceData).toBeNull();
-    });
-  });
-
-  describe('comprehensive integration scenarios', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-    });
-
-    afterEach(() => {
-      jest.useRealTimers();
-      jest.restoreAllMocks();
-    });
-
-    it('handles complete workflow: fetch -> price updates -> refresh', async () => {
-      // Arrange
-      const historicalData = {
-        coin: 'ETH',
-        interval: CandlePeriod.ONE_MINUTE,
-        candles: [
-          {
-            time: 1640995200000,
-            open: '3000',
-            high: '3100',
-            low: '2900',
-            close: '3050',
-            volume: '1000',
-          },
-        ],
-      };
-
-      mockFetchHistoricalCandles.mockResolvedValue(historicalData);
-
-      let priceCallback: PriceCallback | undefined;
-      mockSubscribeToPrices.mockImplementation(
-        ({ callback }: SubscribeToPricesParams) => {
-          priceCallback = callback;
-          return jest.fn();
-        },
-      );
-
-      const { result } = renderHook(() =>
-        usePerpsPositionData({
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_MINUTE,
-          selectedDuration: TimeDuration.ONE_HOUR,
-        }),
-      );
-
-      // Act - Step 1: Initial load
-      await act(async () => {
-        jest.runOnlyPendingTimers();
-        await Promise.resolve();
-      });
-
-      expect(result.current.candleData?.candles).toHaveLength(1);
-
-      // Step 2: Price updates
-      await act(async () => {
-        priceCallback?.([{ coin: 'ETH', price: 3200 }]);
-      });
-
-      expect(result.current.priceData?.price).toBe(3200);
-
-      // Step 3: Trigger refresh
-      mockFetchHistoricalCandles.mockClear();
-      const updatedData = {
-        ...historicalData,
-        candles: [
-          ...historicalData.candles,
-          {
-            time: 1640995260000,
-            open: '3200',
-            high: '3250',
-            low: '3150',
-            close: '3200',
-            volume: '500',
-          },
-        ],
-      };
-      mockFetchHistoricalCandles.mockResolvedValue(updatedData);
-
-      act(() => {
-        jest.advanceTimersByTime(60 * 1000); // 1 minute
-      });
-
-      await act(async () => {
-        await Promise.resolve();
-      });
-
-      // Assert - Should have refreshed data
-      expect(mockFetchHistoricalCandles).toHaveBeenCalledTimes(1);
-    });
-
-    it('handles rapid prop changes without race conditions', async () => {
-      // Arrange
-      const { result, rerender } = renderHook(
-        (props) => usePerpsPositionData(props),
-        {
-          initialProps: {
-            coin: 'ETH',
-            selectedInterval: CandlePeriod.ONE_HOUR,
-            selectedDuration: TimeDuration.ONE_DAY,
-          },
-        },
-      );
-
-      // Act - Rapid prop changes
-      for (let i = 0; i < 3; i++) {
-        rerender({
-          coin: `COIN${i}`,
-          selectedInterval:
-            i % 2 === 0 ? CandlePeriod.ONE_HOUR : CandlePeriod.FIVE_MINUTES,
-          selectedDuration:
-            i % 2 === 0 ? TimeDuration.ONE_DAY : TimeDuration.ONE_WEEK,
-        });
-
-        act(() => {
-          jest.runOnlyPendingTimers();
-        });
-      }
-
-      // Assert - Should handle without throwing
-      expect(result.current).toBeDefined();
-    });
-
-    it('handles subscription cleanup on prop changes', async () => {
-      // Arrange
-      const mockUnsubscribe = jest.fn();
-      mockSubscribeToPrices.mockReturnValue(mockUnsubscribe);
-
-      const { rerender } = renderHook((props) => usePerpsPositionData(props), {
-        initialProps: {
-          coin: 'ETH',
-          selectedInterval: CandlePeriod.ONE_HOUR,
-          selectedDuration: TimeDuration.ONE_DAY,
-        },
-      });
-
-      act(() => {
-        jest.runOnlyPendingTimers();
-      });
-
-      // Act - Change coin (should trigger new subscription)
-      rerender({
-        coin: 'BTC',
-        selectedInterval: CandlePeriod.ONE_HOUR,
-        selectedDuration: TimeDuration.ONE_DAY,
-      });
-
-      act(() => {
-        jest.runOnlyPendingTimers();
-      });
-
-      // Assert - Should have called unsubscribe for old subscription
-      expect(mockUnsubscribe).toHaveBeenCalled();
-    });
-  });
-});
diff --git a/app/components/UI/Perps/hooks/usePerpsPositionData.ts b/app/components/UI/Perps/hooks/usePerpsPositionData.ts
deleted file mode 100644
index 61cfd7ec11f..00000000000
--- a/app/components/UI/Perps/hooks/usePerpsPositionData.ts
+++ /dev/null
@@ -1,373 +0,0 @@
-import { isEqual } from 'lodash';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import Engine from '../../../../core/Engine';
-import { selectPerpsInitializationState } from '../selectors/perpsController';
-import DevLogger from '../../../../core/SDKConnect/utils/DevLogger';
-import {
-  calculateCandleCount,
-  CandlePeriod,
-  TimeDuration,
-} from '../constants/chartConfig';
-import type { PriceUpdate } from '../controllers/types';
-import type { CandleData } from '../types/perps-types';
-
-interface UsePerpsPositionDataProps {
-  coin: string;
-  selectedDuration: TimeDuration;
-  selectedInterval: CandlePeriod;
-}
-
-export const usePerpsPositionData = ({
-  coin,
-  selectedDuration,
-  selectedInterval,
-}: UsePerpsPositionDataProps) => {
-  const [candleData, setCandleData] = useState<CandleData | null>(null);
-  const [priceData, setPriceData] = useState<PriceUpdate | null>(null);
-  const [isLoadingHistory, setIsLoadingHistory] = useState(false);
-  const [hasHistoricalData, setHasHistoricalData] = useState(false);
-
-  const initializationState = useSelector(selectPerpsInitializationState);
-  const isControllerInitialized = initializationState === 'initialized';
-
-  // Helper function to get the current candle's start time based on interval
-  const getCurrentCandleStartTime = useCallback(
-    (interval: CandlePeriod): number => {
-      const now = Date.now();
-      const intervalMs = (() => {
-        switch (interval) {
-          case CandlePeriod.ONE_MINUTE:
-            return 60 * 1000;
-          case CandlePeriod.THREE_MINUTES:
-            return 3 * 60 * 1000;
-          case CandlePeriod.FIVE_MINUTES:
-            return 5 * 60 * 1000;
-          case CandlePeriod.FIFTEEN_MINUTES:
-            return 15 * 60 * 1000;
-          case CandlePeriod.THIRTY_MINUTES:
-            return 30 * 60 * 1000;
-          case CandlePeriod.ONE_HOUR:
-            return 60 * 60 * 1000;
-          case CandlePeriod.TWO_HOURS:
-            return 2 * 60 * 60 * 1000;
-          case CandlePeriod.FOUR_HOURS:
-            return 4 * 60 * 60 * 1000;
-          default:
-            return 60 * 60 * 1000;
-        }
-      })();
-
-      // Round down to the nearest interval boundary
-      return Math.floor(now / intervalMs) * intervalMs;
-    },
-    [],
-  );
-
-  const fetchHistoricalCandles = useCallback(async () => {
-    const baseCandleCount = calculateCandleCount(
-      selectedDuration,
-      selectedInterval,
-    );
-
-    DevLogger.log(
-      `Fetching ${baseCandleCount} candles for ${selectedDuration} with ${selectedInterval} period`,
-    );
-
-    const historicalData =
-      await Engine.context.PerpsController.fetchHistoricalCandles(
-        coin,
-        selectedInterval,
-        baseCandleCount,
-      );
-
-    return historicalData;
-  }, [coin, selectedDuration, selectedInterval]);
-
-  const subscribeToPriceUpdates = useCallback(() => {
-    try {
-      const unsubscribe = Engine.context.PerpsController.subscribeToPrices({
-        symbols: [coin],
-        callback: (priceUpdates) => {
-          const update = priceUpdates.find((p) => p.coin === coin);
-          if (update) {
-            setPriceData(update);
-          }
-        },
-      });
-      return unsubscribe;
-    } catch (err) {
-      console.error('Error subscribing to price updates:', err);
-      return () => {
-        // Empty cleanup function on error
-      };
-    }
-  }, [coin]);
-
-  // Load historical candles
-  useEffect(() => {
-    if (!isControllerInitialized) {
-      DevLogger.log(
-        'usePerpsPositionData: Waiting for controller initialization before loading historical data',
-      );
-      return;
-    }
-
-    setIsLoadingHistory(true);
-    setHasHistoricalData(false);
-    const loadHistoricalData = async () => {
-      try {
-        setCandleData(null);
-        const historicalData = await fetchHistoricalCandles();
-        // Only set data and flag if we received valid data
-        if (historicalData && historicalData.candles?.length > 0) {
-          setCandleData((prev) => {
-            // Prevent re-render if data is identical
-            if (isEqual(prev, historicalData)) {
-              return prev;
-            }
-            return historicalData;
-          });
-          setHasHistoricalData(true);
-        } else {
-          // No valid data received
-          setHasHistoricalData(false);
-        }
-      } catch (err) {
-        console.error('Error loading historical candles:', err);
-        setHasHistoricalData(false);
-      } finally {
-        setIsLoadingHistory(false);
-      }
-    };
-
-    loadHistoricalData();
-  }, [fetchHistoricalCandles, initializationState, isControllerInitialized]);
-
-  // Subscribe to price updates for 24-hour data
-  useEffect(() => {
-    if (!isControllerInitialized) {
-      return;
-    }
-
-    const unsubscribe = subscribeToPriceUpdates();
-
-    return () => {
-      unsubscribe();
-    };
-  }, [subscribeToPriceUpdates, initializationState, isControllerInitialized]);
-
-  // Periodically refresh candle data to get new completed candles
-  useEffect(() => {
-    // Only set up refresh if we have initial data and not loading
-    if (!candleData || isLoadingHistory || !isControllerInitialized) {
-      if (!isControllerInitialized) {
-        DevLogger.log(
-          'usePerpsPositionData: Deferring interval setup until controller is initialized',
-        );
-      }
-      return;
-    }
-
-    // Calculate refresh interval based on candle period
-    const getRefreshInterval = (interval: CandlePeriod): number => {
-      switch (interval) {
-        case CandlePeriod.ONE_MINUTE:
-          return 60 * 1000; // 1 minute
-        case CandlePeriod.THREE_MINUTES:
-          return 3 * 60 * 1000; // 3 minutes
-        case CandlePeriod.FIVE_MINUTES:
-          return 5 * 60 * 1000; // 5 minutes
-        case CandlePeriod.FIFTEEN_MINUTES:
-          return 15 * 60 * 1000; // 15 minutes
-        case CandlePeriod.THIRTY_MINUTES:
-          return 30 * 60 * 1000; // 30 minutes
-        case CandlePeriod.ONE_HOUR:
-          return 60 * 60 * 1000; // 1 hour
-        case CandlePeriod.TWO_HOURS:
-          return 2 * 60 * 60 * 1000; // 2 hours
-        case CandlePeriod.FOUR_HOURS:
-          return 4 * 60 * 60 * 1000; // 4 hours
-        default:
-          return 60 * 60 * 1000; // Default 1 hour
-      }
-    };
-
-    const refreshInterval = getRefreshInterval(selectedInterval);
-    DevLogger.log(
-      `Setting up candle refresh every ${
-        refreshInterval / 1000
-      } seconds for ${selectedInterval}`,
-    );
-
-    const intervalId = setInterval(async () => {
-      try {
-        const newData = await fetchHistoricalCandles();
-        if (newData && newData.candles.length > 0) {
-          setCandleData((prev) => {
-            // Prevent re-render if data is identical
-            if (isEqual(prev, newData)) {
-              return prev;
-            }
-            DevLogger.log(
-              `Refreshed candle data: ${newData.candles.length} candles`,
-            );
-            return newData;
-          });
-        }
-      } catch (error) {
-        console.error('Error refreshing candle data:', error);
-      }
-    }, refreshInterval);
-
-    return () => {
-      clearInterval(intervalId);
-      DevLogger.log('Cleared candle refresh interval');
-    };
-    // Note: candleData is intentionally excluded from deps to prevent infinite loop
-    // This effect only needs to re-run when the interval settings change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    isLoadingHistory,
-    selectedInterval,
-    fetchHistoricalCandles,
-    isControllerInitialized,
-  ]);
-
-  const liveCandle = useMemo(() => {
-    if (!priceData?.price || isLoadingHistory) return null;
-
-    const currentPrice = Number.parseFloat(priceData.price.toString());
-    const currentCandleTime = getCurrentCandleStartTime(selectedInterval);
-    const existingCandles = candleData?.candles ?? [];
-    const existingCandleIndex = existingCandles.findIndex(
-      (candle) => candle.time === currentCandleTime,
-    );
-
-    const existingLiveCandle =
-      existingCandleIndex >= 0 ? existingCandles[existingCandleIndex] : null;
-
-    if (!existingLiveCandle) {
-      const existingCandlesLength = existingCandles.length;
-      const previousCandle =
-        existingCandlesLength > 0
-          ? existingCandles[existingCandlesLength - 1]
-          : null;
-      const open = previousCandle
-        ? previousCandle.close.toString()
-        : currentPrice.toString();
-      const close = currentPrice.toString();
-      const high = Math.max(currentPrice, Number.parseFloat(open)).toString();
-      const low = Math.min(currentPrice, Number.parseFloat(open)).toString();
-
-      return {
-        time: currentCandleTime,
-        open,
-        high,
-        low,
-        close,
-        volume: '0',
-      };
-    }
-
-    const close = currentPrice.toString();
-    const high = Math.max(
-      currentPrice,
-      Number.parseFloat(existingLiveCandle.high),
-    ).toString();
-    const low = Math.min(
-      currentPrice,
-      Number.parseFloat(existingLiveCandle.low),
-    ).toString();
-
-    const newLiveCandle = {
-      ...existingLiveCandle,
-      time: currentCandleTime,
-      close,
-      high,
-      low,
-    };
-
-    return newLiveCandle;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    priceData,
-    selectedInterval,
-    getCurrentCandleStartTime,
-    isLoadingHistory,
-  ]);
-
-  // Merge historical candles with live candle for chart display
-  useEffect(() => {
-    // Don't merge until we have successfully loaded historical candles
-    if (!hasHistoricalData || !candleData) return;
-
-    const candles = candleData.candles;
-    if (!liveCandle || candles.length === 0) return;
-
-    const liveCandleIndex = candles.findIndex(
-      (candle) => candle.time === liveCandle.time,
-    );
-
-    if (liveCandleIndex === -1) {
-      setCandleData((prev) => {
-        if (!prev) return null;
-        return {
-          ...prev,
-          candles: [...prev.candles, liveCandle],
-        };
-      });
-      return;
-    }
-
-    if (isEqual(candles[liveCandleIndex], liveCandle)) {
-      return;
-    }
-
-    setCandleData((prev) => {
-      if (!prev) return null;
-      const candlesCopy = [...prev.candles];
-      candlesCopy[liveCandleIndex] = liveCandle;
-      return {
-        ...prev,
-        candles: candlesCopy,
-      };
-    });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [liveCandle, hasHistoricalData, candleData]);
-
-  const refreshCandleData = useCallback(async () => {
-    setIsLoadingHistory(true);
-    try {
-      setCandleData(null);
-      const historicalData = await fetchHistoricalCandles();
-
-      if (historicalData && historicalData.candles?.length > 0) {
-        setCandleData((prev) => {
-          // Prevent re-render if data is identical
-          if (isEqual(prev, historicalData)) {
-            return prev;
-          }
-          return historicalData;
-        });
-        setHasHistoricalData(true);
-      } else {
-        // No valid data received on refresh
-        setHasHistoricalData(false);
-      }
-    } catch (err) {
-      console.error('Error refreshing candle data:', err);
-      setHasHistoricalData(false);
-    } finally {
-      setIsLoadingHistory(false);
-    }
-  }, [fetchHistoricalCandles]);
-
-  return {
-    candleData,
-    priceData,
-    isLoadingHistory,
-    refreshCandleData,
-    hasHistoricalData,
-  };
-};
diff --git a/app/components/UI/Perps/providers/PerpsStreamManager.tsx b/app/components/UI/Perps/providers/PerpsStreamManager.tsx
index 5655c11efb0..60ec214bae4 100644
--- a/app/components/UI/Perps/providers/PerpsStreamManager.tsx
+++ b/app/components/UI/Perps/providers/PerpsStreamManager.tsx
@@ -23,6 +23,7 @@ import { PERFORMANCE_CONFIG, PERPS_CONSTANTS } from '../constants/perpsConfig';
 import { PerpsMeasurementName } from '../constants/performanceMetrics';
 import { getE2EMockStreamManager } from '../utils/e2eBridgePerps';
 import { getEvmAccountFromSelectedAccountGroup } from '../utils/accountUtils';
+import { CandleStreamChannel } from './channels/CandleStreamChannel';
 
 // Generic subscription parameters
 interface StreamSubscription<T> {
@@ -1199,6 +1200,7 @@ export class PerpsStreamManager {
   public readonly marketData = new MarketDataChannel();
   public readonly oiCaps = new OICapStreamChannel();
   public readonly topOfBook = new TopOfBookStreamChannel();
+  public readonly candles = new CandleStreamChannel();
 
   // Future channels can be added here:
   // public readonly funding = new FundingStreamChannel();
diff --git a/app/components/UI/Perps/providers/channels/CandleStreamChannel.test.ts b/app/components/UI/Perps/providers/channels/CandleStreamChannel.test.ts
new file mode 100644
index 00000000000..fc132c8e672
--- /dev/null
+++ b/app/components/UI/Perps/providers/channels/CandleStreamChannel.test.ts
@@ -0,0 +1,984 @@
+import { CandleStreamChannel } from './CandleStreamChannel';
+import { CandlePeriod, TimeDuration } from '../../constants/chartConfig';
+import type { CandleData } from '../../types/perps-types';
+import Engine from '../../../../../core/Engine';
+
+jest.mock('../../../../../core/Engine');
+jest.mock('../../../../../core/SDKConnect/utils/DevLogger');
+
+const mockEngine = Engine as jest.Mocked<typeof Engine>;
+
+describe('CandleStreamChannel', () => {
+  let channel: CandleStreamChannel;
+  let mockSubscribeToCandles: jest.Mock;
+  let mockIsCurrentlyReinitializing: jest.Mock;
+  let mockFetchHistoricalCandles: jest.Mock;
+
+  const mockCandleData: CandleData = {
+    coin: 'BTC',
+    interval: CandlePeriod.ONE_HOUR,
+    candles: [
+      {
+        time: 1700000000000,
+        open: '50000',
+        high: '51000',
+        low: '49000',
+        close: '50500',
+        volume: '100',
+      },
+    ],
+  };
+
+  beforeEach(() => {
+    channel = new CandleStreamChannel();
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+
+    // Setup Engine.context.PerpsController mock
+    mockSubscribeToCandles = jest.fn();
+    mockIsCurrentlyReinitializing = jest.fn().mockReturnValue(false);
+    mockFetchHistoricalCandles = jest.fn();
+    mockEngine.context.PerpsController = {
+      subscribeToCandles: mockSubscribeToCandles,
+      isCurrentlyReinitializing: mockIsCurrentlyReinitializing,
+      fetchHistoricalCandles: mockFetchHistoricalCandles,
+    } as unknown as typeof mockEngine.context.PerpsController;
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  describe('Cache Management', () => {
+    it('should generate correct cache key', () => {
+      // Test via subscription - cache key format is coin-interval
+      const callback = jest.fn();
+      mockSubscribeToCandles.mockReturnValue(jest.fn());
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback,
+      });
+
+      // Verify subscription was called (implies cache key was used internally)
+      expect(mockSubscribeToCandles).toHaveBeenCalledWith(
+        expect.objectContaining({
+          coin: 'BTC',
+          interval: CandlePeriod.ONE_HOUR,
+        }),
+      );
+    });
+
+    it('should return cached data immediately if available', () => {
+      const callback1 = jest.fn();
+      const callback2 = jest.fn();
+
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback }) => {
+        capturedCallback = callback;
+        return jest.fn();
+      });
+
+      // First subscription
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: callback1,
+      });
+
+      // Simulate WebSocket data
+      capturedCallback?.(mockCandleData);
+
+      // Second subscription to same coin+interval should get cached data
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: callback2,
+      });
+
+      // Both callbacks should have been invoked
+      expect(callback1).toHaveBeenCalledWith(mockCandleData);
+      expect(callback2).toHaveBeenCalledWith(mockCandleData);
+    });
+
+    it('should maintain separate cache for different coin+interval combinations', () => {
+      const btcCallback = jest.fn();
+      const ethCallback = jest.fn();
+
+      const mockBtcData: CandleData = {
+        ...mockCandleData,
+        coin: 'BTC',
+      };
+
+      const mockEthData: CandleData = {
+        ...mockCandleData,
+        coin: 'ETH',
+      };
+
+      let btcCapturedCallback: ((data: CandleData) => void) | undefined;
+      let ethCapturedCallback: ((data: CandleData) => void) | undefined;
+
+      mockSubscribeToCandles.mockImplementation(({ coin, callback }) => {
+        if (coin === 'BTC') {
+          btcCapturedCallback = callback;
+        } else if (coin === 'ETH') {
+          ethCapturedCallback = callback;
+        }
+        return jest.fn();
+      });
+
+      // Subscribe to BTC
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: btcCallback,
+      });
+
+      // Subscribe to ETH
+      channel.subscribe({
+        coin: 'ETH',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: ethCallback,
+      });
+
+      // Send BTC data
+      btcCapturedCallback?.(mockBtcData);
+
+      // Send ETH data
+      ethCapturedCallback?.(mockEthData);
+
+      // Each callback should only receive its own data
+      expect(btcCallback).toHaveBeenCalledWith(mockBtcData);
+      expect(btcCallback).not.toHaveBeenCalledWith(mockEthData);
+      expect(ethCallback).toHaveBeenCalledWith(mockEthData);
+      expect(ethCallback).not.toHaveBeenCalledWith(mockBtcData);
+    });
+
+    it('should clear all cache on clearCache()', () => {
+      const callback = jest.fn();
+
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback: cb }) => {
+        capturedCallback = cb;
+        return jest.fn();
+      });
+
+      // Subscribe and populate cache
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback,
+      });
+
+      capturedCallback?.(mockCandleData);
+
+      // Clear cache
+      channel.clearCache();
+
+      // Should notify subscribers with cleared data
+      expect(callback).toHaveBeenCalledWith(
+        expect.objectContaining({
+          coin: '',
+          interval: CandlePeriod.ONE_HOUR,
+          candles: [],
+        }),
+      );
+    });
+
+    it('should return null when no cached data available', () => {
+      const result = channel.getCachedData('BTC', CandlePeriod.ONE_HOUR);
+      expect(result).toBeNull();
+    });
+
+    it('should return cached data via getCachedData', () => {
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback }) => {
+        capturedCallback = callback;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      capturedCallback?.(mockCandleData);
+
+      const result = channel.getCachedData('BTC', CandlePeriod.ONE_HOUR);
+      expect(result).toEqual(mockCandleData);
+    });
+  });
+
+  describe('Subscription Management', () => {
+    it('should return unsubscribe function', () => {
+      mockSubscribeToCandles.mockReturnValue(jest.fn());
+
+      const unsubscribe = channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      expect(typeof unsubscribe).toBe('function');
+    });
+
+    it('should share WebSocket connection for same coin+interval', () => {
+      mockSubscribeToCandles.mockReturnValue(jest.fn());
+
+      // Subscribe twice to same coin+interval
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      // Should only call subscribeToCandles once
+      expect(mockSubscribeToCandles).toHaveBeenCalledTimes(1);
+    });
+
+    it('should create separate WebSocket connections for different coin+interval', () => {
+      mockSubscribeToCandles.mockReturnValue(jest.fn());
+
+      // Subscribe to different combinations
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.FIVE_MINUTES,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      channel.subscribe({
+        coin: 'ETH',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      // Should call subscribeToCandles three times
+      expect(mockSubscribeToCandles).toHaveBeenCalledTimes(3);
+    });
+
+    it('should filter subscribers by cacheKey', () => {
+      const btcCallback = jest.fn();
+      const ethCallback = jest.fn();
+
+      let btcCapturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ coin, callback }) => {
+        if (coin === 'BTC') {
+          btcCapturedCallback = callback;
+        }
+        return jest.fn();
+      });
+
+      // Subscribe to BTC
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: btcCallback,
+      });
+
+      // Subscribe to ETH
+      channel.subscribe({
+        coin: 'ETH',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: ethCallback,
+      });
+
+      // Send BTC data
+      btcCapturedCallback?.(mockCandleData);
+
+      // Only BTC callback should be invoked
+      expect(btcCallback).toHaveBeenCalledWith(mockCandleData);
+      expect(ethCallback).not.toHaveBeenCalled();
+    });
+
+    it('should disconnect WebSocket when last subscriber unsubscribes', () => {
+      const mockUnsubscribe = jest.fn();
+      mockSubscribeToCandles.mockReturnValue(mockUnsubscribe);
+
+      const unsubscribe1 = channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      const unsubscribe2 = channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      // Unsubscribe first subscriber - WebSocket should stay connected
+      unsubscribe1();
+      expect(mockUnsubscribe).not.toHaveBeenCalled();
+
+      // Unsubscribe last subscriber - WebSocket should disconnect
+      unsubscribe2();
+      expect(mockUnsubscribe).toHaveBeenCalled();
+    });
+
+    it('should not disconnect WebSocket when subscribers remain for different cacheKey', () => {
+      const mockBtcUnsubscribe = jest.fn();
+      const mockEthUnsubscribe = jest.fn();
+
+      mockSubscribeToCandles.mockImplementation(({ coin }) =>
+        coin === 'BTC' ? mockBtcUnsubscribe : mockEthUnsubscribe,
+      );
+
+      const btcUnsubscribe = channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      channel.subscribe({
+        coin: 'ETH',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      // Unsubscribe from BTC
+      btcUnsubscribe();
+
+      // BTC WebSocket should disconnect, but ETH should remain
+      expect(mockBtcUnsubscribe).toHaveBeenCalled();
+      expect(mockEthUnsubscribe).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('WebSocket Integration', () => {
+    it('should call Engine.context.PerpsController.subscribeToCandles', () => {
+      mockSubscribeToCandles.mockReturnValue(jest.fn());
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      expect(
+        Engine.context.PerpsController.subscribeToCandles,
+      ).toHaveBeenCalled();
+    });
+
+    it('should defer connection if controller is reinitializing', () => {
+      mockIsCurrentlyReinitializing.mockReturnValue(true);
+      mockSubscribeToCandles.mockReturnValue(jest.fn());
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      // Should not call subscribe immediately
+      expect(mockSubscribeToCandles).not.toHaveBeenCalled();
+
+      // Fast-forward timers to trigger retry
+      mockIsCurrentlyReinitializing.mockReturnValue(false);
+      jest.advanceTimersByTime(5000);
+
+      // Should call subscribe after delay
+      expect(mockSubscribeToCandles).toHaveBeenCalled();
+    });
+
+    it('should disconnect WebSocket via stored cleanup function', () => {
+      const mockUnsubscribe = jest.fn();
+      mockSubscribeToCandles.mockReturnValue(mockUnsubscribe);
+
+      const unsubscribe = channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      unsubscribe();
+
+      expect(mockUnsubscribe).toHaveBeenCalled();
+    });
+  });
+
+  describe('Throttling', () => {
+    it('should send first update immediately', () => {
+      const callback = jest.fn();
+
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback: cb }) => {
+        capturedCallback = cb;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback,
+        throttleMs: 1000,
+      });
+
+      // First update should be immediate
+      capturedCallback?.(mockCandleData);
+
+      expect(callback).toHaveBeenCalledWith(mockCandleData);
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+
+    it('should throttle subsequent updates', () => {
+      const callback = jest.fn();
+
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback: cb }) => {
+        capturedCallback = cb;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback,
+        throttleMs: 1000,
+      });
+
+      // First update - immediate
+      capturedCallback?.(mockCandleData);
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Second update - should be throttled
+      const updatedData = {
+        ...mockCandleData,
+        candles: [
+          ...mockCandleData.candles,
+          {
+            time: 1700003600000,
+            open: '50500',
+            high: '52000',
+            low: '50000',
+            close: '51500',
+            volume: '120',
+          },
+        ],
+      };
+      capturedCallback?.(updatedData);
+
+      // Should not call callback immediately
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      // Fast-forward time
+      jest.advanceTimersByTime(1000);
+
+      // Should call callback after throttle period
+      expect(callback).toHaveBeenCalledTimes(2);
+      expect(callback).toHaveBeenLastCalledWith(updatedData);
+    });
+
+    it('should use latest update when throttling', () => {
+      const callback = jest.fn();
+
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback: cb }) => {
+        capturedCallback = cb;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback,
+        throttleMs: 1000,
+      });
+
+      // First update
+      capturedCallback?.(mockCandleData);
+
+      // Multiple updates during throttle period
+      const update1 = {
+        ...mockCandleData,
+        candles: [{ ...mockCandleData.candles[0], close: '50600' }],
+      };
+      const update2 = {
+        ...mockCandleData,
+        candles: [{ ...mockCandleData.candles[0], close: '50700' }],
+      };
+      const update3 = {
+        ...mockCandleData,
+        candles: [{ ...mockCandleData.candles[0], close: '50800' }],
+      };
+
+      capturedCallback?.(update1);
+      capturedCallback?.(update2);
+      capturedCallback?.(update3);
+
+      // Fast-forward time
+      jest.advanceTimersByTime(1000);
+
+      // Should only send the latest update
+      expect(callback).toHaveBeenCalledTimes(2);
+      expect(callback).toHaveBeenLastCalledWith(update3);
+    });
+
+    it('should not throttle when throttleMs not provided', () => {
+      const callback = jest.fn();
+
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback: cb }) => {
+        capturedCallback = cb;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback,
+        // No throttleMs
+      });
+
+      // All updates should be immediate
+      capturedCallback?.(mockCandleData);
+      expect(callback).toHaveBeenCalledTimes(1);
+
+      capturedCallback?.(mockCandleData);
+      expect(callback).toHaveBeenCalledTimes(2);
+
+      capturedCallback?.(mockCandleData);
+      expect(callback).toHaveBeenCalledTimes(3);
+    });
+
+    it('should clear throttle timer on unsubscribe', () => {
+      const callback = jest.fn();
+
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback: cb }) => {
+        capturedCallback = cb;
+        return jest.fn();
+      });
+
+      const unsubscribe = channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback,
+        throttleMs: 1000,
+      });
+
+      // First update
+      capturedCallback?.(mockCandleData);
+
+      // Second update (throttled)
+      capturedCallback?.(mockCandleData);
+
+      // Unsubscribe before throttle expires
+      unsubscribe();
+
+      // Fast-forward time
+      jest.advanceTimersByTime(1000);
+
+      // Should not call callback after unsubscribe
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Pause and Resume', () => {
+    it('should not notify subscribers when paused', () => {
+      const callback = jest.fn();
+
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback: cb }) => {
+        capturedCallback = cb;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback,
+      });
+
+      // Pause channel
+      channel.pause();
+
+      // Send update
+      capturedCallback?.(mockCandleData);
+
+      // Callback should not be invoked
+      expect(callback).not.toHaveBeenCalled();
+    });
+
+    it('should resume notifying subscribers after resume', () => {
+      const callback = jest.fn();
+
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback: cb }) => {
+        capturedCallback = cb;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback,
+      });
+
+      // Pause and send update
+      channel.pause();
+      capturedCallback?.(mockCandleData);
+      expect(callback).not.toHaveBeenCalled();
+
+      // Resume and send another update
+      channel.resume();
+      capturedCallback?.(mockCandleData);
+
+      // Callback should be invoked
+      expect(callback).toHaveBeenCalled();
+    });
+  });
+
+  describe('Disconnect All', () => {
+    it('should disconnect all WebSocket subscriptions', () => {
+      const mockBtcUnsubscribe = jest.fn();
+      const mockEthUnsubscribe = jest.fn();
+
+      mockSubscribeToCandles.mockImplementation(({ coin }) =>
+        coin === 'BTC' ? mockBtcUnsubscribe : mockEthUnsubscribe,
+      );
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      channel.subscribe({
+        coin: 'ETH',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      // Disconnect all
+      channel.disconnectAll();
+
+      // Both unsubscribe functions should be called
+      expect(mockBtcUnsubscribe).toHaveBeenCalled();
+      expect(mockEthUnsubscribe).toHaveBeenCalled();
+    });
+
+    it('should clear all throttle timers on disconnectAll', () => {
+      const callback = jest.fn();
+
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback: cb }) => {
+        capturedCallback = cb;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback,
+        throttleMs: 1000,
+      });
+
+      // Send first update
+      capturedCallback?.(mockCandleData);
+
+      // Send second update (throttled)
+      capturedCallback?.(mockCandleData);
+
+      // Disconnect all
+      channel.disconnectAll();
+
+      // Fast-forward time
+      jest.advanceTimersByTime(1000);
+
+      // Should not invoke callback after disconnect
+      expect(callback).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('Clear Cache', () => {
+    it('should disconnect all WebSocket subscriptions on clearCache', () => {
+      const mockUnsubscribe = jest.fn();
+      mockSubscribeToCandles.mockReturnValue(mockUnsubscribe);
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      channel.clearCache();
+
+      expect(mockUnsubscribe).toHaveBeenCalled();
+    });
+
+    it('should clear all throttle timers on clearCache', () => {
+      const callback = jest.fn();
+
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback: cb }) => {
+        capturedCallback = cb;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback,
+        throttleMs: 1000,
+      });
+
+      // Send updates
+      capturedCallback?.(mockCandleData);
+      capturedCallback?.(mockCandleData);
+
+      // Clear cache
+      channel.clearCache();
+
+      // Fast-forward time
+      jest.advanceTimersByTime(1000);
+
+      // Should have called callback for cleared data (from clearCache)
+      // but not from throttled update
+      expect(callback).toHaveBeenCalledWith(
+        expect.objectContaining({
+          candles: [],
+        }),
+      );
+    });
+  });
+
+  describe('Fetch Historical Candles', () => {
+    it('returns early when no cached data exists', async () => {
+      await channel.fetchHistoricalCandles(
+        'BTC',
+        CandlePeriod.ONE_HOUR,
+        TimeDuration.ONE_DAY,
+      );
+
+      expect(mockFetchHistoricalCandles).not.toHaveBeenCalled();
+    });
+
+    it('returns early when cached data has no candles', async () => {
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback }) => {
+        capturedCallback = callback;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      const emptyData: CandleData = {
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        candles: [],
+      };
+      capturedCallback?.(emptyData);
+
+      await channel.fetchHistoricalCandles(
+        'BTC',
+        CandlePeriod.ONE_HOUR,
+        TimeDuration.ONE_DAY,
+      );
+
+      expect(mockFetchHistoricalCandles).not.toHaveBeenCalled();
+    });
+
+    it('fetches and merges historical candles successfully', async () => {
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      const subscriber = jest.fn();
+      mockSubscribeToCandles.mockImplementation(({ callback }) => {
+        capturedCallback = callback;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: subscriber,
+      });
+
+      capturedCallback?.(mockCandleData);
+
+      const olderCandles: CandleData = {
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        candles: [
+          {
+            time: 1699996400000,
+            open: '49000',
+            high: '50000',
+            low: '48500',
+            close: '49500',
+            volume: '80',
+          },
+        ],
+      };
+
+      mockFetchHistoricalCandles.mockResolvedValue(olderCandles);
+
+      await channel.fetchHistoricalCandles(
+        'BTC',
+        CandlePeriod.ONE_HOUR,
+        TimeDuration.ONE_DAY,
+      );
+
+      expect(mockFetchHistoricalCandles).toHaveBeenCalledWith(
+        'BTC',
+        CandlePeriod.ONE_HOUR,
+        50,
+        expect.any(Number),
+      );
+
+      expect(subscriber).toHaveBeenCalledWith(
+        expect.objectContaining({
+          coin: 'BTC',
+          candles: expect.arrayContaining([
+            expect.objectContaining({ time: 1699996400000 }),
+            expect.objectContaining({ time: 1700000000000 }),
+          ]),
+        }),
+      );
+    });
+
+    it('filters out duplicate candles when merging', async () => {
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      const subscriber = jest.fn();
+      mockSubscribeToCandles.mockImplementation(({ callback }) => {
+        capturedCallback = callback;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: subscriber,
+      });
+
+      capturedCallback?.(mockCandleData);
+
+      const duplicateCandles: CandleData = {
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        candles: [mockCandleData.candles[0]],
+      };
+
+      mockFetchHistoricalCandles.mockResolvedValue(duplicateCandles);
+
+      await channel.fetchHistoricalCandles(
+        'BTC',
+        CandlePeriod.ONE_HOUR,
+        TimeDuration.ONE_DAY,
+      );
+
+      const lastCall = subscriber.mock.calls[subscriber.mock.calls.length - 1];
+      expect(lastCall[0].candles).toHaveLength(1);
+    });
+
+    it('handles fetch error gracefully', async () => {
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      mockSubscribeToCandles.mockImplementation(({ callback }) => {
+        capturedCallback = callback;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: jest.fn(),
+      });
+
+      capturedCallback?.(mockCandleData);
+
+      const fetchError = new Error('Network error');
+      mockFetchHistoricalCandles.mockRejectedValue(fetchError);
+
+      await expect(
+        channel.fetchHistoricalCandles(
+          'BTC',
+          CandlePeriod.ONE_HOUR,
+          TimeDuration.ONE_DAY,
+        ),
+      ).rejects.toThrow('Network error');
+    });
+
+    it('returns early when no additional candles available', async () => {
+      let capturedCallback: ((data: CandleData) => void) | undefined;
+      const subscriber = jest.fn();
+      mockSubscribeToCandles.mockImplementation(({ callback }) => {
+        capturedCallback = callback;
+        return jest.fn();
+      });
+
+      channel.subscribe({
+        coin: 'BTC',
+        interval: CandlePeriod.ONE_HOUR,
+        duration: TimeDuration.ONE_DAY,
+        callback: subscriber,
+      });
+
+      capturedCallback?.(mockCandleData);
+      subscriber.mockClear();
+
+      mockFetchHistoricalCandles.mockResolvedValue(null);
+
+      await channel.fetchHistoricalCandles(
+        'BTC',
+        CandlePeriod.ONE_HOUR,
+        TimeDuration.ONE_DAY,
+      );
+
+      expect(subscriber).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/app/components/UI/Perps/providers/channels/CandleStreamChannel.ts b/app/components/UI/Perps/providers/channels/CandleStreamChannel.ts
new file mode 100644
index 00000000000..9c70076fc06
--- /dev/null
+++ b/app/components/UI/Perps/providers/channels/CandleStreamChannel.ts
@@ -0,0 +1,445 @@
+import Engine from '../../../../../core/Engine';
+import type { CandleData } from '../../types/perps-types';
+import {
+  CandlePeriod,
+  TimeDuration,
+  calculateCandleCount,
+} from '../../constants/chartConfig';
+import { PERPS_CONSTANTS } from '../../constants/perpsConfig';
+import DevLogger from '../../../../../core/SDKConnect/utils/DevLogger';
+import Logger from '../../../../../util/Logger';
+import { ensureError } from '../../utils/perpsErrorHandler';
+
+// Generic subscription parameters
+interface StreamSubscription<T> {
+  id: string;
+  cacheKey: string; // Associated cacheKey (coin-interval) for filtering
+  callback: (data: T) => void;
+  throttleMs?: number;
+  timer?: NodeJS.Timeout;
+  pendingUpdate?: T;
+  hasReceivedFirstUpdate?: boolean;
+  onError?: (error: Error) => void;
+}
+
+// Base class for stream channel (simplified version)
+abstract class StreamChannel<T> {
+  protected cache = new Map<string, T>();
+  protected subscribers = new Map<string, StreamSubscription<T>>();
+  protected wsSubscriptions = new Map<string, () => void>();
+  protected isPaused = false;
+
+  protected notifySubscribers(cacheKey: string, updates: T) {
+    if (this.isPaused) {
+      return;
+    }
+
+    // Filter subscribers to only those matching this cacheKey
+    const matchingSubscribers = Array.from(this.subscribers.values()).filter(
+      (sub) => sub.cacheKey === cacheKey,
+    );
+
+    matchingSubscribers.forEach((subscriber) => {
+      // Check if this is the first update for this subscriber
+      if (!subscriber.hasReceivedFirstUpdate) {
+        subscriber.callback(updates);
+        subscriber.hasReceivedFirstUpdate = true;
+        return;
+      }
+
+      // If no throttling, notify immediately
+      if (!subscriber.throttleMs) {
+        subscriber.callback(updates);
+        return;
+      }
+
+      // Store pending update
+      subscriber.pendingUpdate = updates;
+
+      // Throttle pattern
+      if (!subscriber.timer) {
+        subscriber.timer = setTimeout(() => {
+          if (subscriber.pendingUpdate) {
+            subscriber.callback(subscriber.pendingUpdate);
+            subscriber.pendingUpdate = undefined;
+          }
+          subscriber.timer = undefined;
+        }, subscriber.throttleMs);
+      }
+    });
+  }
+
+  public pause(): void {
+    this.isPaused = true;
+  }
+
+  public resume(): void {
+    this.isPaused = false;
+  }
+
+  public clearCache(): void {
+    this.subscribers.forEach((subscriber) => {
+      if (subscriber.timer) {
+        clearTimeout(subscriber.timer);
+        subscriber.timer = undefined;
+      }
+      subscriber.pendingUpdate = undefined;
+    });
+
+    // Disconnect all WebSocket subscriptions
+    this.wsSubscriptions.forEach((unsubscribe) => {
+      unsubscribe();
+    });
+    this.wsSubscriptions.clear();
+
+    this.cache.clear();
+
+    // Notify subscribers with cleared data
+    this.subscribers.forEach((subscriber) => {
+      subscriber.callback(this.getClearedData());
+    });
+  }
+
+  protected abstract getClearedData(): T;
+}
+
+// CandleStreamChannel - specific channel for candle data
+export class CandleStreamChannel extends StreamChannel<CandleData> {
+  /**
+   * Get cache key for a specific coin and interval
+   */
+  private getCacheKey(coin: string, interval: CandlePeriod): string {
+    return `${coin}-${interval}`;
+  }
+
+  /**
+   * Subscribe to candle updates for a specific coin and interval
+   */
+  public subscribe(params: {
+    coin: string;
+    interval: CandlePeriod;
+    duration: TimeDuration;
+    callback: (data: CandleData) => void;
+    throttleMs?: number;
+    onError?: (error: Error) => void;
+  }): () => void {
+    const { coin, interval, duration, callback, throttleMs, onError } = params;
+    const cacheKey = this.getCacheKey(coin, interval);
+    const id = Math.random().toString(36);
+
+    const subscription: StreamSubscription<CandleData> = {
+      id,
+      cacheKey, // Store cacheKey to filter subscribers by their subscription
+      callback,
+      throttleMs,
+      hasReceivedFirstUpdate: false,
+      onError,
+    };
+    this.subscribers.set(id, subscription);
+
+    // Give immediate cached data if available
+    const cached = this.cache.get(cacheKey);
+    if (cached) {
+      callback(cached);
+      subscription.hasReceivedFirstUpdate = true;
+    }
+
+    // Ensure WebSocket connected for this coin+interval
+    this.connect(coin, interval, duration, cacheKey);
+
+    // Return unsubscribe function
+    return () => {
+      const sub = this.subscribers.get(id);
+      if (sub?.timer) {
+        clearTimeout(sub.timer);
+        sub.timer = undefined;
+      }
+      this.subscribers.delete(id);
+
+      // Count remaining subscribers for THIS specific cacheKey
+      const remainingForThisKey = Array.from(this.subscribers.values()).filter(
+        (s) => s.cacheKey === cacheKey,
+      ).length;
+
+      // Disconnect WebSocket if no subscribers remain for this coin+interval
+      if (remainingForThisKey === 0) {
+        DevLogger.log(
+          'CandleStreamChannel: Disconnecting WebSocket (no subscribers)',
+          {
+            cacheKey,
+          },
+        );
+        this.disconnect(cacheKey);
+      }
+    };
+  }
+
+  /**
+   * Connect to WebSocket for specific coin and interval
+   */
+  private connect(
+    coin: string,
+    interval: CandlePeriod,
+    duration: TimeDuration,
+    cacheKey: string,
+  ): void {
+    // Skip if already connected for this coin+interval
+    if (this.wsSubscriptions.has(cacheKey)) {
+      return;
+    }
+
+    // Check if controller is reinitializing
+    if (Engine.context.PerpsController.isCurrentlyReinitializing()) {
+      setTimeout(() => {
+        // Verify subscription still active before reconnecting
+        const hasActiveSubscribers = Array.from(this.subscribers.values()).some(
+          (sub) => sub.cacheKey === cacheKey,
+        );
+
+        // Only reconnect if subscribers still exist and no connection established
+        if (hasActiveSubscribers && !this.wsSubscriptions.has(cacheKey)) {
+          this.connect(coin, interval, duration, cacheKey);
+        }
+      }, PERPS_CONSTANTS.RECONNECTION_CLEANUP_DELAY_MS);
+      return;
+    }
+
+    // Subscribe to candle updates via controller
+    const unsubscribe = Engine.context.PerpsController.subscribeToCandles({
+      coin,
+      interval,
+      duration,
+      callback: (candleData: CandleData) => {
+        // Update cache
+        this.cache.set(cacheKey, candleData);
+
+        // Notify all subscribers
+        this.notifySubscribers(cacheKey, candleData);
+      },
+      onError: (error: Error) => {
+        // Log initialization failure
+        DevLogger.log(
+          'CandleStreamChannel: Subscription initialization failed',
+          {
+            coin,
+            interval,
+            cacheKey,
+            error: error.message,
+          },
+        );
+
+        // Notify all subscribers for this cacheKey of the error
+        const matchingSubscribers = Array.from(
+          this.subscribers.values(),
+        ).filter((sub) => sub.cacheKey === cacheKey);
+        matchingSubscribers.forEach((subscriber) => {
+          subscriber.onError?.(error);
+        });
+
+        // Clean up failed subscription
+        this.wsSubscriptions.delete(cacheKey);
+      },
+    });
+
+    // Log subscription establishment (once per subscription)
+    DevLogger.log('CandleStreamChannel: WebSocket subscription established', {
+      coin,
+      interval,
+      cacheKey,
+    });
+
+    // Store cleanup function
+    this.wsSubscriptions.set(cacheKey, unsubscribe);
+  }
+
+  /**
+   * Disconnect from WebSocket for specific coin+interval
+   */
+  private disconnect(cacheKey: string): void {
+    const unsubscribe = this.wsSubscriptions.get(cacheKey);
+    if (unsubscribe) {
+      unsubscribe();
+      this.wsSubscriptions.delete(cacheKey);
+    }
+  }
+
+  /**
+   * Get cached data for specific coin and interval
+   */
+  public getCachedData(
+    coin: string,
+    interval: CandlePeriod,
+  ): CandleData | null {
+    const cacheKey = this.getCacheKey(coin, interval);
+    return this.cache.get(cacheKey) || null;
+  }
+
+  /**
+   * Get cleared data (empty candle array)
+   */
+  protected getClearedData(): CandleData {
+    return {
+      coin: '',
+      interval: CandlePeriod.ONE_HOUR,
+      candles: [],
+    };
+  }
+
+  /**
+   * Fetch additional historical candles before the current oldest candle
+   * Used for loading more history when user scrolls to the left edge of the chart
+   * Dynamically calculates fetch size based on duration and interval
+   * @param coin - The coin symbol
+   * @param interval - The candle interval
+   * @param duration - The time duration (used to calculate dynamic fetch size)
+   * @returns Promise that resolves when fetch completes
+   */
+  public async fetchHistoricalCandles(
+    coin: string,
+    interval: CandlePeriod,
+    duration: TimeDuration,
+  ): Promise<void> {
+    const cacheKey = this.getCacheKey(coin, interval);
+    const cachedData = this.cache.get(cacheKey);
+
+    // If no cached data or no candles, nothing to extend
+    if (!cachedData || cachedData.candles.length === 0) {
+      DevLogger.log(
+        'CandleStreamChannel: No cached data to extend, skipping historical fetch',
+        { coin, interval },
+      );
+      return;
+    }
+
+    // Get the oldest candle timestamp
+    const oldestCandle = cachedData.candles[0];
+    if (!oldestCandle) {
+      return;
+    }
+
+    const oldestTime = oldestCandle.time;
+    const endTime = oldestTime - 1; // Fetch candles ending just before the oldest
+
+    // Calculate dynamic limit based on duration and interval
+    const dynamicLimit = calculateCandleCount(duration, interval);
+
+    // Apply min/max safeguards
+    const FETCH_SIZE = {
+      MIN: 50, // Minimum for long intervals (1w, 1M)
+      MAX: 500, // Maximum to prevent huge fetches
+    };
+
+    const limit = Math.min(
+      Math.max(dynamicLimit, FETCH_SIZE.MIN),
+      FETCH_SIZE.MAX,
+    );
+
+    try {
+      DevLogger.log(
+        'CandleStreamChannel: Fetching additional historical candles',
+        { coin, interval, duration, oldestTime, endTime, dynamicLimit, limit },
+      );
+
+      // Fetch historical candles via controller
+      const newCandleData =
+        await Engine.context.PerpsController.fetchHistoricalCandles(
+          coin,
+          interval,
+          limit,
+          endTime,
+        );
+
+      if (!newCandleData || newCandleData.candles.length === 0) {
+        DevLogger.log(
+          'CandleStreamChannel: No additional historical candles available',
+          { coin, interval },
+        );
+        return;
+      }
+
+      // Merge new candles with existing (prepend older candles)
+      // Filter out duplicates based on timestamp
+      const existingTimes = new Set(cachedData.candles.map((c) => c.time));
+      const newUnique = newCandleData.candles.filter(
+        (c) => !existingTimes.has(c.time),
+      );
+
+      // Combine and sort by time ascending
+      const mergedCandles = [...newUnique, ...cachedData.candles].sort(
+        (a, b) => a.time - b.time,
+      );
+
+      // Limit to max 1000 candles to prevent memory issues
+      // Keep newest candles to preserve live updates
+      const MAX_CANDLES = 1000;
+      const finalCandles =
+        mergedCandles.length > MAX_CANDLES
+          ? mergedCandles.slice(-MAX_CANDLES)
+          : mergedCandles;
+
+      // Update cache with merged data
+      const updatedData: CandleData = {
+        coin: cachedData.coin,
+        interval: cachedData.interval,
+        candles: finalCandles,
+      };
+
+      this.cache.set(cacheKey, updatedData);
+
+      // Notify all subscribers of the updated data
+      this.notifySubscribers(cacheKey, updatedData);
+
+      DevLogger.log(
+        'CandleStreamChannel: Successfully fetched and merged historical candles',
+        {
+          coin,
+          interval,
+          newCandles: newUnique.length,
+          totalCandles: finalCandles.length,
+          oldestTime: finalCandles[0]?.time,
+          newestTime: finalCandles[finalCandles.length - 1]?.time,
+        },
+      );
+    } catch (error) {
+      const errorInstance = ensureError(error);
+
+      // Log to Sentry: fetch failures affect multiple subscribers
+      Logger.error(errorInstance, {
+        tags: {
+          feature: PERPS_CONSTANTS.FEATURE_NAME,
+          component: 'CandleStreamChannel',
+        },
+        context: {
+          name: 'historical_candles',
+          data: {
+            operation: 'fetchHistoricalCandles',
+            coin,
+            interval,
+            duration,
+            cacheKey,
+          },
+        },
+      });
+
+      throw error;
+    }
+  }
+
+  /**
+   * Disconnect all subscriptions
+   */
+  public disconnectAll(): void {
+    this.subscribers.forEach((subscriber) => {
+      if (subscriber.timer) {
+        clearTimeout(subscriber.timer);
+        subscriber.timer = undefined;
+      }
+      subscriber.pendingUpdate = undefined;
+    });
+
+    this.wsSubscriptions.forEach((unsubscribe) => {
+      unsubscribe();
+    });
+    this.wsSubscriptions.clear();
+  }
+}
diff --git a/app/components/UI/Perps/selectors/featureFlags/index.test.ts b/app/components/UI/Perps/selectors/featureFlags/index.test.ts
index 812e0312e59..7066e0c1813 100644
--- a/app/components/UI/Perps/selectors/featureFlags/index.test.ts
+++ b/app/components/UI/Perps/selectors/featureFlags/index.test.ts
@@ -1,6 +1,8 @@
 import {
   selectPerpsEnabledFlag,
   selectPerpsServiceInterruptionBannerEnabledFlag,
+  selectPerpsGtmOnboardingModalEnabledFlag,
+  selectPerpsButtonColorTestVariant,
   selectHip3ConfigVersion,
 } from '.';
 import mockedEngine from '../../../../../core/__mocks__/MockedEngine';
@@ -356,6 +358,415 @@ describe('Perps Feature Flag Selectors', () => {
     });
   });
 
+  describe('selectPerpsGtmOnboardingModalEnabledFlag', () => {
+    it('returns boolean feature flag', () => {
+      const stateWithEnabledFlag = {
+        engine: {
+          backgroundState: {
+            RemoteFeatureFlagController: {
+              remoteFeatureFlags: {
+                perpsPerpGtmOnboardingModalEnabled: {
+                  enabled: true,
+                  minimumVersion: '1.0.0',
+                },
+              },
+              cacheTimestamp: 0,
+            },
+          },
+        },
+      };
+
+      const result =
+        selectPerpsGtmOnboardingModalEnabledFlag(stateWithEnabledFlag);
+      expect(result).toBe(true);
+    });
+
+    describe('hybrid flag behavior', () => {
+      it('uses remote flag when valid and enabled', () => {
+        mockHasMinimumRequiredVersion.mockReturnValue(true);
+        process.env.MM_PERPS_GTM_MODAL_ENABLED = 'false';
+
+        const stateWithEnabledRemoteFlag = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsPerpGtmOnboardingModalEnabled: {
+                    enabled: true,
+                    minimumVersion: '1.0.0',
+                  },
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsGtmOnboardingModalEnabledFlag(
+          stateWithEnabledRemoteFlag,
+        );
+        expect(result).toBe(true);
+      });
+
+      it('uses remote flag when valid but disabled', () => {
+        mockHasMinimumRequiredVersion.mockReturnValue(true);
+        process.env.MM_PERPS_GTM_MODAL_ENABLED = 'true';
+
+        const stateWithDisabledRemoteFlag = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsPerpGtmOnboardingModalEnabled: {
+                    enabled: false,
+                    minimumVersion: '1.0.0',
+                  },
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsGtmOnboardingModalEnabledFlag(
+          stateWithDisabledRemoteFlag,
+        );
+        expect(result).toBe(false);
+      });
+
+      it('uses remote flag (false) when enabled but version check fails', () => {
+        mockHasMinimumRequiredVersion.mockReturnValue(false);
+        process.env.MM_PERPS_GTM_MODAL_ENABLED = 'true';
+
+        const stateWithVersionCheckFailure = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsPerpGtmOnboardingModalEnabled: {
+                    enabled: true,
+                    minimumVersion: '99.0.0',
+                  },
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsGtmOnboardingModalEnabledFlag(
+          stateWithVersionCheckFailure,
+        );
+        expect(result).toBe(false);
+      });
+
+      it('falls back to local flag (true) when remote flag is invalid', () => {
+        process.env.MM_PERPS_GTM_MODAL_ENABLED = 'true';
+
+        const stateWithInvalidRemoteFlag = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsPerpGtmOnboardingModalEnabled: {
+                    enabled: 'invalid',
+                    minimumVersion: 123,
+                  },
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsGtmOnboardingModalEnabledFlag(
+          stateWithInvalidRemoteFlag,
+        );
+        expect(result).toBe(true);
+      });
+
+      it('falls back to local flag (false) when remote flag is invalid', () => {
+        process.env.MM_PERPS_GTM_MODAL_ENABLED = 'false';
+
+        const stateWithInvalidRemoteFlag = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsPerpGtmOnboardingModalEnabled: null,
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsGtmOnboardingModalEnabledFlag(
+          stateWithInvalidRemoteFlag,
+        );
+        expect(result).toBe(false);
+      });
+
+      it('falls back to local flag when remote feature flags are empty', () => {
+        process.env.MM_PERPS_GTM_MODAL_ENABLED = 'true';
+
+        const result = selectPerpsGtmOnboardingModalEnabledFlag(
+          mockedEmptyFlagsState,
+        );
+        expect(result).toBe(true);
+      });
+
+      it('falls back to local flag when RemoteFeatureFlagController is undefined', () => {
+        process.env.MM_PERPS_GTM_MODAL_ENABLED = 'false';
+
+        const stateWithUndefinedController = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: undefined,
+            },
+          },
+        };
+
+        const result = selectPerpsGtmOnboardingModalEnabledFlag(
+          stateWithUndefinedController,
+        );
+        expect(result).toBe(false);
+      });
+    });
+  });
+
+  describe('selectPerpsButtonColorTestVariant', () => {
+    it('returns null when remote flag is undefined', () => {
+      const stateWithUndefinedFlag = {
+        engine: {
+          backgroundState: {
+            RemoteFeatureFlagController: {
+              remoteFeatureFlags: {},
+              cacheTimestamp: 0,
+            },
+          },
+        },
+      };
+
+      const result = selectPerpsButtonColorTestVariant(stateWithUndefinedFlag);
+      expect(result).toBeNull();
+    });
+
+    it('returns null when remote flag is null', () => {
+      const stateWithNullFlag = {
+        engine: {
+          backgroundState: {
+            RemoteFeatureFlagController: {
+              remoteFeatureFlags: {
+                perpsAbtestButtonColor: null,
+              },
+              cacheTimestamp: 0,
+            },
+          },
+        },
+      };
+
+      const result = selectPerpsButtonColorTestVariant(stateWithNullFlag);
+      expect(result).toBeNull();
+    });
+
+    describe('direct string variant scenarios', () => {
+      it('returns variant string when remote flag is control', () => {
+        const stateWithControlVariant = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsAbtestButtonColor: 'control',
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsButtonColorTestVariant(
+          stateWithControlVariant,
+        );
+        expect(result).toBe('control');
+      });
+
+      it('returns variant string when remote flag is monochrome', () => {
+        const stateWithMonochromeVariant = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsAbtestButtonColor: 'monochrome',
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsButtonColorTestVariant(
+          stateWithMonochromeVariant,
+        );
+        expect(result).toBe('monochrome');
+      });
+    });
+
+    describe('version-gated flag scenarios', () => {
+      it('returns variant from version-gated object when valid', () => {
+        mockHasMinimumRequiredVersion.mockReturnValue(true);
+
+        const stateWithVersionGatedVariant = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsAbtestButtonColor: {
+                    enabled: true,
+                    minimumVersion: '1.0.0',
+                    variant: 'control',
+                  },
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsButtonColorTestVariant(
+          stateWithVersionGatedVariant,
+        );
+        expect(result).toBe('control');
+      });
+
+      it('returns null when version-gated object has no variant', () => {
+        mockHasMinimumRequiredVersion.mockReturnValue(true);
+
+        const stateWithNoVariant = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsAbtestButtonColor: {
+                    enabled: true,
+                    minimumVersion: '1.0.0',
+                  },
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsButtonColorTestVariant(stateWithNoVariant);
+        expect(result).toBeNull();
+      });
+
+      it('returns null when version-gated flag disabled', () => {
+        mockHasMinimumRequiredVersion.mockReturnValue(true);
+
+        const stateWithDisabledFlag = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsAbtestButtonColor: {
+                    enabled: false,
+                    minimumVersion: '1.0.0',
+                    variant: 'control',
+                  },
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsButtonColorTestVariant(stateWithDisabledFlag);
+        expect(result).toBeNull();
+      });
+
+      it('returns null when version-gated but version check fails', () => {
+        mockHasMinimumRequiredVersion.mockReturnValue(false);
+
+        const stateWithVersionCheckFailure = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsAbtestButtonColor: {
+                    enabled: true,
+                    minimumVersion: '99.0.0',
+                    variant: 'control',
+                  },
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsButtonColorTestVariant(
+          stateWithVersionCheckFailure,
+        );
+        expect(result).toBeNull();
+      });
+    });
+
+    describe('edge cases', () => {
+      it('returns null when remote flag is invalid type (number)', () => {
+        const stateWithNumberFlag = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsAbtestButtonColor: 123,
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsButtonColorTestVariant(stateWithNumberFlag);
+        expect(result).toBeNull();
+      });
+
+      it('returns null when remote flag is invalid type (boolean)', () => {
+        const stateWithBooleanFlag = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: {
+                remoteFeatureFlags: {
+                  perpsAbtestButtonColor: true,
+                },
+                cacheTimestamp: 0,
+              },
+            },
+          },
+        };
+
+        const result = selectPerpsButtonColorTestVariant(stateWithBooleanFlag);
+        expect(result).toBeNull();
+      });
+
+      it('returns null when RemoteFeatureFlagController is undefined', () => {
+        const stateWithUndefinedController = {
+          engine: {
+            backgroundState: {
+              RemoteFeatureFlagController: undefined,
+            },
+          },
+        };
+
+        const result = selectPerpsButtonColorTestVariant(
+          stateWithUndefinedController,
+        );
+        expect(result).toBeNull();
+      });
+    });
+  });
+
   describe('perpsRemoteFeatureFlag', () => {
     const validRemoteFlag: VersionGatedFeatureFlag = {
       enabled: true,
diff --git a/app/components/UI/Perps/selectors/featureFlags/index.ts b/app/components/UI/Perps/selectors/featureFlags/index.ts
index 4a6d8d0aa04..e497456d5f7 100644
--- a/app/components/UI/Perps/selectors/featureFlags/index.ts
+++ b/app/components/UI/Perps/selectors/featureFlags/index.ts
@@ -3,8 +3,19 @@ import { selectRemoteFeatureFlags } from '../../../../../selectors/featureFlagCo
 import {
   VersionGatedFeatureFlag,
   validatedVersionGatedFeatureFlag,
+  isVersionGatedFeatureFlag,
 } from '../../../../../util/remoteFeatureFlag';
 import type { RootState } from '../../../../../reducers';
+import type { ButtonColorVariantName } from '../../utils/abTesting/types';
+
+/**
+ * Valid variants for button color A/B test (TAT-1937)
+ * Used for runtime validation of LaunchDarkly responses
+ */
+const VALID_BUTTON_COLOR_VARIANTS: readonly ButtonColorVariantName[] = [
+  'control',
+  'monochrome',
+];
 
 export const selectPerpsEnabledFlag = createSelector(
   selectRemoteFeatureFlags,
@@ -43,6 +54,67 @@ export const selectPerpsGtmOnboardingModalEnabledFlag = createSelector(
   },
 );
 
+/**
+ * Selector for button color A/B test variant from LaunchDarkly
+ * TAT-1937: Tests impact of button colors (green/red vs white/white) on trading behavior
+ *
+ * @returns Variant name ('control' | 'monochrome') or null if test is disabled
+ */
+export const selectPerpsButtonColorTestVariant = createSelector(
+  selectRemoteFeatureFlags,
+  (remoteFeatureFlags): string | null => {
+    const remoteFlag = remoteFeatureFlags?.perpsAbtestButtonColor;
+
+    // LaunchDarkly can return:
+    // 1. A string variant name: 'control' or 'monochrome'
+    // 2. A version-gated object: { enabled: true, minAppVersion: '7.60.0', variant: 'control' }
+    // 3. null/undefined if test is disabled
+
+    if (!remoteFlag) {
+      return null;
+    }
+
+    // Direct string variant (simpler LaunchDarkly config)
+    if (typeof remoteFlag === 'string') {
+      // Validate variant is a known value
+      if (
+        VALID_BUTTON_COLOR_VARIANTS.includes(
+          remoteFlag as ButtonColorVariantName,
+        )
+      ) {
+        return remoteFlag; // Already a string, validated against known variants
+      }
+      return null;
+    }
+
+    // Check if it's a version-gated flag with variant
+    if (isVersionGatedFeatureFlag(remoteFlag)) {
+      // Validate version gating (enabled and version check)
+      const isValid = validatedVersionGatedFeatureFlag(remoteFlag);
+
+      if (!isValid) {
+        return null;
+      }
+
+      // Safely access variant property if it exists
+      if ('variant' in remoteFlag && typeof remoteFlag.variant === 'string') {
+        // Validate variant is a known value
+        if (
+          VALID_BUTTON_COLOR_VARIANTS.includes(
+            remoteFlag.variant as ButtonColorVariantName,
+          )
+        ) {
+          return remoteFlag.variant; // Already a string, validated against known variants
+        }
+      }
+
+      return null;
+    }
+
+    return null;
+  },
+);
+
 /**
  * Selector for HIP-3 configuration version
  * Used by ConnectionManager to detect when HIP-3 config changes and trigger reconnection
diff --git a/app/components/UI/Perps/services/HyperLiquidClientService.test.ts b/app/components/UI/Perps/services/HyperLiquidClientService.test.ts
index bc2f43bef0b..27b3351b8f2 100644
--- a/app/components/UI/Perps/services/HyperLiquidClientService.test.ts
+++ b/app/components/UI/Perps/services/HyperLiquidClientService.test.ts
@@ -599,4 +599,501 @@ describe('HyperLiquidClientService', () => {
       ).rejects.toThrow('HyperLiquid SDK clients not properly initialized');
     });
   });
+
+  describe('subscribeToCandles', () => {
+    beforeEach(() => {
+      service.initialize(mockWallet);
+      jest.clearAllMocks();
+    });
+
+    it('should throw error when service not initialized', () => {
+      // Arrange
+      const uninitializedService = new HyperLiquidClientService();
+
+      // Act & Assert
+      expect(() =>
+        uninitializedService.subscribeToCandles({
+          coin: 'BTC',
+          interval: '1h' as ValidCandleInterval,
+          callback: jest.fn(),
+        }),
+      ).toThrow('HyperLiquid SDK clients not properly initialized');
+    });
+
+    it('throws error when subscription client unavailable', () => {
+      // Arrange
+      const serviceWithNoSubClient = new HyperLiquidClientService();
+      serviceWithNoSubClient.initialize(mockWallet);
+      // Force subscription client to be undefined
+      (serviceWithNoSubClient as any).subscriptionClient = undefined;
+
+      // Act & Assert
+      expect(() =>
+        serviceWithNoSubClient.subscribeToCandles({
+          coin: 'BTC',
+          interval: '1h' as ValidCandleInterval,
+          callback: jest.fn(),
+        }),
+      ).toThrow('HyperLiquid SDK clients not properly initialized');
+    });
+
+    it('should fetch historical data and setup WebSocket subscription', async () => {
+      // Arrange
+      const mockHistoricalData = [
+        {
+          t: 1700000000000,
+          o: 50000,
+          h: 51000,
+          l: 49000,
+          c: 50500,
+          v: 100,
+        },
+        {
+          t: 1700003600000,
+          o: 50500,
+          h: 52000,
+          l: 50000,
+          c: 51500,
+          v: 120,
+        },
+      ];
+
+      mockInfoClient.candleSnapshot = jest
+        .fn()
+        .mockResolvedValue(mockHistoricalData);
+
+      const mockUnsubscribe = jest.fn();
+      const mockCandleSubscription = Promise.resolve({
+        unsubscribe: mockUnsubscribe,
+      });
+      (mockSubscriptionClient as any).candle = jest
+        .fn()
+        .mockReturnValue(mockCandleSubscription);
+
+      const callback = jest.fn();
+
+      // Act
+      const unsubscribe = service.subscribeToCandles({
+        coin: 'BTC',
+        interval: '1h' as ValidCandleInterval,
+        callback,
+      });
+
+      // Wait for async operations
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Assert - should have fetched historical data
+      expect(mockInfoClient.candleSnapshot).toHaveBeenCalledWith(
+        expect.objectContaining({
+          coin: 'BTC',
+          interval: '1h',
+        }),
+      );
+
+      // Assert - callback invoked with historical data
+      expect(callback).toHaveBeenCalledWith(
+        expect.objectContaining({
+          coin: 'BTC',
+          interval: '1h',
+          candles: expect.arrayContaining([
+            expect.objectContaining({
+              time: 1700000000000,
+              open: '50000',
+              high: '51000',
+              low: '49000',
+              close: '50500',
+              volume: '100',
+            }),
+          ]),
+        }),
+      );
+
+      // Assert - WebSocket subscription created
+      expect((mockSubscriptionClient as any).candle).toHaveBeenCalled();
+
+      // Assert - unsubscribe function returned
+      expect(typeof unsubscribe).toBe('function');
+    });
+
+    it('should transform historical candle data correctly', async () => {
+      // Arrange
+      const mockHistoricalData = [
+        {
+          t: 1700000000000,
+          o: 50000.5,
+          h: 51000.75,
+          l: 49000.25,
+          c: 50500.5,
+          v: 100.123,
+        },
+      ];
+
+      mockInfoClient.candleSnapshot = jest
+        .fn()
+        .mockResolvedValue(mockHistoricalData);
+
+      (mockSubscriptionClient as any).candle = jest
+        .fn()
+        .mockResolvedValue({ unsubscribe: jest.fn() });
+
+      const callback = jest.fn();
+
+      // Act
+      service.subscribeToCandles({
+        coin: 'BTC',
+        interval: '1h' as ValidCandleInterval,
+        callback,
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Assert - numbers converted to strings
+      expect(callback).toHaveBeenCalledWith(
+        expect.objectContaining({
+          candles: [
+            {
+              time: 1700000000000,
+              open: '50000.5',
+              high: '51000.75',
+              low: '49000.25',
+              close: '50500.5',
+              volume: '100.123',
+            },
+          ],
+        }),
+      );
+    });
+
+    it('should handle WebSocket updates for existing candle', async () => {
+      // Arrange
+      const mockHistoricalData = [
+        {
+          t: 1700000000000,
+          o: 50000,
+          h: 51000,
+          l: 49000,
+          c: 50500,
+          v: 100,
+        },
+      ];
+
+      mockInfoClient.candleSnapshot = jest
+        .fn()
+        .mockResolvedValue(mockHistoricalData);
+
+      let wsCallback: any;
+      (mockSubscriptionClient as any).candle = jest
+        .fn()
+        .mockImplementation((_params, callback) => {
+          wsCallback = callback;
+          return Promise.resolve({ unsubscribe: jest.fn() });
+        });
+
+      const callback = jest.fn();
+
+      // Act
+      service.subscribeToCandles({
+        coin: 'BTC',
+        interval: '1h' as ValidCandleInterval,
+        callback,
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Clear previous callback invocations
+      callback.mockClear();
+
+      // Simulate WebSocket update for existing candle (same timestamp)
+      const updatedCandle = {
+        t: 1700000000000, // Same timestamp
+        o: 50000,
+        h: 51500, // Updated high
+        l: 49000,
+        c: 51000, // Updated close
+        v: 150, // Updated volume
+      };
+
+      wsCallback(updatedCandle);
+
+      // Assert - callback invoked with updated candle
+      expect(callback).toHaveBeenCalledWith(
+        expect.objectContaining({
+          candles: [
+            {
+              time: 1700000000000,
+              open: '50000',
+              high: '51500',
+              low: '49000',
+              close: '51000',
+              volume: '150',
+            },
+          ],
+        }),
+      );
+    });
+
+    it('should handle WebSocket updates for new candle', async () => {
+      // Arrange
+      const mockHistoricalData = [
+        {
+          t: 1700000000000,
+          o: 50000,
+          h: 51000,
+          l: 49000,
+          c: 50500,
+          v: 100,
+        },
+      ];
+
+      mockInfoClient.candleSnapshot = jest
+        .fn()
+        .mockResolvedValue(mockHistoricalData);
+
+      let wsCallback: any;
+      (mockSubscriptionClient as any).candle = jest
+        .fn()
+        .mockImplementation((_params, callback) => {
+          wsCallback = callback;
+          return Promise.resolve({ unsubscribe: jest.fn() });
+        });
+
+      const callback = jest.fn();
+
+      // Act
+      service.subscribeToCandles({
+        coin: 'BTC',
+        interval: '1h' as ValidCandleInterval,
+        callback,
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Clear previous callback invocations
+      callback.mockClear();
+
+      // Simulate WebSocket update for new candle (different timestamp)
+      const newCandle = {
+        t: 1700003600000, // Different timestamp
+        o: 50500,
+        h: 52000,
+        l: 50000,
+        c: 51500,
+        v: 120,
+      };
+
+      wsCallback(newCandle);
+
+      // Assert - callback invoked with appended candle
+      expect(callback).toHaveBeenCalledWith(
+        expect.objectContaining({
+          candles: [
+            {
+              time: 1700000000000,
+              open: '50000',
+              high: '51000',
+              low: '49000',
+              close: '50500',
+              volume: '100',
+            },
+            {
+              time: 1700003600000,
+              open: '50500',
+              high: '52000',
+              low: '50000',
+              close: '51500',
+              volume: '120',
+            },
+          ],
+        }),
+      );
+    });
+
+    it('should create immutable candles array for React re-renders', async () => {
+      // Arrange
+      const mockHistoricalData = [
+        {
+          t: 1700000000000,
+          o: 50000,
+          h: 51000,
+          l: 49000,
+          c: 50500,
+          v: 100,
+        },
+      ];
+
+      mockInfoClient.candleSnapshot = jest
+        .fn()
+        .mockResolvedValue(mockHistoricalData);
+
+      let wsCallback: any;
+      (mockSubscriptionClient as any).candle = jest
+        .fn()
+        .mockImplementation((_params, callback) => {
+          wsCallback = callback;
+          return Promise.resolve({ unsubscribe: jest.fn() });
+        });
+
+      const callback = jest.fn();
+
+      // Act
+      service.subscribeToCandles({
+        coin: 'BTC',
+        interval: '1h' as ValidCandleInterval,
+        callback,
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      const firstCallCandles = callback.mock.calls[0][0].candles;
+
+      // Simulate WebSocket update
+      wsCallback({
+        t: 1700000000000,
+        o: 50000,
+        h: 51500,
+        l: 49000,
+        c: 51000,
+        v: 150,
+      });
+
+      const secondCallCandles = callback.mock.calls[1][0].candles;
+
+      // Assert - different array references (immutable)
+      expect(firstCallCandles).not.toBe(secondCallCandles);
+    });
+
+    it('should handle empty historical data', async () => {
+      // Arrange
+      mockInfoClient.candleSnapshot = jest.fn().mockResolvedValue([]);
+
+      (mockSubscriptionClient as any).candle = jest
+        .fn()
+        .mockResolvedValue({ unsubscribe: jest.fn() });
+
+      const callback = jest.fn();
+
+      // Act
+      service.subscribeToCandles({
+        coin: 'BTC',
+        interval: '1h' as ValidCandleInterval,
+        callback,
+      });
+
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Assert - callback invoked with empty candles
+      expect(callback).toHaveBeenCalledWith({
+        coin: 'BTC',
+        interval: '1h',
+        candles: [],
+      });
+    });
+
+    it('should invoke unsubscribe when cleanup function called', async () => {
+      // Arrange
+      mockInfoClient.candleSnapshot = jest.fn().mockResolvedValue([]);
+
+      const mockWsUnsubscribe = jest.fn();
+      (mockSubscriptionClient as any).candle = jest
+        .fn()
+        .mockResolvedValue({ unsubscribe: mockWsUnsubscribe });
+
+      const callback = jest.fn();
+
+      // Act
+      const unsubscribe = service.subscribeToCandles({
+        coin: 'BTC',
+        interval: '1h' as ValidCandleInterval,
+        callback,
+      });
+
+      // Wait for subscription to complete
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Call unsubscribe
+      unsubscribe();
+
+      // Assert - WebSocket unsubscribe called
+      expect(mockWsUnsubscribe).toHaveBeenCalled();
+    });
+
+    it('should handle unsubscribe before WebSocket established', async () => {
+      // Arrange - delay the promise resolution to simulate slow network
+      let resolveSnapshot: (value: any) => void = () => {
+        /* noop */
+      };
+      const delayedPromise = new Promise((resolve) => {
+        resolveSnapshot = resolve;
+      });
+
+      mockInfoClient.candleSnapshot = jest.fn().mockReturnValue(delayedPromise);
+
+      const mockCandleSubscription = jest.fn();
+      (mockSubscriptionClient as any).candle = mockCandleSubscription;
+
+      const callback = jest.fn();
+
+      // Act - subscribe and immediately unsubscribe
+      const unsubscribe = service.subscribeToCandles({
+        coin: 'BTC',
+        interval: '1h' as ValidCandleInterval,
+        callback,
+      });
+
+      // Call unsubscribe immediately before WebSocket establishes
+      expect(() => unsubscribe()).not.toThrow();
+
+      // Now resolve the snapshot to let the async chain continue
+      resolveSnapshot([]);
+
+      // Wait for async operations to complete
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Assert - WebSocket subscription should not be created because
+      // we already unsubscribed before the async chain completed
+      expect(mockCandleSubscription).not.toHaveBeenCalled();
+      expect(callback).not.toHaveBeenCalled(); // Callback should not be invoked after unsubscribe
+    });
+
+    it('should cleanup WebSocket when unsubscribed during subscription establishment', async () => {
+      // Arrange - fast snapshot, slow WebSocket subscription
+      mockInfoClient.candleSnapshot = jest.fn().mockResolvedValue([]);
+
+      let resolveWsSubscription: (value: any) => void = () => {
+        /* noop */
+      };
+      const delayedWsPromise = new Promise((resolve) => {
+        resolveWsSubscription = resolve;
+      });
+
+      const mockWsUnsubscribe = jest.fn();
+      (mockSubscriptionClient as any).candle = jest
+        .fn()
+        .mockReturnValue(delayedWsPromise);
+
+      const callback = jest.fn();
+
+      // Act - subscribe
+      const unsubscribe = service.subscribeToCandles({
+        coin: 'BTC',
+        interval: '1h' as ValidCandleInterval,
+        callback,
+      });
+
+      // Wait for snapshot to complete
+      await new Promise((resolve) => setTimeout(resolve, 50));
+
+      // Unsubscribe while WebSocket is still being established
+      unsubscribe();
+
+      // Now resolve the WebSocket subscription
+      resolveWsSubscription({ unsubscribe: mockWsUnsubscribe });
+
+      // Wait for async cleanup to complete
+      await new Promise((resolve) => setTimeout(resolve, 100));
+
+      // Assert - WebSocket should be cleaned up immediately after establishing
+      expect(mockWsUnsubscribe).toHaveBeenCalled();
+    });
+  });
 });
diff --git a/app/components/UI/Perps/services/HyperLiquidClientService.ts b/app/components/UI/Perps/services/HyperLiquidClientService.ts
index cca32dcdaab..ce50b57ad52 100644
--- a/app/components/UI/Perps/services/HyperLiquidClientService.ts
+++ b/app/components/UI/Perps/services/HyperLiquidClientService.ts
@@ -11,8 +11,10 @@ import type { HyperLiquidNetwork } from '../types/config';
 import { strings } from '../../../../../locales/i18n';
 import type { CandleData } from '../types/perps-types';
 
-import { CandlePeriod } from '../constants/chartConfig';
+import { CandlePeriod, calculateCandleCount } from '../constants/chartConfig';
+import { PERPS_CONSTANTS } from '../constants/perpsConfig';
 import { ensureError } from '../utils/perpsErrorHandler';
+import type { SubscribeCandlesParams } from '../controllers/types';
 import Logger from '../../../../util/Logger';
 import { Hex } from '@metamask/utils';
 
@@ -103,8 +105,25 @@ export class HyperLiquidClientService {
         note: 'Using HTTP for InfoClient/ExchangeClient, WebSocket for SubscriptionClient',
       });
     } catch (error) {
+      const errorInstance = ensureError(error);
       this.connectionState = WebSocketConnectionState.DISCONNECTED;
-      DevLogger.log('Failed to initialize HyperLiquid SDK clients:', error);
+
+      // Log to Sentry: initialization failure blocks all Perps functionality
+      Logger.error(errorInstance, {
+        tags: {
+          feature: PERPS_CONSTANTS.FEATURE_NAME,
+          service: 'HyperLiquidClientService',
+          network: this.isTestnet ? 'testnet' : 'mainnet',
+        },
+        context: {
+          name: 'sdk_initialization',
+          data: {
+            operation: 'initialize',
+            isTestnet: this.isTestnet,
+          },
+        },
+      });
+
       throw error;
     }
   }
@@ -274,18 +293,20 @@ export class HyperLiquidClientService {
    * @param coin - The coin symbol (e.g., "BTC", "ETH")
    * @param interval - The interval (e.g., "1m", "5m", "15m", "30m", "1h", "2h", "4h", "8h", "12h", "1d", "3d", "1w", "1M")
    * @param limit - Number of candles to fetch (default: 100)
+   * @param endTime - End timestamp in milliseconds (default: now). Used for fetching historical data before a specific time.
    * @returns Promise<CandleData | null>
    */
   public async fetchHistoricalCandles(
     coin: string,
     interval: ValidCandleInterval,
     limit: number = 100,
+    endTime?: number,
   ): Promise<CandleData | null> {
     this.ensureInitialized();
 
     try {
       // Calculate start and end times based on interval and limit
-      const now = Date.now();
+      const now = endTime ?? Date.now();
       const intervalMs = this.getIntervalMilliseconds(interval);
       const startTime = now - limit * intervalMs;
 
@@ -322,11 +343,199 @@ export class HyperLiquidClientService {
         candles: [],
       };
     } catch (error) {
-      DevLogger.log('Error fetching historical candles:', error);
+      const errorInstance = ensureError(error);
+
+      // Log to Sentry: prevents initial chart data load
+      Logger.error(errorInstance, {
+        tags: {
+          feature: PERPS_CONSTANTS.FEATURE_NAME,
+          service: 'HyperLiquidClientService',
+          network: this.isTestnet ? 'testnet' : 'mainnet',
+        },
+        context: {
+          name: 'historical_candles_api',
+          data: {
+            operation: 'fetchHistoricalCandles',
+            coin,
+            interval,
+            limit,
+            hasEndTime: endTime !== undefined,
+          },
+        },
+      });
+
       throw error;
     }
   }
 
+  /**
+   * Subscribe to candle updates via WebSocket
+   * @param coin - The coin symbol (e.g., "BTC", "ETH")
+   * @param interval - The interval (e.g., "1m", "5m", "15m", etc.)
+   * @param duration - Optional time duration for calculating initial fetch size
+   * @param callback - Function called with updated candle data
+   * @param onError - Optional function called if subscription initialization fails
+   * @returns Cleanup function to unsubscribe
+   */
+  public subscribeToCandles({
+    coin,
+    interval,
+    duration,
+    callback,
+    onError,
+  }: SubscribeCandlesParams): () => void {
+    this.ensureInitialized();
+
+    const subscriptionClient = this.getSubscriptionClient();
+    if (!subscriptionClient) {
+      throw new Error(strings('perps.errors.subscriptionClientNotAvailable'));
+    }
+
+    let currentCandleData: CandleData | null = null;
+    let wsUnsubscribe: (() => void) | null = null;
+    let isUnsubscribed = false;
+
+    // Calculate initial fetch size dynamically based on duration and interval
+    // Match main branch behavior: up to 500 candles initially
+    const initialLimit = duration
+      ? Math.min(calculateCandleCount(duration, interval), 500)
+      : 100; // Default to 100 if no duration provided
+
+    // 1. Fetch initial historical data
+    this.fetchHistoricalCandles(coin, interval, initialLimit)
+      .then((initialData) => {
+        // Don't proceed if already unsubscribed
+        if (isUnsubscribed) {
+          return;
+        }
+
+        currentCandleData = initialData;
+        if (currentCandleData) {
+          callback(currentCandleData);
+        }
+
+        // 2. Subscribe to WebSocket for new candles
+        const subscription = subscriptionClient.candle(
+          { coin, interval },
+          (candleEvent) => {
+            // Don't process events if already unsubscribed
+            if (isUnsubscribed) {
+              return;
+            }
+
+            // Transform SDK CandleEvent to our Candle format
+            const newCandle = {
+              time: candleEvent.t,
+              open: candleEvent.o.toString(),
+              high: candleEvent.h.toString(),
+              low: candleEvent.l.toString(),
+              close: candleEvent.c.toString(),
+              volume: candleEvent.v.toString(),
+            };
+
+            if (!currentCandleData) {
+              currentCandleData = {
+                coin,
+                interval,
+                candles: [newCandle],
+              };
+            } else {
+              // Check if this is an update to the last candle or a new candle
+              const candles = currentCandleData.candles;
+              const lastCandle = candles[candles.length - 1];
+
+              if (lastCandle && lastCandle.time === newCandle.time) {
+                // Update existing candle (live candle update)
+                // Create new array with updated last element to trigger React re-render
+                currentCandleData = {
+                  ...currentCandleData,
+                  candles: [...candles.slice(0, -1), newCandle],
+                };
+              } else {
+                // New candle (completed candle)
+                // Create new array with added element to trigger React re-render
+                currentCandleData = {
+                  ...currentCandleData,
+                  candles: [...candles, newCandle],
+                };
+              }
+            }
+
+            callback(currentCandleData);
+          },
+        );
+
+        // Store cleanup function
+        subscription
+          .then((sub) => {
+            wsUnsubscribe = () => sub.unsubscribe();
+            // If already unsubscribed while waiting, clean up immediately
+            if (isUnsubscribed && wsUnsubscribe) {
+              wsUnsubscribe();
+              wsUnsubscribe = null;
+            }
+          })
+          .catch((error) => {
+            const errorInstance = ensureError(error);
+
+            // Log to Sentry: WebSocket subscription failure prevents live updates
+            Logger.error(errorInstance, {
+              tags: {
+                feature: PERPS_CONSTANTS.FEATURE_NAME,
+                service: 'HyperLiquidClientService',
+                network: this.isTestnet ? 'testnet' : 'mainnet',
+              },
+              context: {
+                name: 'websocket_subscription',
+                data: {
+                  operation: 'subscribeToCandles',
+                  coin,
+                  interval,
+                  phase: 'ws_subscription',
+                },
+              },
+            });
+
+            // Notify caller of error
+            onError?.(errorInstance);
+          });
+      })
+      .catch((error) => {
+        const errorInstance = ensureError(error);
+
+        // Log to Sentry: initial fetch failure blocks chart completely
+        Logger.error(errorInstance, {
+          tags: {
+            feature: PERPS_CONSTANTS.FEATURE_NAME,
+            service: 'HyperLiquidClientService',
+            network: this.isTestnet ? 'testnet' : 'mainnet',
+          },
+          context: {
+            name: 'initial_candles_fetch',
+            data: {
+              operation: 'subscribeToCandles',
+              coin,
+              interval,
+              phase: 'initial_fetch',
+              initialLimit,
+            },
+          },
+        });
+
+        // Notify caller of error
+        onError?.(errorInstance);
+      });
+
+    // Return cleanup function
+    return () => {
+      isUnsubscribed = true;
+      if (wsUnsubscribe) {
+        wsUnsubscribe();
+        wsUnsubscribe = null;
+      }
+    };
+  }
+
   /**
    * Convert interval string to milliseconds
    */
diff --git a/app/components/UI/Perps/services/HyperLiquidSubscriptionService.ts b/app/components/UI/Perps/services/HyperLiquidSubscriptionService.ts
index cd19e2f2b7c..730d707151b 100644
--- a/app/components/UI/Perps/services/HyperLiquidSubscriptionService.ts
+++ b/app/components/UI/Perps/services/HyperLiquidSubscriptionService.ts
@@ -31,6 +31,7 @@ import {
   adaptAccountStateFromSDK,
   parseAssetName,
 } from '../utils/hyperLiquidAdapter';
+import { calculateWeightedReturnOnEquity } from '../utils/accountUtils';
 import type { HyperLiquidClientService } from './HyperLiquidClientService';
 import type { HyperLiquidWalletService } from './HyperLiquidWalletService';
 import type { CaipAccountId } from '@metamask/utils';
@@ -476,6 +477,12 @@ export class HyperLiquidSubscriptionService {
     let totalMarginUsed = 0;
     let totalUnrealizedPnl = 0;
 
+    // Collect account states for weighted ROE calculation
+    const accountStatesForROE: {
+      unrealizedPnl: string;
+      returnOnEquity: string;
+    }[] = [];
+
     // Aggregate all cached account states
     Array.from(this.dexAccountCache.entries()).forEach(
       ([currentDex, state]) => {
@@ -488,6 +495,12 @@ export class HyperLiquidSubscriptionService {
         totalBalance += parseFloat(state.totalBalance);
         totalMarginUsed += parseFloat(state.marginUsed);
         totalUnrealizedPnl += parseFloat(state.unrealizedPnl);
+
+        // Collect data for weighted ROE calculation
+        accountStatesForROE.push({
+          unrealizedPnl: state.unrealizedPnl,
+          returnOnEquity: state.returnOnEquity,
+        });
       },
     );
 
@@ -495,13 +508,8 @@ export class HyperLiquidSubscriptionService {
     const firstDexAccount =
       this.dexAccountCache.values().next().value || ({} as AccountState);
 
-    // Calculate returnOnEquity across all DEXs (same formula as HyperLiquidProvider.getAccountState)
-    let returnOnEquity = '0';
-    if (totalMarginUsed > 0) {
-      returnOnEquity = ((totalUnrealizedPnl / totalMarginUsed) * 100).toFixed(
-        1,
-      );
-    }
+    // Calculate weighted returnOnEquity across all DEXs
+    const returnOnEquity = calculateWeightedReturnOnEquity(accountStatesForROE);
 
     return {
       ...firstDexAccount,
diff --git a/app/components/UI/Perps/utils/abTesting/tests.ts b/app/components/UI/Perps/utils/abTesting/tests.ts
new file mode 100644
index 00000000000..711a936bb57
--- /dev/null
+++ b/app/components/UI/Perps/utils/abTesting/tests.ts
@@ -0,0 +1,68 @@
+/**
+ * A/B Test configurations for Perps
+ *
+ * This module contains all active A/B test configurations.
+ * Each test should have a corresponding LaunchDarkly feature flag.
+ *
+ * IMPORTANT: LaunchDarkly handles user identification, variant assignment,
+ * and distribution. Weights here are informational only and for mapping
+ * variant names to their data (colors, text, etc.).
+ */
+
+import type { ABTestConfig, ButtonColorTestVariants } from './types';
+
+/**
+ * TAT-1937: Long/Short Button Color Test
+ *
+ * Tests the impact of button colors on trading behavior:
+ * - Control: Traditional green (long) / red (short) - familiar and intuitive
+ * - Monochrome: White buttons for both - reduces risk anxiety, promotes balanced participation
+ *
+ * Metrics tracked:
+ * - Trade initiation rate (asset screen → trade screen)
+ * - Trade execution rate (trade screen → confirmed trade)
+ * - Misclick rate (cancelled trades within 10s)
+ * - Time to execution
+ *
+ * Feature flag: perpsAbtestButtonColor
+ * Duration: 2-4 weeks
+ * Distribution: 50/50 (controlled by LaunchDarkly)
+ *
+ * LaunchDarkly returns: 'control' | 'monochrome'
+ */
+export const BUTTON_COLOR_TEST: ABTestConfig<ButtonColorTestVariants> = {
+  testId: 'button_color_test',
+  featureFlagKey: 'perpsAbtestButtonColor',
+  description:
+    'Tests impact of button colors (green/red vs white/white) on trading behavior',
+  minVersion: '7.60.0',
+  variants: {
+    control: {
+      weight: 50,
+      data: {
+        long: 'green',
+        short: 'red',
+      },
+    },
+    monochrome: {
+      weight: 50,
+      data: {
+        long: 'white',
+        short: 'white',
+      },
+    },
+  },
+};
+
+/**
+ * Export all active tests
+ * Makes it easy to iterate over all tests for debugging or analytics
+ */
+export const ALL_PERPS_AB_TESTS = {
+  BUTTON_COLOR_TEST,
+} as const;
+
+/**
+ * Type helper to get test IDs
+ */
+export type PerpsABTestId = keyof typeof ALL_PERPS_AB_TESTS;
diff --git a/app/components/UI/Perps/utils/abTesting/types.ts b/app/components/UI/Perps/utils/abTesting/types.ts
new file mode 100644
index 00000000000..777066158c9
--- /dev/null
+++ b/app/components/UI/Perps/utils/abTesting/types.ts
@@ -0,0 +1,69 @@
+/**
+ * Core types for A/B testing in Perps
+ *
+ * Simplified for LaunchDarkly integration - LaunchDarkly handles user identification,
+ * variant assignment, and persistence. We only read the variant and apply it.
+ */
+
+/**
+ * Button color configuration for the button color test
+ */
+export interface ButtonColorVariant {
+  long: 'green' | 'white' | 'blue';
+  short: 'red' | 'white' | 'orange';
+}
+
+/**
+ * Represents a single variant in an A/B test
+ * @template T - The type of data associated with this variant
+ */
+export interface ABTestVariant<T = unknown> {
+  /** Weight for this variant (informational only - LaunchDarkly controls distribution) */
+  weight: number;
+  /** Variant-specific data (e.g., colors, text, layouts) */
+  data: T;
+}
+
+/**
+ * Configuration for a complete A/B test
+ * @template V - The shape of variants object (e.g., { control: {...}, treatment: {...} })
+ */
+export interface ABTestConfig<V extends Record<string, ABTestVariant>> {
+  /** Unique identifier for this test */
+  testId: string;
+  /** Feature flag key to read variant from LaunchDarkly */
+  featureFlagKey: string;
+  /** Map of variant names to their configurations */
+  variants: V;
+  /** Optional description of the test */
+  description?: string;
+  /** Optional minimum app version required */
+  minVersion?: string;
+}
+
+/**
+ * Return value from the usePerpsABTest hook
+ * @template T - The type of data in the variant
+ */
+export interface UsePerpsABTestResult<T = unknown> {
+  /** The assigned variant data */
+  variant: T;
+  /** Name of the assigned variant */
+  variantName: string;
+  /** Whether the test is enabled */
+  isEnabled: boolean;
+}
+
+/**
+ * Type-safe variant names for button color test
+ */
+export interface ButtonColorTestVariants
+  extends Record<string, ABTestVariant<ButtonColorVariant>> {
+  control: ABTestVariant<ButtonColorVariant>;
+  monochrome: ABTestVariant<ButtonColorVariant>;
+}
+
+/**
+ * Valid variant names for button color test
+ */
+export type ButtonColorVariantName = keyof ButtonColorTestVariants;
diff --git a/app/components/UI/Perps/utils/abTesting/usePerpsABTest.test.ts b/app/components/UI/Perps/utils/abTesting/usePerpsABTest.test.ts
new file mode 100644
index 00000000000..4501e4a1345
--- /dev/null
+++ b/app/components/UI/Perps/utils/abTesting/usePerpsABTest.test.ts
@@ -0,0 +1,235 @@
+import { renderHook } from '@testing-library/react-hooks';
+import { useSelector } from 'react-redux';
+import { usePerpsABTest } from './usePerpsABTest';
+import { BUTTON_COLOR_TEST } from './tests';
+import type { ABTestConfig, ABTestVariant, ButtonColorVariant } from './types';
+
+// Mock react-redux
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
+
+describe('usePerpsABTest', () => {
+  // Test configuration
+  const mockTestConfig: ABTestConfig<{
+    control: ABTestVariant<ButtonColorVariant>;
+    monochrome: ABTestVariant<ButtonColorVariant>;
+  }> = {
+    testId: 'button_color_test',
+    featureFlagKey: 'perpsButtonColorTestEnabled',
+    description: 'Test button colors',
+    variants: {
+      control: {
+        weight: 50,
+        data: {
+          long: 'green',
+          short: 'red',
+        },
+      },
+      monochrome: {
+        weight: 50,
+        data: {
+          long: 'white',
+          short: 'white',
+        },
+      },
+    },
+  };
+
+  const mockFeatureFlagSelector = (state: unknown) =>
+    (state as { variant: string | null }).variant;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  describe('with LaunchDarkly variant', () => {
+    it('returns variant data when LaunchDarkly returns valid variant', () => {
+      mockUseSelector.mockReturnValue('control');
+
+      const { result } = renderHook(() =>
+        usePerpsABTest({
+          test: mockTestConfig,
+          featureFlagSelector: mockFeatureFlagSelector,
+        }),
+      );
+
+      expect(result.current.variant).toEqual({
+        long: 'green',
+        short: 'red',
+      });
+      expect(result.current.variantName).toBe('control');
+      expect(result.current.isEnabled).toBe(true);
+    });
+
+    it('sets isEnabled true when LaunchDarkly returns variant', () => {
+      mockUseSelector.mockReturnValue('monochrome');
+
+      const { result } = renderHook(() =>
+        usePerpsABTest({
+          test: mockTestConfig,
+          featureFlagSelector: mockFeatureFlagSelector,
+        }),
+      );
+
+      expect(result.current.isEnabled).toBe(true);
+    });
+
+    it('returns correct variant data for monochrome variant', () => {
+      mockUseSelector.mockReturnValue('monochrome');
+
+      const { result } = renderHook(() =>
+        usePerpsABTest({
+          test: mockTestConfig,
+          featureFlagSelector: mockFeatureFlagSelector,
+        }),
+      );
+
+      expect(result.current.variant).toEqual({
+        long: 'white',
+        short: 'white',
+      });
+      expect(result.current.variantName).toBe('monochrome');
+    });
+  });
+
+  describe('with invalid variant name', () => {
+    it('warns and falls back to first variant when LaunchDarkly returns invalid variant', () => {
+      const consoleWarnSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {
+          // Intentionally empty - suppressing console.warn during tests
+        });
+      mockUseSelector.mockReturnValue('invalid_variant');
+
+      const { result } = renderHook(() =>
+        usePerpsABTest({
+          test: mockTestConfig,
+          featureFlagSelector: mockFeatureFlagSelector,
+        }),
+      );
+
+      expect(consoleWarnSpy).toHaveBeenCalledWith(
+        '[ABTest] Variant "invalid_variant" not found in test "button_color_test". Falling back to first variant.',
+      );
+      expect(result.current.variant).toEqual({
+        long: 'green',
+        short: 'red',
+      });
+      expect(result.current.variantName).toBe('control');
+
+      consoleWarnSpy.mockRestore();
+    });
+
+    it('sets isEnabled true when fallback occurs with LaunchDarkly active', () => {
+      const consoleWarnSpy = jest
+        .spyOn(console, 'warn')
+        .mockImplementation(() => {
+          // Intentionally empty - suppressing console.warn during tests
+        });
+      mockUseSelector.mockReturnValue('invalid_variant');
+
+      const { result } = renderHook(() =>
+        usePerpsABTest({
+          test: mockTestConfig,
+          featureFlagSelector: mockFeatureFlagSelector,
+        }),
+      );
+
+      expect(result.current.isEnabled).toBe(true);
+
+      consoleWarnSpy.mockRestore();
+    });
+  });
+
+  describe('with null or undefined LaunchDarkly response', () => {
+    it('falls back to first variant when LaunchDarkly returns null', () => {
+      mockUseSelector.mockReturnValue(null);
+
+      const { result } = renderHook(() =>
+        usePerpsABTest({
+          test: mockTestConfig,
+          featureFlagSelector: mockFeatureFlagSelector,
+        }),
+      );
+
+      expect(result.current.variant).toEqual({
+        long: 'green',
+        short: 'red',
+      });
+      expect(result.current.variantName).toBe('control');
+    });
+
+    it('sets isEnabled false when LaunchDarkly returns null', () => {
+      mockUseSelector.mockReturnValue(null);
+
+      const { result } = renderHook(() =>
+        usePerpsABTest({
+          test: mockTestConfig,
+          featureFlagSelector: mockFeatureFlagSelector,
+        }),
+      );
+
+      expect(result.current.isEnabled).toBe(false);
+    });
+
+    it('falls back to first variant when LaunchDarkly returns undefined', () => {
+      mockUseSelector.mockReturnValue(undefined);
+
+      const { result } = renderHook(() =>
+        usePerpsABTest({
+          test: mockTestConfig,
+          featureFlagSelector: mockFeatureFlagSelector,
+        }),
+      );
+
+      expect(result.current.variant).toEqual({
+        long: 'green',
+        short: 'red',
+      });
+      expect(result.current.variantName).toBe('control');
+    });
+  });
+
+  describe('with real BUTTON_COLOR_TEST configuration', () => {
+    it('returns correct control variant from real configuration', () => {
+      mockUseSelector.mockReturnValue('control');
+
+      const { result } = renderHook(() =>
+        usePerpsABTest({
+          test: BUTTON_COLOR_TEST,
+          featureFlagSelector: mockFeatureFlagSelector,
+        }),
+      );
+
+      expect(result.current.variant).toEqual({
+        long: 'green',
+        short: 'red',
+      });
+      expect(result.current.variantName).toBe('control');
+    });
+
+    it('returns correct monochrome variant from real configuration', () => {
+      mockUseSelector.mockReturnValue('monochrome');
+
+      const { result } = renderHook(() =>
+        usePerpsABTest({
+          test: BUTTON_COLOR_TEST,
+          featureFlagSelector: mockFeatureFlagSelector,
+        }),
+      );
+
+      expect(result.current.variant).toEqual({
+        long: 'white',
+        short: 'white',
+      });
+      expect(result.current.variantName).toBe('monochrome');
+    });
+  });
+});
diff --git a/app/components/UI/Perps/utils/abTesting/usePerpsABTest.ts b/app/components/UI/Perps/utils/abTesting/usePerpsABTest.ts
new file mode 100644
index 00000000000..059b70f3f62
--- /dev/null
+++ b/app/components/UI/Perps/utils/abTesting/usePerpsABTest.ts
@@ -0,0 +1,96 @@
+/**
+ * React hook for A/B testing in Perps
+ *
+ * Simplified for LaunchDarkly integration. LaunchDarkly handles:
+ * - User identification and tracking
+ * - Variant assignment (stable per user)
+ * - Persistence across sessions
+ * - Remote control and rollout
+ *
+ * This hook just reads the variant from the feature flag and maps it to variant data.
+ */
+
+import { useSelector } from 'react-redux';
+import type {
+  ABTestConfig,
+  ABTestVariant,
+  UsePerpsABTestResult,
+} from './types';
+
+/**
+ * Hook parameters
+ */
+interface UsePerpsABTestParams<
+  V extends Record<string, ABTestVariant>,
+  S = unknown,
+> {
+  /** The A/B test configuration */
+  test: ABTestConfig<V>;
+  /** Feature flag selector that returns the variant name from LaunchDarkly */
+  featureFlagSelector: (state: S) => string | null;
+}
+
+/**
+ * Hook for A/B testing in Perps components
+ *
+ * Reads the assigned variant from LaunchDarkly via feature flag and returns the corresponding data.
+ * LaunchDarkly handles all assignment logic, persistence, and user tracking.
+ *
+ * @template V - The shape of variants object
+ * @template T - The type of data in the variants
+ * @param params - Hook parameters including test config and feature flag selector
+ * @returns Object containing variant data, variant name, and enabled state
+ *
+ * @example
+ * ```typescript
+ * // In component
+ * const { variant, variantName, isEnabled } = usePerpsABTest({
+ *   test: BUTTON_COLOR_TEST,
+ *   featureFlagSelector: selectPerpsButtonColorTestVariant,
+ * });
+ *
+ * // Use variant data
+ * const buttonColor = variant.long; // 'green' or 'white'
+ *
+ * // For local testing, temporarily hardcode the variant:
+ * // const buttonColorVariant = 'monochrome'; // Remove before commit!
+ * ```
+ */
+export function usePerpsABTest<
+  V extends Record<string, ABTestVariant<T>>,
+  T = unknown,
+  S = unknown,
+>(params: UsePerpsABTestParams<V, S>): UsePerpsABTestResult<T> {
+  const { test, featureFlagSelector } = params;
+
+  // Read variant name from LaunchDarkly feature flag
+  const launchDarklyVariant = useSelector(featureFlagSelector) as string | null;
+
+  // Determine final variant name (LaunchDarkly or fallback to first variant)
+  const variantName =
+    launchDarklyVariant || (Object.keys(test.variants)[0] as keyof V);
+
+  // Check if variant exists in config
+  const variant = test.variants[variantName as keyof V];
+  const isEnabled = !!launchDarklyVariant;
+
+  if (!variant) {
+    // Variant not found - fall back to first variant
+    console.warn(
+      `[ABTest] Variant "${String(variantName)}" not found in test "${test.testId}". Falling back to first variant.`,
+    );
+    const fallbackVariantName = Object.keys(test.variants)[0] as keyof V;
+    const fallbackVariant = test.variants[fallbackVariantName];
+    return {
+      variant: fallbackVariant.data,
+      variantName: String(fallbackVariantName),
+      isEnabled,
+    };
+  }
+
+  return {
+    variant: variant.data,
+    variantName: String(variantName),
+    isEnabled,
+  };
+}
diff --git a/app/components/UI/Perps/utils/accountUtils.test.ts b/app/components/UI/Perps/utils/accountUtils.test.ts
index 757ab9451b5..300f8f07d43 100644
--- a/app/components/UI/Perps/utils/accountUtils.test.ts
+++ b/app/components/UI/Perps/utils/accountUtils.test.ts
@@ -8,7 +8,10 @@ import { createMockEngineContext } from '../__mocks__';
 const mockEngineContext = createMockEngineContext();
 jest.mock('../../../../core/Engine', () => ({ context: mockEngineContext }));
 
-import { getEvmAccountFromSelectedAccountGroup } from './accountUtils';
+import {
+  getEvmAccountFromSelectedAccountGroup,
+  calculateWeightedReturnOnEquity,
+} from './accountUtils';
 import Engine from '../../../../core/Engine';
 
 describe('accountUtils', () => {
@@ -194,4 +197,352 @@ describe('accountUtils', () => {
       });
     });
   });
+
+  describe('calculateWeightedReturnOnEquity', () => {
+    it('returns "0" for empty array', () => {
+      const result = calculateWeightedReturnOnEquity([]);
+      expect(result).toBe('0');
+    });
+
+    it('calculates weighted ROE for single account with string inputs', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '100',
+          returnOnEquity: '10.0',
+        },
+      ];
+
+      // marginUsed = (100 / 10.0) * 100 = 1000
+      // weightedROE = (10.0 / 100) * 1000 / 1000 = 10.0
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('10.0');
+    });
+
+    it('calculates weighted ROE for single account with number inputs', () => {
+      const accounts = [
+        {
+          unrealizedPnl: 200,
+          returnOnEquity: 20,
+        },
+      ];
+
+      // marginUsed = (200 / 20.0) * 100 = 1000
+      // weightedROE = (20.0 / 100) * 1000 / 1000 = 20.0
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('20.0');
+    });
+
+    it('calculates weighted ROE for multiple accounts', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '100',
+          returnOnEquity: '10.0', // marginUsed = 1000
+        },
+        {
+          unrealizedPnl: '200',
+          returnOnEquity: '20.0', // marginUsed = 1000
+        },
+        {
+          unrealizedPnl: '150',
+          returnOnEquity: '15.0', // marginUsed = 1000
+        },
+      ];
+
+      // Account 1: ROE = 0.10, marginUsed = 1000, weighted = 100
+      // Account 2: ROE = 0.20, marginUsed = 1000, weighted = 200
+      // Account 3: ROE = 0.15, marginUsed = 1000, weighted = 150
+      // Total weighted = 450, total margin = 3000
+      // weightedROE = (450 / 3000) * 100 = 15.0
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('15.0');
+    });
+
+    it('calculates weighted ROE with different margin amounts', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '50',
+          returnOnEquity: '10.0', // marginUsed = 500
+        },
+        {
+          unrealizedPnl: '200',
+          returnOnEquity: '20.0', // marginUsed = 1000
+        },
+      ];
+
+      // Account 1: ROE = 0.10, marginUsed = 500, weighted = 50
+      // Account 2: ROE = 0.20, marginUsed = 1000, weighted = 200
+      // Total weighted = 250, total margin = 1500
+      // weightedROE = (250 / 1500) * 100 = 16.666... ≈ 16.7
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('16.7');
+    });
+
+    it('handles mixed string and number inputs', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '100',
+          returnOnEquity: 10,
+        },
+        {
+          unrealizedPnl: 200,
+          returnOnEquity: '20.0',
+        },
+      ];
+
+      // Account 1: ROE = 0.10, marginUsed = 1000, weighted = 100
+      // Account 2: ROE = 0.20, marginUsed = 1000, weighted = 200
+      // Total weighted = 300, total margin = 2000
+      // weightedROE = (300 / 2000) * 100 = 15.0
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('15.0');
+    });
+
+    it('skips accounts with zero returnOnEquity', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '100',
+          returnOnEquity: '10.0', // marginUsed = 1000
+        },
+        {
+          unrealizedPnl: '0',
+          returnOnEquity: '0', // Should be skipped
+        },
+        {
+          unrealizedPnl: '200',
+          returnOnEquity: '20.0', // marginUsed = 1000
+        },
+      ];
+
+      // Only accounts 1 and 3 are used
+      // Account 1: ROE = 0.10, marginUsed = 1000, weighted = 100
+      // Account 3: ROE = 0.20, marginUsed = 1000, weighted = 200
+      // Total weighted = 300, total margin = 2000
+      // weightedROE = (300 / 2000) * 100 = 15.0
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('15.0');
+    });
+
+    it('skips accounts with NaN unrealizedPnl', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '100',
+          returnOnEquity: '10.0',
+        },
+        {
+          unrealizedPnl: 'invalid',
+          returnOnEquity: '20.0',
+        },
+        {
+          unrealizedPnl: '200',
+          returnOnEquity: '20.0',
+        },
+      ];
+
+      // Only accounts 1 and 3 are used
+      // Account 1: ROE = 0.10, marginUsed = 1000, weighted = 100
+      // Account 3: ROE = 0.20, marginUsed = 1000, weighted = 200
+      // Total weighted = 300, total margin = 2000
+      // weightedROE = (300 / 2000) * 100 = 15.0
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('15.0');
+    });
+
+    it('skips accounts with NaN returnOnEquity', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '100',
+          returnOnEquity: '10.0',
+        },
+        {
+          unrealizedPnl: '200',
+          returnOnEquity: 'invalid',
+        },
+        {
+          unrealizedPnl: '300',
+          returnOnEquity: '30.0',
+        },
+      ];
+
+      // Only accounts 1 and 3 are used
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('20.0');
+    });
+
+    it('returns "0" when all accounts are invalid', () => {
+      const accounts = [
+        {
+          unrealizedPnl: 'invalid',
+          returnOnEquity: '10.0',
+        },
+        {
+          unrealizedPnl: '200',
+          returnOnEquity: '0',
+        },
+        {
+          unrealizedPnl: '300',
+          returnOnEquity: 'invalid',
+        },
+      ];
+
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('0');
+    });
+
+    it('handles negative unrealizedPnl correctly', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '-100',
+          returnOnEquity: '-10.0', // marginUsed = 1000
+        },
+        {
+          unrealizedPnl: '200',
+          returnOnEquity: '20.0', // marginUsed = 1000
+        },
+      ];
+
+      // Account 1: ROE = -0.10, marginUsed = 1000, weighted = -100
+      // Account 2: ROE = 0.20, marginUsed = 1000, weighted = 200
+      // Total weighted = 100, total margin = 2000
+      // weightedROE = (100 / 2000) * 100 = 5.0
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('5.0');
+    });
+
+    it('handles decimal precision correctly', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '33.33',
+          returnOnEquity: '11.11', // marginUsed ≈ 300
+        },
+        {
+          unrealizedPnl: '66.67',
+          returnOnEquity: '22.22', // marginUsed ≈ 300
+        },
+      ];
+
+      const result = calculateWeightedReturnOnEquity(accounts);
+      // Should round to 1 decimal place
+      expect(result).toMatch(/^\d+\.\d$/);
+    });
+
+    it('skips accounts that result in zero or negative marginUsed', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '100',
+          returnOnEquity: '10.0', // marginUsed = 1000
+        },
+        {
+          unrealizedPnl: '-50',
+          returnOnEquity: '10.0', // marginUsed = -500 (should be skipped)
+        },
+        {
+          unrealizedPnl: '0',
+          returnOnEquity: '5.0', // marginUsed = 0 (should be skipped)
+        },
+      ];
+
+      // Only account 1 is used
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('10.0');
+    });
+
+    it('handles very small values correctly', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '0.01',
+          returnOnEquity: '0.1', // marginUsed = 10
+        },
+        {
+          unrealizedPnl: '0.02',
+          returnOnEquity: '0.2', // marginUsed = 10
+        },
+      ];
+
+      // Account 1: ROE = 0.001, marginUsed = 10, weighted = 0.01
+      // Account 2: ROE = 0.002, marginUsed = 10, weighted = 0.02
+      // Total weighted = 0.03, total margin = 20
+      // weightedROE = (0.03 / 20) * 100 = 0.15, rounded to 0.1
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('0.1');
+    });
+
+    it('handles very large values correctly', () => {
+      const accounts = [
+        {
+          unrealizedPnl: '1000000',
+          returnOnEquity: '10.0', // marginUsed = 10000000
+        },
+        {
+          unrealizedPnl: '2000000',
+          returnOnEquity: '20.0', // marginUsed = 10000000
+        },
+      ];
+
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('15.0');
+    });
+
+    it('weighted ROE sign depends on total unrealizedPnl, not total returnOnEquity', () => {
+      // Example: Mixed positive and negative ROE accounts
+      // Account 1: unrealizedPnl = 100, returnOnEquity = 10%, marginUsed = 1000
+      // Account 2: unrealizedPnl = -50, returnOnEquity = -5%, marginUsed = 1000
+      // Total unrealizedPnl = 50 (positive)
+      // Total returnOnEquity = 10% + (-5%) = 5% (positive)
+      // weightedROE = (50 / 2000) * 100 = 2.5% (positive)
+      const accounts = [
+        {
+          unrealizedPnl: '100',
+          returnOnEquity: '10.0',
+        },
+        {
+          unrealizedPnl: '-50',
+          returnOnEquity: '-5.0',
+        },
+      ];
+
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('2.5');
+    });
+
+    it('weighted ROE can be negative when total unrealizedPnl is negative', () => {
+      // Account 1: unrealizedPnl = -100, returnOnEquity = -10%, marginUsed = 1000
+      // Account 2: unrealizedPnl = -50, returnOnEquity = -5%, marginUsed = 1000
+      // Total unrealizedPnl = -150 (negative)
+      // weightedROE = (-150 / 2000) * 100 = -7.5% (negative)
+      const accounts = [
+        {
+          unrealizedPnl: '-100',
+          returnOnEquity: '-10.0',
+        },
+        {
+          unrealizedPnl: '-50',
+          returnOnEquity: '-5.0',
+        },
+      ];
+
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('-7.5');
+    });
+
+    it('demonstrates weighted ROE sign matches total unrealizedPnl sign', () => {
+      // This test shows that weightedROE sign = sign(Σ(unrealizedPnl))
+      // not sign(Σ(returnOnEquity))
+      const accounts = [
+        {
+          unrealizedPnl: '200',
+          returnOnEquity: '20.0', // marginUsed = 1000
+        },
+        {
+          unrealizedPnl: '-100',
+          returnOnEquity: '-10.0', // marginUsed = 1000
+        },
+      ];
+
+      // Total unrealizedPnl = 200 + (-100) = 100 (positive)
+      // weightedROE = (100 / 2000) * 100 = 5.0% (positive)
+      // Even though we have both positive and negative ROE accounts
+      const result = calculateWeightedReturnOnEquity(accounts);
+      expect(result).toBe('5.0');
+    });
+  });
 });
diff --git a/app/components/UI/Perps/utils/accountUtils.ts b/app/components/UI/Perps/utils/accountUtils.ts
index e6c69dbb7c1..d6a6e14e3ea 100644
--- a/app/components/UI/Perps/utils/accountUtils.ts
+++ b/app/components/UI/Perps/utils/accountUtils.ts
@@ -20,3 +20,79 @@ export const getEvmAccountFromSelectedAccountGroup = () => {
 
   return evmAccount || null;
 };
+
+/**
+ * Interface for ROE calculation input
+ */
+export interface ReturnOnEquityInput {
+  unrealizedPnl: string | number;
+  returnOnEquity: string | number;
+}
+
+/**
+ * Calculates weighted return on equity across multiple account states
+ * Weights each account's ROE by its margin used (derived from unrealizedPnl and returnOnEquity)
+ *
+ * Formula: weightedROE = Σ(ROE_i * marginUsed_i) / Σ(marginUsed_i)
+ * where marginUsed_i is derived as: (unrealizedPnl_i / returnOnEquity_i) * 100
+ *
+ * @param accounts - Array of account states with unrealizedPnl and returnOnEquity
+ * @returns Weighted return on equity as a string with 1 decimal place, or '0' if no margin used
+ */
+export function calculateWeightedReturnOnEquity(
+  accounts: ReturnOnEquityInput[],
+): string {
+  if (accounts.length === 0) {
+    return '0';
+  }
+
+  let totalWeightedROE = 0;
+  let totalMarginUsed = 0;
+
+  for (const account of accounts) {
+    const unrealizedPnl =
+      typeof account.unrealizedPnl === 'string'
+        ? Number.parseFloat(account.unrealizedPnl)
+        : account.unrealizedPnl;
+    const returnOnEquity =
+      typeof account.returnOnEquity === 'string'
+        ? Number.parseFloat(account.returnOnEquity)
+        : account.returnOnEquity;
+
+    // Skip invalid values
+    if (Number.isNaN(unrealizedPnl) || Number.isNaN(returnOnEquity)) {
+      continue;
+    }
+
+    // Derive marginUsed from unrealizedPnl and returnOnEquity
+    // If returnOnEquity is 0, we can't derive marginUsed, so skip this account
+    if (returnOnEquity === 0) {
+      // If both are 0, marginUsed could be anything, so we skip it
+      // If unrealizedPnl != 0 but returnOnEquity == 0, this is an error case, skip it
+      continue;
+    }
+
+    // marginUsed = (unrealizedPnl / returnOnEquity) * 100
+    const marginUsed = (unrealizedPnl / returnOnEquity) * 100;
+
+    // Skip invalid or zero margin accounts
+    if (Number.isNaN(marginUsed) || marginUsed <= 0) {
+      continue;
+    }
+
+    // Convert ROE from percentage to decimal for calculation
+    const roeDecimal = returnOnEquity / 100;
+
+    // Weight the ROE by margin used
+    totalWeightedROE += roeDecimal * marginUsed;
+    totalMarginUsed += marginUsed;
+  }
+
+  if (totalMarginUsed <= 0) {
+    return '0';
+  }
+
+  // Calculate weighted average and convert back to percentage
+  const weightedROE = (totalWeightedROE / totalMarginUsed) * 100;
+  return weightedROE.toFixed(1);
+}
diff --git a/app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx b/app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx
index ffc785b297a..5b5861e7227 100644
--- a/app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx
+++ b/app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx
@@ -1,6 +1,11 @@
 import { useNavigation } from '@react-navigation/native';
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Image, View } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withTiming,
+} from 'react-native-reanimated';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { strings } from '../../../../../../locales/i18n';
 import ButtonBase from '../../../../../component-library/components/Buttons/Button/foundation/ButtonBase';
@@ -33,12 +38,25 @@ const PredictGTMModal = () => {
   const { trackEvent, createEventBuilder } = useMetrics();
   const { navigate } = useNavigation();
   const theme = useTheme();
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const opacity = useSharedValue(0);
 
   const titleText = strings('predict.gtm_content.title');
   const subtitleText = strings('predict.gtm_content.title_description');
 
   const styles = createStyles(theme);
 
+  // Animate content fade-in when image loads
+  useEffect(() => {
+    if (imageLoaded) {
+      opacity.value = withTiming(1, { duration: 500 });
+    }
+  }, [imageLoaded, opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
   const handleClose = async () => {
     await StorageWrapper.setItem(PREDICT_GTM_MODAL_SHOWN, 'true');
 
@@ -81,9 +99,16 @@ const PredictGTMModal = () => {
   };
 
   return (
-    <View style={styles.pageContainer} testID="predict-gtm-modal-container">
+    <Animated.View
+      style={[styles.pageContainer, animatedStyle]}
+      testID="predict-gtm-modal-container"
+    >
       {/* Background Image - Full Screen */}
-      <Image source={PredictMarketingImage} style={styles.backgroundImage} />
+      <Image
+        source={PredictMarketingImage}
+        style={styles.backgroundImage}
+        onLoad={() => setImageLoaded(true)}
+      />
 
       {/* Content Overlay */}
       <SafeAreaView style={styles.contentContainer}>
@@ -142,7 +167,7 @@ const PredictGTMModal = () => {
           />
         </View>
       </SafeAreaView>
-    </View>
+    </Animated.View>
   );
 };
 
diff --git a/app/components/UI/Predict/providers/polymarket/constants.ts b/app/components/UI/Predict/providers/polymarket/constants.ts
index 11a6eebc8d1..d0114bfb23c 100644
--- a/app/components/UI/Predict/providers/polymarket/constants.ts
+++ b/app/components/UI/Predict/providers/polymarket/constants.ts
@@ -11,7 +11,8 @@ export const FEE_COLLECTOR_ADDRESS =
 /**
  * Default slippage for market orders.
  */
-export const SLIPPAGE = 0.015; // 1.5%
+export const SLIPPAGE_BUY = 0.015; // 1.5%
+export const SLIPPAGE_SELL = 0.03; // 3%
 
 export const ORDER_RATE_LIMIT_MS = 5000;
 
diff --git a/app/components/UI/Predict/providers/polymarket/utils.ts b/app/components/UI/Predict/providers/polymarket/utils.ts
index b76b132bf7d..3795c185e2d 100644
--- a/app/components/UI/Predict/providers/polymarket/utils.ts
+++ b/app/components/UI/Predict/providers/polymarket/utils.ts
@@ -26,7 +26,6 @@ import type {
 } from '../types';
 import {
   ClobAuthDomain,
-  SLIPPAGE,
   EIP712Domain,
   FEE_PERCENTAGE,
   HASH_ZERO_BYTES32,
@@ -34,6 +33,8 @@ import {
   MSG_TO_SIGN,
   POLYGON_MAINNET_CHAIN_ID,
   ROUNDING_CONFIG,
+  SLIPPAGE_BUY,
+  SLIPPAGE_SELL,
 } from './constants';
 import { SafeFeeAuthorization } from './safe/types';
 import {
@@ -1151,7 +1152,7 @@ export const previewOrder = async (
       sharePrice: bestPrice,
       maxAmountSpent: makerAmount,
       minAmountReceived: takerAmount,
-      slippage: SLIPPAGE,
+      slippage: SLIPPAGE_BUY,
       tickSize: parseFloat(book.tick_size),
       minOrderSize: parseFloat(book.min_order_size),
       negRisk: book.neg_risk,
@@ -1184,7 +1185,7 @@ export const previewOrder = async (
     sharePrice: bestPrice,
     maxAmountSpent: makerAmount,
     minAmountReceived: takerAmount,
-    slippage: SLIPPAGE,
+    slippage: SLIPPAGE_SELL,
     tickSize: parseFloat(book.tick_size),
     minOrderSize: parseFloat(book.min_order_size),
     negRisk: book.neg_risk,
diff --git a/app/components/Views/confirmations/hooks/send/useAmountValidation.test.ts b/app/components/Views/confirmations/hooks/send/useAmountValidation.test.ts
index 3eec7462f87..69514428dad 100644
--- a/app/components/Views/confirmations/hooks/send/useAmountValidation.test.ts
+++ b/app/components/Views/confirmations/hooks/send/useAmountValidation.test.ts
@@ -2,7 +2,12 @@ import { waitFor } from '@testing-library/react-native';
 import BN from 'bnjs4';
 
 import { renderHookWithProvider } from '../../../../../util/test/renderWithProvider';
-import { EVM_NATIVE_ASSET, evmSendStateMock } from '../../__mocks__/send.mock';
+import {
+  EVM_NATIVE_ASSET,
+  evmSendStateMock,
+  SOLANA_ASSET,
+  solanaSendStateMock,
+} from '../../__mocks__/send.mock';
 import {
   useAmountValidation,
   validateERC1155Balance,
@@ -320,4 +325,23 @@ describe('useAmountValidation', () => {
     const error = await result.current.validateNonEvmAmountAsync();
     expect(error).toEqual(undefined);
   });
+
+  it('return error when non-EVM asset has zero balance', async () => {
+    jest.spyOn(SendContext, 'useSendContext').mockReturnValue({
+      asset: {
+        ...SOLANA_ASSET,
+        rawBalance: '0x0',
+      },
+      from: MOCK_ADDRESS_1,
+      value: '1',
+    } as unknown as SendContext.SendContextType);
+
+    const { result } = renderHookWithProvider(() => useAmountValidation(), {
+      state: solanaSendStateMock,
+    });
+
+    await waitFor(() =>
+      expect(result.current.amountError).toEqual('Insufficient funds'),
+    );
+  });
 });
diff --git a/app/components/Views/confirmations/hooks/send/useAmountValidation.ts b/app/components/Views/confirmations/hooks/send/useAmountValidation.ts
index 2551567aad6..ac8f6d4aa4c 100644
--- a/app/components/Views/confirmations/hooks/send/useAmountValidation.ts
+++ b/app/components/Views/confirmations/hooks/send/useAmountValidation.ts
@@ -34,6 +34,10 @@ export const useAmountValidation = () => {
       return undefined;
     }
 
+    if (rawBalanceBN.isZero()) {
+      return strings('send.insufficient_funds');
+    }
+
     try {
       const result = (await validateAmountWithSnap(
         value || '0',
@@ -49,7 +53,7 @@ export const useAmountValidation = () => {
     } catch (error) {
       return strings('send.invalid_value');
     }
-  }, [value, validateAmountWithSnap, isNonEvmSendType]);
+  }, [value, validateAmountWithSnap, isNonEvmSendType, rawBalanceBN]);
 
   const validateAmountAsync = useCallback(async () => {
     if (!value) {
diff --git a/app/util/remoteFeatureFlag/index.test.ts b/app/util/remoteFeatureFlag/index.test.ts
index f09d9a558dd..2b5711fd0b4 100644
--- a/app/util/remoteFeatureFlag/index.test.ts
+++ b/app/util/remoteFeatureFlag/index.test.ts
@@ -2,6 +2,7 @@ import { getVersion } from 'react-native-device-info';
 import {
   hasMinimumRequiredVersion,
   validatedVersionGatedFeatureFlag,
+  isVersionGatedFeatureFlag,
   VersionGatedFeatureFlag,
 } from '.';
 
@@ -16,6 +17,142 @@ jest.mock(
   }),
 );
 
+describe('isVersionGatedFeatureFlag', () => {
+  it('returns true for valid VersionGatedFeatureFlag', () => {
+    const validFlag = {
+      enabled: true,
+      minimumVersion: '1.0.0',
+    };
+
+    const result = isVersionGatedFeatureFlag(validFlag);
+
+    expect(result).toBe(true);
+  });
+
+  it('returns true for valid VersionGatedFeatureFlag with enabled false', () => {
+    const validFlag = {
+      enabled: false,
+      minimumVersion: '1.0.0',
+    };
+
+    const result = isVersionGatedFeatureFlag(validFlag);
+
+    expect(result).toBe(true);
+  });
+
+  it('returns false for null', () => {
+    const result = isVersionGatedFeatureFlag(null);
+
+    expect(result).toBe(false);
+  });
+
+  it('returns false for undefined', () => {
+    const result = isVersionGatedFeatureFlag(undefined);
+
+    expect(result).toBe(false);
+  });
+
+  it('returns false for missing enabled property', () => {
+    const invalidFlag = {
+      minimumVersion: '1.0.0',
+    };
+
+    const result = isVersionGatedFeatureFlag(invalidFlag);
+
+    expect(result).toBe(false);
+  });
+
+  it('returns false for missing minimumVersion property', () => {
+    const invalidFlag = {
+      enabled: true,
+    };
+
+    const result = isVersionGatedFeatureFlag(invalidFlag);
+
+    expect(result).toBe(false);
+  });
+
+  it('returns false when enabled is not a boolean', () => {
+    const invalidFlag = {
+      enabled: 'true',
+      minimumVersion: '1.0.0',
+    };
+
+    const result = isVersionGatedFeatureFlag(invalidFlag);
+
+    expect(result).toBe(false);
+  });
+
+  it('returns false when minimumVersion is not a string', () => {
+    const invalidFlag = {
+      enabled: true,
+      minimumVersion: 100,
+    };
+
+    const result = isVersionGatedFeatureFlag(invalidFlag);
+
+    expect(result).toBe(false);
+  });
+
+  it('returns false when both properties have wrong types', () => {
+    const invalidFlag = {
+      enabled: 'true',
+      minimumVersion: 123,
+    };
+
+    const result = isVersionGatedFeatureFlag(invalidFlag);
+
+    expect(result).toBe(false);
+  });
+
+  it('returns false for primitive types', () => {
+    expect(isVersionGatedFeatureFlag('string')).toBe(false);
+    expect(isVersionGatedFeatureFlag(123)).toBe(false);
+    expect(isVersionGatedFeatureFlag(true)).toBe(false);
+  });
+
+  it('returns false for empty object', () => {
+    const result = isVersionGatedFeatureFlag({});
+
+    expect(result).toBe(false);
+  });
+
+  it('returns true for flag with additional properties', () => {
+    const flagWithExtraProps = {
+      enabled: true,
+      minimumVersion: '1.0.0',
+      variant: 'control',
+      extraProperty: 'value',
+    };
+
+    const result = isVersionGatedFeatureFlag(flagWithExtraProps);
+
+    expect(result).toBe(true);
+  });
+
+  it('returns false when enabled is null', () => {
+    const invalidFlag = {
+      enabled: null,
+      minimumVersion: '1.0.0',
+    };
+
+    const result = isVersionGatedFeatureFlag(invalidFlag);
+
+    expect(result).toBe(false);
+  });
+
+  it('returns false when minimumVersion is null', () => {
+    const invalidFlag = {
+      enabled: true,
+      minimumVersion: null,
+    };
+
+    const result = isVersionGatedFeatureFlag(invalidFlag);
+
+    expect(result).toBe(false);
+  });
+});
+
 describe('hasMinimumRequiredVersion', () => {
   let mockedGetVersion: jest.MockedFunction<typeof getVersion>;
 
diff --git a/app/util/remoteFeatureFlag/index.ts b/app/util/remoteFeatureFlag/index.ts
index f2a55b438d8..4c24910da1b 100644
--- a/app/util/remoteFeatureFlag/index.ts
+++ b/app/util/remoteFeatureFlag/index.ts
@@ -7,6 +7,26 @@ export interface VersionGatedFeatureFlag {
   minimumVersion: string;
 }
 
+/**
+ * Type guard to check if a value is a VersionGatedFeatureFlag
+ * Useful for narrowing types before accessing flag properties
+ *
+ * @param value - The value to check
+ * @returns True if the value is a valid VersionGatedFeatureFlag structure
+ */
+export function isVersionGatedFeatureFlag(
+  value: unknown,
+): value is VersionGatedFeatureFlag {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    'enabled' in value &&
+    'minimumVersion' in value &&
+    typeof (value as { enabled: unknown }).enabled === 'boolean' &&
+    typeof (value as { minimumVersion: unknown }).minimumVersion === 'string'
+  );
+}
+
 export const hasMinimumRequiredVersion = (minRequiredVersion: string) => {
   if (!minRequiredVersion) return false;
   const currentVersion = getVersion();
diff --git a/docs/perps/perps-ab-testing.md b/docs/perps/perps-ab-testing.md
new file mode 100644
index 00000000000..b46204e7b11
--- /dev/null
+++ b/docs/perps/perps-ab-testing.md
@@ -0,0 +1,592 @@
+# Perps A/B Testing Framework
+
+## Overview
+
+Simplified A/B testing framework for Perps that leverages LaunchDarkly for user identification, variant assignment, and persistence. The implementation focuses on reading variants and applying them in UI, while LaunchDarkly handles all complex logic.
+
+**Key Design Principles:**
+
+- LaunchDarkly is the single source of truth for variant assignment
+- Simple string flags (not JSON) for variant names
+- Fallback to first variant when flag is disabled
+- Type-safe hook API for UI components
+- No client-side assignment logic or storage
+
+## Architecture
+
+```mermaid
+graph TD
+    LD[LaunchDarkly Remote] -->|returns string| FS[Feature Flag Selector]
+    FS -->|variant name| Hook[usePerpsABTest Hook]
+    Hook -->|variant data| UI[UI Component]
+
+    TC[Test Config] -->|defines variants| Hook
+    Hook -->|maps name to data| UI
+
+    style LD fill:#e1f5ff
+    style FS fill:#fff3e0
+    style Hook fill:#f3e5f5
+    style UI fill:#e8f5e9
+```
+
+## Layer Responsibilities
+
+### Test Configuration (`tests.ts`)
+
+**Owns:**
+
+- Variant definitions (control, treatment, etc.)
+- Variant data (button colors, text, behavior flags)
+- Test metadata (ID, description, min version)
+
+**Example:**
+
+```typescript
+export const BUTTON_COLOR_TEST: ABTestConfig<ButtonColorTestVariants> = {
+  testId: 'button_color_test',
+  featureFlagKey: 'perpsAbtestButtonColor',
+  description: 'Tests impact of button colors on trading behavior',
+  variants: {
+    control: {
+      weight: 50, // Informational only
+      data: { long: 'green', short: 'red' },
+    },
+    monochrome: {
+      weight: 50, // Informational only
+      data: { long: 'white', short: 'white' },
+    },
+  },
+};
+```
+
+**Note:** Weights are informational only. LaunchDarkly controls actual distribution via percentage rollout rules.
+
+---
+
+### Feature Flag Selector (`selectors/featureFlags/index.ts`)
+
+**Owns:**
+
+- Reading LaunchDarkly flag value from Redux
+- Returning variant name as string or null
+
+**Example:**
+
+```typescript
+export const selectPerpsButtonColorTestVariant = createSelector(
+  selectRemoteFeatureFlags,
+  (remoteFeatureFlags): string | null => {
+    const flag = remoteFeatureFlags?.perpsAbtestButtonColor;
+    return flag || null; // Returns 'control' | 'monochrome' | null
+  },
+);
+```
+
+**Redux State:**
+
+```typescript
+{
+  RemoteFeatureFlagController: {
+    remoteFeatureFlags: {
+      perpsAbtestButtonColor: 'control'; // String value from LaunchDarkly
+    }
+  }
+}
+```
+
+---
+
+### Hook (`usePerpsABTest`)
+
+**Owns:**
+
+- Mapping variant name to variant data
+- Fallback logic (first variant when flag is null)
+- `isEnabled` state (true if LaunchDarkly returned a variant)
+
+**Returns:**
+
+```typescript
+{
+  variant: T; // Typed variant data (e.g., { long: 'green', short: 'red' })
+  variantName: string; // Variant name (e.g., 'control')
+  isEnabled: boolean; // true if LaunchDarkly assigned variant, false if using fallback
+}
+```
+
+**Usage in Component:**
+
+```typescript
+import { usePerpsABTest } from '../../utils/abTesting/usePerpsABTest';
+import { BUTTON_COLOR_TEST } from '../../utils/abTesting/tests';
+import { selectPerpsButtonColorTestVariant } from '../../selectors/featureFlags';
+
+const MyComponent = () => {
+  const { variant, variantName, isEnabled } = usePerpsABTest({
+    test: BUTTON_COLOR_TEST,
+    featureFlagSelector: selectPerpsButtonColorTestVariant,
+  });
+
+  const buttonColors = variant as ButtonColorVariant;
+
+  // Track screen view with AB test context (baseline exposure)
+  usePerpsEventTracking({
+    eventName: MetaMetricsEvents.PERPS_SCREEN_VIEWED,
+    properties: {
+      [PerpsEventProperties.SCREEN_TYPE]:
+        PerpsEventValues.SCREEN_TYPE.ASSET_DETAILS,
+      [PerpsEventProperties.ASSET]: market.symbol,
+      // AB test context - only included when test is enabled
+      ...(isEnabled && {
+        [PerpsEventProperties.AB_TEST_BUTTON_COLOR]: variantName,
+      }),
+    },
+  });
+
+  // Get imperative track function for button press tracking
+  const { track } = usePerpsEventTracking();
+
+  const handleButtonPress = (direction: 'long' | 'short') => {
+    // Track AB test on button press (engagement)
+    if (isEnabled) {
+      track(MetaMetricsEvents.PERPS_UI_INTERACTION, {
+        [PerpsEventProperties.INTERACTION_TYPE]:
+          PerpsEventValues.INTERACTION_TYPE.TAP,
+        [PerpsEventProperties.ASSET]: market.symbol,
+        [PerpsEventProperties.DIRECTION]: direction === 'long'
+          ? PerpsEventValues.DIRECTION.LONG
+          : PerpsEventValues.DIRECTION.SHORT,
+        [PerpsEventProperties.AB_TEST_BUTTON_COLOR]: variantName,
+      });
+    }
+
+    // Navigate or perform action
+    // ...
+  };
+
+  return (
+    <ButtonSemantic
+      onPress={() => handleButtonPress('long')}
+      severity={getButtonSeverityForDirection('long', buttonColors)}
+    />
+  );
+};
+```
+
+---
+
+## File Structure
+
+```
+app/components/UI/Perps/
+├── utils/abTesting/
+│   ├── types.ts              # TypeScript interfaces
+│   ├── usePerpsABTest.ts     # Main hook
+│   └── tests.ts              # Test configurations
+├── selectors/featureFlags/
+│   └── index.ts              # Feature flag selectors
+├── constants/
+│   └── eventNames.ts         # AB test event properties
+└── Views/
+    └── PerpsOrderView/       # Example usage
+```
+
+---
+
+## Adding New Tests
+
+### 1. Define Variant Data Type
+
+**File:** `app/components/UI/Perps/utils/abTesting/types.ts`
+
+```typescript
+export interface MyTestVariant {
+  property: string;
+  anotherProperty: number;
+}
+```
+
+### 2. Create Test Configuration
+
+**File:** `app/components/UI/Perps/utils/abTesting/tests.ts`
+
+```typescript
+export const MY_TEST: ABTestConfig<{
+  control: ABTestVariant<MyTestVariant>;
+  treatment: ABTestVariant<MyTestVariant>;
+}> = {
+  testId: 'my_test',
+  featureFlagKey: 'perpsAbtestMyTest',
+  description: 'Test description',
+  variants: {
+    control: {
+      weight: 50,
+      data: { property: 'value1', anotherProperty: 1 },
+    },
+    treatment: {
+      weight: 50,
+      data: { property: 'value2', anotherProperty: 2 },
+    },
+  },
+};
+```
+
+**Note:** LaunchDarkly flag name would be `perps-abtest-my-test` (kebab-case), which becomes `perpsAbtestMyTest` (camelCase) in Redux state.
+
+### 3. Add Feature Flag Selector
+
+**File:** `app/components/UI/Perps/selectors/featureFlags/index.ts`
+
+```typescript
+export const selectPerpsMyTestVariant = createSelector(
+  selectRemoteFeatureFlags,
+  (flags): string | null => flags?.perpsAbtestMyTest || null,
+);
+```
+
+### 4. Add Event Constants
+
+**File:** `app/components/UI/Perps/constants/eventNames.ts`
+
+```typescript
+AB_TEST: {
+  BUTTON_COLOR_TEST: 'button_color_test',
+  MY_TEST: 'my_test', // Add new test ID
+}
+```
+
+### 5. Use in Component
+
+```typescript
+const { variant, variantName, isEnabled } = usePerpsABTest({
+  test: MY_TEST,
+  featureFlagSelector: selectPerpsMyTestVariant,
+});
+```
+
+---
+
+## Multiple Concurrent Tests
+
+### Why Flat Properties?
+
+To support multiple AB tests running simultaneously (e.g., TAT-1937 button colors, TAT-1940 asset CTA, TAT-1827 homepage CTA), we use **flat properties per test** instead of generic properties.
+
+**❌ Generic Pattern (doesn't scale):**
+
+```typescript
+{
+  ab_test_id: 'button_color_test',
+  ab_test_variant: 'control',
+  ab_test_enabled: true
+}
+// Problem: Only supports ONE test per event
+```
+
+**✅ Flat Pattern (scales to 3+ tests):**
+
+```typescript
+{
+  ab_test_button_color: 'control',
+  ab_test_asset_cta: 'variant_a',
+  ab_test_homepage_cta: 'treatment'
+}
+// ✓ Supports multiple concurrent tests in same event
+// Note: Only include properties when test is enabled (don't send event if disabled)
+```
+
+### Naming Convention
+
+**Pattern:** `ab_test_{test_name}` (no `_enabled` suffix needed)
+
+**Why no `_enabled` property?**
+
+- Events are only sent when test is enabled
+- Including the property means the test is active
+- No need for redundant `_enabled` flag
+
+**Examples:**
+
+- Button color test: `ab_test_button_color`
+- Asset CTA test: `ab_test_asset_cta`
+- Homepage CTA test: `ab_test_homepage_cta`
+
+### Implementation
+
+**1. Add properties to `eventNames.ts`:**
+
+```typescript
+export const PerpsEventProperties = {
+  // ... existing properties ...
+
+  // A/B testing properties (flat per test for multiple concurrent tests)
+  // Only include AB test properties when test is enabled (event not sent when disabled)
+  // Button color test (TAT-1937)
+  AB_TEST_BUTTON_COLOR: 'ab_test_button_color',
+  // Asset CTA test (TAT-1940)
+  AB_TEST_ASSET_CTA: 'ab_test_asset_cta',
+  // Future tests: add as AB_TEST_{TEST_NAME} (no _ENABLED property needed)
+} as const;
+```
+
+**2. Use in component tracking:**
+
+```typescript
+const { variant, variantName, isEnabled } = usePerpsABTest({
+  test: BUTTON_COLOR_TEST,
+  featureFlagSelector: selectPerpsButtonColorTestVariant,
+});
+
+// Track screen view (baseline exposure)
+usePerpsEventTracking({
+  eventName: MetaMetricsEvents.PERPS_SCREEN_VIEWED,
+  properties: {
+    [PerpsEventProperties.SCREEN_TYPE]:
+      PerpsEventValues.SCREEN_TYPE.ASSET_DETAILS,
+    [PerpsEventProperties.ASSET]: market.symbol,
+    ...(isEnabled && {
+      [PerpsEventProperties.AB_TEST_BUTTON_COLOR]: variantName,
+    }),
+  },
+});
+
+// Get imperative track function for button press tracking
+const { track } = usePerpsEventTracking();
+
+// In button press handler
+const handleLongPress = () => {
+  // Track AB test on button press (engagement)
+  if (isEnabled) {
+    track(MetaMetricsEvents.PERPS_UI_INTERACTION, {
+      [PerpsEventProperties.INTERACTION_TYPE]:
+        PerpsEventValues.INTERACTION_TYPE.TAP,
+      [PerpsEventProperties.ASSET]: market.symbol,
+      [PerpsEventProperties.DIRECTION]: PerpsEventValues.DIRECTION.LONG,
+      [PerpsEventProperties.AB_TEST_BUTTON_COLOR]: variantName,
+    });
+  }
+
+  // Navigate to order screen
+  navigation.navigate(/* ... */);
+};
+```
+
+### Where to Track
+
+**Best Practice:** Track AB test context in **both screen view and button press** events to enable engagement rate calculation.
+
+**Dual Tracking Approach:**
+
+1. **PERPS_SCREEN_VIEWED** (baseline exposure):
+   - Tracks when user views the asset details screen
+   - Establishes how many users were exposed to each variant
+   - Only includes AB test property when test is enabled
+
+2. **PERPS_UI_INTERACTION** (engagement):
+   - Tracks when user presses Long/Short button
+   - Measures which variant drives more button presses
+   - Only sent when test is enabled
+
+**Why Both Events?**
+
+- **Engagement Rate** = Button presses / Screen views per variant
+- Answers: "Which button color makes users more likely to press the button?"
+- Screen views alone = exposure but not engagement
+- Button presses alone = engagement but no baseline for comparison
+
+**Example Flow (TAT-1937):**
+
+1. User views PerpsMarketDetailsView → `PERPS_SCREEN_VIEWED` with `ab_test_button_color: 'control'` (baseline)
+2. User taps Long button → `PERPS_UI_INTERACTION` with `ab_test_button_color: 'control'`, `interaction_type: 'tap'` (engagement)
+3. User navigates to PerpsOrderView (order screen) - button colors applied, no tracking
+4. User completes trade → `PERPS_TRADE_TRANSACTION` event (no AB test context needed)
+
+**Calculating Engagement Rate:**
+
+Compare button presses to screen views for each variant to determine which color drives higher engagement.
+
+---
+
+## Local Development
+
+### Testing Variants
+
+**Production:** LaunchDarkly assigns variants automatically based on user ID and targeting rules.
+
+**Local Testing:** Temporarily hardcode the variant in your component:
+
+```typescript
+// Temporarily override for testing - REMOVE BEFORE COMMIT!
+const buttonColorVariant = 'monochrome';
+
+// Comment out the actual hook call while testing:
+// const { variant, variantName } = usePerpsABTest({...});
+```
+
+**Dev Banner:** In `__DEV__` builds, a read-only banner shows:
+
+- Current variant name
+- Source: "LaunchDarkly" or "Fallback"
+- Raw flag value from Redux
+
+**Important:** Always remove hardcoded overrides before committing.
+
+---
+
+## LaunchDarkly User Context & Bucketing
+
+**How User Identification Works:**
+
+Mobile sends user context to LaunchDarkly for per-user A/B testing via the `RemoteFeatureFlagController`:
+
+- **MetaMetrics ID** (when enabled): Used as the primary LaunchDarkly user key
+- **Fallback identification**: LaunchDarkly seem to maintain its own user segmentation even when MetaMetrics is disabled
+- **Bucketing**: Users are consistently assigned to variants based on their identifier
+
+---
+
+## LaunchDarkly Configuration
+
+### Backend Team Setup
+
+**Flag Type:** Use **String** flag (not Boolean or JSON) for AB tests.
+
+**Naming Convention:** `perps-abtest-{test-name}`
+
+**Examples:**
+
+- Button color test: `perps-abtest-button-color`
+- Asset details test: `perps-abtest-asset-details`
+- Homepage test: `perps-abtest-homepage`
+
+**Why this pattern?**
+
+- `perps-` = Feature area (Perps trading)
+- `abtest-` = Identifies it as an AB test (vs feature flag)
+- `{test-name}` = What's being tested
+- No `-enabled` suffix needed (LaunchDarkly has ON/OFF toggle)
+
+**Configuration Steps:**
+
+1. **Create flag:** `perps-abtest-button-color` (kebab-case in LaunchDarkly UI)
+2. **Flag type:** String (from dropdown)
+3. **String variations:**
+   - Variation 0: Name=`Control`, Value=`control` (default)
+   - Variation 1: Name=`Monochrome`, Value=`monochrome` (treatment)
+
+4. **Default rule (for all traffic):**
+   - **Serve:** A percentage rollout
+   - **Split:** 50% → `control`, 50% → `monochrome` (adjust percentages as needed)
+   - **By:** `user | key` (buckets users by their LaunchDarkly user key, which is the MetaMetrics ID)
+
+5. **Targeting rules:** Optional - leave empty for simple A/B test, or add custom rules for gradual rollout
+
+6. **Default variations:**
+   - **When ON:** Serves default rule (percentage rollout)
+   - **When OFF:** Serves `control` (variation 0)
+
+**Example config:**
+
+```json
+{
+  "variations": [
+    { "name": "Control", "value": "control" },
+    { "name": "Monochrome", "value": "monochrome" }
+  ],
+  "offVariation": 0,
+  "fallthrough": {
+    "rollout": {
+      "variations": [
+        { "variation": 0, "weight": 50000 },
+        { "variation": 1, "weight": 50000 }
+      ],
+      "bucketBy": "key"
+    }
+  }
+}
+```
+
+**Note:** Weights are in basis points (50000 = 50%). Adjust for different splits (e.g., 70/30 = 70000/30000).
+
+### What the App Receives
+
+```typescript
+// Redux state structure (kebab-case converted to camelCase)
+{
+  RemoteFeatureFlagController: {
+    remoteFeatureFlags: {
+      perpsAbtestButtonColor: 'control'; // Simple string value
+    }
+  }
+}
+```
+
+**Selector behavior:**
+
+- `"control"` → Returns control variant data
+- `"treatment"` → Returns treatment variant data
+- `null` (flag OFF) → Returns first variant (fallback), `isEnabled: false`
+- Invalid value → Warns, returns first variant, `isEnabled: true`
+
+---
+
+## Testing Strategy
+
+1. **Manual Testing:** Test variants locally using temporary hardcoded values
+2. **QA Validation:** Verify in staging environment with LaunchDarkly enabled
+3. **Gradual Rollout:** Start with small percentage (5-10%), monitor metrics
+4. **Data Collection:** Track for 2-4 weeks minimum to reach statistical significance
+5. **Analysis:** Compare metrics between variants (Amplitude/DataDog)
+6. **Decision:** Roll winning variant to 100%, remove AB test code
+
+## Design Rationale
+
+### Why String Flags (Not JSON)?
+
+- **Simpler:** LaunchDarkly handles assignment, app just reads variant name
+- **Type-safe:** Variant data defined in TypeScript config, not JSON
+- **Cleaner:** No version-gating complexity in flag payload
+- **Use JSON when:** Per-variant version requirements needed (feature flags, not AB tests)
+
+### Why No Client-Side Storage?
+
+- **LaunchDarkly handles persistence:** User ID determines assignment deterministically
+- **No stale data:** Always fresh from remote
+- **Fewer bugs:** No sync issues between local storage and LaunchDarkly
+- **Simpler code:** No storage management logic needed
+
+### Why Fallback to First Variant?
+
+- **Graceful degradation:** App works even if LaunchDarkly is down
+- **Predictable behavior:** Always show control variant as fallback
+- **No blank states:** User experience never breaks
+
+---
+
+## Related Files
+
+- **Hook:** `app/components/UI/Perps/utils/abTesting/usePerpsABTest.ts`
+- **Types:** `app/components/UI/Perps/utils/abTesting/types.ts`
+- **Test configs:** `app/components/UI/Perps/utils/abTesting/tests.ts`
+- **Selectors:** `app/components/UI/Perps/selectors/featureFlags/index.ts`
+- **Event constants:** `app/components/UI/Perps/constants/eventNames.ts`
+- **Button colors:** `app/components/UI/Perps/constants/buttonColors.ts`
+
+---
+
+## FAQ
+
+**Q: What if LaunchDarkly is down?**
+A: Selector returns `null`, hook falls back to first variant, `isEnabled` is `false`.
+
+**Q: How are users assigned to variants?**
+A: LaunchDarkly uses user ID (wallet address) with deterministic hashing. Same user always gets same variant.
+
+**Q: Can I test both variants locally?**
+A: Yes, temporarily hardcode the variant name in your component (see Local Development section).
+
+**Q: Why are weights informational only?**
+A: LaunchDarkly controls actual distribution via percentage rollout rules, not client-side weights.
+
+**Q: How do I track AB test in analytics?**
+A: Use `isEnabled`, `variantName` in `usePerpsEventTracking` properties (see Usage example above).
diff --git a/docs/perps/perps-metametrics-reference.md b/docs/perps/perps-metametrics-reference.md
index fefd04aae43..8c9ffb7aaa5 100644
--- a/docs/perps/perps-metametrics-reference.md
+++ b/docs/perps/perps-metametrics-reference.md
@@ -80,6 +80,8 @@ MetaMetrics.getInstance().trackEvent(
 - `direction` (optional): `'long' | 'short'`
 - `source` (optional): Where user came from (e.g., `'banner'`, `'notification'`, `'main_action_button'`, `'position_tab'`, `'perp_markets'`, `'deeplink'`, `'tutorial'`)
 - `open_position` (optional): Number of open positions (used for close_all_positions screen, number)
+- `ab_test_button_color` (optional): Button color test variant (`'control' | 'monochrome'`), only included when test is enabled (for baseline exposure tracking)
+- Future AB tests: `ab_test_{test_name}` (see [Multiple Concurrent Tests](#multiple-concurrent-tests))
 
 ### 2. PERPS_UI_INTERACTION
 
@@ -100,6 +102,8 @@ MetaMetrics.getInstance().trackEvent(
 - `sort_direction` (optional): Sort direction: `'asc' | 'desc'`
 - `search_query` (optional): Search query text (when search_clicked)
 - `favorites_count` (optional): Total number of markets in watchlist after toggle (number, used with `favorite_toggled`)
+- `ab_test_button_color` (optional): Button color test variant (`'control' | 'monochrome'`), only included when test is enabled and user taps Long/Short button (for engagement tracking)
+- Future AB tests: `ab_test_{test_name}` (see [Multiple Concurrent Tests](#multiple-concurrent-tests))
 
 ### 3. PERPS_TRADE_TRANSACTION
 
@@ -238,6 +242,76 @@ MetaMetrics.getInstance().trackEvent(
 );
 ```
 
+## Multiple Concurrent Tests
+
+### Flat Property Pattern
+
+To support multiple AB tests running concurrently (e.g., TAT-1937 button colors, TAT-1940 asset CTA, TAT-1827 homepage CTA), we use **flat properties** instead of generic properties.
+
+**Property Naming:** `ab_test_{test_name}` (no `_enabled` suffix needed)
+
+**Why no `_enabled` property?**
+
+- Events are only sent when test is enabled (`isEnabled === true`)
+- Including the property means the test is active
+- No need for redundant `_enabled` flag
+
+**Example with 3 concurrent tests:**
+
+```typescript
+usePerpsEventTracking({
+  eventName: MetaMetricsEvents.PERPS_SCREEN_VIEWED,
+  properties: {
+    [PerpsEventProperties.SCREEN_TYPE]:
+      PerpsEventValues.SCREEN_TYPE.ASSET_DETAILS,
+    [PerpsEventProperties.ASSET]: 'BTC',
+    // Test 1: Button color test (TAT-1937) - only included when enabled
+    ...(isButtonColorTestEnabled && {
+      [PerpsEventProperties.AB_TEST_BUTTON_COLOR]: buttonColorVariant,
+    }),
+    // Test 2: Asset CTA test (TAT-1940) - future
+    ...(isAssetCTATestEnabled && {
+      [PerpsEventProperties.AB_TEST_ASSET_CTA]: assetCTAVariant,
+    }),
+    // Test 3: Homepage CTA test (TAT-1827) - future
+    ...(isHomepageCTATestEnabled && {
+      [PerpsEventProperties.AB_TEST_HOMEPAGE_CTA]: homepageCTAVariant,
+    }),
+  },
+});
+```
+
+### Where to Track AB Tests
+
+**✅ Track in both events:** Use dual tracking to enable engagement rate calculation.
+
+**Dual Tracking Approach:**
+
+1. **PERPS_SCREEN_VIEWED** (baseline exposure):
+   - Include `ab_test_button_color` when test is enabled
+   - Establishes how many users were exposed to each variant
+   - Required to calculate engagement rate
+
+2. **PERPS_UI_INTERACTION** (engagement):
+   - Include `ab_test_button_color` when user taps Long/Short button
+   - Only sent when test is enabled
+   - Measures which variant drives more button presses
+
+**Why Both Events?**
+
+- **Engagement Rate** = Button presses / Screen views per variant
+- Answers: "Which button color makes users more likely to press the button?"
+
+**Example:** For TAT-1937 (button color test):
+
+- Screen views establish baseline (how many saw control vs monochrome)
+- Button presses measure engagement
+- Compare button presses to screen views for each variant
+
+For details, see [perps-ab-testing.md](./perps-ab-testing.md).
+
+---
+
 ## Best Practices
 
 1. **Use constants** - Never hardcode strings
@@ -245,6 +319,7 @@ MetaMetrics.getInstance().trackEvent(
 3. **Track duration** - Include `completion_duration` for transactions
 4. **Use properties** - Don't create new events for minor variations
 5. **Auto timestamp** - `usePerpsEventTracking` adds it automatically
+6. **AB test tracking** - Only in screen view events, not every interaction
 
 ## Sentry vs MetaMetrics