refactor: remove ScreenComponent any casts for RootModalFlow security/misc (#28185)

## **Description**

Migrate 5 RootModalFlow security/misc components from prop-based route
access to `useRoute()` hook (PR 9 of 13).

**Components:** SRPQuiz, OriginSpamModal, ChangeInSimulationModal,
LearnMoreBottomSheet, ReturnToAppNotification

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

N/A — pure refactoring. All existing tests pass.

## **Screenshots/Recordings**

### **Before**

N/A

### **After**

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.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.

Made with [Cursor](https://cursor.com)

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk refactor limited to navigation param plumbing and test
updates; behavior should be unchanged aside from stricter typing and
slightly different test rendering expectations.
> 
> **Overview**
> Refactors several RootModalFlow security/misc screens (`SRPQuiz`,
`OriginSpamModal`, `ChangeInSimulationModal`, `ReturnToAppNotification`)
to read navigation params via `useRoute()` instead of prop-injected
`route`, and removes the `as ScreenComponent` casts for these routes in
`App.tsx`.
> 
> Makes `LearnMoreBottomSheet`’s `onClose` prop optional and updates
affected unit tests to mock `useRoute()` rather than passing `route`
props; `ReturnToAppNotification` tests were expanded from a snapshot to
detailed assertions around toast display, delays (`wait`), and one-time
execution.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
fc3d334. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: asalsys

app/components/Nav/App/App.tsx

@@ -571,7 +571,7 @@ const RootModalFlow = (props: RootModalFlowProps) => (
     }
     <Stack.Screen
       name={Routes.MODAL.SRP_REVEAL_QUIZ}
-      component={SRPQuiz as ScreenComponent}
+      component={SRPQuiz}
       initialParams={{ ...props.route.params }}
     />
     <Stack.Screen
@@ -607,11 +607,11 @@ const RootModalFlow = (props: RootModalFlowProps) => (
     />
     <Stack.Screen
       name={Routes.SHEET.ORIGIN_SPAM_MODAL}
-      component={OriginSpamModal as ScreenComponent}
+      component={OriginSpamModal}
     />
     <Stack.Screen
       name={Routes.SHEET.CHANGE_IN_SIMULATION_MODAL}
-      component={ChangeInSimulationModal as ScreenComponent}
+      component={ChangeInSimulationModal}
     />
     <Stack.Screen name={Routes.SHEET.TOOLTIP_MODAL} component={TooltipModal} />
     <Stack.Screen
@@ -625,7 +625,7 @@ const RootModalFlow = (props: RootModalFlowProps) => (
     />
     <Stack.Screen
       name={Routes.MODAL.MULTICHAIN_ACCOUNTS_LEARN_MORE}
-      component={LearnMoreBottomSheet as ScreenComponent}
+      component={LearnMoreBottomSheet}
       options={{ headerShown: false }}
     />
     <Stack.Screen
@@ -634,7 +634,7 @@ const RootModalFlow = (props: RootModalFlowProps) => (
     />
     <Stack.Screen
       name={Routes.SDK.RETURN_TO_DAPP_NOTIFICATION}
-      component={ReturnToAppNotification as ScreenComponent}
+      component={ReturnToAppNotification}
       initialParams={{ ...props.route.params }}
     />
     <Stack.Screen

app/components/Views/ChangeInSimulationModal/ChangeInSimulationModal.test.tsx

@@ -11,6 +11,11 @@ import ChangeInSimulationModal, {
 } from './ChangeInSimulationModal';
 import { RootState } from '../../../reducers';
 
+let mockRouteParams: { onProceed: jest.Mock; onReject: jest.Mock } = {
+  onProceed: jest.fn(),
+  onReject: jest.fn(),
+};
+
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useDispatch: () => jest.fn(),
@@ -22,12 +27,12 @@ jest.mock(
     ({ children }: { children: React.ReactElement }) => <>{children}</>,
 );
 
-const NAVIGATION_PARAMS_MOCK = {
-  params: {
-    onProceed: jest.fn(),
-    onReject: jest.fn(),
-  },
-};
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useRoute: () => ({
+    params: mockRouteParams,
+  }),
+}));
 
 const mockInitialState: DeepPartial<RootState> = {
   engine: {
@@ -40,29 +45,26 @@ const mockInitialState: DeepPartial<RootState> = {
 describe('ChangeInSimulationModal', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockRouteParams = {
+      onProceed: jest.fn(),
+      onReject: jest.fn(),
+    };
   });
 
   it('render matches snapshot', () => {
-    const { toJSON } = renderWithProvider(
-      <ChangeInSimulationModal route={NAVIGATION_PARAMS_MOCK} />,
-      {
-        state: mockInitialState,
-      },
-    );
+    const { toJSON } = renderWithProvider(<ChangeInSimulationModal />, {
+      state: mockInitialState,
+    });
     expect(toJSON()).toMatchSnapshot();
   });
 
   it('calls onProceed and onReject callbacks', () => {
     const mockOnReject = jest.fn();
     const mockOnProceed = jest.fn();
-    const wrapper = renderWithProvider(
-      <ChangeInSimulationModal
-        route={{ params: { onProceed: mockOnProceed, onReject: mockOnReject } }}
-      />,
-      {
-        state: mockInitialState,
-      },
-    );
+    mockRouteParams = { onProceed: mockOnProceed, onReject: mockOnReject };
+    const wrapper = renderWithProvider(<ChangeInSimulationModal />, {
+      state: mockInitialState,
+    });
     fireEvent.press(wrapper.getByTestId(PROCEED_BUTTON_TEST_ID));
     expect(mockOnProceed).toHaveBeenCalledTimes(1);
 

app/components/Views/ChangeInSimulationModal/ChangeInSimulationModal.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useRef } from 'react';
+import { RouteProp, useRoute } from '@react-navigation/native';
 import { StyleSheet, View } from 'react-native';
 import { strings } from '../../../../locales/i18n';
 import BottomSheet, {
@@ -38,11 +39,16 @@ const createStyles = () =>
     },
   });
 
-const ChangeInSimulationModal = ({
-  route,
-}: {
-  route: { params: { onProceed: () => void; onReject: () => void } };
-}) => {
+interface ChangeInSimulationModalRouteParams {
+  onProceed: () => void;
+  onReject: () => void;
+}
+
+const ChangeInSimulationModal = () => {
+  const route =
+    useRoute<
+      RouteProp<{ params: ChangeInSimulationModalRouteParams }, 'params'>
+    >();
   const styles = createStyles();
   const sheetRef = useRef<BottomSheetRef>(null);
   const { onProceed, onReject } = route.params;

app/components/Views/MultichainAccounts/IntroModal/LearnMoreBottomSheet.tsx

@@ -25,7 +25,7 @@ import { setMultichainAccountsIntroModalSeen } from '../../../../actions/user';
 import { LEARN_MORE_BOTTOM_SHEET_TEST_IDS } from './LearnMoreBottomSheet.testIds';
 
 interface LearnMoreBottomSheetProps {
-  onClose: () => void;
+  onClose?: () => void;
 }
 
 const LearnMoreBottomSheet: React.FC<LearnMoreBottomSheetProps> = ({

app/components/Views/OriginSpamModal/OriginSpamModal.test.tsx

@@ -12,6 +12,17 @@ import OriginSpamModal, {
 } from './OriginSpamModal';
 import { RootState } from '../../../reducers';
 
+const SCAM_ORIGIN_MOCK = 'scam.origin';
+
+let mockRouteParams: { origin: string } = { origin: SCAM_ORIGIN_MOCK };
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useRoute: () => ({
+    params: mockRouteParams,
+  }),
+}));
+
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
   useDispatch: () => jest.fn(),
@@ -28,13 +39,6 @@ jest.mock(
     ({ children }: { children: React.ReactElement }) => <>{children}</>,
 );
 
-const SCAM_ORIGIN_MOCK = 'scam.origin';
-const NAVIGATION_PARAMS_MOCK = {
-  params: {
-    origin: SCAM_ORIGIN_MOCK,
-  },
-};
-
 const mockInitialState: DeepPartial<RootState> = {
   engine: {
     backgroundState: {
@@ -48,38 +52,30 @@ describe('OriginSpamModal', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    mockRouteParams = { origin: SCAM_ORIGIN_MOCK };
   });
 
   describe('renders', () => {
     it('spam modal content by default', () => {
-      const { toJSON } = renderWithProvider(
-        <OriginSpamModal route={NAVIGATION_PARAMS_MOCK} />,
-        {
-          state: mockInitialState,
-        },
-      );
+      const { toJSON } = renderWithProvider(<OriginSpamModal />, {
+        state: mockInitialState,
+      });
       expect(toJSON()).toMatchSnapshot();
     });
 
     it('SiteBlockedContent if user opt in to block dapp', () => {
-      const wrapper = renderWithProvider(
-        <OriginSpamModal route={NAVIGATION_PARAMS_MOCK} />,
-        {
-          state: mockInitialState,
-        },
-      );
+      const wrapper = renderWithProvider(<OriginSpamModal />, {
+        state: mockInitialState,
+      });
       fireEvent.press(wrapper.getByTestId(BLOCK_BUTTON_TEST_ID));
       expect(wrapper.toJSON()).toMatchSnapshot();
     });
   });
 
   it('reset dapp spam state on clicking continue button', () => {
-    const wrapper = renderWithProvider(
-      <OriginSpamModal route={NAVIGATION_PARAMS_MOCK} />,
-      {
-        state: mockInitialState,
-      },
-    );
+    const wrapper = renderWithProvider(<OriginSpamModal />, {
+      state: mockInitialState,
+    });
     fireEvent.press(wrapper.getByTestId(CONTINUE_BUTTON_TEST_ID));
 
     expect(mockResetOriginSpamState).toHaveBeenCalledTimes(1);

app/components/Views/OriginSpamModal/OriginSpamModal.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { RouteProp, useRoute } from '@react-navigation/native';
 import { ImageSourcePropType, StyleSheet, View } from 'react-native';
 import { useDispatch } from 'react-redux';
 import { getUrlObj, prefixUrlWithProtocol } from '../../../util/browser';
@@ -160,11 +161,13 @@ const SiteBlockedContent = ({ onCloseModal }: { onCloseModal: () => void }) => {
   );
 };
 
-const OriginSpamModal = ({
-  route,
-}: {
-  route: { params: { origin: string } };
-}) => {
+interface OriginSpamModalRouteParams {
+  origin: string;
+}
+
+const OriginSpamModal = () => {
+  const route =
+    useRoute<RouteProp<{ params: OriginSpamModalRouteParams }, 'params'>>();
   const dispatch = useDispatch();
   const { origin } = route.params;
   const styles = createStyles();

app/components/Views/Quiz/SRPQuiz/SRPQuiz.test.tsx

@@ -9,11 +9,13 @@ import {
   SrpSecurityQuestionOneSelectorsIDs,
   SrpSecurityQuestionTwoSelectorsIDs,
 } from './SrpQuizModal.testIds';
-import SRPQuiz, { SRPQuizProps } from './SRPQuiz';
+import SRPQuiz from './SRPQuiz';
 import Routes from '../../../../constants/navigation/Routes';
 import { strings } from '../../../../../locales/i18n';
 import { Linking } from 'react-native';
 
+let mockRouteParams: { keyringId?: string } = {};
+
 const mockNavigate = jest.fn();
 
 const initialMetrics: Metrics = {
@@ -25,17 +27,21 @@ jest.mock('@react-navigation/native', () => ({
   useNavigation: () => ({
     navigate: mockNavigate,
   }),
+  useRoute: () => ({
+    params: mockRouteParams,
+  }),
 }));
 
 jest.mock('react-native/Libraries/Linking/Linking', () => ({
   openURL: jest.fn(),
 }));
 
 const renderSRPQuiz = (
-  props: SRPQuizProps,
+  routeParams: { keyringId?: string } = {},
   completeQuiz: boolean = true,
   hasVault: boolean = false,
 ) => {
+  mockRouteParams = routeParams;
   const mockStore = configureMockStore();
   const initialState = {
     engine: {
@@ -52,7 +58,7 @@ const renderSRPQuiz = (
     <SafeAreaProvider initialMetrics={initialMetrics}>
       <Provider store={store}>
         <ThemeContext.Provider value={mockTheme}>
-          <SRPQuiz {...props} />
+          <SRPQuiz />
         </ThemeContext.Provider>
       </Provider>
     </SafeAreaProvider>,
@@ -89,15 +95,14 @@ const renderSRPQuiz = (
 };
 
 describe('SRPQuiz', () => {
+  beforeEach(() => {
+    mockRouteParams = {};
+  });
+
   it('passes the keyringId to the SRPQuiz', async () => {
     const keyringId = '123';
-    const props = {
-      route: {
-        params: { keyringId },
-      },
-    };
 
-    renderSRPQuiz(props, true);
+    renderSRPQuiz({ keyringId }, true);
 
     await waitFor(() => {
       expect(mockNavigate).toHaveBeenCalledWith(
@@ -113,12 +118,7 @@ describe('SRPQuiz', () => {
 
   it('should navigate to the learn more article of social login when the learn more button is pressed', async () => {
     const keyringId = '123';
-    const props = {
-      route: {
-        params: { keyringId },
-      },
-    };
-    const { getByText } = renderSRPQuiz(props, true, true);
+    const { getByText } = renderSRPQuiz({ keyringId }, true, true);
 
     const learnMoreButton = getByText(strings('srp_security_quiz.learn_more'));
     fireEvent.press(learnMoreButton);

app/components/Views/Quiz/SRPQuiz/SRPQuiz.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires, @typescript-eslint/no-require-imports, import-x/no-commonjs */
 import React, { useState, useCallback, useEffect, useRef } from 'react';
 import { View, Linking, AppState } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import BottomSheet, {
   BottomSheetRef,
 } from '../../../../component-library/components/BottomSheets/BottomSheet';
@@ -34,22 +34,15 @@ import { useSelector } from 'react-redux';
 
 const introductionImg = require('../../../../images/reveal_srp.png');
 
-export interface SRPQuizProps {
-  route: {
-    params: {
-      keyringId?: string;
-    };
-  };
+interface SRPQuizRouteParams {
+  keyringId?: string;
 }
 
-const SRPQuiz = (props: SRPQuizProps) => {
-  // It has be destructured like this because of prettier
-  // shifting the fence to the ending curly brace.
+const SRPQuiz = () => {
+  const route = useRoute<RouteProp<{ params: SRPQuizRouteParams }, 'params'>>();
   const {
-    route: {
-      params: { keyringId },
-    },
-  } = props;
+    params: { keyringId },
+  } = route;
   const modalRef = useRef<BottomSheetRef>(null);
   const [stage, setStage] = useState<QuizStage>(QuizStage.introduction);
   const { styles, theme } = useStyles(stylesheet, {});