Reality2byte
diff --git a/‎app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx‎
Lines changed: 92 additions & 0 deletions b/‎app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx‎
Lines changed: 92 additions & 0 deletions
diff --git a/‎app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx‎
Lines changed: 66 additions & 11 deletions b/‎app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx‎
Lines changed: 66 additions & 11 deletions
@@ -4,6 +4,25 @@ import PerpsHomeView from './PerpsHomeView';
 import { PERPS_EVENT_VALUE } from '@metamask/perps-controller';
 import { selectPerpsFeedbackEnabledFlag } from '../../selectors/featureFlags';
 import { mockTheme } from '../../../../../util/theme';
+import { useDiscoveryScrollManager } from '../../../Predict/hooks/useDiscoveryScrollManager';
+
+// Mock useDiscoveryScrollManager
+const mockPerpsOnTabEnter = jest.fn();
+const mockPerpsScrollHandler = jest.fn();
+jest.mock('../../../Predict/hooks/useDiscoveryScrollManager', () => ({
+  useDiscoveryScrollManager: jest.fn(() => ({
+    scrollHandler: mockPerpsScrollHandler,
+    onTabEnter: mockPerpsOnTabEnter,
+    headerHidden: false,
+  })),
+}));
+
+// Mock react-native-reanimated
+jest.mock('react-native-reanimated', () => {
+  const Reanimated = jest.requireActual('react-native-reanimated/mock');
+  Reanimated.default.ScrollView = jest.requireActual('react-native').ScrollView;
+  return Reanimated;
+});
 
 // Mock navigation
 const mockNavigate = jest.fn();
@@ -877,4 +896,77 @@ describe('PerpsHomeView', () => {
       });
     });
   });
+
+  describe('hideHeader prop', () => {
+    it('renders the header by default', () => {
+      const { getByTestId } = render(<PerpsHomeView />);
+      expect(getByTestId('back-button')).toBeTruthy();
+      expect(getByTestId('perps-home-search-toggle')).toBeTruthy();
+    });
+
+    it('hides the header when hideHeader is true', () => {
+      const { queryByTestId } = render(<PerpsHomeView hideHeader />);
+      expect(queryByTestId('back-button')).toBeNull();
+      expect(queryByTestId('perps-home-search-toggle')).toBeNull();
+    });
+
+    it('still renders content when hideHeader is true', () => {
+      const { UNSAFE_getByType } = render(<PerpsHomeView hideHeader />);
+      expect(
+        UNSAFE_getByType('PerpsMarketBalanceActions' as never),
+      ).toBeTruthy();
+    });
+  });
+
+  describe('tabEnterCallbackRef prop', () => {
+    it('populates tabEnterCallbackRef.current with onTabEnter after mount', () => {
+      const ref = { current: null } as React.MutableRefObject<
+        (() => void) | null
+      >;
+      render(<PerpsHomeView tabEnterCallbackRef={ref} />);
+      expect(ref.current).toBe(mockPerpsOnTabEnter);
+    });
+
+    it('updates tabEnterCallbackRef.current when onTabEnter changes', () => {
+      const ref = { current: null } as React.MutableRefObject<
+        (() => void) | null
+      >;
+      const newOnTabEnter = jest.fn();
+      (useDiscoveryScrollManager as jest.Mock).mockReturnValueOnce({
+        scrollHandler: mockPerpsScrollHandler,
+        onTabEnter: newOnTabEnter,
+        headerHidden: false,
+      });
+      render(<PerpsHomeView tabEnterCallbackRef={ref} />);
+      expect(ref.current).toBe(newOnTabEnter);
+    });
+
+    it('does not throw when tabEnterCallbackRef is not provided', () => {
+      expect(() => render(<PerpsHomeView />)).not.toThrow();
+    });
+  });
+
+  describe('useDiscoveryScrollManager integration', () => {
+    it('passes walletHeaderHeight to useDiscoveryScrollManager', () => {
+      render(<PerpsHomeView walletHeaderHeight={56} />);
+      expect(useDiscoveryScrollManager).toHaveBeenCalledWith(
+        expect.objectContaining({ walletHeaderHeight: 56 }),
+      );
+    });
+
+    it('passes onHeaderHiddenChange to useDiscoveryScrollManager', () => {
+      const onHeaderHiddenChange = jest.fn();
+      render(<PerpsHomeView onHeaderHiddenChange={onHeaderHiddenChange} />);
+      expect(useDiscoveryScrollManager).toHaveBeenCalledWith(
+        expect.objectContaining({ onHeaderHiddenChange }),
+      );
+    });
+
+    it('uses default walletHeaderHeight of 0 when not provided', () => {
+      render(<PerpsHomeView />);
+      expect(useDiscoveryScrollManager).toHaveBeenCalledWith(
+        expect.objectContaining({ walletHeaderHeight: 0 }),
+      );
+    });
+  });
 });
