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

app/components/UI/Predict/components/FeaturedCarousel/FeaturedCarouselCard.tsx

@@ -1,7 +1,8 @@
 import React, { useCallback } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { Image } from 'expo-image';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import {
   Box,
@@ -21,10 +22,7 @@ import {
   PredictOutcome,
   PredictOutcomeToken,
 } from '../../types';
-import {
-  PredictNavigationParamList,
-  PredictEntryPoint,
-} from '../../types/navigation';
+import { PredictEntryPoint } from '../../types/navigation';
 import { formatPercentage } from '../../utils/format';
 import { PredictEventValues } from '../../constants/eventNames';
 import { usePredictActionGuard } from '../../hooks/usePredictActionGuard';
@@ -47,8 +45,7 @@ const FeaturedCarouselCard: React.FC<FeaturedCarouselCardProps> = ({
   entryPoint = PredictEventValues.ENTRY_POINT.PREDICT_FEED,
 }) => {
   const tw = useTailwind();
-  const navigation =
-    useNavigation<NavigationProp<PredictNavigationParamList>>();
+  const navigation = useNavigation<AppNavigationProp>();
   const { openBuySheet } = usePredictPreviewSheet();
   const { executeGuardedAction } = usePredictActionGuard({ navigation });
 

app/components/UI/Predict/components/FeaturedCarousel/FeaturedCarouselSportCard.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { TouchableOpacity } from 'react-native';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { useSelector } from 'react-redux';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import {
@@ -25,10 +26,7 @@ import {
   PredictOutcomeToken,
   PredictSportTeam,
 } from '../../types';
-import {
-  PredictNavigationParamList,
-  PredictEntryPoint,
-} from '../../types/navigation';
+import { PredictEntryPoint } from '../../types/navigation';
 import { formatPercentage } from '../../utils/format';
 import { PredictEventValues } from '../../constants/eventNames';
 import { usePredictActionGuard } from '../../hooks/usePredictActionGuard';
@@ -66,8 +64,7 @@ const FeaturedCarouselSportCard: React.FC<FeaturedCarouselSportCardProps> = ({
   entryPoint = PredictEventValues.ENTRY_POINT.PREDICT_FEED,
 }) => {
   const tw = useTailwind();
-  const navigation =
-    useNavigation<NavigationProp<PredictNavigationParamList>>();
+  const navigation = useNavigation<AppNavigationProp>();
   const { openBuySheet } = usePredictPreviewSheet();
   const { executeGuardedAction } = usePredictActionGuard({ navigation });
   const livePricesEnabled = useSelector(

app/components/UI/Predict/components/PredictActivity/PredictActivity.tsx

@@ -13,6 +13,7 @@ import { formatPercentage, formatPrice } from '../../utils/format';
 import { strings } from '../../../../../../locales/i18n';
 import Routes from '../../../../../constants/navigation/Routes';
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { PredictActivityItem, PredictActivityType } from '../../types';
 import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
 import { MonetizedPrimitive } from '../../../../../core/Analytics/MetaMetrics.types';
@@ -38,7 +39,7 @@ const PredictActivity: React.FC<PredictActivityProps> = ({
   containerStyle,
 }) => {
   const tw = useTailwind();
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const { trackEvent, createEventBuilder } = useAnalytics();
   const isDebit = item.type === PredictActivityType.BUY;
   const signedAmount = `${isDebit ? '-' : '+'}${formatPrice(

app/components/UI/Predict/components/PredictActivityDetail/PredictActivityDetail.tsx

@@ -1,4 +1,5 @@
 import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import React, { useMemo, useEffect } from 'react';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useSelector } from 'react-redux';
@@ -35,7 +36,7 @@ import { PredictActivityDetailsSelectorsIDs } from '../../Predict.testIds';
 interface PredictActivityDetailProps {}
 
 const PredictActivityDetails: React.FC<PredictActivityDetailProps> = () => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const route =
     useRoute<RouteProp<PredictNavigationParamList, 'PredictActivityDetail'>>();
   const { activity } = route.params || {};

app/components/UI/Predict/components/PredictAddFundsSheet/PredictAddFundsSheet.tsx

@@ -16,8 +16,8 @@ import BottomSheetHeader from '../../../../../component-library/components/Botto
 import { ButtonVariants } from '../../../../../component-library/components/Buttons/Button/Button.types';
 import { usePredictDeposit } from '../../hooks/usePredictDeposit';
 import { usePredictActionGuard } from '../../hooks/usePredictActionGuard';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
-import { PredictNavigationParamList } from '../../types/navigation';
+import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { PredictEventValues } from '../../constants/eventNames';
 import {
   usePredictBottomSheet,
@@ -35,8 +35,7 @@ const PredictAddFundsSheet = forwardRef<
   PredictAddFundsSheetProps
 >(({ onDismiss }, ref) => {
   const tw = useTailwind();
-  const navigation =
-    useNavigation<NavigationProp<PredictNavigationParamList>>();
+  const navigation = useNavigation<AppNavigationProp>();
   const { deposit } = usePredictDeposit();
   const { executeGuardedAction } = usePredictActionGuard({
     navigation,

app/components/UI/Predict/components/PredictBalance/PredictBalance.tsx

@@ -10,7 +10,8 @@ import {
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import images from 'images/image-icons';
 import React, { useCallback, useEffect, useMemo } from 'react';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { useQueryClient } from '@tanstack/react-query';
 import { useSelector } from 'react-redux';
 import { predictQueries } from '../../queries';
@@ -43,7 +44,6 @@ import { usePredictBalance } from '../../hooks/usePredictBalance';
 import { usePredictDeposit } from '../../hooks/usePredictDeposit';
 import { formatPrice } from '../../utils/format';
 import { usePredictActionGuard } from '../../hooks/usePredictActionGuard';
-import { PredictNavigationParamList } from '../../types/navigation';
 import { usePredictWithdraw } from '../../hooks/usePredictWithdraw';
 import { usePredictAccountState } from '../../hooks/usePredictAccountState';
 import { PredictEventValues } from '../../constants/eventNames';
@@ -71,8 +71,7 @@ const PredictBalance: React.FC<PredictBalanceProps> = ({
     selectPredictPortfolioEnabledFlag,
   );
 
-  const navigation =
-    useNavigation<NavigationProp<PredictNavigationParamList>>();
+  const navigation = useNavigation<AppNavigationProp>();
 
   const queryClient = useQueryClient();
   const {

app/components/UI/Predict/components/PredictCryptoUpDownMarketCard/PredictCryptoUpDownMarketCard.tsx

@@ -35,7 +35,8 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { useTheme } from '../../../../../util/theme';
 import { PredictEventValues } from '../../constants/eventNames';
 import { usePredictActionGuard } from '../../hooks/usePredictActionGuard';
@@ -54,10 +55,7 @@ import {
   type PredictMarketBuyButtonPress,
   type PriceQuery,
 } from '../../types';
-import type {
-  PredictEntryPoint,
-  PredictNavigationParamList,
-} from '../../types/navigation';
+import type { PredictEntryPoint } from '../../types/navigation';
 import {
   getEventStartTime,
   getCryptoSymbol,
@@ -1124,8 +1122,7 @@ const PredictCryptoUpDownMarketCard: React.FC<
   const isCompact = isCarousel;
   const tw = useTailwind();
   const { colors } = useTheme();
-  const navigation =
-    useNavigation<NavigationProp<PredictNavigationParamList>>();
+  const navigation = useNavigation<AppNavigationProp>();
   const { navigateToMarketDetails } = usePredictNavigation();
   const { openBuySheet } = usePredictPreviewSheet();
   const resolvedEntryPoint = useResolvedPredictEntryPoint(propEntryPoint);

app/components/UI/Predict/components/PredictCryptoUpDownPositions/PredictCryptoUpDownPosition.tsx

@@ -10,11 +10,8 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import {
-  NavigationProp,
-  useIsFocused,
-  useNavigation,
-} from '@react-navigation/native';
+import { useIsFocused, useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { useSelector } from 'react-redux';
 import { strings } from '../../../../../../locales/i18n';
 import Button, {
@@ -45,7 +42,6 @@ import {
   type PredictMarket,
   type PredictPosition,
 } from '../../types';
-import { PredictNavigationParamList } from '../../types/navigation';
 import { formatCents, formatPrice } from '../../utils/format';
 
 const AUTO_REFRESH_TIMEOUT = 5000;
@@ -62,8 +58,7 @@ const PredictCryptoUpDownPosition: React.FC<
   const tw = useTailwind();
   const privacyMode = useSelector(selectPrivacyMode);
   const isFocused = useIsFocused();
-  const navigation =
-    useNavigation<NavigationProp<PredictNavigationParamList>>();
+  const navigation = useNavigation<AppNavigationProp>();
 
   const { onCashOut } = usePredictCashOut({
     market,

app/components/UI/Predict/components/PredictDetailsHeaderSkeleton/PredictDetailsHeaderSkeleton.tsx

@@ -8,6 +8,7 @@ import {
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { Pressable } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import Icon, {
   IconName,
@@ -27,7 +28,7 @@ const PredictDetailsHeaderSkeleton: React.FC<
   PredictDetailsHeaderSkeletonProps
 > = ({ testID = PREDICT_DETAILS_HEADER_SKELETON }) => {
   const tw = useTailwind();
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const insets = useSafeAreaInsets();
 
   return (

app/components/UI/Predict/components/PredictGTMModal/PredictGTMModal.tsx

@@ -1,4 +1,5 @@
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import React, { useState, useEffect } from 'react';
 import { Image, View } from 'react-native';
 import Animated, {
@@ -37,7 +38,7 @@ import { PREDICT_GTM_MODAL_TEST_IDS } from './PredictGTMModal.testIds';
 
 const PredictGTMModal = () => {
   const { trackEvent, createEventBuilder } = useAnalytics();
-  const { navigate } = useNavigation();
+  const { navigate } = useNavigation<AppNavigationProp>();
   const theme = useTheme();
   const [imageLoaded, setImageLoaded] = useState(false);
   const opacity = useSharedValue(0);

app/components/UI/Predict/components/PredictMarketMultiple/PredictMarketMultiple.tsx

@@ -8,7 +8,8 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { Image } from 'expo-image';
@@ -37,10 +38,7 @@ import {
   PredictOutcomeToken,
   type PredictMarketBuyButtonPress,
 } from '../../types';
-import {
-  PredictNavigationParamList,
-  PredictEntryPoint,
-} from '../../types/navigation';
+import { PredictEntryPoint } from '../../types/navigation';
 import { formatPercentage, formatVolume } from '../../utils/format';
 import styleSheet from './PredictMarketMultiple.styles';
 import { PredictEventValues } from '../../constants/eventNames';
@@ -77,8 +75,7 @@ const PredictMarketMultiple: React.FC<PredictMarketMultipleProps> = ({
 }) => {
   const resolvedEntryPoint = useResolvedPredictEntryPoint(propEntryPoint);
 
-  const navigation =
-    useNavigation<NavigationProp<PredictNavigationParamList>>();
+  const navigation = useNavigation<AppNavigationProp>();
   const { openBuySheet } = usePredictPreviewSheet();
   const { styles } = useStyles(styleSheet, { isCarousel });
   const tw = useTailwind();

app/components/UI/Predict/components/PredictMarketOutcome/PredictMarketOutcome.tsx

@@ -7,7 +7,8 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import React, { memo } from 'react';
 import { View } from 'react-native';
 import { Image } from 'expo-image';
@@ -27,10 +28,7 @@ import {
   PredictOutcomeToken,
   PredictOutcome as PredictOutcomeType,
 } from '../../types';
-import {
-  PredictNavigationParamList,
-  PredictEntryPoint,
-} from '../../types/navigation';
+import { PredictEntryPoint } from '../../types/navigation';
 import { PredictEventValues } from '../../constants/eventNames';
 import {
   formatCents,
@@ -61,8 +59,7 @@ const PredictMarketOutcomeComponent: React.FC<PredictMarketOutcomeProps> = ({
 }) => {
   const { styles } = useStyles(styleSheet, {});
   const tw = useTailwind();
-  const navigation =
-    useNavigation<NavigationProp<PredictNavigationParamList>>();
+  const navigation = useNavigation<AppNavigationProp>();
 
   const { executeGuardedAction } = usePredictActionGuard({
     navigation,

app/components/UI/Predict/components/PredictMarketSingle/PredictMarketSingle.tsx

@@ -7,7 +7,8 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import React from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { Image } from 'expo-image';
@@ -26,10 +27,7 @@ import {
   PredictOutcomeToken,
   type PredictMarketBuyButtonPress,
 } from '../../types';
-import {
-  PredictNavigationParamList,
-  PredictEntryPoint,
-} from '../../types/navigation';
+import { PredictEntryPoint } from '../../types/navigation';
 import { formatVolume } from '../../utils/format';
 import styleSheet from './PredictMarketSingle.styles';
 import { PredictEventValues } from '../../constants/eventNames';
@@ -156,8 +154,7 @@ const PredictMarketSingle: React.FC<PredictMarketSingleProps> = ({
   const resolvedEntryPoint = useResolvedPredictEntryPoint(propEntryPoint);
 
   const outcome = market.outcomes[0];
-  const navigation =
-    useNavigation<NavigationProp<PredictNavigationParamList>>();
+  const navigation = useNavigation<AppNavigationProp>();
   const { openBuySheet } = usePredictPreviewSheet();
   const { styles } = useStyles(styleSheet, { isCarousel });
   const tw = useTailwind();

app/components/UI/Predict/components/PredictMarketSportCard/PredictMarketSportCard.tsx

@@ -13,7 +13,8 @@ import {
   TextVariant,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
-import { NavigationProp, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import React, { useCallback, useMemo } from 'react';
 import { TouchableOpacity } from 'react-native';
 import { useSelector } from 'react-redux';
@@ -36,10 +37,7 @@ import {
   PredictSportTeam,
   type PredictMarketBuyButtonPress,
 } from '../../types';
-import {
-  PredictEntryPoint,
-  PredictNavigationParamList,
-} from '../../types/navigation';
+import { PredictEntryPoint } from '../../types/navigation';
 import type { TransactionActiveAbTestEntry } from '../../../../../util/transactions/transaction-active-ab-test-attribution-registry';
 import PredictSportScoreboard from '../PredictSportScoreboard';
 import { isGameEnded } from '../../utils/scoreboard';
@@ -147,8 +145,7 @@ const PredictMarketSportCard: React.FC<PredictMarketSportCardProps> = ({
   const tw = useTailwind();
   const { colors } = useTheme();
   const resolvedEntryPoint = useResolvedPredictEntryPoint(propEntryPoint);
-  const navigation =
-    useNavigation<NavigationProp<PredictNavigationParamList>>();
+  const navigation = useNavigation<AppNavigationProp>();
   const { openBuySheet } = usePredictPreviewSheet();
   const { executeGuardedAction } = usePredictActionGuard({ navigation });
   const livePricesEnabled = useSelector(

app/components/UI/Predict/components/PredictNewButton/PredictNewButton.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useNavigation } from '@react-navigation/native';
+import type { AppNavigationProp } from '../../../../../core/NavigationService/types';
 import { Pressable } from 'react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import {
@@ -24,7 +25,7 @@ import { PREDICT_NEW_BUTTON_TEST_IDS } from './PredictNewButton.testIds';
 interface PredictNewButtonProps {}
 
 const PredictNewButton: React.FC<PredictNewButtonProps> = () => {
-  const navigation = useNavigation();
+  const navigation = useNavigation<AppNavigationProp>();
   const tw = useTailwind();
 
   const handlePress = () => {