chore(nav): type wallet, asset, and settings shell navigators (Phase 3) (MetaMask#33306)

weitingsun · web-flow · commit 6df2cbef882b · 2026-07-17T01:28:11.000Z
## **Description**   **Phase 3 of the incremental React Navigation typing migration — app shell navigators.** Shared navigation hosts (`AssetStackFlow`, `WalletTabHome`, `SettingsView`, `TrendingView`, `BrowserTabHome`, `Webview`, `SetPasswordFlow`, `ImportPrivateKeyView`, `RootModalFlow`, `Home`, `Main`) were still loosely typed as `NestedNavigationParams` (or equivalent `{ screen: string; params?: object }`), so nested `navigate(container, { screen, params })` calls into those shells could not be checked against real screen param shapes. This PR adds shell-level param lists and wires them into `RootStackParamList` via `NavigatorScreenParams`, matching the Phase 3 pattern already used for feature stacks (Perps / Rewards / Predict / Card / Earn / etc.). This is primarily **types-only** — no intentional navigation architecture change. One small Onboarding call-site cleanup aligns SuccessErrorSheet params with the typed sheet contract (`primaryButtonLabel`). ### What changed **Shell param lists (`app/components/Nav/Main/types/navigation.ts`)** - Shells 1: `AssetStackParamList`, `WalletTabStackParamList` / `WalletTabHomeParamList`, `SettingsStackParamList` - Shells 2: `TrendingViewStackParamList`, `BrowserTabHomeParamList`, `WebviewStackParamList`, `SetPasswordFlowParamList`, `ImportPrivateKeyStackParamList` - Shells 3: `MoneyTabStackParamList`, `TransactionsHomeParamList`, `RewardsHomeParamList`, `HomeTabsParamList`, `MainStackParamList`, `MainFlowParamList` **Root modal flow (`app/core/NavigationService/types.ts`)** - `RootModalFlowParamList` — screens registered inside App’s `RootModalFlow` - `RootModalFlow` / `Home` / `Main` (and the Shells 1–2 hosts above) → `NavigatorScreenParams<…>` **Param accuracy / call-site cleanup** - Tightened stub shapes for `TransactionDetailsSheetParams` and `MultichainTransactionDetailsParams` to match what those sheets actually receive - Onboarding SuccessErrorSheet navigations now pass `primaryButtonLabel` (was incorrect `buttonLabel`) ## **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 navigation typing and param-shape fixes; the only runtime tweak is correcting SuccessErrorSheet button props on onboarding error flows. > > **Overview** > **Phase 3** of the React Navigation typing migration: app-shell navigators that were still `NestedNavigationParams` (or loose `{ screen, params }`) now have dedicated param lists and are wired into `RootStackParamList` via `NavigatorScreenParams`. > > A new `navigation.ts` defines shell lists for asset/wallet/settings stacks, home tabs, main flow, browser/webview/set-password/import flows, and related hosts. `NavigationService/types.ts` adds **`RootModalFlowParamList`** and replaces loose typing on **`Main`**, **`Home`**, **`RootModalFlow`**, **`SettingsView`**, **`WalletTabHome`**, **`AssetStackFlow`**, and similar routes with nested `NavigatorScreenParams`. > > Modal route stubs are tightened: **`TransactionDetailsSheetParams`** and **`MultichainTransactionDetailsParams`** match what those sheets actually receive (full tx/display payloads instead of optional `transactionId` only). > > Onboarding **SuccessErrorSheet** navigations now pass **`primaryButtonLabel`** instead of **`buttonLabel`**, with matching test updates—aligning call sites with the typed sheet contract. > > <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit cb64ba0. 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/Nav/Main/types/navigation.ts b/app/components/Nav/Main/types/navigation.ts
@@ -0,0 +1,245 @@
+import type { NavigatorScreenParams } from '@react-navigation/native';
+import type {
+  AssetLoaderParams,
+  AssetViewParams,
+} from '../../../Views/Asset/Asset.types';
+import type { TokenDetailsRouteParams } from '../../../UI/TokenDetails/constants/constants';
+import type {
+  CreatePriceAlertRouteParams,
+  PriceAlertRouteParams,
+} from '../../../UI/Assets/PriceAlerts/constants';
+import type { RevealPrivateCredentialParams } from '../../../Views/RevealPrivateCredential/RevealPrivateCredential.types';
+import type { NetworkDetailsViewParams } from '../../../Views/NetworksManagement/NetworkDetailsView/NetworkDetailsView.types';
+import type { ContactFormParams } from '../../../Views/Settings/Contacts/ContactForm.types';
+import type { NotificationSettingsSectionProps } from '../../../Views/Settings/NotificationsSettings/NotificationSettingsSection';
+import type { RegionSelectorParams } from '../../../Views/Modals/Modals.types';
+import type {
+  AccountBackupParams,
+  ManualBackupStep3Params,
+} from '../../../Views/AccountBackup/AccountBackup.types';
+import type {
+  ManualBackupStep1Params,
+  ManualBackupStep2Params,
+} from '../../../Views/ManualBackupStep1/ManualBackupStep1.types';
+import type { BrowserParams } from '../../../Views/Browser/Browser.types';
+import type { SimpleWebviewParams } from '../../../Views/Webview/Webview.types';
+import type { ExploreFeedRouteParams } from '../../../Views/TrendingView/TrendingView';
+import type { ChoosePasswordRouteParams } from '../../../Views/ChoosePassword/ChoosePassword.types';
+import type { OptinMetricsRouteParams } from '../../../UI/OptinMetrics/OptinMetrics.types';
+import type { QRTabSwitcherParams } from '../../../Views/QRTabSwitcher/QRTabSwitcher';
+import type { TransactionsViewParams } from '../../../Views/TransactionsView/TransactionsView.types';
+import type { RampOrderDetailsParams } from '../../../UI/Ramp/Aggregator/types/navigation';
+import type { RampNavigationParamList } from '../../../UI/Ramp/types/navigation';
+import type { BridgeTransactionDetailsParams } from '../../../UI/Bridge/Bridge.types';
+
+/**
+ * Param list for screens inside `AssetStackFlow` (token details + alerts).
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type AssetStackParamList = {
+  Asset: AssetViewParams | undefined;
+  SecurityTrust: TokenDetailsRouteParams & {
+    isPricePositive?: boolean;
+    useAmbientColor?: boolean;
+  };
+  CreatePriceAlert: CreatePriceAlertRouteParams;
+  ManagePriceAlerts: PriceAlertRouteParams;
+};
+
+/**
+ * Param list for screens inside `WalletTabStackFlow`.
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type WalletTabStackParamList = {
+  WalletView: undefined;
+  RevealPrivateCredential: RevealPrivateCredentialParams | undefined;
+};
+
+/**
+ * `WalletTabHome` is registered with component `WalletTabStackFlow`, but many
+ * call sites still navigate with an intermediate `WalletTabStackFlow` screen.
+ * Include both the real stack screens and that nested form.
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type WalletTabHomeParamList = WalletTabStackParamList & {
+  WalletTabStackFlow:
+    | NavigatorScreenParams<WalletTabStackParamList>
+    | undefined;
+};
+
+/**
+ * Param list for screens inside `SettingsFlow` (`SettingsView`).
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type SettingsStackParamList = {
+  AccountsMenuView: undefined;
+  Settings: undefined;
+  GeneralSettings: undefined;
+  AdvancedSettings: { scrollToBottom?: boolean } | undefined;
+  NetworksManagement: undefined;
+  NetworkDetails: NetworkDetailsViewParams | undefined;
+  SDKSessionsManager: undefined;
+  SecuritySettings: undefined;
+  RampSettings: undefined;
+  RampActivationKeyForm: undefined;
+  RampHeadlessPlayground: undefined;
+  AesCryptoTestForm: undefined;
+  ExperimentalSettings: undefined;
+  CompanySettings: undefined;
+  DeveloperOptions: undefined;
+  ContactsSettings: undefined;
+  ContactForm: ContactFormParams | undefined;
+  RevealPrivateCredentialView: RevealPrivateCredentialParams | undefined;
+  WalletConnectSessionsView: undefined;
+  ResetPassword: undefined;
+  WalletRecovery: undefined;
+  AccountBackupStep1B: AccountBackupParams | undefined;
+  ManualBackupStep1: ManualBackupStep1Params | undefined;
+  ManualBackupStep2: ManualBackupStep2Params | undefined;
+  ManualBackupStep3: ManualBackupStep3Params;
+  EnterPasswordSimple: undefined;
+  NotificationsSettings: undefined;
+  NotificationSettingsSection: NotificationSettingsSectionProps['route']['params'];
+  BackupAndSyncSettings: undefined;
+  SettingsRegionSelector: RegionSelectorParams | undefined;
+  SnapsSettingsList: undefined;
+};
+
+/**
+ * Param list for screens inside `ExploreHome` (`TrendingView` tab).
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type TrendingViewStackParamList = {
+  TrendingFeed: ExploreFeedRouteParams | undefined;
+};
+
+/**
+ * Param list for screens inside `BrowserFlow` (`BrowserTabHome`).
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type BrowserTabHomeParamList = {
+  BrowserView: BrowserParams | undefined;
+  AssetLoader: AssetLoaderParams | undefined;
+  AssetView: AssetViewParams | undefined;
+};
+
+/**
+ * Param list for screens inside the `Webview` stack.
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type WebviewStackParamList = {
+  SimpleWebview: SimpleWebviewParams | undefined;
+};
+
+/**
+ * Param list for screens inside `SetPasswordFlow`.
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type SetPasswordFlowParamList = {
+  ChoosePassword: ChoosePasswordRouteParams | undefined;
+  AccountBackupStep1: AccountBackupParams | undefined;
+  AccountBackupStep1B: AccountBackupParams | undefined;
+  ManualBackupStep1: ManualBackupStep1Params | undefined;
+  ManualBackupStep2: ManualBackupStep2Params | undefined;
+  ManualBackupStep3: ManualBackupStep3Params;
+  OptinMetrics: OptinMetricsRouteParams | undefined;
+};
+
+/**
+ * Param list for screens inside `ImportPrivateKeyView` (App root stack).
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type ImportPrivateKeyStackParamList = {
+  ImportPrivateKey: undefined;
+  ImportPrivateKeySuccess: undefined;
+  QRTabSwitcher: QRTabSwitcherParams | undefined;
+};
+
+/**
+ * Param list for screens inside `MoneyTabScreenStack` (Money tab under Home).
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type MoneyTabStackParamList = {
+  MoneyHome: undefined;
+  MoneyActivity: undefined;
+  MoneyHowItWorks: undefined;
+};
+
+/**
+ * Param list for screens inside `TransactionsHome` (Activity tab under Home).
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type TransactionsHomeParamList = {
+  TransactionsView: TransactionsViewParams | undefined;
+  OrderDetails: RampOrderDetailsParams | undefined;
+  RampsOrderDetails: RampNavigationParamList['RampsOrderDetails'];
+  DepositOrderDetails: undefined;
+  RampBankDetailsStandalone: RampNavigationParamList['RampBankDetailsStandalone'];
+  SendTransaction: undefined;
+  BridgeTransactionDetails: BridgeTransactionDetailsParams | undefined;
+};
+
+/**
+ * Param list for screens inside `RewardsHome` (Rewards tab under Home).
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type RewardsHomeParamList = {
+  RewardsOnboardingFlow: undefined;
+  RewardsDashboard: undefined;
+};
+
+/**
+ * Param list for tabs inside `HomeTabs` (`Home`).
+ *
+ * Trade tab reuses `WalletTabStackFlow` as a placeholder component under
+ * `TradeWalletActions`; Money vs Activity tabs are mutually exclusive at runtime.
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type HomeTabsParamList = {
+  WalletTabHome: NavigatorScreenParams<WalletTabHomeParamList> | undefined;
+  TrendingView: NavigatorScreenParams<TrendingViewStackParamList> | undefined;
+  BrowserTabHome: NavigatorScreenParams<BrowserTabHomeParamList> | undefined;
+  TradeWalletActions:
+    | NavigatorScreenParams<WalletTabStackParamList>
+    | undefined;
+  MoneyScreens: NavigatorScreenParams<MoneyTabStackParamList> | undefined;
+  TransactionsView:
+    | NavigatorScreenParams<TransactionsHomeParamList>
+    | undefined;
+  RewardsView: NavigatorScreenParams<RewardsHomeParamList> | undefined;
+};
+
+/**
+ * Param list for `MainNavigator` (`ConnectedMain`).
+ *
+ * Phase 3 types the Home tab host used for nested deeplink / reset state.
+ * Sibling MainNavigator screens remain typed flat on `RootStackParamList`.
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type MainStackParamList = {
+  Home: NavigatorScreenParams<HomeTabsParamList> | undefined;
+};
+
+/**
+ * Param list for `MainFlow` (`Routes.MAIN_FLOW` / `Main` on the root stack).
+ */
+// ParamListBase requires `type`; `interface` cannot satisfy it.
+// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+export type MainFlowParamList = {
+  Main: NavigatorScreenParams<MainStackParamList> | undefined;
+  ReviewModal: undefined;
+};
diff --git a/app/components/Views/Modals/Modals.types.ts b/app/components/Views/Modals/Modals.types.ts
@@ -1,3 +1,5 @@
+import type { TransactionMeta } from '@metamask/transaction-controller';
+
 /**
  * Modal navigation parameters
  */
@@ -43,9 +45,29 @@ export interface SeedphraseModalParams {
   seedPhrase?: string[];
 }
 
-/** Transaction details sheet parameters */
+/** Transaction details sheet parameters (matches TransactionDetailsSheet route). */
 export interface TransactionDetailsSheetParams {
-  transactionId?: string;
+  tx: TransactionMeta;
+  transactionElement: {
+    actionKey: string;
+    value?: string;
+    [key: string]: unknown;
+  };
+  transactionDetails: {
+    hash?: string;
+    renderFrom?: string;
+    renderTo?: string;
+    renderValue?: string;
+    summaryAmount?: string;
+    summaryFee?: string;
+    summaryTotalAmount?: string;
+    summarySecondaryTotalAmount?: string;
+    transactionType?: string;
+    txChainId?: string;
+    [key: string]: unknown;
+  };
+  showSpeedUpModal: () => void;
+  showCancelModal: () => void;
 }
 
 /** Show NFT display media parameters */
diff --git a/app/components/Views/MultichainAccounts/MultichainAccounts.types.ts b/app/components/Views/MultichainAccounts/MultichainAccounts.types.ts
@@ -3,6 +3,8 @@
  */
 
 import { InternalAccount } from '@metamask/keyring-internal-api';
+import type { Transaction } from '@metamask/keyring-api';
+import type { MultichainTransactionDisplayData } from '../../hooks/useMultichainTransactionDisplay';
 
 export interface AccountParams {
   account?: InternalAccount;
@@ -16,7 +18,8 @@ export interface MultichainAccountDetailActionsParams {
 
 /** Multichain transaction details parameters */
 export interface MultichainTransactionDetailsParams {
-  transactionId?: string;
+  displayData: MultichainTransactionDisplayData;
+  transaction: Transaction;
 }
 
 /** Multichain account actions parameters */
diff --git a/app/components/Views/Onboarding/index.test.tsx b/app/components/Views/Onboarding/index.test.tsx
@@ -745,7 +745,6 @@ describe('Onboarding', () => {
               'error_sheet.no_internet_connection_description',
             ),
             descriptionAlign: 'left',
-            buttonLabel: strings('error_sheet.no_internet_connection_button'),
             primaryButtonLabel: strings(
               'error_sheet.no_internet_connection_button',
             ),
@@ -1459,7 +1458,7 @@ describe('Onboarding', () => {
             title: strings('error_sheet.user_cancelled_title'),
             description: strings('error_sheet.user_cancelled_description'),
             descriptionAlign: 'center',
-            buttonLabel: strings('error_sheet.user_cancelled_button'),
+            primaryButtonLabel: strings('error_sheet.user_cancelled_button'),
             type: 'error',
           }),
         }),
@@ -1506,7 +1505,7 @@ describe('Onboarding', () => {
             title: strings('error_sheet.oauth_error_title'),
             description: strings('error_sheet.oauth_error_description'),
             descriptionAlign: 'center',
-            buttonLabel: strings('error_sheet.oauth_error_button'),
+            primaryButtonLabel: strings('error_sheet.oauth_error_button'),
             type: 'error',
           }),
         }),
