diff --git a/app/components/UI/Perps/Views/PerpsAdjustMarginView/PerpsAdjustMarginView.tsx b/app/components/UI/Perps/Views/PerpsAdjustMarginView/PerpsAdjustMarginView.tsx index 65b1c303514..bdd06f308f7 100644 --- a/app/components/UI/Perps/Views/PerpsAdjustMarginView/PerpsAdjustMarginView.tsx +++ b/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(); const route = useRoute>(); const { position: routePosition, mode } = route.params || {}; diff --git a/app/components/UI/Perps/Views/PerpsCancelAllOrdersView/PerpsCancelAllOrdersView.tsx b/app/components/UI/Perps/Views/PerpsCancelAllOrdersView/PerpsCancelAllOrdersView.tsx index acb8b02de87..5be5ba635a8 100644 --- a/app/components/UI/Perps/Views/PerpsCancelAllOrdersView/PerpsCancelAllOrdersView.tsx +++ b/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 = ({ }) => { const theme = useTheme(); const styles = createStyles(theme); - const navigation = useNavigation(); + const navigation = useNavigation(); const internalSheetRef = useRef(null); const sheetRef = externalSheetRef || internalSheetRef; const { showToast } = usePerpsToasts(); diff --git a/app/components/UI/Perps/Views/PerpsCloseAllPositionsView/PerpsCloseAllPositionsView.tsx b/app/components/UI/Perps/Views/PerpsCloseAllPositionsView/PerpsCloseAllPositionsView.tsx index 9a12d50dc68..3392ee728b8 100644 --- a/app/components/UI/Perps/Views/PerpsCloseAllPositionsView/PerpsCloseAllPositionsView.tsx +++ b/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 = ({ }) => { const theme = useTheme(); const styles = createStyles(theme); - const navigation = useNavigation(); + const navigation = useNavigation(); const internalSheetRef = useRef(null); const sheetRef = externalSheetRef || internalSheetRef; const { showToast } = usePerpsToasts(); diff --git a/app/components/UI/Perps/Views/PerpsClosePositionView/PerpsClosePositionView.tsx b/app/components/UI/Perps/Views/PerpsClosePositionView/PerpsClosePositionView.tsx index edbbd2bd5c6..ab458471890 100644 --- a/app/components/UI/Perps/Views/PerpsClosePositionView/PerpsClosePositionView.tsx +++ b/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(); const route = useRoute>(); const { position, source: routeSource } = route.params as { diff --git a/app/components/UI/Perps/Views/PerpsHeroCardView/PerpsHeroCardView.tsx b/app/components/UI/Perps/Views/PerpsHeroCardView/PerpsHeroCardView.tsx index 728a2cda6b1..7c968090820 100644 --- a/app/components/UI/Perps/Views/PerpsHeroCardView/PerpsHeroCardView.tsx +++ b/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(); const route = useRoute(); const viewShotRefs = useRef<(View | null)[]>( Array.from({ length: CARD_IMAGES.length }, () => null), diff --git a/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx b/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx index ceda24a063e..83798137005 100644 --- a/app/components/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx +++ b/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(); const route = useRoute>(); const transactionActiveAbTests = route.params?.transactionActiveAbTests; diff --git a/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx b/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx index ed11269d30e..cb4fcabf698 100644 --- a/app/components/UI/Perps/Views/PerpsMarketDetailsView/PerpsMarketDetailsView.tsx +++ b/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 = () => { const { handleUpdateTPSL } = usePerpsTPSLUpdate(); // Keep direct navigation for configuration methods (setOptions, setParams) - const navigation = useNavigation(); + const navigation = useNavigation(); const route = useRoute>(); const { diff --git a/app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx b/app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx index 7097ca3d2ab..6db7c1ac64e 100644 --- a/app/components/UI/Perps/Views/PerpsMarketListView/PerpsMarketListView.tsx +++ b/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>(); const perpsNavigation = usePerpsNavigation(); - const navigation = useNavigation(); + const navigation = useNavigation(); const variant = route.params?.variant ?? propVariant ?? 'full'; const title = route.params?.title ?? propTitle; diff --git a/app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.tsx b/app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.tsx index f6c68062851..fe94d0d2307 100644 --- a/app/components/UI/Perps/Views/PerpsOrderBookView/PerpsOrderBookView.tsx +++ b/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 = ({ testID = PerpsOrderBookViewSelectorsIDs.CONTAINER, }) => { - const navigation = useNavigation(); + const navigation = useNavigation(); const route = useRoute>(); const { symbol, marketData: routeMarketData } = route.params || {}; diff --git a/app/components/UI/Perps/Views/PerpsOrderDetailsView/PerpsOrderDetailsView.tsx b/app/components/UI/Perps/Views/PerpsOrderDetailsView/PerpsOrderDetailsView.tsx index f0709bb667b..5e24a993141 100644 --- a/app/components/UI/Perps/Views/PerpsOrderDetailsView/PerpsOrderDetailsView.tsx +++ b/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(); const route = useRoute>(); const { order } = route.params ?? {}; diff --git a/app/components/UI/Perps/Views/PerpsOrderRedirect.tsx b/app/components/UI/Perps/Views/PerpsOrderRedirect.tsx index da6b5c76880..f934bf8ac1b 100644 --- a/app/components/UI/Perps/Views/PerpsOrderRedirect.tsx +++ b/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; * is ready before calling depositWithOrder(). */ const PerpsOrderRedirect: React.FC = () => { - const navigation = useNavigation(); + const navigation = useNavigation(); const route = useRoute(); const { direction, asset, fromTokenDetails, transactionActiveAbTests } = route.params; diff --git a/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx b/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx index ee89582375e..e49aacd8016 100644 --- a/app/components/UI/Perps/Views/PerpsOrderView/PerpsOrderView.tsx +++ b/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 = ({ defaultSzDecimals, defaultMaxLeverage, }) => { - const navigation = useNavigation(); + const navigation = useNavigation(); const route = useRoute>(); // Source: from route params (caller-passed) or trending session, else default const source = @@ -930,7 +932,7 @@ const PerpsOrderViewContentBase: React.FC = ({ 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 = ({ { 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 = ({ 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, diff --git a/app/components/UI/Perps/Views/PerpsOrderView/PerpsPayRow.tsx b/app/components/UI/Perps/Views/PerpsOrderView/PerpsPayRow.tsx index 0af4ba64fa3..e736bd85abc 100644 --- a/app/components/UI/Perps/Views/PerpsOrderView/PerpsPayRow.tsx +++ b/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(); const { setConfirmationMetric } = useConfirmationMetricEvents(); const { track } = usePerpsEventTracking(); const { payToken } = useTransactionPayToken(); diff --git a/app/components/UI/Perps/Views/PerpsPositionsView/PerpsPositionsView.tsx b/app/components/UI/Perps/Views/PerpsPositionsView/PerpsPositionsView.tsx index 2a344c369da..53a088bfd86 100644 --- a/app/components/UI/Perps/Views/PerpsPositionsView/PerpsPositionsView.tsx +++ b/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(); const privacyMode = useSelector(selectPrivacyMode); const { account } = usePerpsLiveAccount(); diff --git a/app/components/UI/Perps/Views/PerpsSelectAdjustMarginActionView/PerpsSelectAdjustMarginActionView.tsx b/app/components/UI/Perps/Views/PerpsSelectAdjustMarginActionView/PerpsSelectAdjustMarginActionView.tsx index eef3633bbf0..f8bc7827b9a 100644 --- a/app/components/UI/Perps/Views/PerpsSelectAdjustMarginActionView/PerpsSelectAdjustMarginActionView.tsx +++ b/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(); const route = useRoute< RouteProp diff --git a/app/components/UI/Perps/Views/PerpsSelectModifyActionView/PerpsSelectModifyActionView.tsx b/app/components/UI/Perps/Views/PerpsSelectModifyActionView/PerpsSelectModifyActionView.tsx index 5b0ebb71825..b0d22331a5d 100644 --- a/app/components/UI/Perps/Views/PerpsSelectModifyActionView/PerpsSelectModifyActionView.tsx +++ b/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(); const route = useRoute>(); const { trackEvent, createEventBuilder } = useAnalytics(); diff --git a/app/components/UI/Perps/Views/PerpsSelectOrderTypeView/PerpsSelectOrderTypeView.tsx b/app/components/UI/Perps/Views/PerpsSelectOrderTypeView/PerpsSelectOrderTypeView.tsx index b0921c1b715..a426ff14f37 100644 --- a/app/components/UI/Perps/Views/PerpsSelectOrderTypeView/PerpsSelectOrderTypeView.tsx +++ b/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 = ({ onSelect, onClose: onExternalClose, }) => { - const navigation = useNavigation(); + const navigation = useNavigation(); const internalSheetRef = useRef(null); const sheetRef = externalSheetRef || internalSheetRef; diff --git a/app/components/UI/Perps/Views/PerpsSelectProviderView/PerpsSelectProviderView.tsx b/app/components/UI/Perps/Views/PerpsSelectProviderView/PerpsSelectProviderView.tsx index 87d6d07ae3c..59451b03e43 100644 --- a/app/components/UI/Perps/Views/PerpsSelectProviderView/PerpsSelectProviderView.tsx +++ b/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(); const { activeProvider, switchProvider } = usePerpsProvider(); const { toggleTestnet } = usePerpsNetworkConfig(); const network = useSelector(selectPerpsNetwork); diff --git a/app/components/UI/Perps/Views/PerpsTPSLView/PerpsTPSLView.tsx b/app/components/UI/Perps/Views/PerpsTPSLView/PerpsTPSLView.tsx index 74257c48519..a77e940b2d7 100644 --- a/app/components/UI/Perps/Views/PerpsTPSLView/PerpsTPSLView.tsx +++ b/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(); const route = useRoute>(); // Extract params from navigation route diff --git a/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx b/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx index 1eb58d02807..7bd2bf98e15 100644 --- a/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx +++ b/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(); const { account } = usePerpsLiveAccount(); const isEligible = useSelector(selectPerpsEligibility); const { track } = usePerpsEventTracking(); diff --git a/app/components/UI/Perps/Views/PerpsTooltipView/PerpsTooltipView.tsx b/app/components/UI/Perps/Views/PerpsTooltipView/PerpsTooltipView.tsx index 37ae019b2ae..03d3006aad8 100644 --- a/app/components/UI/Perps/Views/PerpsTooltipView/PerpsTooltipView.tsx +++ b/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(); const route = useRoute, string>>(); const bottomSheetRef = useRef(null); diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.tsx index de77ab32e00..1bba9f94948 100644 --- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.tsx +++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView.tsx @@ -1,4 +1,6 @@ import { useNavigation, useRoute } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { BigNumber } from 'bignumber.js'; import React, { useLayoutEffect } from 'react'; import { ScrollView, View } from 'react-native'; @@ -35,7 +37,7 @@ import { trackBlockExplorerLinkClicked } from '../../../../../util/analytics/ext const PerpsFundingTransactionView: React.FC = () => { const { styles } = useStyles(styleSheet, {}); - const navigation = useNavigation(); + const navigation = useNavigation(); const { trackEvent, createEventBuilder } = useAnalytics(); const route = useRoute(); diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.tsx index e96749d746c..a50de7ad6a3 100644 --- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.tsx +++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView.tsx @@ -1,4 +1,6 @@ import { useNavigation, useRoute } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import React, { useLayoutEffect } from 'react'; import { ScrollView, View } from 'react-native'; import { strings } from '../../../../../../locales/i18n'; @@ -32,7 +34,7 @@ import { trackBlockExplorerLinkClicked } from '../../../../../util/analytics/ext const PerpsOrderTransactionView: React.FC = () => { const { styles } = useStyles(styleSheet, {}); - const navigation = useNavigation(); + const navigation = useNavigation(); const { trackEvent, createEventBuilder } = useAnalytics(); const route = useRoute(); const selectedInternalAccount = useSelector( diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.tsx index 4efc3326b42..e6a9b0e2e36 100644 --- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.tsx +++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView.tsx @@ -1,4 +1,6 @@ import { useNavigation, useRoute } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import React, { useLayoutEffect, useMemo } from 'react'; import { ScrollView, View } from 'react-native'; import { strings } from '../../../../../../locales/i18n'; @@ -41,7 +43,7 @@ import { trackBlockExplorerLinkClicked } from '../../../../../util/analytics/ext const PerpsPositionTransactionView: React.FC = () => { const { styles } = useStyles(styleSheet, {}); - const navigation = useNavigation(); + const navigation = useNavigation(); const { trackEvent, createEventBuilder } = useAnalytics(); const route = useRoute(); const selectedInternalAccount = useSelector( diff --git a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx index d2fe1a0bd8d..1f1653e1039 100644 --- a/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx +++ b/app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx @@ -1,4 +1,6 @@ import { useFocusEffect, useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { FlashList } from '@shopify/flash-list'; import React, { useCallback, @@ -59,7 +61,7 @@ import { useTailwind } from '@metamask/design-system-twrnc-preset'; const PerpsTransactionsView: React.FC = () => { const { styles } = useStyles(styleSheet, {}); const tw = useTailwind(); - const navigation = useNavigation(); + const navigation = useNavigation(); const [activeFilter, setActiveFilter] = useState('Trades'); const [refreshing, setRefreshing] = useState(false); diff --git a/app/components/UI/Perps/Views/PerpsWithdrawView/PerpsWithdrawView.tsx b/app/components/UI/Perps/Views/PerpsWithdrawView/PerpsWithdrawView.tsx index b7ecb02760c..de565ded58e 100644 --- a/app/components/UI/Perps/Views/PerpsWithdrawView/PerpsWithdrawView.tsx +++ b/app/components/UI/Perps/Views/PerpsWithdrawView/PerpsWithdrawView.tsx @@ -1,4 +1,6 @@ import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import React, { useCallback, useEffect, @@ -81,7 +83,7 @@ const MAX_INPUT_LENGTH = 20; const PerpsWithdrawView: React.FC = () => { const tw = useTailwind(); const fadeAnim = useRef(new Animated.Value(0)).current; - const navigation = useNavigation(); + const navigation = useNavigation(); // State const [withdrawAmount, setWithdrawAmount] = useState(''); // Start with empty string for keypad diff --git a/app/components/UI/Perps/components/PerpsCard/PerpsCard.tsx b/app/components/UI/Perps/components/PerpsCard/PerpsCard.tsx index bb967f14b52..76d8091e4f7 100644 --- a/app/components/UI/Perps/components/PerpsCard/PerpsCard.tsx +++ b/app/components/UI/Perps/components/PerpsCard/PerpsCard.tsx @@ -1,6 +1,8 @@ import React, { useCallback, useMemo } from 'react'; import { useSelector } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { Box, BoxAlignItems, @@ -107,7 +109,7 @@ const PerpsCard: React.FC = ({ source_section, iconSize = HOME_SCREEN_CONFIG.DefaultIconSize, }) => { - const navigation = useNavigation(); + const navigation = useNavigation(); const { track } = usePerpsEventTracking(); const privacyMode = useSelector(selectPrivacyMode); diff --git a/app/components/UI/Perps/components/PerpsCloseSummary/PerpsCloseSummary.tsx b/app/components/UI/Perps/components/PerpsCloseSummary/PerpsCloseSummary.tsx index ddd47adb49e..abb86243553 100644 --- a/app/components/UI/Perps/components/PerpsCloseSummary/PerpsCloseSummary.tsx +++ b/app/components/UI/Perps/components/PerpsCloseSummary/PerpsCloseSummary.tsx @@ -6,6 +6,8 @@ import { type ViewStyle, } from 'react-native'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { strings } from '../../../../../../locales/i18n'; import { formatPerpsFiat, @@ -124,7 +126,7 @@ const PerpsCloseSummary: React.FC = ({ testIDs, }) => { const { styles, theme } = useStyles(createStyles, {}); - const navigation = useNavigation(); + const navigation = useNavigation(); const handleTooltipPress = useCallback( (contentKey: PerpsTooltipContentKey, data?: Record) => { diff --git a/app/components/UI/Perps/components/PerpsCompetitionBanner/PerpsCompetitionBanner.tsx b/app/components/UI/Perps/components/PerpsCompetitionBanner/PerpsCompetitionBanner.tsx index 4178d7c6a85..69f93bc827b 100644 --- a/app/components/UI/Perps/components/PerpsCompetitionBanner/PerpsCompetitionBanner.tsx +++ b/app/components/UI/Perps/components/PerpsCompetitionBanner/PerpsCompetitionBanner.tsx @@ -2,6 +2,8 @@ import React, { useCallback, useEffect, useState } from 'react'; import { Image, StyleSheet, Pressable, View } from 'react-native'; import { useSelector, useDispatch } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { Box, Text, @@ -71,7 +73,7 @@ const PerpsCompetitionBanner: React.FC = ({ testID = 'perps-competition-banner', }) => { const isEnabled = useSelector(selectPerpsCompetitionBannerEnabledFlag); - const navigation = useNavigation(); + const navigation = useNavigation(); const dispatch = useDispatch(); const { track } = usePerpsEventTracking(); const [isDismissed, setIsDismissed] = useState(null); diff --git a/app/components/UI/Perps/components/PerpsConnectionErrorView/PerpsConnectionErrorView.tsx b/app/components/UI/Perps/components/PerpsConnectionErrorView/PerpsConnectionErrorView.tsx index 9fa8bcd19ca..041dcc2bd47 100644 --- a/app/components/UI/Perps/components/PerpsConnectionErrorView/PerpsConnectionErrorView.tsx +++ b/app/components/UI/Perps/components/PerpsConnectionErrorView/PerpsConnectionErrorView.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { View } from 'react-native'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { Button, ButtonSize, @@ -41,7 +43,7 @@ const PerpsConnectionErrorView: React.FC = ({ retryAttempts = 0, }) => { const { styles } = useStyles(styleSheet, {}); - const navigation = useNavigation(); + const navigation = useNavigation(); const { track } = usePerpsEventTracking(); const errorMessage = diff --git a/app/components/UI/Perps/components/PerpsCrossMarginWarningBottomSheet/PerpsCrossMarginWarningBottomSheet.tsx b/app/components/UI/Perps/components/PerpsCrossMarginWarningBottomSheet/PerpsCrossMarginWarningBottomSheet.tsx index e86b5683c18..d487a3023bc 100644 --- a/app/components/UI/Perps/components/PerpsCrossMarginWarningBottomSheet/PerpsCrossMarginWarningBottomSheet.tsx +++ b/app/components/UI/Perps/components/PerpsCrossMarginWarningBottomSheet/PerpsCrossMarginWarningBottomSheet.tsx @@ -1,4 +1,6 @@ import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import React, { useCallback, useRef } from 'react'; import { View } from 'react-native'; import { strings } from '../../../../../../locales/i18n'; @@ -30,7 +32,7 @@ const PerpsCrossMarginWarningBottomSheet: React.FC< > = ({ sheetRef: externalSheetRef, onClose: onExternalClose }) => { const theme = useTheme(); const styles = createStyles(theme); - const navigation = useNavigation(); + const navigation = useNavigation(); const internalSheetRef = useRef(null); const sheetRef = externalSheetRef || internalSheetRef; diff --git a/app/components/UI/Perps/components/PerpsDeveloperOptionsSection/PerpsHIP3DebugButton.tsx b/app/components/UI/Perps/components/PerpsDeveloperOptionsSection/PerpsHIP3DebugButton.tsx index 86170ec57cf..65bf63a5350 100644 --- a/app/components/UI/Perps/components/PerpsDeveloperOptionsSection/PerpsHIP3DebugButton.tsx +++ b/app/components/UI/Perps/components/PerpsDeveloperOptionsSection/PerpsHIP3DebugButton.tsx @@ -1,5 +1,7 @@ import React from 'react'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { Button, ButtonVariant, @@ -8,7 +10,7 @@ import { import Routes from '../../../../../constants/navigation/Routes'; export const PerpsHIP3DebugButton = () => { - const navigation = useNavigation(); + const navigation = useNavigation(); const handleDebugPress = () => { navigation.navigate(Routes.PERPS.ROOT, { diff --git a/app/components/UI/Perps/components/PerpsGTMModal/PerpsGTMModal.tsx b/app/components/UI/Perps/components/PerpsGTMModal/PerpsGTMModal.tsx index 3729bc38c61..997b9dc4d77 100644 --- a/app/components/UI/Perps/components/PerpsGTMModal/PerpsGTMModal.tsx +++ b/app/components/UI/Perps/components/PerpsGTMModal/PerpsGTMModal.tsx @@ -1,4 +1,6 @@ import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import React, { useState } from 'react'; import { Image, View, useColorScheme } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; @@ -35,7 +37,7 @@ import { const PerpsGTMModal = () => { const { trackEvent, createEventBuilder } = useAnalytics(); - const { navigate } = useNavigation(); + const { navigate } = useNavigation(); const theme = useTheme(); const isDarkMode = useColorScheme() === 'dark'; diff --git a/app/components/UI/Perps/components/PerpsHomeHeader/PerpsHomeHeader.tsx b/app/components/UI/Perps/components/PerpsHomeHeader/PerpsHomeHeader.tsx index 285ab21e762..42e652f22c3 100644 --- a/app/components/UI/Perps/components/PerpsHomeHeader/PerpsHomeHeader.tsx +++ b/app/components/UI/Perps/components/PerpsHomeHeader/PerpsHomeHeader.tsx @@ -2,6 +2,8 @@ import React, { useCallback } from 'react'; import { View, TouchableOpacity, Pressable } from 'react-native'; import { useSelector } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { Box, BoxFlexDirection, @@ -103,7 +105,7 @@ const PerpsHomeHeader: React.FC = ({ const { styles } = useStyles(styleSheet, {}); const tw = useTailwind(); const { colors } = useTheme(); - const navigation = useNavigation(); + const navigation = useNavigation(); const defaultHandleBack = useCallback(() => { if (navigation.canGoBack()) { diff --git a/app/components/UI/Perps/components/PerpsMarketTabs/PerpsMarketTabs.tsx b/app/components/UI/Perps/components/PerpsMarketTabs/PerpsMarketTabs.tsx index 7338a741916..294fe054bfd 100644 --- a/app/components/UI/Perps/components/PerpsMarketTabs/PerpsMarketTabs.tsx +++ b/app/components/UI/Perps/components/PerpsMarketTabs/PerpsMarketTabs.tsx @@ -12,6 +12,8 @@ import { IconSize, } from '@metamask/design-system-react-native'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import Text, { TextVariant, TextColor, @@ -224,7 +226,7 @@ const PerpsMarketTabs: React.FC = ({ activeSLOrderId, }) => { const { styles } = useStyles(styleSheet, {}); - const navigation = useNavigation(); + const navigation = useNavigation(); const hasUserInteracted = useRef(false); const hasSetInitialTab = useRef(false); const tabsListRef = useRef(null); diff --git a/app/components/UI/Perps/components/PerpsMarketTradesList/PerpsMarketTradesList.tsx b/app/components/UI/Perps/components/PerpsMarketTradesList/PerpsMarketTradesList.tsx index 862c9b98f9b..f2306fa5abf 100644 --- a/app/components/UI/Perps/components/PerpsMarketTradesList/PerpsMarketTradesList.tsx +++ b/app/components/UI/Perps/components/PerpsMarketTradesList/PerpsMarketTradesList.tsx @@ -1,6 +1,8 @@ import React, { useCallback, useMemo } from 'react'; import { View, TouchableOpacity, FlatList } from 'react-native'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { Box, FontWeight, @@ -45,7 +47,7 @@ const PerpsMarketTradesList: React.FC = ({ iconSize = HOME_SCREEN_CONFIG.DefaultIconSize, }) => { const { styles } = useStyles(styleSheet, {}); - const navigation = useNavigation(); + const navigation = useNavigation(); const { trackEvent, createEventBuilder } = useAnalytics(); // Fetch order fills via WebSocket + REST API for complete history diff --git a/app/components/UI/Perps/components/PerpsMarketTypeSection/PerpsMarketTypeSection.tsx b/app/components/UI/Perps/components/PerpsMarketTypeSection/PerpsMarketTypeSection.tsx index b8cb7bedcb9..7cf16ab5934 100644 --- a/app/components/UI/Perps/components/PerpsMarketTypeSection/PerpsMarketTypeSection.tsx +++ b/app/components/UI/Perps/components/PerpsMarketTypeSection/PerpsMarketTypeSection.tsx @@ -1,6 +1,8 @@ import React, { useCallback } from 'react'; import { View, StyleProp, ViewStyle } from 'react-native'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { Box, SectionHeader } from '@metamask/design-system-react-native'; import Routes from '../../../../../constants/navigation/Routes'; import { @@ -58,7 +60,7 @@ const PerpsMarketTypeSection: React.FC = ({ style, contentContainerStyle, }) => { - const navigation = useNavigation(); + const navigation = useNavigation(); const handleViewAll = useCallback(() => { navigation.navigate(Routes.PERPS.ROOT, { diff --git a/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.tsx b/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.tsx index c47581748b8..c586691da82 100644 --- a/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.tsx +++ b/app/components/UI/Perps/components/PerpsOrderHeader/PerpsOrderHeader.tsx @@ -1,4 +1,6 @@ import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { HeaderSubpage, SelectButton, @@ -37,7 +39,7 @@ const PerpsOrderHeader: React.FC = ({ title, isLoading, }) => { - const navigation = useNavigation(); + const navigation = useNavigation(); // Fast, single-symbol focused price (~0.5s activeAssetCtx cadence, // TAT-3334) — the same source PerpsOrderView already uses for its own diff --git a/app/components/UI/Perps/components/PerpsPillItem/PerpsPillItem.tsx b/app/components/UI/Perps/components/PerpsPillItem/PerpsPillItem.tsx index f0e057ba4e8..9a8c7302c47 100644 --- a/app/components/UI/Perps/components/PerpsPillItem/PerpsPillItem.tsx +++ b/app/components/UI/Perps/components/PerpsPillItem/PerpsPillItem.tsx @@ -1,11 +1,12 @@ import React, { useMemo } from 'react'; -import { useNavigation, NavigationProp } from '@react-navigation/native'; +import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { PERPS_EVENT_VALUE, getPerpsDisplaySymbol, } from '@metamask/perps-controller'; import PerpsTokenLogo from '../PerpsTokenLogo'; -import type { PerpsNavigationParamList } from '../../types/navigation'; import Routes from '../../../../../constants/navigation/Routes'; import { formatPercentChange } from '../../../Trending/utils/formatPercentChange'; import { ExplorePill } from '../../../Trending/components/ExplorePill'; @@ -46,7 +47,7 @@ const PerpsPillItem: React.FC = ({ marketDetailsSourceSection, transactionActiveAbTests, }) => { - const navigation = useNavigation>(); + const navigation = useNavigation(); const { market } = item; const { changeLabel, changeTextColor } = useMemo( diff --git a/app/components/UI/Perps/components/PerpsProducts/PerpsProducts.tsx b/app/components/UI/Perps/components/PerpsProducts/PerpsProducts.tsx index 77c08792f47..59b3395553a 100644 --- a/app/components/UI/Perps/components/PerpsProducts/PerpsProducts.tsx +++ b/app/components/UI/Perps/components/PerpsProducts/PerpsProducts.tsx @@ -1,5 +1,7 @@ import React, { useCallback } from 'react'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { useSelector } from 'react-redux'; import { Box, @@ -56,7 +58,7 @@ const PerpsProducts: React.FC = ({ transactionActiveAbTests, }) => { const isEnabled = useSelector(selectPerpsProductsEnabledFlag); - const navigation = useNavigation(); + const navigation = useNavigation(); const { trackEvent, createEventBuilder } = useAnalytics(); const categoriesWithLabels = usePerpsCategories(); diff --git a/app/components/UI/Perps/components/PerpsProviderSelector/PerpsProviderSelectorBadge.tsx b/app/components/UI/Perps/components/PerpsProviderSelector/PerpsProviderSelectorBadge.tsx index a0b545056e7..e494c664125 100644 --- a/app/components/UI/Perps/components/PerpsProviderSelector/PerpsProviderSelectorBadge.tsx +++ b/app/components/UI/Perps/components/PerpsProviderSelector/PerpsProviderSelectorBadge.tsx @@ -7,6 +7,8 @@ import { } from '@metamask/design-system-react-native'; import { TouchableOpacity, View } from 'react-native'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { useSelector } from 'react-redux'; import { useStyles } from '../../../../../component-library/hooks'; import Text, { @@ -31,7 +33,7 @@ const PerpsProviderSelectorBadge: React.FC = ({ testID, }) => { const { styles } = useStyles(styleSheet, {}); - const navigation = useNavigation(); + const navigation = useNavigation(); const { activeProvider, isMultiProviderEnabled } = usePerpsProvider(); const network = useSelector(selectPerpsNetwork); const isTestnet = network === 'testnet'; diff --git a/app/components/UI/Perps/components/PerpsQuoteExpiredModal/PerpsQuoteExpiredModal.tsx b/app/components/UI/Perps/components/PerpsQuoteExpiredModal/PerpsQuoteExpiredModal.tsx index aad584ddb32..cdd469d4c47 100644 --- a/app/components/UI/Perps/components/PerpsQuoteExpiredModal/PerpsQuoteExpiredModal.tsx +++ b/app/components/UI/Perps/components/PerpsQuoteExpiredModal/PerpsQuoteExpiredModal.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { View } from 'react-native'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { strings } from '../../../../../../locales/i18n'; import { BottomSheet, @@ -16,7 +18,7 @@ import createStyles from './PerpsQuoteExpiredModal.styles'; import { DEPOSIT_CONFIG } from '@metamask/perps-controller'; const PerpsQuoteExpiredModal = () => { - const navigation = useNavigation(); + const navigation = useNavigation(); const { styles } = useStyles(createStyles, {}); const refreshRate = DEPOSIT_CONFIG.RefreshRate / 1000; // Convert to seconds diff --git a/app/components/UI/Perps/components/PerpsRecentActivityList/PerpsRecentActivityList.tsx b/app/components/UI/Perps/components/PerpsRecentActivityList/PerpsRecentActivityList.tsx index 7be962205d7..742a9da405f 100644 --- a/app/components/UI/Perps/components/PerpsRecentActivityList/PerpsRecentActivityList.tsx +++ b/app/components/UI/Perps/components/PerpsRecentActivityList/PerpsRecentActivityList.tsx @@ -1,6 +1,8 @@ import React, { useCallback } from 'react'; import { View, TouchableOpacity, FlatList } from 'react-native'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { Box, SectionHeader } from '@metamask/design-system-react-native'; import Text, { TextVariant, @@ -41,7 +43,7 @@ const PerpsRecentActivityList: React.FC = ({ iconSize = HOME_SCREEN_CONFIG.DefaultIconSize, }) => { const { styles } = useStyles(styleSheet, {}); - const navigation = useNavigation(); + const navigation = useNavigation(); const { trackEvent, createEventBuilder } = useAnalytics(); const activityTitle = strings('perps.home.recent_activity'); diff --git a/app/components/UI/Perps/components/PerpsRelatedMarkets/PerpsRelatedMarkets.tsx b/app/components/UI/Perps/components/PerpsRelatedMarkets/PerpsRelatedMarkets.tsx index 7a591b79167..dc9674eec5d 100644 --- a/app/components/UI/Perps/components/PerpsRelatedMarkets/PerpsRelatedMarkets.tsx +++ b/app/components/UI/Perps/components/PerpsRelatedMarkets/PerpsRelatedMarkets.tsx @@ -1,5 +1,7 @@ import React, { memo, useCallback, useMemo } from 'react'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { PERPS_EVENT_PROPERTY, type PerpsMarketData, @@ -37,7 +39,7 @@ const LIVE_PRICES_THROTTLE_MS = 3000; const PerpsRelatedMarkets: React.FC = ({ currentMarket, }) => { - const navigation = useNavigation(); + const navigation = useNavigation(); const { track } = usePerpsEventTracking(); const { navigateToMarketList } = usePerpsNavigation(); diff --git a/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx b/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx index a9e19f954d3..4152af65cff 100644 --- a/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx +++ b/app/components/UI/Perps/components/PerpsServiceInterruptionBanner/PerpsServiceInterruptionBanner.tsx @@ -2,6 +2,8 @@ import React, { useCallback } from 'react'; import { StyleSheet } from 'react-native'; import { useSelector } from 'react-redux'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { Box, Text, @@ -53,7 +55,7 @@ const PerpsServiceInterruptionBanner: React.FC< const isEnabled = useSelector( selectPerpsServiceInterruptionBannerEnabledFlag, ); - const navigation = useNavigation(); + const navigation = useNavigation(); const handleSupportPress = useCallback(() => { navigation.navigate(Routes.WEBVIEW.MAIN, { diff --git a/app/components/UI/Perps/components/PerpsWatchlistMarkets/PerpsWatchlistMarkets.tsx b/app/components/UI/Perps/components/PerpsWatchlistMarkets/PerpsWatchlistMarkets.tsx index e5ce1291a31..751d1beaf0c 100644 --- a/app/components/UI/Perps/components/PerpsWatchlistMarkets/PerpsWatchlistMarkets.tsx +++ b/app/components/UI/Perps/components/PerpsWatchlistMarkets/PerpsWatchlistMarkets.tsx @@ -7,6 +7,8 @@ import Animated, { LinearTransition, } from 'react-native-reanimated'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../../core/NavigationService/types'; + import { Box, SectionDivider, @@ -102,7 +104,7 @@ const PerpsWatchlistMarketsV1: React.FC = ({ onMarketPress, showLeadingDivider = true, }) => { - const navigation = useNavigation(); + const navigation = useNavigation(); const handleMarketPress = useCallback( (market: PerpsMarketData) => { @@ -202,7 +204,7 @@ const PerpsWatchlistMarketsV2: React.FC = ({ showLeadingDivider = true, }) => { const { styles } = useStyles(styleSheet, {}); - const navigation = useNavigation(); + const navigation = useNavigation(); const [expanded, setExpanded] = useState(false); const watchlistSymbols = useSelector(selectPerpsWatchlistMarkets); const { track } = usePerpsEventTracking(); diff --git a/app/components/UI/Perps/hooks/usePerpsCancelAllOrders.ts b/app/components/UI/Perps/hooks/usePerpsCancelAllOrders.ts index 3cfa991a597..bf5667e8ca5 100644 --- a/app/components/UI/Perps/hooks/usePerpsCancelAllOrders.ts +++ b/app/components/UI/Perps/hooks/usePerpsCancelAllOrders.ts @@ -1,5 +1,7 @@ import { useCallback, useState } from 'react'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../core/NavigationService/types'; + import { DevLogger } from '../../../../core/SDKConnect/utils/DevLogger'; import Engine from '../../../../core/Engine'; import { @@ -49,7 +51,7 @@ export const usePerpsCancelAllOrders = ( orders: Order[] | null, options?: UsePerpsCancelAllOrdersOptions, ): UsePerpsCancelAllOrdersReturn => { - const navigation = useNavigation(); + const navigation = useNavigation(); const [isCanceling, setIsCanceling] = useState(false); const [error, setError] = useState(null); diff --git a/app/components/UI/Perps/hooks/usePerpsCloseAllPositions.ts b/app/components/UI/Perps/hooks/usePerpsCloseAllPositions.ts index 8ba5424c1bc..bbcfde1247c 100644 --- a/app/components/UI/Perps/hooks/usePerpsCloseAllPositions.ts +++ b/app/components/UI/Perps/hooks/usePerpsCloseAllPositions.ts @@ -1,5 +1,7 @@ import { useCallback, useState } from 'react'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../core/NavigationService/types'; + import { DevLogger } from '../../../../core/SDKConnect/utils/DevLogger'; import Engine from '../../../../core/Engine'; import { @@ -57,7 +59,7 @@ export const usePerpsCloseAllPositions = ( positions: Position[] | null, options?: UsePerpsCloseAllPositionsOptions, ): UsePerpsCloseAllPositionsReturn => { - const navigation = useNavigation(); + const navigation = useNavigation(); const [isClosing, setIsClosing] = useState(false); const [error, setError] = useState(null); diff --git a/app/components/UI/Perps/hooks/usePerpsHomeActions.ts b/app/components/UI/Perps/hooks/usePerpsHomeActions.ts index 99694e1e23f..2ae918212c3 100644 --- a/app/components/UI/Perps/hooks/usePerpsHomeActions.ts +++ b/app/components/UI/Perps/hooks/usePerpsHomeActions.ts @@ -1,5 +1,7 @@ import { useCallback, useState } 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 { DevLogger } from '../../../../core/SDKConnect/utils/DevLogger'; @@ -68,7 +70,7 @@ export interface UsePerpsHomeActionsReturn { export const usePerpsHomeActions = ( options?: UsePerpsHomeActionsOptions, ): UsePerpsHomeActionsReturn => { - const navigation = useNavigation(); + const navigation = useNavigation(); const isEligible = useSelector(selectPerpsEligibility); const selectedAddress = useSelector(selectSelectedInternalAccountAddress); const { depositWithConfirmation } = usePerpsTrading(); diff --git a/app/components/UI/Perps/hooks/usePerpsNavigation.ts b/app/components/UI/Perps/hooks/usePerpsNavigation.ts index c6b3fa865ea..b176ca6dd9c 100644 --- a/app/components/UI/Perps/hooks/usePerpsNavigation.ts +++ b/app/components/UI/Perps/hooks/usePerpsNavigation.ts @@ -1,5 +1,7 @@ import { useCallback } from 'react'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../core/NavigationService/types'; + import Routes from '../../../../constants/navigation/Routes'; import type { PerpsNavigationParamList } from '../types/navigation'; import { @@ -84,7 +86,7 @@ export interface PerpsNavigationHandlers { * @returns Object containing all navigation handler functions */ export const usePerpsNavigation = (): PerpsNavigationHandlers => { - const navigation = useNavigation(); + const navigation = useNavigation(); // Main app navigation handlers const navigateToWallet = useCallback(() => { diff --git a/app/components/UI/Perps/hooks/usePerpsToasts.tsx b/app/components/UI/Perps/hooks/usePerpsToasts.tsx index ea08169cdf1..2dc6dc9e050 100644 --- a/app/components/UI/Perps/hooks/usePerpsToasts.tsx +++ b/app/components/UI/Perps/hooks/usePerpsToasts.tsx @@ -6,6 +6,8 @@ import { Spinner, } from '@metamask/design-system-react-native'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../core/NavigationService/types'; + import { playNotification, NotificationMoment, @@ -249,7 +251,7 @@ const usePerpsToasts = (): { } => { const { toastRef } = useContext(ToastContext); const theme = useAppThemeFromContext(); - const navigation = useNavigation(); + const navigation = useNavigation(); const perpsBaseToastOptions: Record = useMemo( () => ({ diff --git a/app/components/UI/Perps/hooks/usePerpsWithdrawConfirmation.ts b/app/components/UI/Perps/hooks/usePerpsWithdrawConfirmation.ts index 07d2087737e..5d894d37106 100644 --- a/app/components/UI/Perps/hooks/usePerpsWithdrawConfirmation.ts +++ b/app/components/UI/Perps/hooks/usePerpsWithdrawConfirmation.ts @@ -1,5 +1,7 @@ import { useCallback } from 'react'; import { useNavigation } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../core/NavigationService/types'; + import { Hex } from '@metamask/utils'; import { CHAIN_IDS, TransactionType } from '@metamask/transaction-controller'; import { ORIGIN_METAMASK } from '@metamask/controller-utils'; @@ -69,7 +71,7 @@ export function usePerpsWithdrawConfirmation() { selectSelectedInternalAccountByScope, )('eip155:0')?.address; const { navigateToConfirmation } = useConfirmNavigation(); - const navigation = useNavigation(); + const navigation = useNavigation(); const { showToast, PerpsToastOptions } = usePerpsToasts(); const { networkClientId } = diff --git a/app/components/UI/Perps/routes/index.tsx b/app/components/UI/Perps/routes/index.tsx index 186479efe47..337b1ca90e5 100644 --- a/app/components/UI/Perps/routes/index.tsx +++ b/app/components/UI/Perps/routes/index.tsx @@ -48,6 +48,8 @@ import PerpsSelectProviderView from '../Views/PerpsSelectProviderView'; import { PayWithModal } from '../../../Views/confirmations/components/modals/pay-with-modal/pay-with-modal'; import { PayWithBottomSheet } from '../../../Views/confirmations/components/modals/pay-with-bottom-sheet/pay-with-bottom-sheet'; import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'; +import type { AppNavigationProp } from '../../../../core/NavigationService/types'; + /* eslint-disable-next-line */ import { NavigationContext } from '@react-navigation/core'; import { CONFIRMATION_HEADER_CONFIG } from '../constants/perpsConfig'; @@ -66,9 +68,12 @@ const styles = StyleSheet.create({ }, }); -export function getRedesignedConfirmationsHeaderOptions({ - showPerpsHeader = CONFIRMATION_HEADER_CONFIG.DefaultShowPerpsHeader, -}: PerpsNavigationParamList['RedesignedConfirmations'] = {}): NativeStackNavigationOptions { +export function getRedesignedConfirmationsHeaderOptions( + params: PerpsNavigationParamList['RedesignedConfirmations'] = {}, +): NativeStackNavigationOptions { + const showPerpsHeader = + params?.showPerpsHeader ?? + CONFIRMATION_HEADER_CONFIG.DefaultShowPerpsHeader; if (showPerpsHeader) { return { ...getEmptyNavHeader(), @@ -83,7 +88,7 @@ export function getRedesignedConfirmationsHeaderOptions({ } const PerpsConfirmScreen = () => { - const navigation = useNavigation(); + const navigation = useNavigation(); const { params } = useRoute>(); const showPerpsHeader = diff --git a/app/components/UI/Perps/types/navigation.ts b/app/components/UI/Perps/types/navigation.ts index 4eecfb1c1e0..dd2f2d23641 100644 --- a/app/components/UI/Perps/types/navigation.ts +++ b/app/components/UI/Perps/types/navigation.ts @@ -42,29 +42,41 @@ export type PerpsClosePositionModalsNavigationParamList = { PerpsTooltip: PerpsTooltipViewRouteParams; }; +/** + * Shared order / redesigned-confirmation params for the Perps trade flow. + * + * Declared as an object-literal `type` (not `interface`) so it keeps an implicit + * index signature and stays assignable to `Record` (e.g. when + * passed as tutorial `redirectParams`). The eslint-disable mirrors + * `PerpsStackParamList` below, whose auto-fix would otherwise convert this to an + * `interface` and drop the implicit index signature. + */ +// eslint-disable-next-line @typescript-eslint/consistent-type-definitions +export type PerpsOrderRouteParams = { + direction: 'long' | 'short'; + asset: string; + defaultSzDecimals?: number; + defaultMaxLeverage?: number; + leverage?: number; + amount?: string; + price?: string; + orderType?: OrderType; + existingPosition?: Position; // Pass existing position for leverage consistency when adding to position + hideTPSL?: boolean; // Hide TP/SL row when modifying existing position + /** When false, confirmation screen uses header: () => null; when true/undefined uses headerLeft/title options */ + showPerpsHeader?: boolean; + /** Analytics: how the user got to the order screen (e.g. trade_action, order_book_long_button, asset_detail_screen) */ + source?: string; + /** Analytics: chart library active when the order flow started */ + chartLibrary?: string; + transactionActiveAbTests?: TransactionActiveAbTestEntry[]; +}; + // ParamListBase requires `type`; `interface` cannot satisfy it. // eslint-disable-next-line @typescript-eslint/consistent-type-definitions export type PerpsStackParamList = { // Order flow routes - PerpsOrder: { - direction: 'long' | 'short'; - asset: string; - defaultSzDecimals?: number; - defaultMaxLeverage?: number; - leverage?: number; - amount?: string; - price?: string; - orderType?: OrderType; - existingPosition?: Position; // Pass existing position for leverage consistency when adding to position - hideTPSL?: boolean; // Hide TP/SL row when modifying existing position - /** When false, confirmation screen uses header: () => null; when true/undefined uses headerLeft/title options */ - showPerpsHeader?: boolean; - /** Analytics: how the user got to the order screen (e.g. trade_action, order_book_long_button, asset_detail_screen) */ - source?: string; - /** Analytics: chart library active when the order flow started */ - chartLibrary?: string; - transactionActiveAbTests?: TransactionActiveAbTestEntry[]; - }; + PerpsOrder: PerpsOrderRouteParams; PerpsOrderSuccess: { orderId: string; @@ -108,24 +120,27 @@ export type PerpsStackParamList = { // Market and position management routes PerpsMarketList: undefined; - PerpsMarketListView: { - source?: string; - variant?: 'full' | 'minimal'; - title?: string; - showBalanceActions?: boolean; - showBottomNav?: boolean; - showWatchlistOnly?: boolean; - defaultMarketTypeFilter?: MarketTypeFilter; - defaultSortOptionId?: SortOptionId; - defaultSortDirection?: SortDirection; - fromHome?: boolean; - button_clicked?: string; - button_location?: string; - transactionActiveAbTests?: TransactionActiveAbTestEntry[]; - }; + PerpsMarketListView: + | { + source?: string; + variant?: 'full' | 'minimal'; + title?: string; + showBalanceActions?: boolean; + showBottomNav?: boolean; + showWatchlistOnly?: boolean; + defaultMarketTypeFilter?: MarketTypeFilter; + defaultSortOptionId?: SortOptionId; + defaultSortDirection?: SortDirection; + fromHome?: boolean; + button_clicked?: string; + button_location?: string; + transactionActiveAbTests?: TransactionActiveAbTestEntry[]; + } + | undefined; PerpsMarketDetails: { - market: PerpsMarketData; + /** Full market when available; Partial is accepted for trade-details deep entries. */ + market: PerpsMarketData | Partial; initialTab?: 'position' | 'orders' | 'info'; monitoringIntent?: Partial; source?: string; @@ -190,16 +205,18 @@ export type PerpsStackParamList = { transaction: PerpsTransaction; }; - PerpsTutorial: { - isFromDeeplink?: boolean; - isFromGTMModal?: boolean; - /** Analytics: how the user got to the tutorial (e.g. homescreen_tab, main_action_button) */ - source?: string; - /** Screen to navigate to after tutorial completion instead of the default PerpsHome */ - redirectScreen?: string; - /** Params to pass to the redirect screen */ - redirectParams?: Record; - }; + PerpsTutorial: + | { + isFromDeeplink?: boolean; + isFromGTMModal?: boolean; + /** Analytics: how the user got to the tutorial (e.g. homescreen_tab, main_action_button) */ + source?: string; + /** Screen to navigate to after tutorial completion instead of the default PerpsHome */ + redirectScreen?: string; + /** Params to pass to the redirect screen */ + redirectParams?: Record; + } + | undefined; // TP/SL screen PerpsTPSL: { @@ -230,6 +247,7 @@ export type PerpsStackParamList = { PerpsPnlHeroCard: { position: Position; marketPrice?: string; + source?: string; }; // Order Book view - Full depth order book display @@ -255,10 +273,11 @@ export type PerpsStackParamList = { showBackButton?: boolean; }; - /** Params for RedesignedConfirmations when shown in Perps stack (header options) */ - RedesignedConfirmations: { - showPerpsHeader?: boolean; - }; + /** + * Params for RedesignedConfirmations when opened from Perps order flow. + * Partial so header-option helpers can take only `showPerpsHeader`. + */ + RedesignedConfirmations: Partial | undefined; /** Params for PerpsOrderRedirect - handles one-click trade from token details */ PerpsOrderRedirect: { @@ -270,21 +289,23 @@ export type PerpsStackParamList = { }; // Screen names registered in the Perps stack (may differ from legacy aliases above) - PerpsTrendingView: { - source?: string; - variant?: 'full' | 'minimal'; - title?: string; - showBalanceActions?: boolean; - showBottomNav?: boolean; - showWatchlistOnly?: boolean; - defaultMarketTypeFilter?: MarketTypeFilter; - defaultSortOptionId?: SortOptionId; - defaultSortDirection?: SortDirection; - fromHome?: boolean; - button_clicked?: string; - button_location?: string; - transactionActiveAbTests?: TransactionActiveAbTestEntry[]; - }; + PerpsTrendingView: + | { + source?: string; + variant?: 'full' | 'minimal'; + title?: string; + showBalanceActions?: boolean; + showBottomNav?: boolean; + showWatchlistOnly?: boolean; + defaultMarketTypeFilter?: MarketTypeFilter; + defaultSortOptionId?: SortOptionId; + defaultSortDirection?: SortDirection; + fromHome?: boolean; + button_clicked?: string; + button_location?: string; + transactionActiveAbTests?: TransactionActiveAbTestEntry[]; + } + | undefined; PerpsOrderDetailsView: { order: Order; action?: 'view' | 'edit' | 'cancel'; diff --git a/app/core/NavigationService/types.ts b/app/core/NavigationService/types.ts index 17ee5a1e05e..23c43a02af7 100644 --- a/app/core/NavigationService/types.ts +++ b/app/core/NavigationService/types.ts @@ -54,8 +54,10 @@ import type { QRTabSwitcherParams } from '../../components/Views/QRTabSwitcher/Q // Perps navigation params import type { PerpsNavigationParamList, + PerpsOrderRouteParams, PerpsStackParamList, } from '../../components/UI/Perps/types/navigation'; +import type { ConfirmationParams } from '../../components/Views/confirmations/components/confirm/confirm-component'; import type { MoneyNavigationParamList } from '../../components/UI/Money/types/navigation'; import type { CardModalsNavigationParamList, @@ -870,7 +872,10 @@ export type RootStackParamList = { EarnLendingLearnMoreModal: undefined; // Full screen confirmation routes - RedesignedConfirmations: undefined; + RedesignedConfirmations: + | ConfirmationParams + | Partial + | undefined; NoHeaderConfirmations: undefined; // Identity routes