refactor(confirmations): migrate Text to MMDS design system

[brianacnguyen]

Description

Confirmations still used the deprecated component-library Text API (TextVariant.BodyMD, weight baked into variant names, TextColor.Alternative, etc.). This PR migrates confirmations-owned UI to @metamask/design-system-react-native so confirmations stay aligned with the MMDS Text contract.

What changed (94 files):

• Replaced component-library Text imports with MMDS Text
• Remapped variants (BodyMD → BodyMd, HeadingLG → HeadingLg, etc.)
• Split weight variants into fontWeight (BodyMDMedium → BodyMd + FontWeight.Medium)
• Remapped colors (Alternative → TextAlternative, Error → ErrorDefault, etc.)
• Updated related prop types / helpers that consumed those enums

Out of scope (separate PRs for extra CODEOWNERS):

• external/staking/** (confirmations + earn)
• TemplateRenderer (confirmations + core-platform)

Intentionally kept on component-library TextVariant:

• ButtonLink.labelTextVariant in confirm-alert-modal
• TagColored.labelProps.variant in gas-fee-details-row
  (those CL components still expect CL enum values)

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/DSYS-981

Manual testing steps

Feature: Confirmations Text MMDS migration

  Scenario: confirmation screens render with MMDS Text without visual regressions
    Given the app is built from this branch
    And the user has an unlocked wallet with ETH and at least one token

    When the user opens a send confirmation
    And reviews gas options, fee rows, and the footer
    Then labels, amounts, and helper text render at the expected size and weight
    And alternative/error/success text colors still match the previous styling

  Scenario: signature and alert surfaces render correctly
    Given a personal_sign or typed-data confirmation is pending
    When the user opens the confirmation and any alert/confirm-alert modal
    Then message text, titles, and alert copy render correctly
    And checkbox / confirm / cancel actions remain usable

  Scenario: activity transaction details text still looks correct
    Given the user has recent transaction activity
    When the user opens a transaction details screen
    Then status, fee, date, and amount text rows render correctly

  Scenario: unit coverage for migrated surfaces
    Given the repo is set up locally
    When the developer runs:
      """
      CI=true yarn jest app/components/Views/confirmations/components/UI/info-row app/components/Views/confirmations/components/gas app/components/Views/confirmations/components/footer app/components/Views/confirmations/components/modals/alert-modal app/components/Views/confirmations/components/modals/confirm-alert-modal --watchAll=false --no-coverage
      """
    Then the suites pass

Screenshots/Recordings

N/A — intended visual parity migration (typography/color mapping only). Spot-check screenshots welcome if reviewers want them.

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• 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 format if applicable
• I've applied the right labels on the PR (see labeling guidelines). 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 to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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.

---

Note

Medium Risk
Wide, user-facing confirmation/send/activity typography changes with enum remapping; regressions would be visual or subtle prop mismatches rather than logic changes, aside from the post-trade loading behavior tweak.

Overview
Moves confirmations-related UI (plus AmountPill and legacy AddressElement) off the component-library Text API onto @metamask/design-system-react-native, using MMDS variant names (BodyMd, HeadingLg, etc.), TextColor.*Default / TextAlternative, and fontWeight where weight used to be baked into variants like BodyMDMedium.

Inline alerts now drive icon colors via IconColor instead of text color enums; a few spots still pass legacy TextVariant into component-library ButtonLink / TagColored.

Tests add useTailwind mocks and stricter inline-alert icon color checks. usePostTradeTrendingTokens returns an empty token list while queries are loading so the post-trade sheet does not briefly show a partial list.

^{Reviewed by Cursor Bugbot for commit 9f9af45. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

🧪 Flaky unit test detection

Run history flaky detection

View recent run history

Historical failure rate is a hint, not proof — review each suggestion in context. See the flaky-test-detection skill for the full pattern reference and manual audit workflow.

Failures / runs sampled per window:

File	7d	15d	30d
app/components/Views/confirmations/components/modals/alert-modal/alert-modal.test.tsx	0/84	0/241	0/362

AI-detected flaky patterns

app/components/Views/confirmations/components/modals/alert-modal/alert-modal.test.tsx

• J3 — Missing jest.clearAllMocks() / jest.resetAllMocks() — wrong ordering nullifies mock setup (high)
  • jest.clearAllMocks() is called at the END of beforeEach, after the two mockReturnValue calls. clearAllMocks resets all mock implementations and return values, so it immediately wipes the useAlerts and useConfirmationAlertMetrics return values that were just configured. As a result, every test starts with both hooks returning undefined, causing intermittent failures depending on whether the component under test tolerates undefined hook returns. The fix is to call jest.clearAllMocks() FIRST (to clear state from the previous test), then set up the fresh mock return values.
  • Suggested fix in app/components/Views/confirmations/components/modals/alert-modal/alert-modal.test.tsx:68:

    -  beforeEach(() => {
    -    (useAlerts as jest.Mock).mockReturnValue(baseMockUseAlerts);
    -    (useConfirmationAlertMetrics as jest.Mock).mockReturnValue({
    -      trackAlertRendered: mockTrackAlertRendered,
    -    });
    -    jest.clearAllMocks();
    -  });
    +  beforeEach(() => {
    +    jest.clearAllMocks();
    +    (useAlerts as jest.Mock).mockReturnValue(baseMockUseAlerts);
    +    (useConfirmationAlertMetrics as jest.Mock).mockReturnValue({
    +      trackAlertRendered: mockTrackAlertRendered,
    +    });
    +  });

• J9 — Module-level mutable jest.fn() binding not reset in beforeEach (high)
  • mockTrackAlertRendered is declared once at the describe block level as jest.fn(). Because jest.clearAllMocks() is currently called AFTER the mock setup (see J3), its call history is never reliably cleared between tests. Even after fixing the J3 ordering issue, the two tests that assert on mockTrackAlertRendered ('calls trackAlertRendered when modal is rendered' and 'does not call trackAlertRendered when modal is not visible') are order-dependent: if a prior test triggers a render that calls trackAlertRendered, the count bleeds into the next test. The safest fix is to re-assign mockTrackAlertRendered to a fresh jest.fn() in beforeEach so its state is always clean, independent of clearAllMocks ordering.
  • Suggested fix in app/components/Views/confirmations/components/modals/alert-modal/alert-modal.test.tsx:66:

    -  const mockTrackAlertRendered = jest.fn();
    -
    -  beforeEach(() => {
    -    (useAlerts as jest.Mock).mockReturnValue(baseMockUseAlerts);
    -    (useConfirmationAlertMetrics as jest.Mock).mockReturnValue({
    -      trackAlertRendered: mockTrackAlertRendered,
    -    });
    -    jest.clearAllMocks();
    -  });
    +  let mockTrackAlertRendered: jest.Mock;
    +
    +  beforeEach(() => {
    +    jest.clearAllMocks();
    +    mockTrackAlertRendered = jest.fn();
    +    (useAlerts as jest.Mock).mockReturnValue(baseMockUseAlerts);
    +    (useConfirmationAlertMetrics as jest.Mock).mockReturnValue({
    +      trackAlertRendered: mockTrackAlertRendered,
    +    });
    +  });

This check is informational only and does not block merging.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit a4ce944. Configure here.}

[codecov-commenter]

Codecov Report

❌ Patch coverage is 92.59259% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 85.13%. Comparing base (cbe5e23) to head (f2df8a6).
⚠️ Report is 10 commits behind head on main.

Files with missing lines	Patch %	Lines
.../components/rows/bridge-fee-row/bridge-fee-row.tsx	0.00%	0 Missing and 1 partial ⚠️
...ents/rows/transactions/from-to-row/from-to-row.tsx	0.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #34229   +/-   ##
=======================================
  Coverage   85.12%   85.13%           
=======================================
  Files        6350     6352    +2     
  Lines      173080   173090   +10     
  Branches    42804    42806    +2     
=======================================
+ Hits       147333   147354   +21     
+ Misses      15708    15701    -7     
+ Partials    10039    10035    -4     

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeConfirmations, SmokeSwap, SmokeStake, SmokePerps, SmokePredictions, SmokeMoney, SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR is a systematic design system migration across ~98 files in the confirmations UI, replacing imports from the internal component-library/components/Texts/Text with @metamask/design-system-react-native. Key changes include:

1. TextVariant renames: BodyMD→BodyMd, BodySM→BodySm, HeadingMD→HeadingMd, BodyMDMedium→BodyMd+FontWeight.Medium, etc.
2. TextColor renames: Alternative→TextAlternative, Error→ErrorDefault, Success→SuccessDefault, Primary→PrimaryDefault, Muted→TextMuted
3. FontWeight prop additions for medium/bold text that previously used combined variant names

Affected flows requiring E2E validation:

• SmokeConfirmations: The entire confirmations UI system is affected — footer, title, info-rows, gas components (gas-option, gas-fee-details-row, gas-modal-header, etc.), alert modals, blockaid banners, signature message sections (personal-sign, typed-sign-v3v4), transaction rows (from-to-row, network-row, advanced-details-row), bridge fee rows, account selector, and more. Text rendering changes could break E2E selectors or visual assertions.
• SmokeSwap: Bridge fee row and usePostTradeTrendingTokens changed (functional fix: returns empty array while loading instead of potentially stale data). Bridge-time-row and bridge-fee-row also changed.
• SmokeStake: Staking footer text variants changed in footer.tsx (BodySM→BodySm for staking terms/risk disclosure links).
• SmokePerps: perps-withdraw-balance component migrated to new design system Text.
• SmokePredictions: predict-claim-amount, predict-claim-footer, predict-withdraw-balance all migrated.
• SmokeMoney: money-account-withdraw-info migrated.
• SmokeWalletPlatform: Transaction details rows (account-row, bridge-fee-row, date-row, fee-section, hero, network-fee-row, paid-with-row, status, to-row, total-row) all changed — these appear in activity/transaction history views.

Dependency tags added per tag descriptions:

• SmokeSwap → SmokeConfirmations (already selected)
• SmokeStake → SmokeConfirmations (already selected)
• SmokePerps → SmokeWalletPlatform (already selected) + SmokeConfirmations (already selected)
• SmokePredictions → SmokeWalletPlatform (already selected) + SmokeConfirmations (already selected)
• SmokeMoney → SmokeConfirmations (already selected)

Not selected: SmokeAccounts, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeMultiChainAPI, SmokeBrowser, SmokeSnaps, SmokeMMConnect, SmokeSeedlessOnboarding — these areas are not touched by this PR's changes.

Performance Test Selection:
This PR is a design system text component migration (TextVariant/TextColor API renames) with no changes to performance-sensitive flows like app launch, login, onboarding, asset loading, or swap execution timing. The usePostTradeTrendingTokens functional fix (returning empty array while loading) is a correctness fix that prevents stale data display but does not affect measured performance scenarios. No performance spec files were changed.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
95.8% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud