chore: bumped design-system-react-native to version 0.24.0

[brianacnguyen]

Description

This pull request bumps @metamask/design-system-react-native from ^0.23.0 to ^0.24.0 so the app tracks the latest MetaMask design system for React Native. Yarn resolves 0.24.0, which also updates the transitive dependency @metamask/design-system-shared from 0.16.0 to 0.17.0.

Changelog

CHANGELOG entry: null

Related issues

Fixes: N/A

Manual testing steps

Feature: Design system dependency upgrade

  Scenario: App installs and launches with updated design system
    Given dependencies are installed from the updated lockfile
    When the developer builds and launches the app on iOS or Android
    Then the app starts without crashes attributable to the design-system package

  Scenario: Representative UI still renders
    Given the user is on a screen that uses @metamask/design-system-react-native components
    When the user navigates and interacts as usual
    Then layout and controls behave as before with no obvious visual regressions

Screenshots/Recordings

Before

N/A — dependency version bump only; no UI change is required by this PR.

After

N/A

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

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

Low Risk
Low risk dependency bump, but it can introduce UI/behavior regressions in components that consume the design system at runtime.

Overview
Updates the app’s MetaMask React Native design system dependency from @metamask/design-system-react-native@^0.23.0 to ^0.24.0.

Refreshes yarn.lock to resolve @metamask/design-system-react-native@0.24.0 and its updated transitive @metamask/design-system-shared requirement (^0.17.0).

^{Reviewed by Cursor Bugbot for commit 0575d93. 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.

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	npm/​@​metamask/​design-system-react-native@​0.23.0 ⏵ 0.24.0				+1

View full report

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeWalletPlatform, SmokePerps, SmokeMoney, SmokeSwap, SmokeConfirmations, SmokeAccounts, SmokeNetworkAbstractions
• Selected Performance tags: @PerformanceAssetLoading, @PerformancePreps
• Risk Level: medium
• AI Confidence: 72%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR bumps @metamask/design-system-react-native from 0.23.0 to 0.24.0 (minor version), with a transitive bump of @metamask/design-system-shared from 0.16.0 to 0.17.0. This design system package provides core UI primitives (Box, Text, Button, Icon, BottomSheet, HeaderStandard, TextVariant, IconName, etc.) that are imported across virtually every major feature area of the app.

Key areas affected by this library:

• Perps: Heavily used across all Perps views/components (PerpsHomeView, PerpsMarketListView, PerpsWithdrawView, PerpsOrderView, etc.) → SmokePerps + SmokeWalletPlatform (Trending/Perps section)
• Tokens/TokenList: TokenListItem, TokenList, TokenListControlBar, ScamWarningModal → SmokeWalletPlatform
• Ramp/Money: BuildQuote, Checkout, TokenSelection, PaymentSelectionModal, etc. → SmokeMoney
• Bridge/Swap: getPriceImpactViewData, tokenSecurityUtils, InputStepper → SmokeSwap + SmokeConfirmations
• Trending: TrendingListHeader, TrendingTokensBottomSheet → SmokeWalletPlatform
• Accounts/SRP: SRPList, SrpInputGrid → SmokeAccounts
• Identity: BackupAndSyncToggle, BackupAndSyncFeaturesToggles → (covered by SmokeWalletPlatform)
• Confirmations: MultichainTransactionDetailsSheet → SmokeConfirmations
• Network: NetworkMultiSelectorList → SmokeNetworkAbstractions

Since this is a minor version bump (not a patch), it may introduce new components or API changes that could affect rendering. The risk is medium — minor versions in design systems are generally backward-compatible but can introduce subtle visual/behavioral regressions. Selected tags cover the most heavily impacted areas. SmokeSnaps, SmokeIdentity, SmokeNetworkExpansion, SmokeMultiChainAPI, SmokeBrowser, SmokeStake, SmokePredictions, SmokeSeedlessOnboarding are less directly impacted by design system primitives in their core flows.

Performance Test Selection:
The design system library provides rendering primitives (Box, Text, etc.) used in token list items and Perps components. A minor version bump could affect render performance of these components. @PerformanceAssetLoading covers token list rendering which uses TokenListItem and TokenList components from this library. @PerformancePreps covers Perps market loading which has the heaviest usage of this design system library across all its views and components.

View GitHub Actions results

[codecov-commenter]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.86%. Comparing base (3751d9a) to head (0575d93).
⚠️ Report is 211 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #30073      +/-   ##
==========================================
+ Coverage   81.54%   81.86%   +0.32%     
==========================================
  Files        5343     5434      +91     
  Lines      142128   144898    +2770     
  Branches    32411    33093     +682     
==========================================
+ Hits       115899   118627    +2728     
+ Misses      18299    18163     -136     
- Partials     7930     8108     +178     

☔ View full report in Codecov by Sentry.
📢 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.

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud