Reality2byte
diff --git a/‎app/components/UI/AssetOverview/TokenOverview.testIds.ts‎
Lines changed: 2 additions & 0 deletions b/‎app/components/UI/AssetOverview/TokenOverview.testIds.ts‎
Lines changed: 2 additions & 0 deletions
diff --git a/‎app/components/UI/Perps/Views/PerpsOrderRedirect.test.tsx‎
Lines changed: 237 additions & 0 deletions b/‎app/components/UI/Perps/Views/PerpsOrderRedirect.test.tsx‎
Lines changed: 237 additions & 0 deletions
diff --git a/‎app/components/UI/Perps/Views/PerpsOrderRedirect.tsx‎
Lines changed: 116 additions & 0 deletions b/‎app/components/UI/Perps/Views/PerpsOrderRedirect.tsx‎
Lines changed: 116 additions & 0 deletions
diff --git a/‎app/components/UI/Perps/__mocks__/serviceMocks.ts‎
Lines changed: 6 additions & 0 deletions b/‎app/components/UI/Perps/__mocks__/serviceMocks.ts‎
Lines changed: 6 additions & 0 deletions
@@ -11,6 +11,8 @@ export const TokenOverviewSelectorsIDs = {
   ADD_BUTTON: 'token-add-button',
   CLAIM_BUTTON: 'claim-banner-claim-eth-button',
   UNSTAKING_BANNER: 'unstaking-banner',
+  PERPS_POSITION_CARD: 'perps-position-card-touchable',
+  PERPS_DISCOVERY_BANNER: 'perps-discovery-banner',
   LONG_BUTTON: 'token-long-button',
   SHORT_BUTTON: 'token-short-button',
   MORE_BUTTON: 'token-more-button',
 
@@ -0,0 +1,237 @@
+import React from 'react';
+import { render, waitFor } from '@testing-library/react-native';
+import {
+  useNavigation,
+  useRoute,
+  StackActions,
+} from '@react-navigation/native';
+import PerpsOrderRedirect from './PerpsOrderRedirect';
+import { usePerpsConnection } from '../hooks/usePerpsConnection';
+import { usePerpsTrading } from '../hooks/usePerpsTrading';
+import usePerpsToasts from '../hooks/usePerpsToasts';
+import Routes from '../../../../constants/navigation/Routes';
+import { CONFIRMATION_HEADER_CONFIG } from '../constants/perpsConfig';
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: jest.fn(),
+  useRoute: jest.fn(),
+  StackActions: {
+    replace: jest.fn(),
+  },
+}));
+
+jest.mock('../hooks/usePerpsConnection', () => ({
+  usePerpsConnection: jest.fn(),
+}));
+
+jest.mock('../hooks/usePerpsTrading', () => ({
+  usePerpsTrading: jest.fn(),
+}));
+
+jest.mock('../hooks/usePerpsToasts', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+const MockPerpsLoader = jest.fn((_props: Record<string, unknown>) => null);
+jest.mock('../components/PerpsLoader', () => ({
+  __esModule: true,
+  default: (props: Record<string, unknown>) => MockPerpsLoader(props),
+}));
+
+jest.mock('../../../../util/Logger', () => ({
+  log: jest.fn(),
+  error: jest.fn(),
+}));
+
+jest.mock('../../../../util/errorUtils', () => ({
+  ensureError: jest.fn((e) => (e instanceof Error ? e : new Error(String(e)))),
+}));
+
+const mockNavigate = jest.fn();
+const mockGoBack = jest.fn();
+const mockDispatch = jest.fn();
+const mockDepositWithOrder = jest.fn();
+const mockShowToast = jest.fn();
+const mockToastOptions = {
+  accountManagement: {
+    oneClickTrade: {
+      txCreationFailed: { variant: 'error', label: 'Failed' },
+    },
+  },
+};
+
+const mockUseNavigation = jest.mocked(useNavigation);
+const mockUseRoute = jest.mocked(useRoute);
+const mockUsePerpsConnection = jest.mocked(usePerpsConnection);
+const mockUsePerpsTrading = jest.mocked(usePerpsTrading);
+const mockUsePerpsToasts = jest.mocked(usePerpsToasts);
+
+describe('PerpsOrderRedirect', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseNavigation.mockReturnValue({
+      navigate: mockNavigate,
+      goBack: mockGoBack,
+      dispatch: mockDispatch,
+    } as never);
+
+    mockUseRoute.mockReturnValue({
+      key: 'test',
+      name: 'PerpsOrderRedirect',
+      params: { direction: 'long', asset: 'ETH' },
+    } as never);
+
+    mockUsePerpsTrading.mockReturnValue({
+      depositWithOrder: mockDepositWithOrder,
+    } as never);
+
+    mockUsePerpsToasts.mockReturnValue({
+      showToast: mockShowToast,
+      PerpsToastOptions: mockToastOptions,
+    } as never);
+  });
+
+  it('renders loader with preparing message', () => {
+    // Arrange
+    mockUsePerpsConnection.mockReturnValue({
+      isConnected: false,
+      isInitialized: false,
+    } as never);
+
+    // Act
+    render(<PerpsOrderRedirect />);
+
+    // Assert
+    expect(MockPerpsLoader).toHaveBeenCalledWith(
+      expect.objectContaining({
+        message: 'Preparing order...',
+        fullScreen: false,
+      }),
+    );
+  });
+
+  it('does not call depositWithOrder when WebSocket is not ready', () => {
+    // Arrange
+    mockUsePerpsConnection.mockReturnValue({
+      isConnected: false,
+      isInitialized: false,
+    } as never);
+
+    // Act
+    render(<PerpsOrderRedirect />);
+
+    // Assert
+    expect(mockDepositWithOrder).not.toHaveBeenCalled();
+  });
+
+  it('calls depositWithOrder and navigates to confirmation on success', async () => {
+    // Arrange
+    mockUsePerpsConnection.mockReturnValue({
+      isConnected: true,
+      isInitialized: true,
+    } as never);
+
+    mockDepositWithOrder.mockResolvedValue(undefined);
+
+    const mockReplaceAction = { type: 'REPLACE' };
+    (StackActions.replace as jest.Mock).mockReturnValue(mockReplaceAction);
+
+    // Act
+    render(<PerpsOrderRedirect />);
+
+    // Assert
+    await waitFor(() => {
+      expect(mockDepositWithOrder).toHaveBeenCalledTimes(1);
+    });
+
+    await waitFor(() => {
+      expect(StackActions.replace).toHaveBeenCalledWith(
+        Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS,
+        {
+          direction: 'long',
+          asset: 'ETH',
+          showPerpsHeader:
+            CONFIRMATION_HEADER_CONFIG.ShowPerpsHeaderForDepositAndTrade,
+        },
+      );
+      expect(mockDispatch).toHaveBeenCalledWith(mockReplaceAction);
+    });
+  });
+
+  it('shows toast and goes back on depositWithOrder failure', async () => {
+    // Arrange
+    mockUsePerpsConnection.mockReturnValue({
+      isConnected: true,
+      isInitialized: true,
+    } as never);
+
+    mockDepositWithOrder.mockRejectedValue(new Error('Order failed'));
+
+    // Act
+    render(<PerpsOrderRedirect />);
+
+    // Assert
+    await waitFor(() => {
+      expect(mockShowToast).toHaveBeenCalledWith(
+        mockToastOptions.accountManagement.oneClickTrade.txCreationFailed,
+      );
+      expect(mockGoBack).toHaveBeenCalled();
+    });
+  });
+
+  it('uses short direction from route params', async () => {
+    // Arrange
+    mockUseRoute.mockReturnValue({
+      key: 'test',
+      name: 'PerpsOrderRedirect',
+      params: { direction: 'short', asset: 'BTC' },
+    } as never);
+
+    mockUsePerpsConnection.mockReturnValue({
+      isConnected: true,
+      isInitialized: true,
+    } as never);
+
+    mockDepositWithOrder.mockResolvedValue(undefined);
+
+    const mockReplaceAction = { type: 'REPLACE' };
+    (StackActions.replace as jest.Mock).mockReturnValue(mockReplaceAction);
+
+    // Act
+    render(<PerpsOrderRedirect />);
+
+    // Assert
+    await waitFor(() => {
+      expect(StackActions.replace).toHaveBeenCalledWith(
+        Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS,
+        expect.objectContaining({
+          direction: 'short',
+          asset: 'BTC',
+        }),
+      );
+    });
+  });
+
+  it('does not call depositWithOrder twice on re-render', async () => {
+    // Arrange
+    mockUsePerpsConnection.mockReturnValue({
+      isConnected: true,
+      isInitialized: true,
+    } as never);
+
+    mockDepositWithOrder.mockResolvedValue(undefined);
+    (StackActions.replace as jest.Mock).mockReturnValue({ type: 'REPLACE' });
+
+    // Act
+    const { rerender } = render(<PerpsOrderRedirect />);
+    rerender(<PerpsOrderRedirect />);
+
+    // Assert
+    await waitFor(() => {
+      expect(mockDepositWithOrder).toHaveBeenCalledTimes(1);
+    });
+  });
+});
@@ -0,0 +1,116 @@
+import React, { useEffect, useRef } from 'react';
+import {
+  useNavigation,
+  useRoute,
+  RouteProp,
+  StackActions,
+} from '@react-navigation/native';
+import {
+  Box,
+  BoxAlignItems,
+  BoxJustifyContent,
+} from '@metamask/design-system-react-native';
+import Routes from '../../../../constants/navigation/Routes';
+import { usePerpsConnection } from '../hooks/usePerpsConnection';
+import { usePerpsTrading } from '../hooks/usePerpsTrading';
+import usePerpsToasts from '../hooks/usePerpsToasts';
+import PerpsLoader from '../components/PerpsLoader';
+import Logger from '../../../../util/Logger';
+import { ensureError } from '../../../../util/errorUtils';
+import {
+  PERPS_CONSTANTS,
+  CONFIRMATION_HEADER_CONFIG,
+} from '../constants/perpsConfig';
+import type { PerpsNavigationParamList } from '../types/navigation';
+
+type RouteParams = RouteProp<PerpsNavigationParamList, 'PerpsOrderRedirect'>;
+
+/**
+ * PerpsOrderRedirect
+ *
+ * A redirect screen that handles navigation from Token Details to the Perps order confirmation.
+ * This screen:
+ * 1. Waits for the WebSocket connection to be established (via PerpsConnectionProvider)
+ * 2. Calls depositWithOrder() to create the pending transaction
+ * 3. Navigates to the confirmation screen with the transaction ready
+ *
+ * This is necessary because Token Details is outside the Perps stack, so the WebSocket
+ * is not initialized there. By navigating to this screen first, we ensure the WebSocket
+ * is ready before calling depositWithOrder().
+ */
+const PerpsOrderRedirect: React.FC = () => {
+  const navigation = useNavigation();
+  const route = useRoute<RouteParams>();
+  const { direction, asset } = route.params;
+
+  const { isConnected, isInitialized } = usePerpsConnection();
+  const { depositWithOrder } = usePerpsTrading();
+  const { showToast, PerpsToastOptions } = usePerpsToasts();
+
+  const hasStartedRef = useRef(false);
+  useEffect(() => {
+    // Wait for WebSocket to be ready
+    if (!isConnected || !isInitialized) return;
+    // Prevent double execution
+    if (hasStartedRef.current) return;
+    hasStartedRef.current = true;
+
+    Logger.log('[PerpsOrderRedirect] Starting depositWithOrder', {
+      direction,
+      asset,
+    });
+
+    depositWithOrder()
+      .then(() => {
+        Logger.log(
+          '[PerpsOrderRedirect] depositWithOrder resolved, navigating to confirmation',
+        );
+        // Replace current screen with confirmation (no back to loader)
+        navigation.dispatch(
+          StackActions.replace(
+            Routes.FULL_SCREEN_CONFIRMATIONS.REDESIGNED_CONFIRMATIONS,
+            {
+              direction,
+              asset,
+              showPerpsHeader:
+                CONFIRMATION_HEADER_CONFIG.ShowPerpsHeaderForDepositAndTrade,
+            },
+          ),
+        );
+      })
+      .catch((error: unknown) => {
+        const err = ensureError(error);
+        Logger.error(err, {
+          feature: PERPS_CONSTANTS.FeatureName,
+          message: 'Failed to start one-click trade from asset details',
+        });
+        showToast(
+          PerpsToastOptions.accountManagement.oneClickTrade.txCreationFailed,
+        );
+        // Go back to token details on failure
+        navigation.goBack();
+      });
+  }, [
+    isConnected,
+    isInitialized,
+    direction,
+    asset,
+    depositWithOrder,
+    navigation,
+    showToast,
+    PerpsToastOptions,
+  ]);
+
+  // Match PerpsLoadingSkeleton layout ("Connecting to Perps") so both loaders look the same: top-aligned, centered, pt-20
+  return (
+    <Box
+      twClassName="flex-1 bg-default pt-20"
+      alignItems={BoxAlignItems.Center}
+      justifyContent={BoxJustifyContent.Start}
+    >
+      <PerpsLoader message="Preparing order..." fullScreen={false} />
+    </Box>
+  );
+};
+
+export default PerpsOrderRedirect;
@@ -57,6 +57,12 @@ export const createMockInfrastructure =
       rewards: {
         getFeeDiscount: jest.fn().mockResolvedValue(0),
       },
+
+      // === Cache Invalidation ===
+      cacheInvalidator: {
+        invalidate: jest.fn(),
+        invalidateAll: jest.fn(),
+      },
     }) as unknown as jest.Mocked<PerpsPlatformDependencies>;
 
 /**