refactor: migrate backup/sync UI to design-system (#29444)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

Migrate "Backup & sync" UI components to
`@metamask/design-system-react-native`, specifically `Text`, `Icon`, and
`BottomSheet`.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/MUL-1684

## **Manual testing steps**

- Onboarding
  - Go through the onboarding flow
  - Before finishing, disable "Backup & Sync"
  - Check that there aren't any UI regressions
- Settings
  - Disable "Backup & Sync" and enable it back
  - Check that there aren't any UI regressions

## **Screenshots/Recordings**

### Onboarding

<img width="300" alt="Screenshot 2026-05-04 at 2 08 04 PM"
src="https://github.com/user-attachments/assets/e6d5dd7c-7d96-4cd9-867d-c677cf314fe5"
/> <img width="300" alt="Screenshot 2026-05-04 at 2 08 13 PM"
src="https://github.com/user-attachments/assets/0a56a630-f1db-4d08-96ab-a0459026aebc"
/>

### Settings

<img width="300" alt="Screenshot 2026-05-04 at 2 21 33 PM"
src="https://github.com/user-attachments/assets/a9faa395-8309-4ece-a73a-96cf3d737257"
/> <img width="300" alt="Screenshot 2026-05-04 at 2 21 40 PM"
src="https://github.com/user-attachments/assets/f8e33356-9402-464d-9262-f3809db383f4"
/>

## **Pre-merge author checklist**

<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [ ] 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).
- [ ] I've completed the PR template to the best of my ability
- [ ] I've included tests if applicable
- [ ] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] 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**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] 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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Primarily a UI refactor, but it changes shared component imports/enums
and adds a global Jest mock for the design-system `BottomSheet`, which
could affect rendering/tests across the suite.
> 
> **Overview**
> Migrates the Backup & Sync settings/onboarding UI to
`@metamask/design-system-react-native` primitives (`Text`, `Icon`,
`BottomSheet`), updating variant/color enum values (e.g., `HeadingSm`,
`TextAlternative`, `SuccessDefault`).
> 
> Updates the shared notification modal (`Notification/Modal`) to use
design-system `Text`/`Icon` and adjusts typography variants accordingly.
> 
> Improves test stability by adding a global Jest mock for the
design-system `BottomSheet` in `testSetup.js` (synchronous open/close
callbacks) and stubbing `QuickBuyBottomSheet` in `TraderPositionView`
tests to avoid unintended mounts/selector dependencies.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
ad2f26b. 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/UI/Identity/BackupAndSyncFeaturesToggles/BackupAndSyncFeaturesToggles.tsx

@@ -1,10 +1,13 @@
 import React, { useCallback, useMemo } from 'react';
 import { View, Switch, InteractionManager } from 'react-native';
 
-import Text, {
+import {
+  Text,
   TextColor,
   TextVariant,
-} from '../../../../component-library/components/Texts/Text';
+  Icon,
+  IconName,
+} from '@metamask/design-system-react-native';
 import { useTheme } from '../../../../util/theme';
 import styles from './BackupAndSyncFeaturesToggles.styles';
 import { useBackupAndSync } from '../../../../util/identity/hooks/useBackupAndSync';
@@ -16,9 +19,6 @@ import {
   selectIsBackupAndSyncUpdateLoading,
 } from '../../../../selectors/identity';
 import { BACKUPANDSYNC_FEATURES } from '@metamask/profile-sync-controller/user-storage';
-import Icon, {
-  IconName,
-} from '../../../../component-library/components/Icons/Icon';
 import { strings } from '../../../../../locales/i18n';
 import { MetaMetricsEvents } from '../../../../core/Analytics';
 import { useAnalytics } from '../../../hooks/useAnalytics/useAnalytics';
