refactor: remove ScreenComponent any casts for Multichain navigators (MetaMask#28188)

## **Description**

Migrate 3 Multichain navigator components from prop-based route access
to `useRoute()` hook (PR 10 of 13).

**Components:** AccountDetails, AccountGroupDetails, WalletDetails

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

N/A — pure refactoring. All 18 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 React Navigation param plumbing and test
adjustments, with no functional changes expected beyond potential
runtime issues if route params are missing/mistyped.
> 
> **Overview**
> Refactors `AccountDetails`, `AccountGroupDetails`, and `WalletDetails`
to stop accepting `route` props and instead pull typed params via
`useRoute()`.
> 
> Updates the multichain stack navigators in `App.tsx` to pass these
screens directly (removing `as ScreenComponent` casts), and adjusts
existing tests to mock `useRoute()`; adds a new `WalletDetails` unit
test to cover the new route-param behavior and null rendering when a
wallet is absent.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e831d3f. 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

@@ -733,7 +733,7 @@ const MultichainAccountDetails = () => {
     >
       <Stack.Screen
         name={Routes.MULTICHAIN_ACCOUNTS.ACCOUNT_DETAILS}
-        component={AccountDetails as ScreenComponent}
+        component={AccountDetails}
         initialParams={route?.params}
       />
       <Stack.Screen
@@ -760,7 +760,7 @@ const MultichainAccountGroupDetails = () => {
     >
       <Stack.Screen
         name={Routes.MULTICHAIN_ACCOUNTS.ACCOUNT_GROUP_DETAILS}
-        component={AccountGroupDetails as ScreenComponent}
+        component={AccountGroupDetails}
         initialParams={route?.params}
       />
       <Stack.Screen
@@ -773,7 +773,7 @@ const MultichainAccountGroupDetails = () => {
       />
       <Stack.Screen
         name={Routes.MULTICHAIN_ACCOUNTS.WALLET_DETAILS}
-        component={WalletDetails as ScreenComponent}
+        component={WalletDetails}
         initialParams={route?.params}
         options={{
           headerShown: false,

app/components/Views/MultichainAccounts/AccountDetails/AccountDetails.test.tsx

@@ -35,13 +35,6 @@ jest.mock('../../confirmations/hooks/7702/useEIP7702Networks', () => ({
 
 const mockNavigate = jest.fn();
 const mockGoBack = jest.fn();
-jest.mock('@react-navigation/native', () => ({
-  ...jest.requireActual('@react-navigation/native'),
-  useNavigation: () => ({
-    navigate: mockNavigate,
-    goBack: mockGoBack,
-  }),
-}));
 
 const mockAddress = '0x67B2fAf7959fB61eb9746571041476Bbd0672569';
 const mockAccount = createMockInternalAccount(
@@ -51,11 +44,24 @@ const mockAccount = createMockInternalAccount(
   EthAccountType.Eoa,
 );
 
+let mockRouteParams: { account: InternalAccount } = {
+  account: mockAccount,
+};
+
+jest.mock('@react-navigation/native', () => ({
+  ...jest.requireActual('@react-navigation/native'),
+  useNavigation: () => ({
+    navigate: mockNavigate,
+    goBack: mockGoBack,
+  }),
+  useRoute: () => ({
+    params: mockRouteParams,
+  }),
+}));
+
 const renderWithAccount = (account: InternalAccount | undefined) => {
-  const mockRoute = {
-    params: {
-      account: account || mockAccount,
-    },
+  mockRouteParams = {
+    account: account || mockAccount,
   };
 
   // Create proper state that includes the account in the AccountsController
@@ -74,7 +80,7 @@ const renderWithAccount = (account: InternalAccount | undefined) => {
 
   return renderWithProvider(
     <SafeAreaProvider>
-      <AccountDetails route={mockRoute} />
+      <AccountDetails />
     </SafeAreaProvider>,
     {
       state: {
@@ -106,6 +112,7 @@ const renderWithAccount = (account: InternalAccount | undefined) => {
 describe('AccountDetails', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockRouteParams = { account: mockAccount };
   });
 
   it('displays account name and address when account is defined', () => {
@@ -126,15 +133,13 @@ describe('AccountDetails', () => {
       EthAccountType.Eoa,
     );
 
-    const mockRoute = {
-      params: {
-        account: nonExistentAccount,
-      },
+    mockRouteParams = {
+      account: nonExistentAccount,
     };
 
     renderWithProvider(
       <SafeAreaProvider>
-        <AccountDetails route={mockRoute} />
+        <AccountDetails />
       </SafeAreaProvider>,
       {
         state: {

app/components/Views/MultichainAccounts/AccountDetails/AccountDetails.tsx

@@ -7,25 +7,23 @@ import { getMemoizedInternalAccountByAddress } from '../../../../selectors/accou
 import { useSelector } from 'react-redux';
 import { RootState } from '../../../../reducers';
 import Routes from '../../../../constants/navigation/Routes';
-import { useNavigation } from '@react-navigation/native';
+import { RouteProp, useNavigation, useRoute } from '@react-navigation/native';
 import PrivateKeyAccountDetails from './AccountTypes/PrivateKeyAccountDetails';
 import HardwareAccountDetails from './AccountTypes/HardwareAccountDetails';
 import { isHardwareAccount } from '../../../../util/address';
 import SnapAccountDetails from './AccountTypes/SnapAccountDetails';
 
-interface AccountDetailsProps {
-  route: {
-    params: {
-      account: InternalAccount;
-    };
-  };
+interface AccountDetailsRouteParams {
+  account: InternalAccount;
 }
 
-export const AccountDetails = (props: AccountDetailsProps) => {
+export const AccountDetails = () => {
+  const route =
+    useRoute<RouteProp<{ params: AccountDetailsRouteParams }, 'params'>>();
   const navigation = useNavigation();
   const {
     account: { address },
-  } = props.route.params;
+  } = route.params;
   const account: InternalAccount | undefined = useSelector((state: RootState) =>
     getMemoizedInternalAccountByAddress(state, address),
   );