chore: upgrade MMDS to v56.0.0

[brianacnguyen]

Description

Upgrades design system packages to align with the v56.0.0 release.

Packages upgraded:

• @metamask/design-system-react-native: ^0.37.0 → ^0.38.0
• @metamask/design-system-shared (transitive): ^0.30.0 → ^0.31.0

Unchanged in this release:

• @metamask/design-system-twrnc-preset: ^0.8.0
• @metamask/design-tokens: ^8.7.0

Breaking changes addressed:

• KeyValueRow: Now defaults to px-4 (16px) horizontal padding so rows align with other full-width list surfaces without a parent padding wrapper. Call sites that already padded the parent would double-pad.
  • Removed redundant parent horizontal padding so KeyValueRow owns the 16px inset
  • Kept sibling non-row content visually at 16px (buttons, custom margin rows, description text, Pro form controls, order book right inset)
  • Touched surfaces: Perps Order View, Close Position, Close All, Close Summary, Position Card, Market Balance Actions, Pro Order Form / Pro Market Layout

Other breaking changes (no code changes needed)

• None beyond KeyValueRow default padding for this bump (0.37.0 → 0.38.0). Toast bottomOffset → topOffset landed in 0.37.0 and was already consumed upstream of this branch.

New additions available for future use:

• KeyValueSelect for pressable key/value rows with a non-interactive SelectButton value
• HelpText with optional HelpTextSeverity and showIcon (leading IconAlert when severity is set)
• isHidden / length support on string slots for Content, ListItem, TitleHub, and KeyValueRow via SensitiveText

Upstream fixes included in this release:

• BannerBase spacing updates (inherited by BannerAlert / Toast)
• Slider: Fixed thumb rewind on rapid taps and fast pans
• Content: Fixed description stretching the end accessory when the description wraps

Legacy component deprecations:

• No new deprecations added — all matching legacy components in app/component-library/ already have @deprecated JSDoc notices from prior upgrades

Changelog

CHANGELOG entry: Upgrades design system libraries to v56.0.0 and migrates Perps KeyValueRow call sites off parent horizontal padding

Related issues

Fixes: N/A

Manual testing steps

Feature: Design system upgrade to v56.0.0

Scenario: Core app functionality is unaffected
Given I am on the main app screen
When I navigate through the primary user flows
Then the UI renders correctly with no visual regressions

Scenario: Perps home balance card KeyValueRow padding
Given I open the Perps tab with a funded account
When a deposit/withdraw is in progress (optional) or I view Withdraw / Add funds actions
Then status/detail rows sit ~16px from the relevant edge with no double inset

Scenario: Perps position details KeyValueRows
Given I open a market where I have an open position
When I view the position details section (Direction / Entry / Liquidation / Funding)
Then KeyValueRows align with the Details section header (~16px inset)

Scenario: Perps order form (Long/Short)
Given I open Long or Short on a market
When I view the input card (Leverage / TP-SL / Limit / Pay with) and bottom summary rows
Then content is ~16px inside the card / from screen edge and aligns with sibling rows

Scenario: Close position summary and footer
Given I open Close position on an open position
When I view the footer summary and confirm button (and tap amount to open the keypad)
Then Margin / Fees / You receive / Points align at ~16px; confirm button remains inset ~16px

Scenario: Close all positions sheet
Given I have 2+ open positions
When I open Close all from Perps home
Then description text and summary rows share ~16px left inset; footer buttons look normal

Scenario: Pro mode order form / layout (requires perpsProModeEnabled)
Given Pro mode is enabled via Feature Flag Override
When I switch to Pro and view the order form + order book
Then form controls and OrderSummary are ~16px from the left; book keeps ~16px from the right; collapsing the book keeps expand control and full-width form inset correctly

Screenshots/Recordings

Before

After

Previous KeyValueRow still functional

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

Low Risk
Layout-only migration for a design-system default change in Perps UI; no trading, auth, or data-path changes.

Overview
Upgrades @metamask/design-system-react-native from ^0.37.0 to ^0.38.0 (design system v56.0.0), with a transitive bump to @metamask/design-system-shared ^0.31.0.

The main behavioral change addressed is KeyValueRow now applying ~16px (px-4) horizontal padding by default. Perps screens that used to pad the parent are updated so rows are not inset twice: redundant paddingHorizontal on wrappers and input groups is removed, while non-row siblings (descriptions, loading states, confirm buttons, custom margin rows, Pro form controls) keep explicit ~16px inset where needed.

PerpsCloseSummary drops the isInputFocused prop and the conditional extra padding; row padding moves onto summary rows and SectionDivider uses mx-4. PerpsClosePositionView no longer passes isInputFocused and wraps the footer confirm button in footerButton for horizontal inset.

Touches include close-all/close-position flows, order view styles, position card details, market balance transaction rows, and Pro market layout (form px-4, order book pr-4). Related unit test mocks and an isInputFocused test are removed.

^{Reviewed by Cursor Bugbot for commit 5eb4a03. 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.37.0 ⏵ 0.38.0	+1		+1	+1

View full report

[geositta]

There is a visual regression in the close summary I commented on.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokePerps, SmokeWalletPlatform, SmokeConfirmations
• Selected Performance tags: @PerformancePreps
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:
All changed files are in the Perps UI feature area (app/components/UI/Perps/) with layout/styling refactoring changes:

1. PerpsCloseAllPositionsView: Restructured Box/padding hierarchy for the close all positions modal
2. PerpsClosePositionView: Removed isInputFocused prop, wrapped confirm button in footerButton View, style adjustments
3. PerpsOrderView.styles: Moved paddingHorizontal from container to individual rows
4. PerpsProMarketLayout: Removed px-4 from outer Box, added to inner elements
5. PerpsProOrderForm: Wrapped form elements in px-4 Box for consistent padding
6. PerpsCloseSummary: Removed isInputFocused prop/style, moved paddingHorizontal to summaryRow
7. PerpsMarketBalanceActions: Removed wrapping Box with px-4 from KeyValueRow
8. PerpsPositionCard: Removed px-4 from details section Box
9. package.json: @metamask/design-system-react-native bumped from ^0.37.0 to ^0.38.0

SmokePerps is selected as the primary tag since all changes are in Perps UI components.
Per SmokePerps tag description: 'When selecting SmokePerps, also select SmokeWalletPlatform (Trending section) and SmokeConfirmations (Add Funds deposits are on-chain transactions).'
The design system version bump is minor and unlikely to break functionality, but the Perps UI changes warrant validation of the full Perps flow including confirmations.

Performance Test Selection:
The Perps UI components changed include the order form, position card, close position views, and market balance actions - all of which are part of the perps market loading and position management flows measured by @PerformancePreps. The layout restructuring (padding/Box hierarchy changes) could affect render performance of these components.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
2 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

[github-actions]

⚡ Performance Test Results

ℹ️ Performance test results are currently non-blocking and will not block this PR.

❌ 1 test failed · 2 tests · 1 device

📱 Devices tested (1)

Android: Google Pixel 8 Pro (v14.0)

❌ Failed Tests (1)

@mm-perps-engineering-team

Test	Platform	Device	Reason	Recording
Perps open position and close it	Android	Google Pixel 8 Pro (v14.0)	Test error	📹 Watch

✅ Passed Tests (1)

Test	Platform	Device	Duration	Team	Recording
Perps add funds	Android	Google Pixel 8 Pro (v14.0)	8.26s	@mm-perps-engineering-team	📹 Watch

---

Branch: chore/upgrade-design-system-v56.0.0 · Build: Normal · Commit: 18377ff · View full run