feat(perps): new TPSL view design

app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.styles.ts

@@ -1,4 +1,4 @@
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
 import type { Colors } from '../../../../../util/theme/models';
 
 const createStyles = (colors: Colors) =>
@@ -25,7 +25,6 @@ const createStyles = (colors: Colors) =>
       borderTopColor: colors.border.muted,
       paddingHorizontal: 16,
       paddingTop: 16,
-      paddingBottom: Platform.OS === 'ios' ? 32 : 16,
     },
     sliderSection: {
       paddingHorizontal: 32,

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

@@ -428,7 +428,7 @@ jest.mock('../../../../../util/networks', () => ({
   getNetworkImageSource: jest.fn(() => ({ uri: 'network-icon' })),
 }));
 
-// Consolidated mock for all bottom sheet components
+// Consolidated mock for bottom sheet components (not PerpsTPSLView - it's now a navigation screen)
 const createBottomSheetMock = (testId: string) => {
   const MockReact = jest.requireActual('react');
   return {
@@ -438,9 +438,6 @@ const createBottomSheetMock = (testId: string) => {
   };
 };
 
-jest.mock('../../components/PerpsTPSLBottomSheet', () =>
-  createBottomSheetMock('tpsl-bottom-sheet'),
-);
 jest.mock('../../components/PerpsLeverageBottomSheet', () =>
   createBottomSheetMock('leverage-bottom-sheet'),
 );
@@ -1775,11 +1772,16 @@ describe('PerpsOrderView', () => {
       expect(mockShowToast).toHaveBeenCalledTimes(1);
       expect(mockShowToast).toHaveBeenCalledWith(mockLimitPriceRequiredToast);
 
-      // Verify that the TP/SL bottom sheet was NOT opened
-      expect(screen.queryByTestId('tpsl-bottom-sheet')).toBeNull();
+      // Verify that navigation to TP/SL screen was NOT triggered
+      expect(mockNavigate).not.toHaveBeenCalledWith(
+        expect.anything(),
+        expect.objectContaining({
+          asset: expect.anything(),
+        }),
+      );
     });
 
-    it('opens TP/SL bottom sheet on limit order with limit price', async () => {
+    it('navigates to TP/SL screen on limit order with limit price', async () => {
       // Set up route params
       (useRoute as jest.Mock).mockReturnValue({
         params: {
@@ -1863,9 +1865,18 @@ describe('PerpsOrderView', () => {
       );
       fireEvent.press(tpSlButton);
 
-      // Verify that TP/SL bottom sheet IS shown
+      // Verify that navigation to TP/SL screen was triggered
       await waitFor(() => {
-        expect(screen.getByTestId('tpsl-bottom-sheet')).toBeDefined();
+        expect(mockNavigate).toHaveBeenCalledWith(
+          expect.stringContaining('TPSL'),
+          expect.objectContaining({
+            asset: 'ETH',
+            direction: 'long',
+            leverage: 3,
+            orderType: 'limit',
+            limitPrice: '3100',
+          }),
+        );
       });
     });
   });

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

@@ -12,7 +12,10 @@ import React, {
   useState,
 } from 'react';
 import { ScrollView, TouchableOpacity, View } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import {
+  SafeAreaView,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 import { PerpsOrderViewSelectorsIDs } from '../../../../../../e2e/selectors/Perps/Perps.selectors';
 
 import { ButtonSize as ButtonSizeRNDesignSystem } from '@metamask/design-system-react-native';
@@ -51,7 +54,6 @@ import PerpsLimitPriceBottomSheet from '../../components/PerpsLimitPriceBottomSh
 import PerpsOrderHeader from '../../components/PerpsOrderHeader';
 import PerpsOrderTypeBottomSheet from '../../components/PerpsOrderTypeBottomSheet';
 import PerpsSlider from '../../components/PerpsSlider';
-import PerpsTPSLBottomSheet from '../../components/PerpsTPSLBottomSheet';
 import RewardsAnimations, {
   RewardAnimationState,
 } from '../../../Rewards/components/RewardPointsAnimation';
@@ -138,9 +140,19 @@ interface OrderRouteParams {
 const PerpsOrderViewContentBase: React.FC = () => {
   const navigation = useNavigation<NavigationProp<PerpsNavigationParamList>>();
   const { colors } = useTheme();
+  const insets = useSafeAreaInsets();
 
   const styles = createStyles(colors);
 
+  // Dynamic bottom padding for fixed container: safe area inset + 16px visual padding
+  const fixedBottomContainerStyle = useMemo(
+    () => ({
+      ...styles.fixedBottomContainer,
+      paddingBottom: insets.bottom + 16,
+    }),
+    [styles.fixedBottomContainer, insets.bottom],
+  );
+
   const [selectedTooltip, setSelectedTooltip] =
     useState<PerpsTooltipContentKey | null>(null);
 
@@ -241,7 +253,6 @@ const PerpsOrderViewContentBase: React.FC = () => {
     orderTypeRef.current = orderForm.type;
   }, [orderForm.type]);
 
-  const [isTPSLVisible, setIsTPSLVisible] = useState(false);
   const [isLeverageVisible, setIsLeverageVisible] = useState(false);
   const [isLimitPriceVisible, setIsLimitPriceVisible] = useState(false);
   const [isOrderTypeVisible, setIsOrderTypeVisible] = useState(false);
@@ -552,12 +563,39 @@ const PerpsOrderViewContentBase: React.FC = () => {
       return;
     }
 
-    setIsTPSLVisible(true);
+    navigation.navigate(Routes.PERPS.TPSL, {
+      asset: orderForm.asset,
+      currentPrice: assetData.price,
+      direction: orderForm.direction,
+      leverage: orderForm.leverage,
+      orderType: orderForm.type,
+      limitPrice: orderForm.limitPrice,
+      initialTakeProfitPrice: orderForm.takeProfitPrice,
+      initialStopLossPrice: orderForm.stopLossPrice,
+      onConfirm: async (takeProfitPrice?: string, stopLossPrice?: string) => {
+        // Use the same clearing approach as the "Off" button
+        // If values are undefined or empty, ensure they're cleared properly
+        const tpToSet = takeProfitPrice || undefined;
+        const slToSet = stopLossPrice || undefined;
+
+        setTakeProfitPrice(tpToSet);
+        setStopLossPrice(slToSet);
+      },
+    });
   }, [
     PerpsToastOptions.formValidation.orderForm.limitPriceRequired,
     orderForm.limitPrice,
     orderForm.type,
+    orderForm.asset,
+    orderForm.direction,
+    orderForm.leverage,
+    orderForm.takeProfitPrice,
+    orderForm.stopLossPrice,
+    assetData.price,
     showToast,
+    navigation,
+    setTakeProfitPrice,
+    setStopLossPrice,
   ]);
 
   const handleAmountPress = () => {
@@ -804,7 +842,7 @@ const PerpsOrderViewContentBase: React.FC = () => {
   );
 
   return (
-    <SafeAreaView style={styles.container}>
+    <SafeAreaView style={styles.container} edges={['top', 'bottom']}>
       {/* Header */}
       <PerpsOrderHeader
         asset={orderForm.asset}
@@ -1164,7 +1202,7 @@ const PerpsOrderViewContentBase: React.FC = () => {
       )}
       {/* Fixed Place Order Button - Hide when keypad is active */}
       {!isInputFocused && (
-        <View style={styles.fixedBottomContainer}>
+        <View style={fixedBottomContainerStyle}>
           {filteredErrors.length > 0 && (
             <View style={styles.validationContainer}>
               {filteredErrors.map((error) => (
@@ -1200,30 +1238,6 @@ const PerpsOrderViewContentBase: React.FC = () => {
           </ButtonSemantic>
         </View>
       )}
-      {/* TP/SL Bottom Sheet */}
-      <PerpsTPSLBottomSheet
-        isVisible={isTPSLVisible}
-        onClose={() => setIsTPSLVisible(false)}
-        onConfirm={(takeProfitPrice, stopLossPrice) => {
-          // Use the same clearing approach as the "Off" button
-          // If values are undefined or empty, ensure they're cleared properly
-          const tpToSet = takeProfitPrice || undefined;
-          const slToSet = stopLossPrice || undefined;
-
-          setTakeProfitPrice(tpToSet);
-          setStopLossPrice(slToSet);
-          setIsTPSLVisible(false);
-        }}
-        asset={orderForm.asset}
-        currentPrice={assetData.price}
-        direction={orderForm.direction}
-        leverage={orderForm.leverage}
-        marginRequired={marginRequired}
-        initialTakeProfitPrice={orderForm.takeProfitPrice}
-        initialStopLossPrice={orderForm.stopLossPrice}
-        orderType={orderForm.type}
-        limitPrice={orderForm.limitPrice}
-      />
       {/* Leverage Selector */}
       <PerpsLeverageBottomSheet
         isVisible={isLeverageVisible}

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

@@ -3,7 +3,7 @@ import {
   type NavigationProp,
   type ParamListBase,
 } from '@react-navigation/native';
-import React, { useMemo, useState } from 'react';
+import React, { useMemo } from 'react';
 import { ScrollView, View } from 'react-native';
 import { strings } from '../../../../../../locales/i18n';
 import ButtonIcon, {
@@ -19,9 +19,7 @@ import Text, {
 } from '../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../component-library/hooks';
 import PerpsPositionCard from '../../components/PerpsPositionCard';
-import PerpsTPSLBottomSheet from '../../components/PerpsTPSLBottomSheet';
-import type { Position } from '../../controllers/types';
-import { usePerpsLivePositions, usePerpsTPSLUpdate } from '../../hooks';
+import { usePerpsLivePositions } from '../../hooks';
 import { usePerpsLiveAccount } from '../../hooks/stream';
 import {
   formatPnl,
@@ -40,26 +38,13 @@ const PerpsPositionsView: React.FC = () => {
 
   const { account } = usePerpsLiveAccount();
 
-  const [selectedPosition, setSelectedPosition] = useState<Position | null>(
-    null,
-  );
-  const [isTPSLVisible, setIsTPSLVisible] = useState(false);
-
   // Get real-time positions via WebSocket
   const { positions, isInitialLoading } = usePerpsLivePositions({
     throttleMs: 1000, // Update every second
   });
 
   const error = null;
 
-  const { handleUpdateTPSL, isUpdating } = usePerpsTPSLUpdate({
-    onSuccess: () => {
-      // Positions update automatically via WebSocket
-      setIsTPSLVisible(false);
-      setSelectedPosition(null);
-    },
-  });
-
   // Memoize position count text to avoid recalculating on every render
   const positionCountText = useMemo(() => {
     const positionCount = positions.length;
@@ -216,32 +201,6 @@ const PerpsPositionsView: React.FC = () => {
         </View>
         {renderContent()}
       </ScrollView>
-
-      {/* TP/SL Bottom Sheet - Rendered outside ScrollView to fix layering issue */}
-      {isTPSLVisible && selectedPosition && (
-        <PerpsTPSLBottomSheet
-          isVisible
-          onClose={() => {
-            setIsTPSLVisible(false);
-            setSelectedPosition(null);
-          }}
-          onConfirm={async (takeProfitPrice, stopLossPrice) => {
-            await handleUpdateTPSL(
-              selectedPosition,
-              takeProfitPrice,
-              stopLossPrice,
-            );
-            setIsTPSLVisible(false);
-            setSelectedPosition(null);
-          }}
-          asset={selectedPosition.coin}
-          position={selectedPosition}
-          initialTakeProfitPrice={selectedPosition.takeProfitPrice}
-          initialStopLossPrice={selectedPosition.stopLossPrice}
-          isUpdating={isUpdating}
-          orderType="market" // Default to market for existing positions
-        />
-      )}
     </SafeAreaView>
   );
 };