chore(bridge): type Bridge navigators with feature param lists (Phase 3) (#33292)

weitingsun · web-flow · commit e2b7b1d0e6ab · 2026-07-15T18:46:37.000Z
## **Description**   **Phase 3 of the incremental React Navigation typing migration — Bridge feature.** Bridge’s nested navigators (`Bridge` / `BridgeModals`) were loosely typed (`BridgeRouteParams` on the root entry / `undefined` for modals), so nested `navigate(container, { screen, params })` calls could not be checked against real screen param shapes. Call sites already navigate with `{ screen, params }` (e.g. into `BridgeView`); this PR aligns the types with that runtime pattern. This is **types-only** — no intentional runtime navigation behavior change. ### What changed **Feature param lists (`app/components/UI/Bridge/types/navigation.ts`)** - `BridgeScreensStackParamList` — screen stack (`BridgeScreenStack`): BridgeView, token selector, batch sell flows, quote selector, hardware wallet / QR scanner - `BridgeModalsNavigationParamList` — modal stack (`BridgeModalStack`): slippage, block explorer, Blockaid, recipient selector, market closed, network list, price/token warnings, post-trade, batch-sell info sheets, etc. - `BridgeNavigationParamList` — feature union + nested `Bridge` / `BridgeModals` entries **Navigators (`app/components/UI/Bridge/routes.tsx`)** - `createNativeStackNavigator<BridgeScreensStackParamList>()` for `BridgeScreenStack` - `createNativeStackNavigator<BridgeModalsNavigationParamList>()` for `BridgeModalStack` **Root stack (`app/core/NavigationService/types.ts`)** - `Bridge` → `NavigatorScreenParams<BridgeScreensStackParamList>` (was incorrectly `BridgeRouteParams`) - `BridgeModals` → `NavigatorScreenParams<BridgeModalsNavigationParamList>` - Leaf Bridge screen/modal routes now reference the feature param lists ### Why - Improves nested Bridge navigation type-safety ahead of flipping `useNavigation` to strict route checking app-wide - Fixes the root `Bridge` entry type so it matches nested `{ screen, params }` navigation already used throughout the app - Centralizes Bridge route params in one feature file instead of duplicating shapes in `RootStackParamList` - Matches the Phase 3 pattern already landed for other features ## **Changelog**   CHANGELOG entry: null ## **Related issues**  Fixes: https://consensyssoftware.atlassian.net/browse/MCWP-674 ## **Manual testing steps**  N/A ## **Screenshots/Recordings**   N/A ## **Pre-merge author checklist**   - [x] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [x] I've completed the PR template to the best of my ability - [x] I've included tests if applicable - [x] I've documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [x] I've applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. #### Performance checks (if applicable) - [ ] I've tested on Android - Ideally on a mid-range device; emulator is acceptable - [ ] I've tested with a power user scenario - Use these [power-user SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93) to import wallets with many accounts and tokens - [ ] I've instrumented key operations with Sentry traces for production performance metrics - See [`trace()`](/app/util/trace.ts) for usage and [`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274) for an example For performance guidelines and tooling, see the [Performance Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers). ## **Pre-merge reviewer checklist**  - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.  --- > [!NOTE] > **Low Risk** > Compile-time-only refactor with no navigation logic changes; main risk is incorrect param typings surfacing as TypeScript errors at call sites. > > **Overview** > **Phase 3 React Navigation typing for Bridge** — types only; no intended runtime navigation changes. > > Adds `app/components/UI/Bridge/types/navigation.ts` with **`BridgeScreensStackParamList`**, **`BridgeModalsNavigationParamList`**, and **`BridgeNavigationParamList`**, consolidating screen/modal route params that were previously scattered across `RootStackParamList` imports. > > **`BridgeScreenStack`** and **`BridgeModalStack`** now use `createNativeStackNavigator` with those param lists instead of untyped stacks. > > In **`RootStackParamList`**, **`Bridge`** is typed as `NavigatorScreenParams<BridgeScreensStackParamList>` (replacing incorrect `BridgeRouteParams` on the root entry), **`BridgeModals`** gets `NavigatorScreenParams<BridgeModalsNavigationParamList>`, and flat Bridge routes are aliased from the feature lists (including **`HardwareWalletsSwaps`** on the root list). > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit f5cf5cd. Bugbot is set up for automated code reviews on this repo. Configure [here](https://www.cursor.com/dashboard/bugbot).</sup>
diff --git a/app/components/UI/Bridge/routes.tsx b/app/components/UI/Bridge/routes.tsx
@@ -32,11 +32,15 @@ import { BatchSellFinalReviewModal } from './components/BatchSellFinalReviewModa
 import { BatchSellNetworkFeeInfoModal } from './components/BatchSellNetworkFeeInfoModal';
 import { BatchSellMinimumReceivedInfoModal } from './components/BatchSellMinimumReceivedInfoModal';
 import { BatchSellPriceImpactInfoModal } from './components/BatchSellPriceImpactInfoModal';
+import type {
+  BridgeModalsNavigationParamList,
+  BridgeScreensStackParamList,
+} from './types/navigation';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type ScreenComponent = React.ComponentType<any>;
 
-const Stack = createNativeStackNavigator();
+const Stack = createNativeStackNavigator<BridgeScreensStackParamList>();
 export const BridgeScreenStack = () => (
   <Stack.Navigator screenOptions={{ headerShown: false }}>
     <Stack.Screen name={Routes.BRIDGE.BRIDGE_VIEW} component={BridgeView} />
@@ -71,7 +75,8 @@ export const BridgeScreenStack = () => (
   </Stack.Navigator>
 );
 
-const ModalStack = createNativeStackNavigator();
+const ModalStack =
+  createNativeStackNavigator<BridgeModalsNavigationParamList>();
 export const BridgeModalStack = () => (
   <ModalStack.Navigator
     screenOptions={{
diff --git a/app/components/UI/Bridge/types/navigation.ts b/app/components/UI/Bridge/types/navigation.ts
@@ -0,0 +1,82 @@
+import type { NavigatorScreenParams } from '@react-navigation/native';
+import type { BridgeRouteParams } from '../hooks/useSwapBridgeNavigation';
+import type { BridgeTokenSelectorRouteParams } from '../components/BridgeTokenSelector/BridgeTokenSelector';
+import type { BatchSellTokenSelectRouteParams } from '../Views/BatchSellTokenSelect/types';
+import type { HardwareWalletsSwapsRouteParams } from '../../HardwareWallet/Swaps/flowStrategy';
+import type { HwQrScannerRouteParams } from '../../HardwareWallet/Swaps/HwQrScanner';
+import type {
+  BatchSellSlippageModalParams,
+  SwapSlippageModalParams,
+} from '../components/SlippageModal/types';
+import type {
+  BlockaidModalParams,
+  TransactionDetailsBlockExplorerParams,
+} from '../Bridge.types';
+import type { PriceImpactModalRouterParams } from '../components/PriceImpactModal/types';
+import type { MissingPriceModalParams } from '../components/MissingPriceModal';
+import type { TokenWarningModalParams } from '../components/TokenWarningModal';
+import type { HighRateAlertModalParams } from '../components/HighRateAlertModal';
+import type { PostTradeBottomSheetParams } from '../components/PostTradeBottomSheet/PostTradeBottomSheet.types';
+import type { BatchSellPriceImpactInfoModalParams } from '../components/BatchSellPriceImpactInfoModal/BatchSellPriceImpactInfoModal.types';
+import type { BatchSellNetworkFeeInfoModalParams } from '../components/BatchSellNetworkFeeInfoModal/BatchSellNetworkFeeInfoModal.types';
+import type { BatchSellMinimumReceivedInfoModalParams } from '../components/BatchSellMinimumReceivedInfoModal/BatchSellMinimumReceivedInfoModal.types';
+
+/**
+ * Param list for screens inside the Bridge screen stack (`BridgeScreenStack`).
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type BridgeScreensStackParamList = {
+  BridgeView: BridgeRouteParams | undefined;
+  BridgeTokenSelector: BridgeTokenSelectorRouteParams | undefined;
+  BatchSellTokenSelect: BatchSellTokenSelectRouteParams | undefined;
+  BatchSellReview: undefined;
+  QuoteSelectorView: undefined;
+  HardwareWalletsSwaps: HardwareWalletsSwapsRouteParams | undefined;
+  HwQrScanner: HwQrScannerRouteParams | undefined;
+};
+
+/**
+ * Param list for screens inside the Bridge modal stack (`BridgeModalStack`).
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type BridgeModalsNavigationParamList = {
+  SwapDefaultSlippageModal: SwapSlippageModalParams | undefined;
+  SwapCustomSlippageModal: SwapSlippageModalParams | undefined;
+  BatchSellDefaultSlippageModal: BatchSellSlippageModalParams | undefined;
+  BatchSellCustomSlippageModal: BatchSellSlippageModalParams | undefined;
+  TransactionDetailsBlockExplorer:
+    | TransactionDetailsBlockExplorerParams
+    | undefined;
+  BlockaidModal: BlockaidModalParams;
+  RecipientSelectorModal: undefined;
+  MarketClosedModal: undefined;
+  NetworkListModal: undefined;
+  PriceImpactModal: PriceImpactModalRouterParams;
+  MissingPriceModal: MissingPriceModalParams;
+  TokenWarningModal: TokenWarningModalParams;
+  HighRateAlertModal: HighRateAlertModalParams;
+  PostTradeModal: PostTradeBottomSheetParams;
+  BatchSellDestinationTokenSelectorModal: undefined;
+  BatchSellQuoteDetailsModal: undefined;
+  BatchSellFinalReviewModal: undefined;
+  BatchSellNetworkFeeInfoModal: BatchSellNetworkFeeInfoModalParams | undefined;
+  BatchSellMinimumReceivedInfoModal:
+    | BatchSellMinimumReceivedInfoModalParams
+    | undefined;
+  BatchSellPriceImpactInfoModal: BatchSellPriceImpactInfoModalParams;
+};
+
+/**
+ * Feature-level Bridge navigation params for nested `Bridge` / `BridgeModals` entry.
+ */
+// Intersection (`&`) requires `type`; `interface` cannot express this.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type BridgeNavigationParamList = BridgeScreensStackParamList &
+  BridgeModalsNavigationParamList & {
+    Bridge: NavigatorScreenParams<BridgeScreensStackParamList> | undefined;
+    BridgeModals:
+      | NavigatorScreenParams<BridgeModalsNavigationParamList>
+      | undefined;
+  };
diff --git a/app/core/NavigationService/types.ts b/app/core/NavigationService/types.ts
@@ -20,28 +20,11 @@ import type { BrowserParams } from '../../components/Views/Browser/Browser.types
 import type { ActivityDetailsParams } from '../../components/Views/ActivityDetails/ActivityDetails.types';
 
 // Bridge params
-import type { BatchSellTokenSelectRouteParams } from '../../components/UI/Bridge/Views/BatchSellTokenSelect/types';
-import type { BridgeRouteParams } from '../../components/UI/Bridge/hooks/useSwapBridgeNavigation';
-import type { BridgeTokenSelectorRouteParams } from '../../components/UI/Bridge/components/BridgeTokenSelector/BridgeTokenSelector';
-import type { HardwareWalletsSwapsRouteParams } from '../../components/UI/HardwareWallet/Swaps/flowStrategy';
-import type { HwQrScannerRouteParams } from '../../components/UI/HardwareWallet/Swaps/HwQrScanner';
-import type { PriceImpactModalRouterParams } from '../../components/UI/Bridge/components/PriceImpactModal/types';
-import type { MissingPriceModalParams } from '../../components/UI/Bridge/components/MissingPriceModal';
-import type { TokenWarningModalParams } from '../../components/UI/Bridge/components/TokenWarningModal';
-import type { HighRateAlertModalParams } from '../../components/UI/Bridge/components/HighRateAlertModal';
-import type { PostTradeBottomSheetParams } from '../../components/UI/Bridge/components/PostTradeBottomSheet/PostTradeBottomSheet.types';
-import type { BatchSellPriceImpactInfoModalParams } from '../../components/UI/Bridge/components/BatchSellPriceImpactInfoModal/BatchSellPriceImpactInfoModal.types';
-import type { BatchSellNetworkFeeInfoModalParams } from '../../components/UI/Bridge/components/BatchSellNetworkFeeInfoModal/BatchSellNetworkFeeInfoModal.types';
-import type { BatchSellMinimumReceivedInfoModalParams } from '../../components/UI/Bridge/components/BatchSellMinimumReceivedInfoModal/BatchSellMinimumReceivedInfoModal.types';
 import type {
-  BatchSellSlippageModalParams,
-  SwapSlippageModalParams,
-} from '../../components/UI/Bridge/components/SlippageModal/types';
-import type {
-  TransactionDetailsBlockExplorerParams,
-  BlockaidModalParams,
-  BridgeTransactionDetailsParams,
-} from '../../components/UI/Bridge/Bridge.types';
+  BridgeModalsNavigationParamList,
+  BridgeScreensStackParamList,
+} from '../../components/UI/Bridge/types/navigation';
+import type { BridgeTransactionDetailsParams } from '../../components/UI/Bridge/Bridge.types';
 import type { SetPayTokenRequest } from '../../components/Views/confirmations/hooks/pay/useAutomaticTransactionPayToken';
 
 // Manual backup params
@@ -727,43 +710,40 @@ export type RootStackParamList = {
   EditNetwork: EditNetworkParams | undefined;
 
   // Bridge routes
-  Bridge: BridgeRouteParams | undefined;
-  BridgeView: BridgeRouteParams | undefined;
-  BridgeTokenSelector: BridgeTokenSelectorRouteParams | undefined;
-  BatchSellTokenSelect: BatchSellTokenSelectRouteParams | undefined;
-  BatchSellReview: undefined;
-  QuoteSelectorView: undefined;
-  HwQrScanner: HwQrScannerRouteParams | undefined;
-  BridgeModals: undefined;
-  MarketClosedModal: undefined;
-  NetworkListModal: undefined;
-  PriceImpactModal: PriceImpactModalRouterParams;
-  MissingPriceModal: MissingPriceModalParams;
-  TokenWarningModal: TokenWarningModalParams;
-  HighRateAlertModal: HighRateAlertModalParams;
-  PostTradeModal: PostTradeBottomSheetParams;
-  BatchSellPriceImpactInfoModal: BatchSellPriceImpactInfoModalParams;
-  SwapDefaultSlippageModal: SwapSlippageModalParams | undefined;
-  SwapCustomSlippageModal: SwapSlippageModalParams | undefined;
-  BatchSellDefaultSlippageModal: BatchSellSlippageModalParams | undefined;
-  BatchSellCustomSlippageModal: BatchSellSlippageModalParams | undefined;
-  TransactionDetailsBlockExplorer:
-    | TransactionDetailsBlockExplorerParams
-    | undefined;
-  BlockaidModal: BlockaidModalParams;
-  RecipientSelectorModal: undefined;
-  BatchSellDestinationTokenSelectorModal: undefined;
-  BatchSellQuoteDetailsModal: undefined;
-  BatchSellFinalReviewModal: undefined;
-  BatchSellNetworkFeeInfoModal: BatchSellNetworkFeeInfoModalParams | undefined;
-  BatchSellMinimumReceivedInfoModal:
-    | BatchSellMinimumReceivedInfoModalParams
+  Bridge: NavigatorScreenParams<BridgeScreensStackParamList> | undefined;
+  BridgeView: BridgeScreensStackParamList['BridgeView'];
+  BridgeTokenSelector: BridgeScreensStackParamList['BridgeTokenSelector'];
+  BatchSellTokenSelect: BridgeScreensStackParamList['BatchSellTokenSelect'];
+  BatchSellReview: BridgeScreensStackParamList['BatchSellReview'];
+  QuoteSelectorView: BridgeScreensStackParamList['QuoteSelectorView'];
+  HwQrScanner: BridgeScreensStackParamList['HwQrScanner'];
+  HardwareWalletsSwaps: BridgeScreensStackParamList['HardwareWalletsSwaps'];
+  BridgeModals:
+    | NavigatorScreenParams<BridgeModalsNavigationParamList>
     | undefined;
+  MarketClosedModal: BridgeModalsNavigationParamList['MarketClosedModal'];
+  NetworkListModal: BridgeModalsNavigationParamList['NetworkListModal'];
+  PriceImpactModal: BridgeModalsNavigationParamList['PriceImpactModal'];
+  MissingPriceModal: BridgeModalsNavigationParamList['MissingPriceModal'];
+  TokenWarningModal: BridgeModalsNavigationParamList['TokenWarningModal'];
+  HighRateAlertModal: BridgeModalsNavigationParamList['HighRateAlertModal'];
+  PostTradeModal: BridgeModalsNavigationParamList['PostTradeModal'];
+  BatchSellPriceImpactInfoModal: BridgeModalsNavigationParamList['BatchSellPriceImpactInfoModal'];
+  SwapDefaultSlippageModal: BridgeModalsNavigationParamList['SwapDefaultSlippageModal'];
+  SwapCustomSlippageModal: BridgeModalsNavigationParamList['SwapCustomSlippageModal'];
+  BatchSellDefaultSlippageModal: BridgeModalsNavigationParamList['BatchSellDefaultSlippageModal'];
+  BatchSellCustomSlippageModal: BridgeModalsNavigationParamList['BatchSellCustomSlippageModal'];
+  TransactionDetailsBlockExplorer: BridgeModalsNavigationParamList['TransactionDetailsBlockExplorer'];
+  BlockaidModal: BridgeModalsNavigationParamList['BlockaidModal'];
+  RecipientSelectorModal: BridgeModalsNavigationParamList['RecipientSelectorModal'];
+  BatchSellDestinationTokenSelectorModal: BridgeModalsNavigationParamList['BatchSellDestinationTokenSelectorModal'];
+  BatchSellQuoteDetailsModal: BridgeModalsNavigationParamList['BatchSellQuoteDetailsModal'];
+  BatchSellFinalReviewModal: BridgeModalsNavigationParamList['BatchSellFinalReviewModal'];
+  BatchSellNetworkFeeInfoModal: BridgeModalsNavigationParamList['BatchSellNetworkFeeInfoModal'];
+  BatchSellMinimumReceivedInfoModal: BridgeModalsNavigationParamList['BatchSellMinimumReceivedInfoModal'];
   BridgeTransactionDetails:
     | BridgeTransactionDetailsParams
-    | TransactionDetailsBlockExplorerParams
-    | undefined;
-  HardwareWalletsSwaps: HardwareWalletsSwapsRouteParams | undefined;
+    | BridgeModalsNavigationParamList['TransactionDetailsBlockExplorer'];
 
   // Perps routes - use PerpsNavigationParamList for type-safe perps navigation.
   // The `Perps` root is a nested stack navigator, so it also accepts the
