fix: remove hip-3 stocks list all filter

nickewansmith · nickewansmith · commit 0eccafad8818 · 2025-11-10T18:22:12.000-06:00
feat: Remove stocks/commodities dropdown and fix FlashList gaps

Changes:
- Remove conditional stocks/commodities dropdown in market list view
  - Set showStocksCommoditiesDropdown to false (always hidden)
  - Add tests to verify dropdown is not shown regardless of market type filter

- Fix FlashList layout gaps in market lists
  - Add drawDistance={200} and removeClippedSubviews props to PerpsMarketList
  - Create marketListConfig.ts for FlashList configuration constants
  - Prevents blank space gaps when searching or scrolling

- Fix pre-existing test failure
  - Refactor "handles search with whitespace" test to use proper mocking
  - Rename to "filters markets with whitespace-only query" for clarity
diff --git a/app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.test.tsx b/app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.test.tsx
@@ -218,12 +218,18 @@ jest.mock('./components/PerpsMarketFiltersBar', () => {
     selectedOptionId,
     onSortPress,
     onWatchlistToggle,
+    showStocksCommoditiesDropdown,
+    stocksCommoditiesFilter,
+    onStocksCommoditiesPress,
     testID,
   }: {
     selectedOptionId: string;
     onSortPress: () => void;
     showWatchlistOnly: boolean;
     onWatchlistToggle: () => void;
+    showStocksCommoditiesDropdown?: boolean;
+    stocksCommoditiesFilter?: 'all' | 'equity' | 'commodity';
+    onStocksCommoditiesPress?: () => void;
     testID?: string;
   }) {
     // Map sort option IDs to display labels
@@ -251,14 +257,31 @@ jest.mock('./components/PerpsMarketFiltersBar', () => {
           displayText,
         ),
       ),
-      MockReact.createElement(
-        RNTouchableOpacity,
-        {
-          testID: testID ? `${testID}-watchlist-toggle` : undefined,
-          onPress: onWatchlistToggle,
-        },
-        MockReact.createElement(Text, null, 'Watchlist'),
-      ),
+      onWatchlistToggle &&
+        MockReact.createElement(
+          RNTouchableOpacity,
+          {
+            testID: testID ? `${testID}-watchlist-toggle` : undefined,
+            onPress: onWatchlistToggle,
+          },
+          MockReact.createElement(Text, null, 'Watchlist'),
+        ),
+      showStocksCommoditiesDropdown &&
+        onStocksCommoditiesPress &&
+        MockReact.createElement(
+          RNTouchableOpacity,
+          {
+            testID: testID
+              ? `${testID}-stocks-commodities-dropdown`
+              : undefined,
+            onPress: onStocksCommoditiesPress,
+          },
+          MockReact.createElement(
+            Text,
+            null,
+            `Stocks/Commodities: ${stocksCommoditiesFilter || 'all'}`,
+          ),
+        ),
     );
   };
 });
