chore(perps): opt in useNavigation to AppNavigationProp (Phase 4)

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

@@ -2,6 +2,8 @@ import React, { useState, useCallback, useMemo, useRef } from 'react';
 import { View, TouchableOpacity } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import { useStyles } from '../../../../../component-library/hooks';
 import Text, {
   TextVariant,
@@ -47,7 +49,7 @@ interface AdjustMarginRouteParams {
 }
 
 const PerpsAdjustMarginView: React.FC = () => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route =
     useRoute<RouteProp<{ params: AdjustMarginRouteParams }, 'params'>>();
   const { position: routePosition, mode } = route.params || {};

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

@@ -1,4 +1,6 @@
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, ActivityIndicator } from 'react-native';
 import { NotificationMoment } from '../../../../../util/haptics';
@@ -45,7 +47,7 @@ const PerpsCancelAllOrdersView: React.FC<PerpsCancelAllOrdersViewProps> = ({
 }) => {
   const theme = useTheme();
   const styles = createStyles(theme);
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const internalSheetRef = useRef<BottomSheetRef>(null);
   const sheetRef = externalSheetRef || internalSheetRef;
   const { showToast } = usePerpsToasts();

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

@@ -1,4 +1,6 @@
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import React, { useCallback, useMemo, useRef } from 'react';
 import { View, ActivityIndicator } from 'react-native';
 import { NotificationMoment } from '../../../../../util/haptics';
@@ -52,7 +54,7 @@ const PerpsCloseAllPositionsView: React.FC<PerpsCloseAllPositionsViewProps> = ({
 }) => {
   const theme = useTheme();
   const styles = createStyles(theme);
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const internalSheetRef = useRef<BottomSheetRef>(null);
   const sheetRef = externalSheetRef || internalSheetRef;
   const { showToast } = usePerpsToasts();

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

@@ -3,6 +3,8 @@ import {
   useRoute,
   type RouteProp,
 } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import React, {
   useCallback,
   useEffect,
@@ -84,7 +86,7 @@ import { selectPerpsClosePositionLimitOrderEnabledFlag } from '../../selectors/f
 const PerpsClosePositionView: React.FC = () => {
   const theme = useTheme();
   const styles = createStyles(theme);
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route =
     useRoute<RouteProp<PerpsNavigationParamList, 'PerpsClosePosition'>>();
   const { position, source: routeSource } = route.params as {

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

@@ -7,6 +7,8 @@ import {
 } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useNavigation, useRoute } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import { captureRef } from 'react-native-view-shot';
 import Share from 'react-native-share';
 import { useSelector } from 'react-redux';
@@ -76,7 +78,7 @@ const CARD_IMAGES: { image: ImageSourcePropType; id: number; name: string }[] =
   ];
 
 const PerpsHeroCardView: React.FC = () => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route = useRoute();
   const viewShotRefs = useRef<(View | null)[]>(
     Array.from({ length: CARD_IMAGES.length }, () => null),

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

@@ -14,6 +14,8 @@ import {
   useFocusEffect,
   type RouteProp,
 } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import {
   Button,
   ButtonVariant,
@@ -152,7 +154,7 @@ const PerpsHomeView = ({
 }: PerpsHomeViewProps) => {
   const { styles } = useStyles(styleSheet, {});
   const insets = useSafeAreaInsets();
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route =
     useRoute<RouteProp<PerpsNavigationParamList, 'PerpsMarketListView'>>();
   const transactionActiveAbTests = route.params?.transactionActiveAbTests;

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

@@ -22,6 +22,8 @@ import {
   useRoute,
   type RouteProp,
 } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import React, {
   useCallback,
   useEffect,
@@ -220,7 +222,7 @@ const PerpsMarketDetailsView: React.FC<PerpsMarketDetailsViewProps> = () => {
   const { handleUpdateTPSL } = usePerpsTPSLUpdate();
 
   // Keep direct navigation for configuration methods (setOptions, setParams)
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route =
     useRoute<RouteProp<{ params: MarketDetailsRouteParams }, 'params'>>();
   const {

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

@@ -55,6 +55,8 @@ import {
   useNavigation,
   StackActions,
 } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import Routes from '../../../../../constants/navigation/Routes';
 import { useSelector } from 'react-redux';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
@@ -82,7 +84,7 @@ const PerpsMarketListView = ({
     useRoute<RouteProp<PerpsNavigationParamList, 'PerpsMarketListView'>>();
 
   const perpsNavigation = usePerpsNavigation();
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
 
   const variant = route.params?.variant ?? propVariant ?? 'full';
   const title = route.params?.title ?? propTitle;

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

@@ -22,6 +22,8 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import React, {
   useCallback,
   useEffect,
@@ -99,7 +101,7 @@ import type {
 const PerpsOrderBookView: React.FC<PerpsOrderBookViewProps> = ({
   testID = PerpsOrderBookViewSelectorsIDs.CONTAINER,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route =
     useRoute<RouteProp<{ params: OrderBookRouteParams }, 'params'>>();
   const { symbol, marketData: routeMarketData } = route.params || {};

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

@@ -2,6 +2,8 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { View, ScrollView } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import { useStyles } from '../../../../../component-library/hooks';
 import Text, {
   TextVariant,
@@ -59,7 +61,7 @@ interface DetailRow {
 }
 
 const PerpsOrderDetailsView: React.FC = () => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route =
     useRoute<RouteProp<{ params: OrderDetailsRouteParams }, 'params'>>();
   const { order } = route.params ?? {};

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

@@ -5,6 +5,8 @@ import {
   RouteProp,
   StackActions,
 } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../core/NavigationService/types';
+
 import {
   Box,
   BoxAlignItems,
@@ -38,7 +40,7 @@ type RouteParams = RouteProp<PerpsNavigationParamList, 'PerpsOrderRedirect'>;
  * is ready before calling depositWithOrder().
  */
 const PerpsOrderRedirect: React.FC = () => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route = useRoute<RouteParams>();
   const { direction, asset, fromTokenDetails, transactionActiveAbTests } =
     route.params;

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

@@ -4,6 +4,8 @@ import {
   CommonActions,
   type RouteProp,
 } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import React, {
   useCallback,
   useEffect,
@@ -215,7 +217,7 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
   defaultSzDecimals,
   defaultMaxLeverage,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route = useRoute<RouteProp<{ params: OrderRouteParams }, 'params'>>();
   // Source: from route params (caller-passed) or trending session, else default
   const source =
@@ -930,7 +932,7 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
       initialTakeProfitPrice: orderForm.takeProfitPrice,
       initialStopLossPrice: orderForm.stopLossPrice,
       amount: orderForm.amount,
-      szDecimals,
+      szDecimals: szDecimals ?? undefined,
       onConfirm: async (
         _position?: Position,
         takeProfitPrice?: string,
@@ -1080,7 +1082,10 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
                 {
                   name: Routes.PERPS.MARKET_DETAILS,
                   params: {
-                    market: navigationMarketData,
+                    market: navigationMarketData ?? {
+                      symbol: orderForm.asset,
+                      name: orderForm.asset,
+                    },
                     monitoringIntent: {
                       asset: orderForm.asset,
                       monitorOrders: true,
@@ -1172,7 +1177,10 @@ const PerpsOrderViewContentBase: React.FC<PerpsOrderViewContentProps> = ({
         navigation.navigate(Routes.PERPS.ROOT, {
           screen: Routes.PERPS.MARKET_DETAILS,
           params: {
-            market: navigationMarketData,
+            market: navigationMarketData ?? {
+              symbol: orderForm.asset,
+              name: orderForm.asset,
+            },
             // Pass monitoring intent to destination screen for data-driven tab selection
             monitoringIntent: {
               asset: orderForm.asset,

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

@@ -8,6 +8,8 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import React, { useCallback, useMemo } from 'react';
 import { StyleSheet, TouchableOpacity } from 'react-native';
 import { strings } from '../../../../../../locales/i18n';
@@ -57,7 +59,7 @@ export interface PerpsPayRowProps {
 }
 
 export const PerpsPayRow = ({ onPayWithInfoPress }: PerpsPayRowProps) => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const { setConfirmationMetric } = useConfirmationMetricEvents();
   const { track } = usePerpsEventTracking();
   const { payToken } = useTransactionPayToken();

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

@@ -1,4 +1,6 @@
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import React, { useMemo } from 'react';
 import { ScrollView, View } from 'react-native';
 import { useSelector } from 'react-redux';
@@ -36,7 +38,7 @@ import { PerpsPositionsViewSelectorsIDs } from '../../Perps.testIds';
 
 const PerpsPositionsView: React.FC = () => {
   const { styles } = useStyles(createStyles, {});
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const privacyMode = useSelector(selectPrivacyMode);
 
   const { account } = usePerpsLiveAccount();

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

@@ -4,6 +4,8 @@ import {
   useRoute,
   type RouteProp,
 } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import {
   PERPS_EVENT_PROPERTY,
   PERPS_EVENT_VALUE,
@@ -31,7 +33,7 @@ const PerpsSelectAdjustMarginActionView: React.FC<
   position: positionProp,
   onClose: onExternalClose,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route =
     useRoute<
       RouteProp<PerpsNavigationParamList, 'PerpsSelectAdjustMarginAction'>

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

@@ -4,6 +4,8 @@ import {
   useRoute,
   type RouteProp,
 } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import {
   PERPS_EVENT_PROPERTY,
   PERPS_EVENT_VALUE,
@@ -35,7 +37,7 @@ const PerpsSelectModifyActionView: React.FC<
   onReversePosition,
   testID,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route =
     useRoute<RouteProp<PerpsNavigationParamList, 'PerpsSelectModifyAction'>>();
   const { trackEvent, createEventBuilder } = useAnalytics();

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

@@ -1,5 +1,7 @@
 import React, { useCallback, useRef } from 'react';
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import { type OrderType } from '@metamask/perps-controller';
 import PerpsOrderTypeBottomSheet from '../../components/PerpsOrderTypeBottomSheet';
 import { type BottomSheetRef } from '@metamask/design-system-react-native';
@@ -21,7 +23,7 @@ const PerpsSelectOrderTypeView: React.FC<PerpsSelectOrderTypeViewProps> = ({
   onSelect,
   onClose: onExternalClose,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const internalSheetRef = useRef<BottomSheetRef>(null);
   const sheetRef = externalSheetRef || internalSheetRef;
 

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

@@ -1,5 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import { useSelector } from 'react-redux';
 import Logger from '../../../../../util/Logger';
 import { usePerpsProvider } from '../../hooks/usePerpsProvider';
@@ -16,7 +18,7 @@ import { PERPS_CONSTANTS } from '@metamask/perps-controller';
  * Handles combined provider + network switching.
  */
 const PerpsSelectProviderView: React.FC = () => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const { activeProvider, switchProvider } = usePerpsProvider();
   const { toggleTestnet } = usePerpsNetworkConfig();
   const network = useSelector(selectPerpsNetwork);

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

@@ -5,6 +5,8 @@ import {
   useSafeAreaInsets,
 } from 'react-native-safe-area-context';
 import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import { strings } from '../../../../../../locales/i18n';
 import {
   Button,
@@ -50,7 +52,7 @@ import {
 import { TP_SL_VIEW_CONFIG } from '../../constants/perpsConfig';
 
 const PerpsTPSLView: React.FC = () => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route = useRoute<RouteProp<PerpsNavigationParamList, 'PerpsTPSL'>>();
 
   // Extract params from navigation route

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

@@ -1,4 +1,6 @@
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import {
   Icon,
   IconColor,
@@ -54,7 +56,7 @@ const PerpsTabView = () => {
   const [isEligibilityModalVisible, setIsEligibilityModalVisible] =
     useState(false);
 
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const { account } = usePerpsLiveAccount();
   const isEligible = useSelector(selectPerpsEligibility);
   const { track } = usePerpsEventTracking();

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

@@ -1,5 +1,7 @@
 import React, { useRef, useCallback } from 'react';
 import { useNavigation, useRoute, RouteProp } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
+
 import {
   BottomSheet,
   BottomSheetFooter,
@@ -22,7 +24,7 @@ export interface PerpsTooltipViewRouteParams {
 }
 
 const PerpsTooltipView: React.FC = () => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route =
     useRoute<RouteProp<Record<string, PerpsTooltipViewRouteParams>, string>>();
   const bottomSheetRef = useRef<BottomSheetRef>(null);