feat(perps): persist Pro positions sort and side filter prefs

Add positionsSideFilter and positionsSortConfig to proLayoutPreferences so mobile can persist Positions/Orders panel preferences across markets and restarts.

Author: michalconsensys

packages/perps-controller/CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Add `positionsSideFilter` and `positionsSortConfig` to `ProLayoutPreferences` (defaults `'all'` and `{ field: 'positionValue', direction: 'desc' }`) so Pro Positions/Orders panel sort and side-filter preferences persist across markets and app restarts via the existing `getProLayoutPreferences()` / `setProLayoutPreferences(patch)` API; export `ProPositionsSideFilter`, `ProPositionsSortField`, `ProPositionsSortConfig`, `ProLayoutPreferencesPatch`, and `mergeProLayoutPreferences` (deep-merges nested `positionsSortConfig` over defaults for predated persisted state)
 - **BREAKING:** Add strategy placement order types to `OrderType`: `twap`, `scale`, and `chase`, placeable through `placeOrder` alongside the existing `market`, `limit`, and trigger types ([#9832](https://github.com/MetaMask/core/pull/9832))
   - `OrderType` is a wider union again, so — exactly as for the trigger types added in 11.0.0 — any consumer signature that narrows it back to a smaller set no longer accepts a value typed `OrderType`. Such signatures must widen to `OrderType` or narrow explicitly at the call site.
   - A strategy placement expands one request into an execution schedule rather than a single resting order, so `OrderResult.orderId` carries a _handle_ — a venue TWAP id, or a client-generated group/session id — rather than an exchange order id. Its documentation says so; the individual exchange ids are in `childOrderIds`.

packages/perps-controller/src/PerpsController.ts

@@ -24,6 +24,7 @@ import { PerpsMeasurementName } from './constants/performanceMetrics.js';
 import type {
   SortOptionId,
   ProLayoutPreferences,
+  ProLayoutPreferencesPatch,
   PerpsMode,
 } from './constants/perpsConfig.js';
 import {
@@ -35,6 +36,7 @@ import {
   MAX_SLIPPAGE_BOUNDS,
   DEFAULT_PERPS_MODE,
   DEFAULT_PRO_LAYOUT_PREFERENCES,
+  mergeProLayoutPreferences,
 } from './constants/perpsConfig.js';
 import type { PerpsControllerMethodActions } from './PerpsController-method-action-types.js';
 import { PERPS_ERROR_CODES } from './perpsErrorCodes.js';
@@ -249,8 +251,15 @@ export {
   PerpsMode,
   DEFAULT_PERPS_MODE,
   DEFAULT_PRO_LAYOUT_PREFERENCES,
+  mergeProLayoutPreferences,
+} from './constants/perpsConfig.js';
+export type {
+  ProLayoutPreferences,
+  ProLayoutPreferencesPatch,
+  ProPositionsSideFilter,
+  ProPositionsSortConfig,
+  ProPositionsSortField,
 } from './constants/perpsConfig.js';
-export type { ProLayoutPreferences } from './constants/perpsConfig.js';
 
 /**
  * State shape for PerpsController
@@ -5141,26 +5150,33 @@ export class PerpsController extends BaseController<
   getProLayoutPreferences(): ProLayoutPreferences {
     // Merge over defaults so callers always receive a fully-populated object,
     // even if the persisted state predates one of the fields.
-    return {
-      ...DEFAULT_PRO_LAYOUT_PREFERENCES,
-      ...this.state.proLayoutPreferences,
-    };
+    return mergeProLayoutPreferences(this.state.proLayoutPreferences);
   }
 
   /**
    * Update the user's pro-mode layout preferences.
    *
    * Patch-style setter: only the provided fields are updated, the rest are
-   * preserved. This keeps the signature stable as new layout fields are added.
+   * preserved. Nested `positionsSortConfig` is deep-merged so callers can
+   * patch a single sort field without clobbering direction (or vice versa).
+   * This keeps the signature stable as new layout fields are added.
    *
    * @param patch - Partial set of pro-mode layout preferences to update.
    */
-  setProLayoutPreferences(patch: Partial<ProLayoutPreferences>): void {
+  setProLayoutPreferences(patch: ProLayoutPreferencesPatch): void {
     this.update((state) => {
-      state.proLayoutPreferences = {
+      state.proLayoutPreferences = mergeProLayoutPreferences({
         ...state.proLayoutPreferences,
         ...patch,
-      };
+        ...(patch.positionsSortConfig
+          ? {
+              positionsSortConfig: {
+                ...state.proLayoutPreferences.positionsSortConfig,
+                ...patch.positionsSortConfig,
+              },
+            }
+          : {}),
+      });
     });
   }
 

packages/perps-controller/src/constants/perpsConfig.ts

@@ -486,19 +486,45 @@ export enum PerpsMode {
   Pro = 'pro',
 }
 
+/**
+ * Side filter for the Pro Positions/Orders panel (long/short/all).
+ *
+ * Shared across markets via `proLayoutPreferences.positionsSideFilter`.
+ */
+export type ProPositionsSideFilter = 'all' | 'long' | 'short';
+
+/**
+ * Sort fields available on the Pro Positions list.
+ */
+export type ProPositionsSortField =
+  | 'positionValue'
+  | 'unrealizedPnl'
+  | 'fundingRate';
+
+/**
+ * Sort configuration for the Pro Positions list.
+ */
+export type ProPositionsSortConfig = {
+  field: ProPositionsSortField;
+  direction: 'asc' | 'desc';
+};
+
 /**
  * Pro-mode layout preferences (network-independent).
  *
- * Flat object that persists across markets (unlike the per-market
- * `tradeConfigurations`). `chartExpanded` and the `*Position` fields are
- * reserved for future container-position UI and are kept here now so no
- * state-shape migration is needed when that UI ships.
+ * Persists across markets (unlike the per-market `tradeConfigurations`).
+ * `chartExpanded` and the `*Position` fields are reserved for future
+ * container-position UI. `positionsSideFilter` / `positionsSortConfig` back
+ * the Positions/Orders panel sort and side filter so they survive market
+ * navigation and app restarts.
  */
 export type ProLayoutPreferences = {
   orderBookExpanded: boolean;
   chartExpanded: boolean;
   orderBookPosition: 'left' | 'right';
   orderFormPosition: 'left' | 'right';
+  positionsSideFilter: ProPositionsSideFilter;
+  positionsSortConfig: ProPositionsSortConfig;
 };
 
 /**
@@ -513,8 +539,45 @@ export const DEFAULT_PRO_LAYOUT_PREFERENCES: ProLayoutPreferences = {
   chartExpanded: false,
   orderBookPosition: 'left',
   orderFormPosition: 'right',
+  positionsSideFilter: 'all',
+  positionsSortConfig: {
+    field: 'positionValue',
+    direction: 'desc',
+  },
 };
 
+/**
+ * Patch shape for `setProLayoutPreferences`.
+ *
+ * Top-level fields are optional; nested `positionsSortConfig` may also be
+ * partially specified so a caller can update only `field` or only `direction`.
+ */
+export type ProLayoutPreferencesPatch = Partial<
+  Omit<ProLayoutPreferences, 'positionsSortConfig'>
+> & {
+  positionsSortConfig?: Partial<ProPositionsSortConfig>;
+};
+
+/**
+ * Merge a partial/persisted pro-layout preference blob over defaults.
+ *
+ * Nested `positionsSortConfig` is deep-merged so a persisted object that
+ * predates one of its fields still yields a fully-populated config.
+ *
+ * @param prefs - Partial preferences from persisted state or a setter patch.
+ * @returns A fully-populated `ProLayoutPreferences` object.
+ */
+export const mergeProLayoutPreferences = (
+  prefs?: ProLayoutPreferencesPatch | null,
+): ProLayoutPreferences => ({
+  ...DEFAULT_PRO_LAYOUT_PREFERENCES,
+  ...prefs,
+  positionsSortConfig: {
+    ...DEFAULT_PRO_LAYOUT_PREFERENCES.positionsSortConfig,
+    ...prefs?.positionsSortConfig,
+  },
+});
+
 /**
  * Default Perps interface mode.
  */

packages/perps-controller/src/index.ts

@@ -35,6 +35,7 @@ export {
   PerpsMode,
   DEFAULT_PERPS_MODE,
   DEFAULT_PRO_LAYOUT_PREFERENCES,
+  mergeProLayoutPreferences,
 } from './PerpsController.js';
 export type {
   PerpsControllerState,
@@ -44,6 +45,10 @@ export type {
   PerpsControllerActions,
   PerpsControllerEvents,
   ProLayoutPreferences,
+  ProLayoutPreferencesPatch,
+  ProPositionsSideFilter,
+  ProPositionsSortConfig,
+  ProPositionsSortField,
 } from './PerpsController.js';
 export type {
   PerpsControllerCalculateFeesAction,

packages/perps-controller/src/selectors.ts

@@ -4,8 +4,8 @@ import {
   MARKET_SORTING_CONFIG,
   PERPS_CONSTANTS,
   SortOptionId,
-  DEFAULT_PRO_LAYOUT_PREFERENCES,
   DEFAULT_PERPS_MODE,
+  mergeProLayoutPreferences,
 } from './constants/perpsConfig.js';
 import type {
   PerpsMode,
@@ -249,10 +249,8 @@ export const selectMarketFilterPreferences = (
  */
 export const selectProLayoutPreferences = (
   state: PerpsControllerState,
-): ProLayoutPreferences => ({
-  ...DEFAULT_PRO_LAYOUT_PREFERENCES,
-  ...state?.proLayoutPreferences,
-});
+): ProLayoutPreferences =>
+  mergeProLayoutPreferences(state?.proLayoutPreferences);
 
 /**
  * Select the current Perps interface mode (lite/pro).

packages/perps-controller/tests/src/PerpsController.configuration.test.ts

@@ -694,12 +694,17 @@ describe('PerpsController', () => {
   });
 
   describe('pro layout preferences', () => {
-    it('defaults to collapsed order book, collapsed chart, and reserved positions', () => {
+    it('defaults to collapsed order book, collapsed chart, reserved positions, and positions sort/filter defaults', () => {
       expect(controller.getProLayoutPreferences()).toEqual({
         orderBookExpanded: false,
         chartExpanded: false,
         orderBookPosition: 'left',
         orderFormPosition: 'right',
+        positionsSideFilter: 'all',
+        positionsSortConfig: {
+          field: 'positionValue',
+          direction: 'desc',
+        },
       });
     });
 
@@ -711,19 +716,47 @@ describe('PerpsController', () => {
         chartExpanded: false,
         orderBookPosition: 'left',
         orderFormPosition: 'right',
+        positionsSideFilter: 'all',
+        positionsSortConfig: {
+          field: 'positionValue',
+          direction: 'desc',
+        },
       });
     });
 
     it('merges successive partial patches', () => {
       controller.setProLayoutPreferences({ orderBookExpanded: true });
       controller.setProLayoutPreferences({ orderBookPosition: 'right' });
       controller.setProLayoutPreferences({ orderFormPosition: 'left' });
+      controller.setProLayoutPreferences({ positionsSideFilter: 'long' });
+      controller.setProLayoutPreferences({
+        positionsSortConfig: { field: 'unrealizedPnl', direction: 'asc' },
+      });
 
       expect(controller.getProLayoutPreferences()).toEqual({
         orderBookExpanded: true,
         chartExpanded: false,
         orderBookPosition: 'right',
         orderFormPosition: 'left',
+        positionsSideFilter: 'long',
+        positionsSortConfig: {
+          field: 'unrealizedPnl',
+          direction: 'asc',
+        },
+      });
+    });
+
+    it('deep-merges positionsSortConfig so a partial sort patch preserves the other field', () => {
+      controller.setProLayoutPreferences({
+        positionsSortConfig: { field: 'fundingRate', direction: 'asc' },
+      });
+      controller.setProLayoutPreferences({
+        positionsSortConfig: { field: 'unrealizedPnl' },
+      });
+
+      expect(controller.getProLayoutPreferences().positionsSortConfig).toEqual({
+        field: 'unrealizedPnl',
+        direction: 'asc',
       });
     });
 
@@ -746,6 +779,38 @@ describe('PerpsController', () => {
         chartExpanded: false,
         orderBookPosition: 'left',
         orderFormPosition: 'right',
+        positionsSideFilter: 'all',
+        positionsSortConfig: {
+          field: 'positionValue',
+          direction: 'desc',
+        },
+      });
+    });
+
+    it('fills in nested positionsSortConfig defaults when only field is persisted', () => {
+      controller.testUpdate((state) => {
+        state.proLayoutPreferences = {
+          orderBookExpanded: false,
+          chartExpanded: false,
+          orderBookPosition: 'left',
+          orderFormPosition: 'right',
+          positionsSideFilter: 'short',
+          positionsSortConfig: {
+            field: 'fundingRate',
+          },
+        } as PerpsControllerState['proLayoutPreferences'];
+      });
+
+      expect(controller.getProLayoutPreferences()).toEqual({
+        orderBookExpanded: false,
+        chartExpanded: false,
+        orderBookPosition: 'left',
+        orderFormPosition: 'right',
+        positionsSideFilter: 'short',
+        positionsSortConfig: {
+          field: 'fundingRate',
+          direction: 'desc',
+        },
       });
     });
   });

packages/perps-controller/tests/src/selectors.test.ts

@@ -636,6 +636,11 @@ describe('PerpsController selectors', () => {
       chartExpanded: false,
       orderBookPosition: 'left',
       orderFormPosition: 'right',
+      positionsSideFilter: 'all',
+      positionsSortConfig: {
+        field: 'positionValue',
+        direction: 'desc',
+      },
     };
 
     it('returns the pro-mode layout preferences', () => {
@@ -644,6 +649,11 @@ describe('PerpsController selectors', () => {
         chartExpanded: true,
         orderBookPosition: 'right' as const,
         orderFormPosition: 'left' as const,
+        positionsSideFilter: 'long' as const,
+        positionsSortConfig: {
+          field: 'unrealizedPnl' as const,
+          direction: 'asc' as const,
+        },
       };
       const state = {
         proLayoutPreferences,
@@ -665,6 +675,24 @@ describe('PerpsController selectors', () => {
       });
     });
 
+    it('deep-merges nested positionsSortConfig defaults', () => {
+      const state = {
+        proLayoutPreferences: {
+          positionsSideFilter: 'short',
+          positionsSortConfig: { field: 'fundingRate' },
+        },
+      } as unknown as PerpsControllerState;
+
+      expect(selectProLayoutPreferences(state)).toStrictEqual({
+        ...defaults,
+        positionsSideFilter: 'short',
+        positionsSortConfig: {
+          field: 'fundingRate',
+          direction: 'desc',
+        },
+      });
+    });
+
     it('returns defaults when the state slice is missing', () => {
       const state = {} as unknown as PerpsControllerState;