fix e2e

Author: racitores

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

@@ -9,6 +9,7 @@ import { useAssetFromTheme } from '../../../../../util/theme';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import emptyStatePerpsLight from '../../../../../images/empty-state-perps-light.png';
 import emptyStatePerpsDark from '../../../../../images/empty-state-perps-dark.png';
+import { PerpsTabViewSelectorsIDs } from '../../../../../../e2e/selectors/Perps/Perps.selectors';
 
 export interface PerpsEmptyStateProps extends TabEmptyStateProps {
   testID?: string;
@@ -34,6 +35,9 @@ export const PerpsEmptyState: React.FC<PerpsEmptyStateProps> = ({
       }
       description={strings('perps.position.list.first_time_description')}
       actionButtonText={strings('perps.position.list.start_trading')}
+      actionButtonProps={{
+        testID: PerpsTabViewSelectorsIDs.ONBOARDING_BUTTON,
+      }}
       testID={testID}
       {...props}
     />

e2e/controller-mocking/mock-config/perps-controller-mixin.ts

@@ -18,7 +18,7 @@ import type {
   ClosePositionParams,
   LiquidationPriceParams,
   Funding,
-} from '../../../app/components/UI/Perps/controllers/types';
+ UpdatePositionTPSLParams } from '../../../app/components/UI/Perps/controllers/types';
 import type { PerpsControllerState } from '../../../app/components/UI/Perps/controllers/PerpsController';
 
 // Interface for controller with update method access
@@ -93,8 +93,10 @@ export class E2EControllerOverrides {
 
   // Mock historical orders
   async getOrders(): Promise<Order[]> {
-    const orders = this.mockService.getMockOrders();
-    return orders;
+    // Return combined open orders and historical (canceled/filled) orders
+    const openOrders = this.mockService.getMockOrders();
+    const historicalOrders = this.mockService.getMockOrdersHistory();
+    return [...openOrders, ...historicalOrders];
   }
 
   // Mock historical order fills (trades)
@@ -155,6 +157,32 @@ export class E2EControllerOverrides {
     return result;
   }
 
+  // Mock cancel order
+  async cancelOrder(params: {
+    orderId: string;
+    coin: string;
+  }): Promise<OrderResult> {
+    const result = await this.mockService.mockCancelOrder(params.orderId);
+    return result;
+  }
+
+  // Mock TP/SL update creating trigger orders
+  async updatePositionTPSL(
+    params: UpdatePositionTPSLParams,
+  ): Promise<OrderResult> {
+    const result = await this.mockService.mockUpdatePositionTPSL(params);
+    // Refresh Redux positions after TP/SL changes
+    const mockPositions = this.mockService.getMockPositions();
+    (this.controller as ControllerWithUpdate).update(
+      (state: PerpsControllerState) => {
+        state.positions = mockPositions;
+        state.lastUpdateTimestamp = Date.now();
+        state.lastError = null;
+      },
+    );
+    return result;
+  }
+
   // Mock account subscription
   subscribeToAccount(params: {
     callback: (data: AccountState) => void;
@@ -232,10 +260,16 @@ export function applyE2EPerpsControllerMocks(controller: unknown): void {
   // Override key methods with E2E mocks
   const methodsToOverride = [
     'placeOrder',
+    'cancelOrder',
     'getAccountState',
     'getPositions',
     'closePosition',
+    'updatePositionTPSL',
     'calculateLiquidationPrice',
+    // Activity > Perps data sources
+    'getOrders',
+    'getOrderFills',
+    'getFunding',
     'subscribeToAccount',
     'subscribeToPositions',
     'subscribeToOrders',

e2e/controller-mocking/mock-responses/perps/perps-e2e-mocks.ts

@@ -18,7 +18,7 @@ import type {
   WithdrawParams,
   WithdrawResult,
   Funding,
-} from '../../../../app/components/UI/Perps/controllers/types';
+ UpdatePositionTPSLParams } from '../../../../app/components/UI/Perps/controllers/types';
 
 export class PerpsE2EMockService {
   private static instance: PerpsE2EMockService;
@@ -36,6 +36,8 @@ export class PerpsE2EMockService {
 
   private mockPositions: Position[] = [];
   private mockOrders: Order[] = [];
+  // Historical orders (canceled/filled/etc.) for Activity > Orders
+  private mockOrdersHistory: Order[] = [];
   private mockOrderFills: OrderFill[] = [];
   private mockPricesMap: Record<string, PriceUpdate> = {};
   private orderMeta: Record<string, { leverage: number }> = {};
@@ -83,49 +85,19 @@ export class PerpsE2EMockService {
     if (profile === 'no-funds' || profile === 'no-positions') {
       this.mockPositions = [];
     } else if (profile === 'position-testing') {
-      // Rich set of positions for UI validation
+      // Requested scenario for tests: one BTC long position, open ETH and SOL limit orders
       this.mockPositions = [
-        {
-          coin: 'ETH',
-          entryPrice: '2500.00',
-          size: '1.0', // long
-          positionValue: '2500.00',
-          unrealizedPnl: '125.00',
-          marginUsed: '833.33',
-          leverage: { type: 'cross', value: 3 },
-          liquidationPrice: '2000.00',
-          maxLeverage: 40,
-          returnOnEquity: '0.05', // 5%
-          cumulativeFunding: { allTime: '0', sinceChange: '0', sinceOpen: '0' },
-          takeProfitCount: 0,
-          stopLossCount: 0,
-        },
         {
           coin: 'BTC',
           entryPrice: '45000.00',
-          size: '-0.05', // short
-          positionValue: '2250.00',
-          unrealizedPnl: '-50.00',
-          marginUsed: '225.00',
-          leverage: { type: 'cross', value: 10 },
-          liquidationPrice: '47250.00',
-          maxLeverage: 40,
-          returnOnEquity: '-0.02', // -2%
-          cumulativeFunding: { allTime: '0', sinceChange: '0', sinceOpen: '0' },
-          takeProfitCount: 0,
-          stopLossCount: 0,
-        },
-        {
-          coin: 'SOL',
-          entryPrice: '100.00',
-          size: '5', // long
-          positionValue: '500.00',
-          unrealizedPnl: '25.00',
-          marginUsed: '25.00',
-          leverage: { type: 'cross', value: 20 },
-          liquidationPrice: '80.00',
+          size: '0.10', // long BTC
+          positionValue: '4500.00',
+          unrealizedPnl: '150.00',
+          marginUsed: '900.00',
+          leverage: { type: 'cross', value: 5 },
+          liquidationPrice: '36000.00',
           maxLeverage: 40,
-          returnOnEquity: '0.10', // 10%
+          returnOnEquity: '0.167',
           cumulativeFunding: { allTime: '0', sinceChange: '0', sinceOpen: '0' },
           takeProfitCount: 0,
           stopLossCount: 0,
@@ -165,6 +137,7 @@ export class PerpsE2EMockService {
     };
 
     this.mockOrders = [];
+    this.mockOrdersHistory = [];
     this.mockOrderFills = [];
     this.orderIdCounter = 1;
     this.fillIdCounter = 1;
@@ -177,6 +150,57 @@ export class PerpsE2EMockService {
 
     // Initialize price map with default prices
     this.mockPricesMap = this.buildDefaultPrices();
+
+    // Seed default historical/open orders only when not explicitly requesting an empty profile
+    if (profile !== 'no-positions') {
+      // 1) Default trade (fill): Opened long BTC with a small fee
+      const defaultTrade: OrderFill = {
+        orderId: `seed_fill_${Date.now()}`,
+        symbol: 'BTC',
+        size: '0.01',
+        price: '45000.00',
+        timestamp: Date.now() - 60 * 60 * 1000, // 1 hour ago
+        side: 'buy',
+        fee: '1.25',
+        feeToken: 'USDC',
+        pnl: '0.00',
+        direction: 'Open Long',
+      };
+      this.mockOrderFills.push(defaultTrade);
+
+      // 2) Open orders: ETH and SOL limit longs
+      const seedNow = Date.now();
+      const ethOrder: Order = {
+        orderId: `seed_order_eth_${seedNow}`,
+        symbol: 'ETH',
+        side: 'buy',
+        orderType: 'limit',
+        size: '0.50',
+        originalSize: '0.50',
+        price: '2400.00',
+        filledSize: '0',
+        remainingSize: '0.50',
+        status: 'open',
+        timestamp: seedNow - 30 * 60 * 1000,
+        isTrigger: false,
+      };
+      const solOrder: Order = {
+        orderId: `seed_order_sol_${seedNow}`,
+        symbol: 'SOL',
+        side: 'buy',
+        orderType: 'limit',
+        size: '10',
+        originalSize: '10',
+        price: '95.00',
+        filledSize: '0',
+        remainingSize: '10',
+        status: 'open',
+        timestamp: seedNow - 25 * 60 * 1000,
+        isTrigger: false,
+      };
+      this.mockOrders.push(ethOrder);
+      this.mockOrders.push(solOrder);
+    }
   }
 
   // Mock successful order placement
@@ -258,7 +282,7 @@ export class PerpsE2EMockService {
     // Add to mock state
     this.mockPositions.push(mockPosition);
 
-    // Create mock order fill
+    // Create mock order fill (market execution)
     const mockFill: OrderFill = {
       orderId,
       symbol: params.coin,
@@ -269,7 +293,7 @@ export class PerpsE2EMockService {
       fee: '2.50',
       feeToken: 'USDC',
       pnl: '0.00',
-      direction: params.isBuy ? 'long' : 'short',
+      direction: params.isBuy ? 'Open Long' : 'Open Short',
     };
 
     this.mockOrderFills.push(mockFill);
@@ -322,7 +346,9 @@ export class PerpsE2EMockService {
    * Mock deposit in USD into the perps trading account.
    * Increases both availableBalance and totalBalance by the provided fiat amount.
    */
-  public async mockDepositUSD(amountFiat: string): Promise<{ success: boolean }>{
+  public async mockDepositUSD(
+    amountFiat: string,
+  ): Promise<{ success: boolean }> {
     const delta = parseFloat(amountFiat || '0');
     if (!Number.isFinite(delta) || delta <= 0) {
       return { success: false };
@@ -383,13 +409,16 @@ export class PerpsE2EMockService {
       orderId: `mock_close_${this.orderIdCounter}`,
       symbol: existingPosition.coin,
       size: Math.abs(parseFloat(existingPosition.size)).toString(),
-      price: this.mockPricesMap[existingPosition.coin]?.price || existingPosition.entryPrice,
+      price:
+        this.mockPricesMap[existingPosition.coin]?.price ||
+        existingPosition.entryPrice,
       timestamp: Date.now(),
       side: parseFloat(existingPosition.size) > 0 ? 'sell' : 'buy',
       fee: '0.00',
       feeToken: 'USDC',
       pnl: pnl.toFixed(2),
-      direction: parseFloat(existingPosition.size) > 0 ? 'short' : 'long',
+      direction:
+        parseFloat(existingPosition.size) > 0 ? 'Close Long' : 'Close Short',
     };
     this.mockOrderFills.push(closeFill);
 
@@ -506,6 +535,14 @@ export class PerpsE2EMockService {
     return [...this.mockOrders];
   }
 
+  public getMockOrdersHistory(): Order[] {
+    return [...this.mockOrdersHistory];
+  }
+
+  public getMockOrdersCombined(): Order[] {
+    return [...this.mockOrders, ...this.mockOrdersHistory];
+  }
+
   public getMockOrderFills(): OrderFill[] {
     return [...this.mockOrderFills];
   }
@@ -564,6 +601,98 @@ export class PerpsE2EMockService {
     ];
   }
 
+  /** Cancel an open order by id and push a canceled state into historical orders */
+  public async mockCancelOrder(orderId: string): Promise<OrderResult> {
+    const idx = this.mockOrders.findIndex((o) => o.orderId === orderId);
+    if (idx === -1) {
+      return { success: false, error: 'Order not found' };
+    }
+
+    const order = { ...this.mockOrders[idx] };
+    // Remove from open orders
+    this.mockOrders.splice(idx, 1);
+
+    // Record canceled snapshot into orders history for Activity > Orders
+    const canceledOrder: Order = {
+      ...order,
+      status: 'canceled',
+      lastUpdated: Date.now(),
+    };
+    this.mockOrdersHistory.push(canceledOrder);
+
+    // Notify orders subscribers
+    this.notifyOrdersCallbacks();
+    return { success: true, orderId };
+  }
+
+  /**
+   * Mock update of Take Profit / Stop Loss settings. This creates trigger orders
+   * so that Activity > Perps → Orders shows TP/SL entries as open orders.
+   */
+  public async mockUpdatePositionTPSL(
+    params: UpdatePositionTPSLParams,
+  ): Promise<OrderResult> {
+    const position = this.mockPositions.find((p) => p.coin === params.coin);
+    if (!position) {
+      return { success: false, error: 'Position not found' };
+    }
+
+    const now = Date.now();
+    // Update position fields
+    position.takeProfitPrice = params.takeProfitPrice;
+    position.stopLossPrice = params.stopLossPrice;
+    position.takeProfitCount = params.takeProfitPrice ? 1 : 0;
+    position.stopLossCount = params.stopLossPrice ? 1 : 0;
+
+    // Create trigger orders for TP/SL as open orders
+    if (params.takeProfitPrice) {
+      const tpOrder: Order = {
+        orderId: `tp_${this.orderIdCounter++}`,
+        symbol: params.coin,
+        side: parseFloat(position.size) > 0 ? 'sell' : 'buy',
+        orderType: 'limit',
+        size: Math.abs(parseFloat(position.size)).toString(),
+        originalSize: Math.abs(parseFloat(position.size)).toString(),
+        price: params.takeProfitPrice,
+        filledSize: '0',
+        remainingSize: Math.abs(parseFloat(position.size)).toString(),
+        status: 'open',
+        timestamp: now,
+        detailedOrderType: 'Take Profit Limit',
+        isTrigger: true,
+        reduceOnly: true,
+      };
+      this.mockOrders.push(tpOrder);
+    }
+
+    if (params.stopLossPrice) {
+      const slOrder: Order = {
+        orderId: `sl_${this.orderIdCounter++}`,
+        symbol: params.coin,
+        side: parseFloat(position.size) > 0 ? 'sell' : 'buy',
+        orderType: 'limit',
+        size: Math.abs(parseFloat(position.size)).toString(),
+        originalSize: Math.abs(parseFloat(position.size)).toString(),
+        price: params.stopLossPrice,
+        filledSize: '0',
+        remainingSize: Math.abs(parseFloat(position.size)).toString(),
+        status: 'open',
+        timestamp: now,
+        detailedOrderType: 'Stop Loss Limit',
+        isTrigger: true,
+        reduceOnly: true,
+      };
+      this.mockOrders.push(slOrder);
+    }
+
+    // Notify orders subscribers
+    this.notifyOrdersCallbacks();
+    // Also notify position subscribers for UI counters
+    this.notifyPositionCallbacks();
+
+    return { success: true };
+  }
+
   private calculateMockLiquidationPrice(
     entryPrice: number,
     leverage: number,