chore: updated DSRN to v22 by brianacnguyen · Pull Request #29596 · MetaMask/metamask-mobile

brianacnguyen · 2026-04-30T22:09:35Z

Description

This PR bumps @metamask/design-system-react-native from 0.21.0 to 0.22.0 (with @metamask/design-system-shared 0.14.0 → 0.15.0 via the lockfile).

0.22.0 changes the design-system TextField and TextFieldSearch contract: native TextInput props must be passed under inputProps, imperative access to the real input uses inputRef instead of ref, root ref targets the outer container, placeholderTextColor is not supported on the public TextField API, and spellings like isReadonly are normalized to isReadOnly in the design system (not used in these edits).

This branch updates every in-repo consumer that imports TextField / TextFieldSearch from @metamask/design-system-react-native so types and runtime behavior match the new API (Login, OAuth rehydration, choose/reset password, manual backup, rewards onboarding referral field, reveal SRP password entry, trending explore search, and card authentication). CardAuthentication now imports TextField from the design system and uses the same inputProps split so yarn lint:tsc stays green after the upgrade.

Unit tests were adjusted where they assumed the old structure (CardAuthentication helpers; OnboardingMainStep mock forwards inputProps.testID to the inner input).

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: Design system 0.22 TextField usage

  Scenario: User unlocks with password on Login
    Given the app shows the Login screen with password field
    When the user enters a password and submits unlock
    Then unlock proceeds as before and the password field still accepts input and device auth affordances behave as before

  Scenario: User sets password during onboarding
    Given the app shows Choose Password (or Reset Password) with new and confirm fields
    When the user fills both fields and moves focus between fields (e.g. Next on keyboard)
    Then focus and submit behavior match expectations and no layout regressions appear on the fields

  Scenario: User completes card email/password or OTP step
    Given the app shows Card authentication (email/password or OTP)
    When the user types in email, password, or OTP fields and toggles password visibility
    Then values update correctly and login/OTP actions still work

  Scenario: User enters a rewards referral code (if that flow is enabled)
    Given Rewards onboarding shows the referral code field
    When the user types up to six characters
    Then validation and UI feedback behave as before

  Scenario: User searches on Explore (interactive search bar)
    Given Trending Explore shows the interactive search bar
    When the user types a query and uses clear/cancel
    Then search text and clear behavior work as before

Screenshots/Recordings

Before

After

Simulator Screenshot - iPhone 15 Pro Max - 2026-04-30 at 15 14 50

Simulator Screenshot - iPhone 15 Pro Max - 2026-04-30 at 15 15 08

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
I've tested with a power user scenario
I've instrumented key operations with Sentry traces for production performance metrics

Pre-merge reviewer checklist

(Reviewer completes.)

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
Updates a shared UI dependency and refactors multiple password/authentication inputs (login, reset/choose password, card auth, OAuth rehydration), so regressions in text entry, focus/submit behavior, and testIDs are possible despite mostly mechanical changes.

Overview
Bumps @metamask/design-system-react-native to 0.22.0 (and @metamask/design-system-shared via lockfile), and migrates in-app consumers to the new TextField/TextFieldSearch API.

All affected screens now pass native TextInput props via inputProps and use inputRef for imperative focus/clear, with updates to testIDs and E2E selectors (notably Explore/Trending search) to target the inner text input.

Adjusts unit tests/mocks to align with the new component contract (e.g., inputProps.testID forwarding and simpler value assertions).

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

github-actions · 2026-04-30T22:09:47Z

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 · 2026-04-30T22:12:23Z

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.21.0 ⏵ 0.22.0				⁺¹

View full report

socket-security · 2026-04-30T22:12:25Z

All alerts resolved. Learn more about Socket for GitHub.

This PR previously contained dependency changes with security issues that have been resolved, removed, or ignored.

Ignoring alerts on:

npm/@metamask/design-system-react-native@0.22.0

View full report

brianacnguyen · 2026-04-30T22:17:00Z

@SocketSecurity ignore npm/@metamask/design-system-react-native@0.22.0

…to chore/upgrade-mmds

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 4d13db1. Configure here.}

…to chore/upgrade-mmds

github-actions · 2026-05-01T15:47:30Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeWalletPlatform, SmokeAccounts, SmokeSeedlessOnboarding, SmokeMoney, SmokeIdentity
Selected Performance tags: None (no tests recommended)
Risk Level: high
AI Confidence: 85%

click to see 🤖 AI reasoning details

E2E Test Selection:
This PR upgrades @metamask/design-system-react-native from v0.21.0 to v0.22.0, which introduces a breaking API change to the TextField component: native TextInput props (like testID, secureTextEntry, autoCapitalize, onSubmitEditing, etc.) must now be passed via an inputProps object instead of directly on the component.

All affected components have been migrated to the new API:

Login/index.tsx - Password field testID moved to inputProps. This is critical because the login screen is the entry point for almost all E2E tests. If testID is not properly forwarded, many tests will fail to find the password input.
ChoosePassword/index.tsx - Both new password and confirm password fields migrated. Affects wallet creation onboarding flows.
ResetPassword/index.tsx - Password reset fields migrated. Affects reset password flows.
ManualBackupStep1/index.tsx - SRP backup password entry migrated. Affects SRP backup flows tested in SmokeAccounts and SmokeWalletPlatform.
OAuthRehydration/index.tsx - OAuth/seedless login password field migrated. Directly affects SmokeSeedlessOnboarding.
RevealPrivateCredential/components/PasswordEntry.tsx - SRP/private key reveal password entry migrated. Affects SmokeAccounts (SRP export flows).
CardAuthentication.tsx - OTP, email, and password fields migrated. Affects SmokeMoney card authentication flows.
OnboardingMainStep.tsx - Rewards referral code input migrated (minor impact).
ExploreSearchBar.tsx + TrendingView test files - Search input testID updated to new structure (explore-view-search-text-input). Directly affects SmokeWalletPlatform trending search tests.