@@ -126,10 +126,10 @@ const BackupAndSyncFeaturesToggles = () => {
   return (
     <View style={styles.setting}>
       <View style={styles.heading}>
-        <Text variant={TextVariant.HeadingSM}>
+        <Text variant={TextVariant.HeadingSm}>
           {strings('backupAndSync.manageWhatYouSync.title')}
         </Text>
-        <Text variant={TextVariant.BodySM} color={TextColor.Alternative}>
+        <Text variant={TextVariant.BodySm} color={TextColor.TextAlternative}>
           {strings('backupAndSync.manageWhatYouSync.description')}
         </Text>
       </View>

app/components/UI/Identity/BackupAndSyncToggle/BackupAndSyncToggle.tsx

@@ -3,10 +3,11 @@ import React, { useCallback, useEffect } from 'react';
 import { View, Switch, Linking, InteractionManager } from 'react-native';
 // import { useNavigation } from '@react-navigation/native';
 
-import Text, {
+import {
+  Text,
   TextVariant,
   TextColor,
-} from '../../../../component-library/components/Texts/Text';
+} from '@metamask/design-system-react-native';
 import { useTheme } from '../../../../util/theme';
 // import { strings } from '../../../../../locales/i18n';
 import styles from './BackupAndSyncToggle.styles';
@@ -150,7 +151,7 @@ const BackupAndSyncToggle = ({
   return (
     <View style={styles.setting}>
       <View style={styles.heading}>
-        <Text variant={TextVariant.HeadingSM}>
+        <Text variant={TextVariant.HeadingSm}>
           {strings('backupAndSync.title')}
         </Text>
         <Switch
@@ -165,9 +166,9 @@ const BackupAndSyncToggle = ({
           testID={BACKUP_AND_SYNC_TOGGLE_TEST_IDS.TOGGLE}
         />
       </View>
-      <Text variant={TextVariant.BodyMD} color={TextColor.Alternative}>
+      <Text variant={TextVariant.BodyMd} color={TextColor.TextAlternative}>
         {strings('backupAndSync.enable.description')}
-        <Text color={TextColor.Info} onPress={handleLink}>
+        <Text color={TextColor.InfoDefault} onPress={handleLink}>
           {strings('backupAndSync.privacyLink')}
         </Text>
       </Text>

app/components/UI/Identity/ConfirmTurnOnBackupAndSyncModal/ConfirmTurnOnBackupAndSyncModal.tsx

@@ -1,15 +1,13 @@
 import React, { useRef } from 'react';
 
-import BottomSheet, {
-  BottomSheetRef,
-} from '../../../../component-library/components/BottomSheets/BottomSheet';
-import { strings } from '../../../../../locales/i18n';
-
 import {
+  BottomSheet,
+  type BottomSheetRef,
   IconColor,
   IconName,
   IconSize,
-} from '../../../../component-library/components/Icons/Icon';
+} from '@metamask/design-system-react-native';
+import { strings } from '../../../../../locales/i18n';
 import ModalContent from '../../Notification/Modal';
 import { toggleBasicFunctionality } from '../../../../actions/settings';
 import { useParams } from '../../../../util/navigation/navUtils';
@@ -45,7 +43,7 @@ const ConfirmTurnOnBackupAndSyncModal = () => {
   const turnContent = {
     icon: {
       name: IconName.Check,
-      color: IconColor.Success,
+      color: IconColor.SuccessDefault,
     },
     bottomSheetTitle: strings('backupAndSync.enable.title'),
     bottomSheetMessage: strings('backupAndSync.enable.confirmation'),

app/components/UI/Notification/Modal/index.tsx

@@ -1,18 +1,16 @@
 import React from 'react';
 import { View } from 'react-native';
 import Checkbox from '../../../../component-library/components/Checkbox/Checkbox';
-import Icon, {
-  IconColor,
-  IconName,
-  IconSize,
-} from '../../../../component-library/components/Icons/Icon';
-import Text, {
-  TextVariant,
-} from '../../../../component-library/components/Texts/Text';
 import {
   Button,
   ButtonVariant,
   ButtonSize,
+  Icon,
+  IconColor,
+  IconName,
+  IconSize,
+  Text,
+  TextVariant,
 } from '@metamask/design-system-react-native';
 import createStyles from './styles';
 import { useTheme } from '../../../../util/theme';
@@ -60,10 +58,10 @@ const ModalContent = ({
         size={iconSize}
         style={styles.icon}
       />
-      <Text variant={TextVariant.HeadingMD} style={styles.title}>
+      <Text variant={TextVariant.HeadingMd} style={styles.title}>
         {title}
       </Text>
-      <Text variant={TextVariant.BodyMD} style={styles.description}>
+      <Text variant={TextVariant.BodyMd} style={styles.description}>
         {message}
       </Text>
       <View style={styles.bottom}>

app/components/Views/SocialLeaderboard/TraderPositionView/TraderPositionView.test.tsx

@@ -92,6 +92,17 @@ jest.mock('../../../../core/ClipboardManager', () => ({
   setString: jest.fn().mockResolvedValue(undefined),
 }));
 
+// Pressing buy mounts QuickBuyBottomSheet. Jest's global mock for design-system
+// `BottomSheet` (see app/util/test/testSetup.js) invokes `onOpenBottomSheet`'s
+// callback synchronously, so `QuickBuyBottomSheetContent` mounts in the same turn
+// and runs `useQuickBuyBottomSheet` (bridge selectors, device version compare,
+// NetworkController, …). This file intentionally uses a minimal Redux store, so
+// we stub the sheet here.
+jest.mock('./components/QuickBuyBottomSheet', () => ({
+  __esModule: true,
+  default: () => null,
+}));
+
 jest.mock('../../../../util/haptics', () => {
   const actual = jest.requireActual<typeof import('../../../../util/haptics')>(
     '../../../../util/haptics',

app/util/test/testSetup.js

@@ -850,6 +850,75 @@ jest.mock('../../component-library/components/BottomSheets/BottomSheet', () => {
   };
 });
 
+// Mock @metamask/design-system-react-native BottomSheet to render children immediately
+// and run open/close callbacks synchronously (bypasses reanimated animations).
+// Matches the component-library BottomSheet mock above; components that migrated
+// to the design-system sheet otherwise trigger act() warnings from Animated updates.
+jest.mock('@metamask/design-system-react-native', () => {
+  const React = require('react');
+  const PropTypes = require('prop-types');
+  const { View } = require('react-native');
+  const actual = jest.requireActual('@metamask/design-system-react-native');
+
+  const BottomSheet = React.forwardRef(
+    (
+      {
+        children,
+        onClose,
+        onOpen,
+        goBack,
+        style,
+        twClassName: _twClassName,
+        testID,
+        accessibilityLabel,
+      },
+      ref,
+    ) => {
+      React.useImperativeHandle(ref, () => ({
+        onOpenBottomSheet: (callback) => {
+          onOpen?.();
+          callback?.();
+        },
+        onCloseBottomSheet: (callback) => {
+          const hasCallback = Boolean(callback);
+          onClose?.(hasCallback);
+          goBack?.();
+          callback?.();
+        },
+      }));
+      return React.createElement(
+        View,
+        {
+          testID: testID || 'design-system-bottom-sheet-mock',
+          style,
+          accessibilityLabel,
+        },
+        children,
+      );
+    },
+  );
+  BottomSheet.displayName = 'BottomSheet';
+  BottomSheet.propTypes = {
+    children: PropTypes.node,
+    onClose: PropTypes.func,
+    onOpen: PropTypes.func,
+    goBack: PropTypes.func,
+    style: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.array,
+      PropTypes.number,
+    ]),
+    twClassName: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+    testID: PropTypes.string,
+    accessibilityLabel: PropTypes.string,
+  };
+
+  return {
+    ...actual,
+    BottomSheet,
+  };
+});
+
 // Mock react-native-modal to render children immediately (bypasses animation)
 jest.mock('react-native-modal', () => {
   const React = require('react');