@@ -3341,7 +3340,7 @@ describe('Onboarding', () => {
               title: strings('error_sheet.oauth_error_title'),
               description: strings('error_sheet.oauth_error_description'),
               descriptionAlign: 'center',
-              buttonLabel: strings('error_sheet.oauth_error_button'),
+              primaryButtonLabel: strings('error_sheet.oauth_error_button'),
               type: 'error',
             }),
           }),
diff --git a/app/components/Views/Onboarding/index.tsx b/app/components/Views/Onboarding/index.tsx
@@ -706,7 +706,7 @@ const Onboarding = () => {
               title: strings('error_sheet.oauth_error_title'),
               description: strings('error_sheet.oauth_error_description'),
               descriptionAlign: 'center',
-              buttonLabel: strings('error_sheet.oauth_error_button'),
+              primaryButtonLabel: strings('error_sheet.oauth_error_button'),
               type: 'error',
             },
           });
@@ -722,7 +722,7 @@ const Onboarding = () => {
               title: strings('error_sheet.oauth_error_title'),
               description: strings('error_sheet.oauth_error_description'),
               descriptionAlign: 'center',
-              buttonLabel: strings('error_sheet.oauth_error_button'),
+              primaryButtonLabel: strings('error_sheet.oauth_error_button'),
               type: 'error',
             },
           });
@@ -753,7 +753,7 @@ const Onboarding = () => {
           title: strings(`error_sheet.${errorMessage}_title`),
           description: strings(`error_sheet.${errorMessage}_description`),
           descriptionAlign: 'center',
-          buttonLabel: strings(`error_sheet.${errorMessage}_button`),
+          primaryButtonLabel: strings(`error_sheet.${errorMessage}_button`),
           type: 'error',
         },
       });
@@ -783,9 +783,6 @@ const Onboarding = () => {
                   `error_sheet.no_internet_connection_description`,
                 ),
                 descriptionAlign: 'left',
-                buttonLabel: strings(
-                  `error_sheet.no_internet_connection_button`,
-                ),
                 primaryButtonLabel: strings(
                   `error_sheet.no_internet_connection_button`,
                 ),
diff --git a/app/core/NavigationService/types.ts b/app/core/NavigationService/types.ts