The test infrastructure (selectors, page objects, spec file) for Trending search has been updated to match the new testID. However, the other components' testIDs remain the same values — they're just now passed via inputProps. The risk is whether the new TextField component properly forwards inputProps.testID to the underlying native TextInput element for Detox to find.

Tags selected:

SmokeWalletPlatform: Trending search test updated + Login screen used in most wallet platform tests
SmokeAccounts: ManualBackupStep1 (SRP backup) and RevealPrivateCredential (SRP/key export) password fields changed
SmokeSeedlessOnboarding: OAuthRehydration password field changed + ChoosePassword onboarding flow changed
SmokeMoney: CardAuthentication fields (OTP, email, password) all migrated to new API
SmokeIdentity: Account sync flows go through login/onboarding screens affected by these changes; also related to SmokeAccounts per tag descriptions

Performance Test Selection:
The changes are API refactoring of the TextField component (moving props to inputProps) and a design system version bump. While the Login screen is affected, the actual rendering logic and performance characteristics are unchanged - only how props are passed to the underlying TextInput. No new data loading, state management changes, list rendering changes, or initialization changes that would impact performance metrics. The Trending search bar change is also purely a testID/prop forwarding change with no performance implications.

View GitHub Actions results

codecov-commenter · 2026-05-01T16:03:59Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 81.82%. Comparing base (51b6bbd) to head (6815add).
⚠️ Report is 32 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #29596      +/-   ##
==========================================
- Coverage   82.15%   81.82%   -0.33%     
==========================================
  Files        5178     5226      +48     
  Lines      137450   138583    +1133     
  Branches    31079    31456     +377     
==========================================
+ Hits       112924   113401     +477     
- Misses      16875    17452     +577     
- Partials     7651     7730      +79

☔ 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 · 2026-05-01T16:05:02Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

chore: updated DSRN to v22

0e0a6f5

brianacnguyen self-assigned this Apr 30, 2026

brianacnguyen requested review from a team as code owners April 30, 2026 22:09

brianacnguyen added No QA Needed Apply this label when your PR does not need any QA effort. team-design-system All issues relating to design system in Mobile labels Apr 30, 2026

github-actions Bot added the size-M label Apr 30, 2026

cursor Bot reviewed Apr 30, 2026

View reviewed changes

Comment thread app/components/UI/Card/Views/CardAuthentication/CardAuthentication.tsx Outdated

brianacnguyen added the no changelog required No changelog entry is required for this change label Apr 30, 2026

brianacnguyen added 3 commits April 30, 2026 15:25

Fixed lint errors for card auth

3581044

Updated explore search bar test id

7c41569

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

4d13db1

…to chore/upgrade-mmds

cursor Bot reviewed Apr 30, 2026

View reviewed changes

Comment thread app/components/Views/ChoosePassword/index.tsx

Updated tests for trending input

e57e902

brianacnguyen requested a review from a team as a code owner May 1, 2026 00:11

brianacnguyen added 3 commits April 30, 2026 19:38

Updated more test failures

2eddc83

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

3c6cd05

…to chore/upgrade-mmds

Merge branch 'main' into chore/upgrade-mmds

6815add

cortisiko approved these changes May 1, 2026

View reviewed changes

sophieqgu approved these changes May 1, 2026

View reviewed changes

vinnyhoward approved these changes May 1, 2026

View reviewed changes

brianacnguyen enabled auto-merge May 1, 2026 21:54

grvgoel81 approved these changes May 3, 2026

View reviewed changes

brianacnguyen added this pull request to the merge queue May 3, 2026

github-merge-queue Bot removed this pull request from the merge queue due to failed status checks May 3, 2026

brianacnguyen added this pull request to the merge queue May 4, 2026

Merged via the queue into main with commit 2bc0e4e May 4, 2026
97 checks passed

brianacnguyen deleted the chore/upgrade-mmds branch May 4, 2026 14:32

github-actions Bot locked and limited conversation to collaborators May 4, 2026

metamaskbotv2 Bot added the release-7.77.0 Issue or pull request that will be included in release 7.77.0 label May 4, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: updated DSRN to v22#29596

chore: updated DSRN to v22#29596
brianacnguyen merged 8 commits into
mainfrom
chore/upgrade-mmds

brianacnguyen commented Apr 30, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Apr 30, 2026

Uh oh!

socket-security Bot commented Apr 30, 2026 •

edited

Loading

Uh oh!

socket-security Bot commented Apr 30, 2026 •

edited

Loading

Uh oh!

Uh oh!

brianacnguyen commented Apr 30, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented May 1, 2026

Uh oh!

codecov-commenter commented May 1, 2026

Uh oh!

sonarqubecloud Bot commented May 1, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

Uh oh!

Conversation

brianacnguyen commented Apr 30, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Apr 30, 2026

Uh oh!

socket-security Bot commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

socket-security Bot commented Apr 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

brianacnguyen commented Apr 30, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented May 1, 2026

🔍 Smart E2E Test Selection

Uh oh!

codecov-commenter commented May 1, 2026

Codecov Report

Uh oh!

sonarqubecloud Bot commented May 1, 2026

Quality Gate passed

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

brianacnguyen commented Apr 30, 2026 •

edited by cursor Bot

Loading

socket-security Bot commented Apr 30, 2026 •

edited

Loading

socket-security Bot commented Apr 30, 2026 •

edited

Loading