refactor: migrate ManualBackupStep1 to design system components and T… by smgv · Pull Request #27677 · MetaMask/metamask-mobile

smgv · 2026-03-19T10:33:34Z

…ailwind CSS

Description

Component migration (View → Box, StyleSheet → twClassName/tw.style(), deleted styles.ts)
Test optimizations (consolidated setup functions, removed duplicates, cleaner descriptions)
Added @metamask/design-system-twrnc-preset mock

Jira Link: https://consensyssoftware.atlassian.net/browse/TO-604

Changelog

CHANGELOG entry: migrate ManualBackupStep1 to design system components and Tailwind CSS

Related issues

Fixes:

Manual testing steps

Feature: ManualBackupStep1 seed phrase reveal screen

  Background:
    Given I have just created a new MetaMask wallet
    And I am on the "Secure your wallet" screen (step 2 of 3)

  Scenario: user sees blurred seed phrase before revealing
    Given the seed phrase is hidden behind a blur overlay

    Then I should see the title "Write down your Secret Recovery Phrase"
    And I should see "Tap to reveal your Secret Recovery Phrase"
    And the "Continue" button should be disabled

  Scenario: user reveals seed phrase by tapping the blur overlay
    Given the seed phrase is hidden behind a blur overlay

    When user taps the blur overlay
    Then the blur overlay should disappear
    And I should see 12 seed phrase words displayed in a 3-column grid
    And the "Continue" button should be enabled

  Scenario: user proceeds to seed phrase confirmation after revealing
    Given user has tapped the blur overlay to reveal the seed phrase

    When user taps the "Continue" button
    Then I should be taken to the seed phrase confirmation screen (step 3 of 3)

  Scenario: user opens the Secret Recovery Phrase definition
    Given the seed phrase reveal screen is visible

    When user taps the "Secret Recovery Phrase" inline link in the description
    Then a modal explaining what a Secret Recovery Phrase is should appear

  Scenario: user skips backup during onboarding with no funds
    Given I am on the seed phrase reveal screen during onboarding
    And my wallet has no funds

    Then I should see a "Remind me later" button

    When user taps "Remind me later"
    Then I should be taken past the backup flow to the onboarding success screen

Screenshots/Recordings

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.

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
Refactors a security-sensitive SRP backup screen’s UI (seed phrase reveal + password unlock) to new design-system primitives and tailwind styling, which could introduce subtle layout/accessibility regressions across platforms/themes. Core navigation and seed phrase handling logic is largely unchanged but should be spot-checked in-app.

Overview
Migrates ManualBackupStep1 from bespoke StyleSheet/legacy UI components to @metamask/design-system-react-native primitives (Box, Button, TextField, TextButton, Icon) and tailwind-driven styling via useTailwind, and removes the dedicated styles.ts.

Updates the seed-phrase reveal and password-confirmation views to the new components (including Android-specific bottom spacing and some accessibility props), and rewrites/streamlines the Jest tests and snapshots (new tailwind mock, consolidated setup helpers, updated theme snapshot expectations).

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

…ailwind CSS

github-actions · 2026-03-19T10:33:44Z

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.

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

github-actions · 2026-03-19T10:56:16Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeAccounts, SmokeConfirmations, SmokeIdentity, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeTrade, SmokeWalletPlatform, SmokeCard, SmokePerps, SmokeRamps, SmokeMultiChainAPI, SmokePredictions, FlaskBuildTests
Selected Performance tags: @PerformanceAccountList, @PerformanceOnboarding, @PerformanceLogin, @PerformanceSwaps, @PerformanceLaunch, @PerformanceAssetLoading, @PerformancePredict, @PerformancePreps
Risk Level: high
AI Confidence: %

click to see 🤖 AI reasoning details

E2E Test Selection:
Fallback: AI analysis did not complete successfully. Running all tests.

Performance Test Selection:
Fallback: AI analysis did not complete successfully. Running all performance tests.

View GitHub Actions results

github-actions · 2026-03-19T11:14:50Z

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

sonarqubecloud · 2026-03-19T11:21:14Z

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

LeVinhGithub

lgtm qa

tylerc-consensys

lgtm

tylerc-consensys · 2026-03-20T00:27:08Z

+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+          false,
+          undefined,
+          undefined,


nit: tw.style mock generated many false / undefined, u can ask AI to assist in this

refactor: migrate ManualBackupStep1 to design system components and T…

d291380

…ailwind CSS

smgv requested review from grvgoel81 and tylerc-consensys March 19, 2026 10:33

smgv self-assigned this Mar 19, 2026

smgv requested a review from a team as a code owner March 19, 2026 10:33

metamaskbot added the team-onboarding Onboarding team label Mar 19, 2026

github-actions Bot added size-XL risk-medium Moderate testing recommended · Possible bug introduction risk labels Mar 19, 2026

Merge branch 'main' into refactor/manualBackup1-migration

42628d3

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Mar 19, 2026

cursor Bot reviewed Mar 19, 2026

View reviewed changes

Comment thread app/components/Views/ManualBackupStep1/index.test.tsx Outdated

fix: updated unit test case

45d544d

github-actions Bot added risk-high Extensive testing required · High bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Mar 19, 2026

smgv enabled auto-merge March 19, 2026 12:02

LeVinhGithub approved these changes Mar 19, 2026

View reviewed changes

tylerc-consensys approved these changes Mar 20, 2026

View reviewed changes

smgv added this pull request to the merge queue Mar 20, 2026

Merged via the queue into main with commit 2da84f5 Mar 20, 2026
110 of 111 checks passed

smgv deleted the refactor/manualBackup1-migration branch March 20, 2026 00:46

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

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

smgv added the QA Passed QA testing has been completed and passed label Apr 2, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: migrate ManualBackupStep1 to design system components and T…#27677

refactor: migrate ManualBackupStep1 to design system components and T…#27677
smgv merged 3 commits into
mainfrom
refactor/manualBackup1-migration

smgv commented Mar 19, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 19, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 19, 2026

Uh oh!

github-actions Bot commented Mar 19, 2026

Uh oh!

sonarqubecloud Bot commented Mar 19, 2026

Uh oh!

LeVinhGithub left a comment

Uh oh!

tylerc-consensys left a comment

Uh oh!

tylerc-consensys Mar 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

smgv commented Mar 19, 2026 • edited 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

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Mar 19, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 19, 2026

🔍 Smart E2E Test Selection

Uh oh!

github-actions Bot commented Mar 19, 2026

Uh oh!

sonarqubecloud Bot commented Mar 19, 2026

Quality Gate passed

Uh oh!

LeVinhGithub left a comment

Choose a reason for hiding this comment

Uh oh!

tylerc-consensys left a comment

Choose a reason for hiding this comment

Uh oh!

tylerc-consensys Mar 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

smgv commented Mar 19, 2026 •

edited

Loading