refactor: migrate import SRP screens to design system with Tailwind CSS (Part 2) by tylerc-consensys · Pull Request #26736 · MetaMask/metamask-mobile

tylerc-consensys · 2026-03-02T03:03:35Z

Description

Replace StyleSheet.create() and raw View/Text components with design-system-react-native Box/Text and useTailwind() in ImportFromSecretRecoveryPhrase and ImportNewSecretRecoveryPhrase. Delete the now-unused .styles.ts files.

Part 2 of 2. Part 1: #26673

Changelog

CHANGELOG entry: null

Related issues

Refs: TO-554 - Migrate @MetaMask/web3auth onboarding screens to Design System with Tailwind CSS

Manual testing steps

No functional changes. Visual regression only — verify import SRP screens render correctly.

Feature: Import SRP screens styling

  Scenario: user imports wallet using SRP
    Given app is freshly installed

    When user taps "I already have a wallet" and enters SRP
    Then import screens render identically to before

Screenshots/Recordings

Before left, after right

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.

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.

Made with Cursor

Note

Medium Risk
Primarily a UI refactor, but it touches the wallet import/onboarding SRP flows where styling/layout regressions could block users or break keyboard/safe-area behavior across iOS/Android.

Overview
Migrates ImportFromSecretRecoveryPhrase and ImportNewSecretRecoveryPhrase from StyleSheet.create() and raw View/library Text components to design-system Box/Text/Label with useTailwind() styling, including minor platform-specific spacing tweaks.

Deletes the now-unused styles.ts files and updates the Jest snapshot to reflect the new component/styling output.

^{Written by Cursor Bugbot for commit 2c5e19c. This will update automatically on new commits. Configure here.}

Replace StyleSheet.create() and raw View/Text components with design-system-react-native Box/Text and useTailwind() in ImportFromSecretRecoveryPhrase and ImportNewSecretRecoveryPhrase. Delete the now-unused .styles.ts files. Made-with: Cursor

github-actions · 2026-03-02T03:03:45Z

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.

…igration Made-with: Cursor

Revert Pressable usage back to TouchableOpacity for header and info actions to preserve native pressed-state opacity feedback and match prior UX behavior.

Use the correct background-section token for the learn-more container and restore Android-specific bottom spacing/padding behavior in import SRP flows to match prior rendering.

Replace deprecated component-library Text usage in import SRP flows and update affected snapshot output. Made-with: Cursor

…ailwind-migration-part2 # Conflicts: # app/components/Views/ImportFromSecretRecoveryPhrase/__snapshots__/index.test.tsx.snap # app/components/Views/ImportNewSecretRecoveryPhrase/index.tsx

The merge with main reverted several Tailwind migration changes: - Restore tw.style() for SafeAreaView (was reverting to removed styles obj) - Replace View with Box for subtitle container - Fix TextVariant.BodyMD → BodyMd - Fix TextColor.Alternative → TextAlternative Made-with: Cursor

…ailwind-migration-part2

Made-with: Cursor

Remove onboarding-code-quality-findings.md from the repository root — working notes inadvertently staged alongside the refactor. Made-with: Cursor

Revert app/components/Views/Onboarding/index.tsx and index.test.tsx to main — these changes are handled in the Part 1 migration PR. Made-with: Cursor

codecov-commenter · 2026-03-04T15:16:21Z

Codecov Report

❌ Patch coverage is 80.00000% with 1 line in your changes missing coverage. Please review.
✅ Project coverage is 81.52%. Comparing base (6e4e35c) to head (733217b).
⚠️ Report is 65 commits behind head on main.

Files with missing lines	Patch %	Lines
...ents/Views/ImportNewSecretRecoveryPhrase/index.tsx	66.66%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #26736      +/-   ##
==========================================
- Coverage   81.61%   81.52%   -0.09%     
==========================================
  Files        4598     4617      +19     
  Lines      120455   121163     +708     
  Branches    26347    26435      +88     
==========================================
+ Hits        98307    98777     +470     
- Misses      15258    15482     +224     
- Partials     6890     6904      +14

☔ 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.

grvgoel81 · 2026-03-09T05:12:39Z

