fix: Navigation behavior from PerpsHomeScreenSearch (#22013)

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

## **Description**

Fixes incorrect search behavior from PerpsHomeView. We were handling two
different search behaviors in PerpsHomeScree and PerpsMarketListView.
Correct behavior is:

1. When search icon is pressed on the PerpsHomeView, it need to navigate
to the PerpsMarketListView with search enabled.
2. On cancel, it should go back to the PerpsMarketListView

3. When search icon is pressed from PerpsMarketListView, we enable
search as is currently does
4. When cancel is pressed it goes back to PerpsMarketListView

This PR removes the multi-dimensional search from the PerpsHomeScreen
view and instead navigates to the MarketListView as per the latest
designs.

## **Changelog**

CHANGELOG entry: Fixes search behavior in PerpsHomeScreen

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: my feature name

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

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

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/f747b86f-4080-44ab-9cdd-7a96add3b510

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> PerpsHomeView now navigates to PerpsMarketListView with search
pre-opened on search tap, with minor header padding tweak, a new
navigation param, and updated tests.
> 
> - **Perps Home → Market List navigation**
> - Replace in-place search in `PerpsHomeView` with navigation to
`PerpsMarketListView` via `usePerpsNavigation.navigateToMarketList({
defaultSearchVisible: true, source: 'homescreen_tab', fromHome: true
})`.
> - Remove local search state and filtering from `PerpsHomeView`; call
`usePerpsHomeData({})`.
> - Header in `PerpsHomeHeader` is always rendered with
`isSearchVisible: false` on Home.
> - **Market List search handling**
> - Refactor `handleSearchToggle` in `PerpsMarketListView` to
`useCallback`; clears query on close and tracks event on open.
> - **Header UI tweak**
> - `PerpsMarketListHeader`: add `Platform`-specific padding for the
search bar (`py-3` iOS, `py-1` Android); import `Platform`. Mark
`onSearchClear` as unused.
> - **Navigation types**
> - Add `fromHome?: boolean` to
`PerpsNavigationParamList['PerpsMarketListView']`.
> - **Tests**
> - `PerpsHomeView.test.tsx`: mock `navigateToMarketList` and assert
navigation with `{ defaultSearchVisible: true, source: 'homescreen_tab',
fromHome: true }`; remove assertions about HomeView search bar
visibility; minor setup/mocks cleanup.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
8218306. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Arthur Breton <arthur.breton@consensys.net>
Co-authored-by: abretonc7s <107169956+abretonc7s@users.noreply.github.com>
Co-authored-by: Curtis David <Curtis.David7@gmail.com>
Co-authored-by: tommasini <46944231+tommasini@users.noreply.github.com>
Co-authored-by: metamaskbot <metamaskbot@users.noreply.github.com>
Co-authored-by: Borislav Grigorov <b.s.grigorov@gmail.com>
Co-authored-by: Nicholas Smith <nick.smith@consensys.net>

Author: 7 people

app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.test.tsx

@@ -41,13 +41,14 @@ jest.mock(
 
 // Mock hooks (consolidated to avoid conflicts)
 const mockNavigateBack = jest.fn();
+const mockNavigateToMarketList = jest.fn();
 jest.mock('../../hooks', () => ({
   usePerpsHomeData: jest.fn(),
   usePerpsMeasurement: jest.fn(),
   usePerpsNavigation: jest.fn(() => ({
     navigateTo: jest.fn(),
     navigateToMarketDetails: jest.fn(),
-    navigateToMarketList: jest.fn(),
+    navigateToMarketList: mockNavigateToMarketList,
     navigateBack: mockNavigateBack,
     goBack: jest.fn(),
   })),
@@ -391,6 +392,7 @@ describe('PerpsHomeView', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     mockNavigateBack.mockClear();
+    mockNavigateToMarketList.mockClear();
     mockUsePerpsHomeData.mockReturnValue(mockDefaultData);
   });
 
@@ -420,32 +422,23 @@ describe('PerpsHomeView', () => {
     expect(getByTestId('perps-home-search-toggle')).toBeTruthy();
   });
 
-  it('toggles search bar visibility when search button is pressed', () => {
+  it('navigates to market list view with search enabled when search button is pressed', () => {
     // Arrange
     const { getByTestId, queryByTestId } = render(<PerpsHomeView />);
 
-    // Act - Initially search should not be visible
+    // Assert - Search bar should not be visible initially
     expect(queryByTestId('perps-home-search-bar')).toBeNull();
 
-    // Press search toggle
+    // Act - Press search toggle
     fireEvent.press(getByTestId('perps-home-search-toggle'));
 
-    // Assert - Search should now be visible
-    expect(getByTestId('perps-home-search-bar')).toBeTruthy();
-  });
-
-  it('hides search bar when toggle is pressed again', () => {
-    // Arrange
-    const { getByTestId, queryByTestId } = render(<PerpsHomeView />);
-
-    // Act - Open search
-    fireEvent.press(getByTestId('perps-home-search-toggle'));
-    expect(getByTestId('perps-home-search-bar')).toBeTruthy();
-
-    // Close search - when search is visible, the toggle becomes cancel button
-    fireEvent.press(getByTestId('perps-home-search-close'));
-
-    // Assert - Search should be hidden
+    // Assert - Should navigate to MarketListView with search enabled
+    expect(mockNavigateToMarketList).toHaveBeenCalledWith({
+      defaultSearchVisible: true,
+      source: 'homescreen_tab',
+      fromHome: true,
+    });
+    // Search bar should still not be visible in HomeView (navigation happens, component doesn't toggle search)
     expect(queryByTestId('perps-home-search-bar')).toBeNull();
   });
 

app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx

@@ -57,17 +57,13 @@ const PerpsHomeView = () => {
   // Use centralized navigation hook
   const perpsNavigation = usePerpsNavigation();
 
-  // Search state
-  const [searchQuery, setSearchQuery] = useState('');
-  const [isSearchVisible, setIsSearchVisible] = useState(false);
-
   // Bottom sheet state and refs
   const [showCloseAllSheet, setShowCloseAllSheet] = useState(false);
   const [showCancelAllSheet, setShowCancelAllSheet] = useState(false);
   const closeAllSheetRef = useRef<BottomSheetRef>(null);
   const cancelAllSheetRef = useRef<BottomSheetRef>(null);
 
-  // Fetch all home screen data with search filtering
+  // Fetch all home screen data
   const {
     positions,
     orders,
@@ -78,9 +74,7 @@ const PerpsHomeView = () => {
     recentActivity,
     sortBy,
     isLoading,
-  } = usePerpsHomeData({
-    searchQuery: isSearchVisible ? searchQuery : '',
-  });
+  } = usePerpsHomeData({});
 
   // Determine if any data is loading for initial load tracking
   // Orders and activity load via WebSocket instantly, only track positions and markets
@@ -105,12 +99,13 @@ const PerpsHomeView = () => {
   });
 
   const handleSearchToggle = useCallback(() => {
-    setIsSearchVisible(!isSearchVisible);
-    if (isSearchVisible) {
-      // Clear search when hiding search bar
-      setSearchQuery('');
-    }
-  }, [isSearchVisible]);
+    // Navigate to MarketListView with search enabled
+    perpsNavigation.navigateToMarketList({
+      defaultSearchVisible: true,
+      source: PerpsEventValues.SOURCE.HOMESCREEN_TAB,
+      fromHome: true,
+    });
+  }, [perpsNavigation]);
 
   const navigtateToTutorial = useCallback(() => {
     navigation.navigate(Routes.PERPS.TUTORIAL, {
@@ -186,10 +181,7 @@ const PerpsHomeView = () => {
     <SafeAreaView style={styles.container}>
       {/* Header - Using extracted component */}
       <PerpsHomeHeader
-        isSearchVisible={isSearchVisible}
-        searchQuery={searchQuery}
-        onSearchQueryChange={setSearchQuery}
-        onSearchClear={() => setSearchQuery('')}
+        isSearchVisible={false}
         onBack={handleBackPress}
         onSearchToggle={handleSearchToggle}
         testID="perps-home"

app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx

@@ -345,18 +345,21 @@ const PerpsMarketListView = ({
   // Use navigation hook for back button
   const handleBackPressed = perpsNavigation.navigateBack;
 
-  const handleSearchToggle = () => {
+  const handleSearchToggle = useCallback(() => {
+    // Toggle search visibility
     toggleSearchVisibility();
 
     if (isSearchVisible) {
+      // When disabling search, clear the query
       clearSearch();
     } else {
+      // When enabling search, track the event
       track(MetaMetricsEvents.PERPS_UI_INTERACTION, {
         [PerpsEventProperties.INTERACTION_TYPE]:
           PerpsEventValues.INTERACTION_TYPE.SEARCH_CLICKED,
       });
     }
-  };
+  }, [isSearchVisible, toggleSearchVisibility, clearSearch, track]);
 
   // Performance tracking: Measure screen load time until market data is displayed
   usePerpsMeasurement({

app/components/UI/Perps/components/PerpsMarketListHeader/PerpsMarketListHeader.tsx

@@ -5,6 +5,7 @@ import {
   Pressable,
   Keyboard,
   TextInput,
+  Platform,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { useStyles } from '../../../../../component-library/hooks';
@@ -96,7 +97,7 @@ const PerpsMarketListHeader: React.FC<PerpsMarketListHeaderProps> = ({
             flexDirection={BoxFlexDirection.Row}
             alignItems={BoxAlignItems.Center}
             style={styles.searchBarContainer}
-            twClassName="flex-1 bg-muted rounded-lg px-3 py-1 mr-2"
+            twClassName={`flex-1 bg-muted rounded-lg ${Platform.OS === 'ios' ? 'py-3' : 'py-1'} px-3 mr-2`}
           >
             <Icon
               name={IconName.Search}

app/components/UI/Perps/types/navigation.ts

@@ -82,6 +82,7 @@ export interface PerpsNavigationParamList extends ParamListBase {
       | 'forex'
       | 'all'
       | 'stocks_and_commodities';
+    fromHome?: boolean;
   };
 
   PerpsMarketDetails: {