chore: add gainers and losers section in Explore/Now (MetaMask#30837)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

Add gainers and losers section in Explore/Now

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: add gainers and losers section in Explore/Now

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-3298

## **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**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] 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]
> **Low Risk**
> UI and navigation param changes in Explore/Perps with no auth,
payments, or data-persistence logic beyond existing sort preferences.
> 
> **Overview**
> **Explore → Now** adds **Gainers / Losers** pills on **Perps movers**,
filters markets by sign of 24h price change, and sorts gainers
descending / losers ascending via new
`filterAndSortByPriceChangeDirection` in `usePerpsFeed`.
> 
> **View all** now opens the perps market list with matching sort:
`navigateToPerpsMarketList` takes an options object (`sortDirection`,
optional `source`) and passes `defaultSortDirection` through navigation
into `usePerpsMarketListView`, so list ordering aligns with the selected
pill (not only saved user prefs). Copy added for the new pill labels in
`en.json`.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
61a03c3. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: juanmigdr

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

@@ -498,6 +498,11 @@ describe('PerpsMarketListView', () => {
   >;
   const { useRoute } = jest.requireMock('@react-navigation/native');
   const mockUseRoute = useRoute as jest.MockedFunction<typeof useRoute>;
+  const { usePerpsMarketListView } = jest.requireMock('../../hooks');
+  const mockUsePerpsMarketListView =
+    usePerpsMarketListView as jest.MockedFunction<
+      typeof usePerpsMarketListView
+    >;
 
   const mockMarketData: PerpsMarketData[] = [
     {
@@ -623,6 +628,26 @@ describe('PerpsMarketListView', () => {
       });
     });
 
+    it('passes default sort params from route to market list hook', () => {
+      mockUseRoute.mockReturnValue({
+        key: 'PerpsMarketListView-123',
+        name: 'PerpsMarketListView',
+        params: {
+          defaultSortOptionId: 'priceChange',
+          defaultSortDirection: 'asc',
+        },
+      });
+
+      renderWithProvider(<PerpsMarketListView />, { state: mockState });
+
+      expect(mockUsePerpsMarketListView).toHaveBeenCalledWith(
+        expect.objectContaining({
+          defaultSortOptionId: 'priceChange',
+          defaultSortDirection: 'asc',
+        }),
+      );
+    });
+
     it('renders interactive elements', async () => {
       renderWithProvider(<PerpsMarketListView />, { state: mockState });
 
@@ -849,12 +874,10 @@ describe('PerpsMarketListView', () => {
 
   describe('Edge Cases', () => {
     it('filters markets with whitespace-only query', async () => {
-      const { usePerpsMarketListView } = jest.requireMock('../../hooks');
-
       mockSearchQuery = '   ';
 
       // Mock to return empty results when search query is whitespace
-      usePerpsMarketListView.mockReturnValue({
+      mockUsePerpsMarketListView.mockReturnValue({
         markets: mockMarketData, // Whitespace is trimmed, so all markets show
         searchState: {
           searchQuery: '   ',

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

@@ -68,6 +68,7 @@ const PerpsMarketListView = ({
   const defaultMarketTypeFilter =
     route.params?.defaultMarketTypeFilter ?? 'all';
   const defaultSortOptionId = route.params?.defaultSortOptionId;
+  const defaultSortDirection = route.params?.defaultSortDirection;
   const transactionActiveAbTests = route.params?.transactionActiveAbTests;
 
   const fadeAnimation = useRef(new Animated.Value(0)).current;
@@ -87,6 +88,7 @@ const PerpsMarketListView = ({
     showWatchlistOnly,
     defaultMarketTypeFilter,
     defaultSortOptionId,
+    defaultSortDirection,
     showZeroVolume: __DEV__,
   });
 

app/components/UI/Perps/hooks/usePerpsMarketListView.test.ts

@@ -327,6 +327,29 @@ describe('usePerpsMarketListView', () => {
       });
     });
 
+    it('defaultSortDirection overrides saved direction when provided', () => {
+      let selectorCallCount = 0;
+      mockUseSelector.mockImplementation(() => {
+        selectorCallCount++;
+        if (selectorCallCount % 2 === 1) {
+          return ['BTC'];
+        }
+        return { optionId: 'priceChange', direction: 'desc' };
+      });
+
+      renderHook(() =>
+        usePerpsMarketListView({
+          defaultSortOptionId: 'priceChange',
+          defaultSortDirection: 'asc',
+        }),
+      );
+
+      expect(mockUsePerpsSorting).toHaveBeenCalledWith({
+        initialOptionId: 'priceChange',
+        initialDirection: 'asc',
+      });
+    });
+
     it('preserves saved direction when defaultSortOptionId matches the saved option', () => {
       let selectorCallCount = 0;
       mockUseSelector.mockImplementation(() => {

app/components/UI/Perps/hooks/usePerpsMarketListView.ts

@@ -39,6 +39,11 @@ interface UsePerpsMarketListViewParams {
    * @default undefined (falls back to saved user preference)
    */
   defaultSortOptionId?: SortOptionId;
+  /**
+   * Initial sort direction — overrides the persisted user preference when provided.
+   * @default undefined (falls back to saved user preference/default override behavior)
+   */
+  defaultSortDirection?: SortDirection;
   /**
    * Show markets with $0.00 volume
    * @default false
@@ -140,6 +145,7 @@ export const usePerpsMarketListView = ({
   showWatchlistOnly = false,
   defaultMarketTypeFilter = 'all',
   defaultSortOptionId,
+  defaultSortDirection,
   showZeroVolume = false,
 }: UsePerpsMarketListViewParams = {}): UsePerpsMarketListViewReturn => {
   // Fetch markets data
@@ -205,18 +211,21 @@ export const usePerpsMarketListView = ({
 
   // Use sorting hook for sort state and sorting logic.
   // defaultSortOptionId (from navigation params) takes precedence over the saved user
-  // preference. When it overrides a *different* option, reset direction to the default
-  // so the market list opens sorted the same way the explore feed displayed it (always desc).
-  // When there is no override, or the override matches the saved option, carry the saved direction.
+  // preference. A route-provided direction also takes precedence so Explore can
+  // open the market list with the same ordering as the source section.
+  // Without an explicit direction, reset changed sort options to the default
+  // direction; otherwise carry the saved direction.
   const isOptionOverridden =
     defaultSortOptionId !== undefined &&
     defaultSortOptionId !== savedSortPreference.optionId;
   const sortingHook = usePerpsSorting({
     initialOptionId: (defaultSortOptionId ??
       savedSortPreference.optionId) as SortOptionId,
-    initialDirection: isOptionOverridden
-      ? MARKET_SORTING_CONFIG.DefaultDirection
-      : savedSortPreference.direction,
+    initialDirection:
+      defaultSortDirection ??
+      (isOptionOverridden
+        ? MARKET_SORTING_CONFIG.DefaultDirection
+        : savedSortPreference.direction),
   });
 
   // Wrap handleOptionChange to save preference to PerpsController

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

@@ -5,6 +5,7 @@ import {
   type OrderType,
   type PerpsMarketData,
   type TPSLTrackingData,
+  type SortDirection,
   type SortOptionId,
 } from '@metamask/perps-controller';
 import { PerpsTransaction } from './transactionHistory';
@@ -93,6 +94,7 @@ export interface PerpsNavigationParamList extends ParamListBase {
       | 'forex'
       | 'new';
     defaultSortOptionId?: SortOptionId;
+    defaultSortDirection?: SortDirection;
     fromHome?: boolean;
     button_clicked?: string;
     button_location?: string;

app/components/Views/TrendingView/feeds/perps/perpsNavigation.test.ts

@@ -64,12 +64,9 @@ describe('navigateToPerpsMarketList', () => {
       navigate,
     } as unknown as NavigationProp<PerpsNavigationParamList>;
 
-    navigateToPerpsMarketList(
-      navigation,
-      'all',
-      'priceChange',
-      PERPS_EVENT_VALUE.SOURCE.HOME_SECTION,
-    );
+    navigateToPerpsMarketList(navigation, 'all', 'priceChange', {
+      source: PERPS_EVENT_VALUE.SOURCE.HOME_SECTION,
+    });
 
     expect(navigate).toHaveBeenCalledWith(
       Routes.PERPS.ROOT,
@@ -88,12 +85,9 @@ describe('navigateToPerpsMarketList', () => {
       navigate,
     } as unknown as NavigationProp<PerpsNavigationParamList>;
 
-    navigateToPerpsMarketList(
-      navigation,
-      'all',
-      undefined,
-      PERPS_EVENT_VALUE.SOURCE.HOME_SECTION,
-    );
+    navigateToPerpsMarketList(navigation, 'all', undefined, {
+      source: PERPS_EVENT_VALUE.SOURCE.HOME_SECTION,
+    });
 
     expect(navigate).toHaveBeenCalledWith(Routes.PERPS.ROOT, {
       screen: Routes.PERPS.MARKET_LIST,
@@ -103,4 +97,24 @@ describe('navigateToPerpsMarketList', () => {
       },
     });
   });
+
+  it('passes a custom sort direction', () => {
+    const navigate = jest.fn();
+    const navigation = {
+      navigate,
+    } as unknown as NavigationProp<PerpsNavigationParamList>;
+
+    navigateToPerpsMarketList(navigation, 'all', 'priceChange', {
+      sortDirection: 'asc',
+    });
+
+    expect(navigate).toHaveBeenCalledWith(
+      Routes.PERPS.ROOT,
+      expect.objectContaining({
+        params: expect.objectContaining({
+          defaultSortDirection: 'asc',
+        }),
+      }),
+    );
+  });
 });

app/components/Views/TrendingView/feeds/perps/perpsNavigation.ts

@@ -1,6 +1,7 @@
 import { NavigationProp } from '@react-navigation/native';
 import {
   PERPS_EVENT_VALUE,
+  type SortDirection,
   type SortOptionId,
 } from '@metamask/perps-controller';
 import type { PerpsNavigationParamList } from '../../../../UI/Perps/types/navigation';
@@ -9,19 +10,30 @@ import Routes from '../../../../../constants/navigation/Routes';
 type PerpsNavigationSource =
   (typeof PERPS_EVENT_VALUE.SOURCE)[keyof typeof PERPS_EVENT_VALUE.SOURCE];
 
+interface NavigateToPerpsMarketListOptions {
+  source?: PerpsNavigationSource;
+  sortDirection?: SortDirection;
+}
+
 /** Navigate to the perps market list, optionally pre-filtering by market type and pre-sorting by a sort option. */
 export const navigateToPerpsMarketList = (
   navigation: NavigationProp<PerpsNavigationParamList>,
   filter: string = 'all',
   sortOptionId?: SortOptionId,
-  source: PerpsNavigationSource = PERPS_EVENT_VALUE.SOURCE.EXPLORE,
+  {
+    source = PERPS_EVENT_VALUE.SOURCE.EXPLORE,
+    sortDirection,
+  }: NavigateToPerpsMarketListOptions = {},
 ): void => {
   navigation.navigate(Routes.PERPS.ROOT, {
     screen: Routes.PERPS.MARKET_LIST,
     params: {
       defaultMarketTypeFilter: filter,
       source,
       ...(sortOptionId !== undefined && { defaultSortOptionId: sortOptionId }),
+      ...(sortDirection !== undefined && {
+        defaultSortDirection: sortDirection,
+      }),
     },
   });
 };

app/components/Views/TrendingView/feeds/perps/usePerpsFeed.test.ts

@@ -10,7 +10,11 @@
 
 import { renderHook } from '@testing-library/react-hooks';
 import type { PerpsMarketData } from '@metamask/perps-controller';
-import { usePerpsFeed, PERPS_VARIANT_SORT_OPTION } from './usePerpsFeed';
+import {
+  filterAndSortByPriceChangeDirection,
+  usePerpsFeed,
+  PERPS_VARIANT_SORT_OPTION,
+} from './usePerpsFeed';
 
 // ---------------------------------------------------------------------------
 // Core dependency mocks
@@ -140,6 +144,36 @@ describe('usePerpsFeed', () => {
     });
   });
 
+  describe('price-change mover filtering', () => {
+    it('filters gainers to positive price changes sorted descending', () => {
+      const markets = [
+        makeMarket('LOSER', '-3', 100),
+        makeMarket('HIGH_GAINER', '5', 50),
+        makeMarket('LOW_GAINER', '1', 75),
+      ];
+
+      expect(
+        filterAndSortByPriceChangeDirection(markets, 'gainers').map(
+          (market) => market.symbol,
+        ),
+      ).toEqual(['HIGH_GAINER', 'LOW_GAINER']);
+    });
+
+    it('filters losers to negative price changes sorted ascending', () => {
+      const markets = [
+        makeMarket('GAINER', '3', 100),
+        makeMarket('SMALL_LOSER', '-1', 50),
+        makeMarket('BIG_LOSER', '-7', 75),
+      ];
+
+      expect(
+        filterAndSortByPriceChangeDirection(markets, 'losers').map(
+          (market) => market.symbol,
+        ),
+      ).toEqual(['BIG_LOSER', 'SMALL_LOSER']);
+    });
+  });
+
   describe('query path', () => {
     it('preserves Fuse.js relevance order for non-macro variants', () => {
       const markets = [

app/components/Views/TrendingView/feeds/perps/usePerpsFeed.ts

@@ -3,6 +3,7 @@ import { useSelector } from 'react-redux';
 import {
   filterMarketsByQuery,
   type PerpsMarketData,
+  type SortDirection,
   type SortOptionId,
 } from '@metamask/perps-controller';
 import { usePerpsMarkets } from '../../../../UI/Perps/hooks';
@@ -22,6 +23,7 @@ export type { PerpsFeedItem } from '../../../../UI/Perps/types/perpsFeedTypes';
 const EMPTY_WATCHLIST_SYMBOLS: string[] = [];
 
 export type PerpsVariant = 'all' | 'crypto' | 'rwa' | 'macro';
+export type PerpsPriceChangeDirection = 'gainers' | 'losers';
 
 interface UsePerpsFeedOptions {
   /** @default 'all' */
@@ -57,6 +59,14 @@ export const PERPS_VARIANT_SORT_OPTION: Record<PerpsVariant, SortOptionId> = {
   macro: 'volume',
 };
 
+export const PERPS_PRICE_CHANGE_SORT_DIRECTION: Record<
+  PerpsPriceChangeDirection,
+  SortDirection
+> = {
+  gainers: 'desc',
+  losers: 'asc',
+};
+
 const sortByVolumeDesc = (a: PerpsMarketData, b: PerpsMarketData) => {
   const av = (a as PerpsMarketDataWithVolumeNumber).volumeNumber ?? 0;
   const bv = (b as PerpsMarketDataWithVolumeNumber).volumeNumber ?? 0;
@@ -66,6 +76,9 @@ const sortByVolumeDesc = (a: PerpsMarketData, b: PerpsMarketData) => {
 const sortByChange24hDesc = (a: PerpsMarketData, b: PerpsMarketData) =>
   (parseFloat(b.change24hPercent) || 0) - (parseFloat(a.change24hPercent) || 0);
 
+const sortByChange24hAsc = (a: PerpsMarketData, b: PerpsMarketData) =>
+  (parseFloat(a.change24hPercent) || 0) - (parseFloat(b.change24hPercent) || 0);
+
 /** Maps each SortOptionId to the comparator used inside the feed. */
 const SORT_FNS: Record<
   SortOptionId,
@@ -101,6 +114,22 @@ const filterByVariant = (
   }
 };
 
+export const filterAndSortByPriceChangeDirection = (
+  markets: PerpsMarketData[],
+  priceChangeDirection: PerpsPriceChangeDirection,
+) => {
+  switch (priceChangeDirection) {
+    case 'gainers':
+      return markets
+        .filter((market) => parseFloat(market.change24hPercent) > 0)
+        .sort(sortByChange24hDesc);
+    case 'losers':
+      return markets
+        .filter((market) => parseFloat(market.change24hPercent) < 0)
+        .sort(sortByChange24hAsc);
+  }
+};
+
 /**
  * Perps markets feed. Returns enriched items (market + optional sparkline +
  * watchlist flag) so consumers don't have to stitch data themselves.