refactor: migrate RevealSRP and EditMultichainAccountName to design system (#29697)

## **Description**

Migrates the `RevealSRP` and `EditMultichainAccountName` multichain
account sheets from component-library primitives to
`@metamask/design-system-react-native`.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Refs:
[MUL-1687](https://consensyssoftware.atlassian.net/browse/MUL-1687)

## **Manual testing steps**

```gherkin
Feature: Multichain account sheets (design system)

  Scenario: Reveal SRP intro screen
    Given the user opens the Reveal SRP flow for a multichain account
    When they view the intro sheet
    Then the header, description, primary "Get started", and secondary "Learn more" actions render and match prior behavior
    When they tap the back control
    Then navigation returns to the previous screen

  Scenario: Edit multichain account group name
    Given the user opens Edit multichain account name for an account group
    When they change the name and tap Save
    Then the name is persisted and the screen closes
    When they tap the back control without saving
    Then navigation returns to the previous screen
```

## **Screenshots/Recordings**


https://github.com/user-attachments/assets/a4faecee-8e04-4e5a-a3b8-194933d74fa2

## **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

## **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.

<!-- Generated with the help of the pr-description AI skill -->


[MUL-1687]:
https://consensyssoftware.atlassian.net/browse/MUL-1687?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Primarily a UI refactor, but it touches the SRP reveal entry flow and
navigation controls, so regressions could impact a security-sensitive
user journey (layout/safe-area/back/save behaviors across iOS/Android).
> 
> **Overview**
> Migrates the `RevealSRP` and `EditMultichainAccountName` sheets from
component-library primitives and custom `StyleSheet` files to
`@metamask/design-system-react-native` components with Tailwind-based
styling, including Android-specific status bar inset handling.
> 
> Adds a dedicated back-button test id
(`EditAccountNameIds.BACK_BUTTON`) and updates/expands tests to assert
navigation via that control, cover a missing-`accountGroup` fallback
header, and exercise Android rendering paths (status bar height
present/absent).
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
e74bb6c. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: gantunesr

app/components/Views/MultichainAccounts/sheets/EditAccountName.testIds.ts

@@ -2,4 +2,5 @@ export const EditAccountNameIds = {
   EDIT_ACCOUNT_NAME_CONTAINER: 'edit-account-name-container',
   ACCOUNT_NAME_INPUT: 'edit-account-name-input',
   SAVE_BUTTON: 'edit-account-name-save-button',
+  BACK_BUTTON: 'edit-multichain-account-name-back-button',
 };

app/components/Views/MultichainAccounts/sheets/EditMultichainAccountName/EditMultichainAccountName.styles.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { fireEvent } from '@testing-library/react-native';
+import { Platform, StatusBar } from 'react-native';
 import { EditMultichainAccountName } from './EditMultichainAccountName';
 import { strings } from '../../../../../../locales/i18n';
 import { EditAccountNameIds } from '../EditAccountName.testIds';
@@ -37,12 +38,29 @@ jest.mock('../../../../../core/Engine', () => ({
 }));
 
 describe('EditMultichainAccountName', () => {
+  const originalPlatformOs = Platform.OS;
+  const originalStatusBarCurrentHeight = StatusBar.currentHeight;
   const render = () => renderWithProvider(<EditMultichainAccountName />);
 
   beforeEach(() => {
     jest.clearAllMocks();
     mockSetAccountGroupName.mockReset();
     mockUseRoute.mockReturnValue(mockRoute);
+    Platform.OS = 'ios';
+    Object.defineProperty(StatusBar, 'currentHeight', {
+      configurable: true,
+      writable: true,
+      value: originalStatusBarCurrentHeight,
+    });
+  });
+
+  afterAll(() => {
+    Platform.OS = originalPlatformOs;
+    Object.defineProperty(StatusBar, 'currentHeight', {
+      configurable: true,
+      writable: true,
+      value: originalStatusBarCurrentHeight,
+    });
   });
 
   describe('rendering', () => {
@@ -85,9 +103,9 @@ describe('EditMultichainAccountName', () => {
     });
 
     it('navigates back when back button is pressed', () => {
-      const { getByRole } = render();
+      const { getByTestId } = render();
 
-      const backButton = getByRole('button');
+      const backButton = getByTestId(EditAccountNameIds.BACK_BUTTON);
       fireEvent.press(backButton);
 
       expect(mockGoBack).toHaveBeenCalledTimes(1);
@@ -235,5 +253,28 @@ describe('EditMultichainAccountName', () => {
       const nameInput = getByTestId(EditAccountNameIds.ACCOUNT_NAME_INPUT);
       expect(nameInput.props.value).toBe('');
     });
+
+    it('renders fallback header when route omits account group', () => {
+      mockUseRoute.mockReturnValue({
+        params: {},
+      } as typeof mockRoute);
+
+      const { getByText } = render();
+      expect(getByText('Account Group')).toBeOnTheScreen();
+    });
+  });
+
+  describe('platform-specific layout', () => {
+    it('renders on Android with status bar inset and keyboard avoiding height behavior', () => {
+      Platform.OS = 'android';
+      Object.defineProperty(StatusBar, 'currentHeight', {
+        configurable: true,
+        writable: true,
+        value: 24,
+      });
+
+      const { getByTestId } = render();
+      expect(getByTestId(EditAccountNameIds.BACK_BUTTON)).toBeOnTheScreen();
+    });
   });
 });

app/components/Views/MultichainAccounts/sheets/EditMultichainAccountName/EditMultichainAccountName.test.tsx

@@ -1,5 +1,11 @@
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
+import {
+  KeyboardAvoidingView,
+  Platform,
+  StatusBar,
+  TextInput,
+} from 'react-native';
 import { strings } from '../../../../../../locales/i18n';
 import Engine from '../../../../../core/Engine';
 import {
@@ -8,31 +14,28 @@ import {
   useNavigation,
   useRoute,
 } from '@react-navigation/native';
-import Text, {
-  TextColor,
-  TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
-import { Box } from '../../../../UI/Box/Box';
 import {
+  Box,
+  BoxFlexDirection,
   Button,
+  ButtonIcon,
+  ButtonIconSize,
+  ButtonSize,
   ButtonVariant,
-  ButtonBaseSize,
+  HeaderBase,
+  IconName,
+  Text,
+  TextColor,
+  TextVariant,
+  FontWeight,
 } from '@metamask/design-system-react-native';
-import styleSheet from './EditMultichainAccountName.styles';
-import { useStyles } from '../../../../hooks/useStyles';
-import { useTheme } from '../../../../../util/theme';
-import { TextInput, KeyboardAvoidingView, Platform } from 'react-native';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { EditAccountNameIds } from '../EditAccountName.testIds';
 import { AccountGroupObject } from '@metamask/account-tree-controller';
 import { RootState } from '../../../../../reducers';
 import { selectAccountGroupById } from '../../../../../selectors/multichainAccounts/accountTreeController';
-import HeaderBase from '../../../../../component-library/components/HeaderBase/HeaderBase';
-import ButtonLink from '../../../../../component-library/components/Buttons/Button/variants/ButtonLink';
-import Icon, {
-  IconName,
-  IconSize,
-} from '../../../../../component-library/components/Icons/Icon';
+import { useTheme } from '../../../../../util/theme';
 
 interface RootNavigationParamList extends ParamListBase {
   EditMultichainAccountName: {
@@ -46,7 +49,7 @@ type EditMultichainAccountNameRouteProp = RouteProp<
 >;
 
 export const EditMultichainAccountName = () => {
-  const { styles } = useStyles(styleSheet, {});
+  const tw = useTailwind();
   const { colors, themeAppearance } = useTheme();
   const route = useRoute<EditMultichainAccountNameRouteProp>();
   const { accountGroup: initialAccountGroup } = route.params;
@@ -65,6 +68,18 @@ export const EditMultichainAccountName = () => {
   const [accountName, setAccountName] = useState(initialName);
   const [error, setError] = useState<string | null>(null);
 
+  const safeAreaStyle = tw.style(
+    'flex-1 bg-default',
+    Platform.OS === 'android' && StatusBar.currentHeight
+      ? { paddingTop: StatusBar.currentHeight }
+      : undefined,
+  );
+
+  const inputStyle = tw.style(
+    'h-10 w-full rounded-lg border-2 border-default p-2.5',
+    { color: colors.text.default },
+  );
+
   const handleAccountNameChange = useCallback(() => {
     // Validate that account name is not empty
     if (!accountName || accountName.trim() === '') {
@@ -93,33 +108,35 @@ export const EditMultichainAccountName = () => {
   }, [accountName, accountGroup, navigation]);
 
   return (
-    <SafeAreaView style={styles.safeArea}>
+    <SafeAreaView style={safeAreaStyle}>
       <HeaderBase
-        style={styles.header}
+        twClassName="m-4 flex-row items-center justify-center"
         startAccessory={
-          <ButtonLink
-            labelTextVariant={TextVariant.BodyMDMedium}
-            label={<Icon name={IconName.ArrowLeft} size={IconSize.Md} />}
+          <ButtonIcon
+            testID={EditAccountNameIds.BACK_BUTTON}
+            iconName={IconName.ArrowLeft}
+            size={ButtonIconSize.Md}
             onPress={() => navigation.goBack()}
           />
         }
       >
         {accountGroup?.metadata?.name || 'Account Group'}
       </HeaderBase>
       <KeyboardAvoidingView
-        style={styles.keyboardAvoidingView}
+        style={tw.style('flex-1 justify-between')}
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
       >
         <Box
-          style={styles.contentContainer}
+          flexDirection={BoxFlexDirection.Column}
+          twClassName="mt-4 gap-4 px-6"
           testID={EditAccountNameIds.EDIT_ACCOUNT_NAME_CONTAINER}
         >
-          <Text variant={TextVariant.BodyMDMedium}>
+          <Text variant={TextVariant.BodyMd} fontWeight={FontWeight.Medium}>
             {strings('multichain_accounts.edit_account_name.account_name')}
           </Text>
           <TextInput
             testID={EditAccountNameIds.ACCOUNT_NAME_INPUT}
-            style={styles.input}
+            style={inputStyle}
             value={accountName}
             onChangeText={(newName: string) => {
               setAccountName(newName);
@@ -136,13 +153,13 @@ export const EditMultichainAccountName = () => {
             autoFocus
             editable
           />
-          {error && <Text color={TextColor.Error}>{error}</Text>}
+          {error ? <Text color={TextColor.ErrorDefault}>{error}</Text> : null}
         </Box>
-        <Box style={styles.saveButtonContainer}>
+        <Box twClassName="mt-4 w-full px-6 py-2.5">
           <Button
             isFullWidth
             variant={ButtonVariant.Primary}
-            size={ButtonBaseSize.Lg}
+            size={ButtonSize.Lg}
             onPress={handleAccountNameChange}
             testID={EditAccountNameIds.SAVE_BUTTON}
           >