@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useMemo,
 } from 'react';
-import { View, ScrollView, Modal } from 'react-native';
+import { View, Modal, NativeScrollEvent } from 'react-native';
 import { useSelector } from 'react-redux';
 import {
   SafeAreaView,
@@ -57,6 +57,8 @@ import PerpsHomeHeader from '../../components/PerpsHomeHeader';
 import type { PerpsNavigationParamList } from '../../types/navigation';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
+import Reanimated, { SharedValue } from 'react-native-reanimated';
+import { useDiscoveryScrollManager } from '../../../Predict/hooks/useDiscoveryScrollManager';
 import styleSheet from './PerpsHomeView.styles';
 import { TraceName } from '../../../../../util/trace';
 import {
@@ -72,7 +74,23 @@ import PerpsNavigationCard, {
   NavigationItem,
 } from '../../components/PerpsNavigationCard/PerpsNavigationCard';
 
-const PerpsHomeView = () => {
+interface PerpsHomeViewProps {
+  hideHeader?: boolean;
+  walletHeaderTranslateY?: SharedValue<number>;
+  walletHeaderHeight?: number;
+  /** Ref populated with this tab's onTabEnter so the parent can call it on tab switch. */
+  tabEnterCallbackRef?: React.MutableRefObject<(() => void) | null>;
+  /** Forwarded to useDiscoveryScrollManager to sync icon animations with header hide/show. */
+  onHeaderHiddenChange?: (hidden: boolean) => void;
+}
+
+const PerpsHomeView = ({
+  hideHeader = false,
+  walletHeaderTranslateY,
+  walletHeaderHeight = 0,
+  tabEnterCallbackRef,
+  onHeaderHiddenChange,
+}: PerpsHomeViewProps) => {
   const { styles } = useStyles(styleSheet, {});
   const insets = useSafeAreaInsets();
   const navigation = useNavigation();
@@ -124,6 +142,38 @@ const PerpsHomeView = () => {
   const { handleSectionLayout, handleScroll, resetTracking } =
     usePerpsHomeSectionTracking();
 
+  // Bridge analytics handler into the Reanimated worklet via onScrollEvent
+  const handleScrollEvent = useCallback(
+    (scrollY: number, viewportHeight: number) => {
+      handleScroll({
+        nativeEvent: {
+          contentOffset: { x: 0, y: scrollY },
+          layoutMeasurement: { width: 0, height: viewportHeight },
+        } as NativeScrollEvent,
+      });
+    },
+    [handleScroll],
+  );
+
+  const { scrollHandler: perpsScrollHandler, onTabEnter: perpsOnTabEnter } =
+    useDiscoveryScrollManager({
+      walletHeaderHeight,
+      walletHeaderTranslateY,
+      onScrollEvent: handleScrollEvent,
+      onHeaderHiddenChange,
+    });
+
+  // Expose onTabEnter to the parent so it can restore this tab's header state on switch.
+  useEffect(() => {
+    if (tabEnterCallbackRef) {
+      tabEnterCallbackRef.current = perpsOnTabEnter;
+      return () => {
+        tabEnterCallbackRef.current = null;
+      };
+    }
+    return undefined;
+  }, [tabEnterCallbackRef, perpsOnTabEnter]);
+
   // Get balance state directly from Redux
   const { account: perpsAccount } = usePerpsLiveAccount({ throttleMs: 1000 });
   const totalBalance = perpsAccount?.totalBalance || '0';
@@ -417,20 +467,25 @@ const PerpsHomeView = () => {
   const handleBackPress = perpsNavigation.navigateToWallet;
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView
+      style={styles.container}
+      edges={hideHeader ? { bottom: 'additive' } : undefined}
+    >
       {/* Header */}
-      <PerpsHomeHeader
-        onBack={handleBackPress}
-        onSearchToggle={handleSearchToggle}
-        testID="perps-home"
-      />
+      {!hideHeader && (
+        <PerpsHomeHeader
+          onBack={handleBackPress}
+          onSearchToggle={handleSearchToggle}
+          testID="perps-home"
+        />
+      )}
 
       {/* Main Content - ScrollView with all carousels */}
-      <ScrollView
+      <Reanimated.ScrollView
         style={styles.scrollView}
         contentContainerStyle={styles.scrollViewContent}
         showsVerticalScrollIndicator={false}
-        onScroll={handleScroll}
+        onScroll={perpsScrollHandler}
         scrollEventThrottle={16}
       >
         <PerpsHomeHeader
@@ -553,7 +608,7 @@ const PerpsHomeView = () => {
 
         {/* Bottom spacing for tab bar */}
         <View style={bottomSpacerStyle} />
-      </ScrollView>
+      </Reanimated.ScrollView>
 
       {/* Close All Positions Bottom Sheet */}
       {showCloseAllSheet && (