@@ -1196,41 +1219,127 @@ describe('PerpsMarketListView', () => {
   // Note: TabBar Navigation tests removed - PerpsMarketListView does not render a bottom tab bar
   // The component only renders market type tabs (All, Crypto, Stocks) for filtering markets
 
-  describe('Edge Cases', () => {
-    it('handles search with whitespace', async () => {
-      const { rerender } = renderWithProvider(<PerpsMarketListView />, {
-        state: mockState,
+  describe('Stocks/Commodities Dropdown', () => {
+    it('does not show stocks/commodities dropdown when showStocksCommoditiesDropdown is false', async () => {
+      renderWithProvider(<PerpsMarketListView />, { state: mockState });
+
+      // Wait for filter bar to render
+      await waitFor(() => {
+        expect(screen.getByText('Volume')).toBeOnTheScreen();
       });
 
-      const searchButton = screen.getByTestId(
-        `${PerpsMarketListViewSelectorsIDs.CLOSE_BUTTON}-search-toggle`,
-      );
+      // Verify stocks/commodities dropdown is not present
+      expect(
+        screen.queryByTestId(
+          `${PerpsMarketListViewSelectorsIDs.SORT_FILTERS}-stocks-commodities-dropdown`,
+        ),
+      ).not.toBeOnTheScreen();
+    });
 
-      // Press search button - this updates mockSearchVisible
-      await act(async () => {
-        fireEvent.press(searchButton);
-        // Force re-render to pick up updated mockSearchVisible
-        rerender(<PerpsMarketListView />);
+    it('does not show stocks/commodities dropdown regardless of market type filter', async () => {
+      const { usePerpsMarketListView } = jest.requireMock('../../hooks');
+
+      // Mock the hook to return stocks_and_commodities as the active filter
+      usePerpsMarketListView.mockReturnValue({
+        markets: mockMarketData,
+        searchState: {
+          searchQuery: '',
+          setSearchQuery: jest.fn(),
+          isSearchVisible: false,
+          setIsSearchVisible: jest.fn(),
+          toggleSearchVisibility: jest.fn(),
+          clearSearch: jest.fn(),
+        },
+        sortState: {
+          selectedOptionId: 'volume',
+          sortBy: 'volume',
+          direction: 'desc',
+          handleOptionChange: jest.fn(),
+        },
+        favoritesState: {
+          showFavoritesOnly: false,
+          setShowFavoritesOnly: jest.fn(),
+        },
+        marketTypeFilterState: {
+          marketTypeFilter: 'stocks_and_commodities',
+          setMarketTypeFilter: jest.fn(),
+        },
+        marketCounts: {
+          crypto: 3,
+          equity: 2,
+          commodity: 1,
+          forex: 0,
+        },
+        isLoading: false,
+        error: null,
+      });
+
+      renderWithProvider(<PerpsMarketListView />, { state: mockState });
+
+      // Wait for filter bar to render
+      await waitFor(() => {
+        expect(screen.getByText('Volume')).toBeOnTheScreen();
       });
 
-      // Wait for search input to appear (mock should now return isSearchVisible: true)
-      await waitFor(
-        () => {
-          const searchInput = screen.getByPlaceholderText(
-            'Search by token symbol',
-          );
-          expect(searchInput).toBeOnTheScreen();
+      // Verify stocks/commodities dropdown is still not present even with stocks_and_commodities filter
+      expect(
+        screen.queryByTestId(
+          `${PerpsMarketListViewSelectorsIDs.SORT_FILTERS}-stocks-commodities-dropdown`,
+        ),
+      ).not.toBeOnTheScreen();
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('filters markets with whitespace-only query', async () => {
+      const { usePerpsMarketListView } = jest.requireMock('../../hooks');
+
+      // Start with search visible
+      mockSearchVisible = true;
+      mockSearchQuery = '   ';
+
+      // Mock to return empty results when search query is whitespace
+      usePerpsMarketListView.mockReturnValue({
+        markets: mockMarketData, // Whitespace is trimmed, so all markets show
+        searchState: {
+          searchQuery: '   ',
+          setSearchQuery: mockSetSearchQuery,
+          isSearchVisible: true,
+          setIsSearchVisible: mockSetIsSearchVisible,
+          toggleSearchVisibility: mockToggleSearchVisibility,
+          clearSearch: mockClearSearch,
         },
-        { timeout: 3000 },
-      );
+        sortState: {
+          selectedOptionId: 'volume',
+          sortBy: 'volume',
+          direction: 'desc',
+          handleOptionChange: jest.fn(),
+        },
+        favoritesState: {
+          showFavoritesOnly: false,
+          setShowFavoritesOnly: jest.fn(),
+        },
+        marketTypeFilterState: {
+          marketTypeFilter: 'all',
+          setMarketTypeFilter: jest.fn(),
+        },
+        marketCounts: {
+          crypto: 3,
+          equity: 0,
+          commodity: 0,
+          forex: 0,
+        },
+        isLoading: false,
+        error: null,
+      });
 
+      renderWithProvider(<PerpsMarketListView />, { state: mockState });
+
+      // Verify search input is visible
       const searchInput = screen.getByPlaceholderText('Search by token symbol');
-      await act(async () => {
-        fireEvent.changeText(searchInput, '   ');
-      });
+      expect(searchInput).toBeOnTheScreen();
 
-      // Wait for markets to appear (whitespace should be trimmed, so all markets show)
-      // Note: Multiple tabs may render, so we check that at least one instance exists
+      // Verify all markets are still displayed (whitespace is trimmed)
       await waitFor(() => {
         const btcRows = screen.queryAllByTestId('market-row-BTC');
         const ethRows = screen.queryAllByTestId('market-row-ETH');
diff --git a/app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx b/app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx
@@ -466,9 +466,7 @@ const PerpsMarketListView = ({
               <PerpsMarketFiltersBar
                 selectedOptionId={selectedOptionId}
                 onSortPress={() => setIsSortFieldSheetVisible(true)}
-                showStocksCommoditiesDropdown={
-                  marketTypeFilter === 'stocks_and_commodities'
-                }
+                showStocksCommoditiesDropdown={false}
                 stocksCommoditiesFilter={stocksCommoditiesFilter}
                 onStocksCommoditiesPress={() =>
                   setIsStocksCommoditiesSheetVisible(true)
diff --git a/app/components/UI/Perps/components/PerpsMarketList/PerpsMarketList.tsx b/app/components/UI/Perps/components/PerpsMarketList/PerpsMarketList.tsx
@@ -9,6 +9,7 @@ import { useStyles } from '../../../../../component-library/hooks';
 import { strings } from '../../../../../../locales/i18n';
 import PerpsMarketRowItem from '../PerpsMarketRowItem';
 import { HOME_SCREEN_CONFIG } from '../../constants/perpsConfig';
+import { PERPS_MARKET_LIST_CONSTANTS } from '../../constants/marketListConfig';
 import styleSheet from './PerpsMarketList.styles';
 import type { PerpsMarketListProps } from './PerpsMarketList.types';
 import type { PerpsMarketData } from '../../controllers/types';
@@ -84,6 +85,8 @@ const PerpsMarketList: React.FC<PerpsMarketListProps> = ({
       contentContainerStyle={[styles.contentContainer, contentContainerStyle]}
       keyboardShouldPersistTaps="handled"
       ListHeaderComponent={ListHeaderComponent}
+      drawDistance={PERPS_MARKET_LIST_CONSTANTS.FLASH_LIST_DRAW_DISTANCE}
+      removeClippedSubviews
       testID={testID}
     />
   );
diff --git a/app/components/UI/Perps/constants/marketListConfig.ts b/app/components/UI/Perps/constants/marketListConfig.ts
@@ -0,0 +1,7 @@
+/**
+ * Market list component configuration constants
+ */
+export const PERPS_MARKET_LIST_CONSTANTS = {
+  FLASH_LIST_DRAW_DISTANCE: 200,
+  FLASH_LIST_SCROLL_EVENT_THROTTLE: 16,
+} as const;