+              <Box
+                flexDirection={BoxFlexDirection.Column}
+                style={tw.style(
+                  'w-full gap-y-[18px] mt-auto',


gap-y-[18px] — arbitrary values should be avoided per design system guidelines. Can this use gap-y-4 (16px) or gap-y-5 (20px) instead? If 18px is pixel-perfect from the design spec, please confirm?

Yes previously was using exactly same pixel 18. Now switch to gap-y-4 because there's another same usage in the same file

grvgoel81 · 2026-03-09T05:15:48Z

-        contentContainerStyle={styles.wrapper}
+        contentContainerStyle={tw.style(
+          'flex-grow px-4',
+          Platform.OS === 'android' ? 'pb-0' : 'pb-4',


pb-0 is the default, this is a no-op. Simplify to: Platform.OS !== 'android' && 'pb-4'

grvgoel81 · 2026-03-09T05:19:17Z

-} from '../../../component-library/components/Texts/Text';
+import {
+  TextVariant as LegacyTextVariant,
+  TextColor as LegacyTextColor,


Why mixing two textVariant/textColor enums? Is there component equivalent to Text into new design library?

the new Text component just landed in the design system repo last Thursday. Updating the PRs to reflect latest changes

- Replace arbitrary gap-y-[18px] with design token gap-y-4 (16px) - Simplify redundant pb-0 conditional to Platform.OS !== 'android' && 'pb-4' Made-with: Cursor

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.}

…ailwind-migration-part2

Replace deprecated component-library Label with design-system-react-native Label. Remove LegacyTextVariant/LegacyTextColor imports in favour of TextVariant.BodyMd + FontWeight.Medium and TextColor.TextDefault. Made-with: Cursor

…cretRecoveryPhrase Column is the default flex direction for Box. Keep BoxFlexDirection import for the two Row usages. Made-with: Cursor

github-actions · 2026-03-09T06:42:20Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeAccounts, SmokeWalletPlatform, SmokeIdentity
Selected Performance tags: None (no tests recommended)
Risk Level: medium
AI Confidence: 70%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes modify the ImportFromSecretRecoveryPhrase and ImportNewSecretRecoveryPhrase views and related styles/snapshots. These components are directly involved in Secret Recovery Phrase (SRP) import flows and likely affect multi-SRP wallet architecture and account hierarchy management.

SmokeAccounts is required because it covers SRP import/export flows, multi-account management, and integration with account selection components.

Per the tag guidance, when changes touch multi-SRP architecture or SRP flows, SmokeWalletPlatform must also be selected due to its coverage of multi-SRP wallet architecture and account hierarchies.

Additionally, SmokeIdentity is selected because multi-SRP flows can impact sync behavior and account propagation across devices, which is explicitly tied to multi-SRP changes.

No other functional areas (networks, confirmations, trade, snaps, etc.) are directly impacted by these UI changes.

Performance Test Selection:
The changes are limited to SRP import view components and styling. There is no indication of changes to rendering-heavy lists, startup logic, controllers, or performance-critical flows such as launch, login, asset loading, swaps, or onboarding timing. Therefore, no dedicated performance tests are required.

View GitHub Actions results

github-actions · 2026-03-09T06:57:59Z

✅ E2E Fixture Validation — Schema is up to date
9 value mismatches detected (expected — fixture represents an existing user).
View details

sonarqubecloud · 2026-03-09T07:07:09Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

grvgoel81

lgtm

tylerc-consensys added no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed team-onboarding Onboarding team labels Mar 2, 2026

github-actions Bot added the size-M label Mar 2, 2026

tylerc-consensys added 2 commits March 2, 2026 15:23

test: update ImportFromSecretRecoveryPhrase snapshot after Tailwind m…

71db4fa

…igration Made-with: Cursor

fix: restore TouchableOpacity interactions in import SRP screen

e61f3b0

Revert Pressable usage back to TouchableOpacity for header and info actions to preserve native pressed-state opacity feedback and match prior UX behavior.

tylerc-consensys marked this pull request as ready for review March 2, 2026 09:46

cursor Bot reviewed Mar 2, 2026

View reviewed changes

Comment thread app/components/Views/ImportFromSecretRecoveryPhrase/index.js Outdated

Comment thread app/components/Views/ImportFromSecretRecoveryPhrase/index.js Outdated

Comment thread app/components/Views/ImportNewSecretRecoveryPhrase/index.tsx Outdated

tylerc-consensys added 4 commits March 2, 2026 17:56

fix: restore platform-specific import SRP layout parity

35fcdfd

Use the correct background-section token for the learn-more container and restore Android-specific bottom spacing/padding behavior in import SRP flows to match prior rendering.

refactor import SRP views to design-system text

495aac7

Replace deprecated component-library Text usage in import SRP flows and update affected snapshot output. Made-with: Cursor

Merge remote-tracking branch 'origin/main' into refactor/onboarding-t…

e351378

…ailwind-migration-part2 # Conflicts: # app/components/Views/ImportFromSecretRecoveryPhrase/__snapshots__/index.test.tsx.snap # app/components/Views/ImportNewSecretRecoveryPhrase/index.tsx

test: update import SRP snapshot after main merge

8c8b8e0

tylerc-consensys self-assigned this Mar 3, 2026

tylerc-consensys added 3 commits March 3, 2026 15:58

Merge remote-tracking branch 'origin/main' into refactor/onboarding-t…

85268db

…ailwind-migration-part2

Merge origin/main and update snapshot after fresh install

8864e59

Made-with: Cursor

tylerc-consensys requested a review from a team as a code owner March 3, 2026 08:06

github-actions Bot added size-L and removed size-M labels Mar 3, 2026

cursor Bot reviewed Mar 3, 2026

View reviewed changes

Comment thread onboarding-code-quality-findings.md Outdated

tylerc-consensys added 2 commits March 3, 2026 16:13

chore: remove accidentally committed analysis document

847ca20

Remove onboarding-code-quality-findings.md from the repository root — working notes inadvertently staged alongside the refactor. Made-with: Cursor

revert: remove Onboarding changes covered by Part 1 PR

733217b

Revert app/components/Views/Onboarding/index.tsx and index.test.tsx to main — these changes are handled in the Part 1 migration PR. Made-with: Cursor

github-actions Bot added size-M and removed size-L labels Mar 4, 2026

grvgoel81 reviewed Mar 9, 2026

View reviewed changes

fix: address PR review feedback on styling tokens

ad1c236

- Replace arbitrary gap-y-[18px] with design token gap-y-4 (16px) - Simplify redundant pb-0 conditional to Platform.OS !== 'android' && 'pb-4' Made-with: Cursor

cursor Bot reviewed Mar 9, 2026

View reviewed changes

Comment thread app/components/Views/ImportFromSecretRecoveryPhrase/index.js

Merge remote-tracking branch 'origin/main' into refactor/onboarding-t…

8165eaa

…ailwind-migration-part2

tylerc-consensys added 2 commits March 9, 2026 13:48

fix: remove redundant BoxFlexDirection.Column props from ImportFromSe…

2c5e19c

…cretRecoveryPhrase Column is the default flex direction for Box. Keep BoxFlexDirection import for the two Row usages. Made-with: Cursor

grvgoel81 approved these changes Mar 9, 2026

View reviewed changes

tylerc-consensys added this pull request to the merge queue Mar 9, 2026

Merged via the queue into main with commit 0ea672c Mar 9, 2026
109 checks passed

tylerc-consensys deleted the refactor/onboarding-tailwind-migration-part2 branch March 9, 2026 09:09

github-actions Bot locked and limited conversation to collaborators Mar 9, 2026

metamaskbot added the release-7.70.0 Issue or pull request that will be included in release 7.70.0 label Mar 9, 2026

Uh oh!

Conversation

tylerc-consensys commented Mar 2, 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 left, after right

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Mar 2, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

codecov-commenter commented Mar 4, 2026

Codecov Report

Uh oh!

grvgoel81 Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

tylerc-consensys Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

grvgoel81 Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

tylerc-consensys Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

grvgoel81 Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

tylerc-consensys Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 9, 2026

🔍 Smart E2E Test Selection

Uh oh!

github-actions Bot commented Mar 9, 2026

Uh oh!

sonarqubecloud Bot commented Mar 9, 2026

Quality Gate passed

Uh oh!

grvgoel81 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

tylerc-consensys commented Mar 2, 2026 •

edited by cursor Bot

Loading