Skip to content

feat: migrate RevealPrivateCredential to new design system components#27600

Merged
grvgoel81 merged 3 commits into
mainfrom
refactor/revealPrivateCredential-tailwind-migration
Mar 20, 2026
Merged

feat: migrate RevealPrivateCredential to new design system components#27600
grvgoel81 merged 3 commits into
mainfrom
refactor/revealPrivateCredential-tailwind-migration

Conversation

@grvgoel81

@grvgoel81 grvgoel81 commented Mar 18, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Description

Migrates the RevealPrivateCredential component from legacy React Native styling patterns (View, StyleSheet, component-library Text) to the MetaMask design system (Box, design system Text with semantic color tokens, Tailwind twClassName).

What changed:

  • Replaced View with Box from @metamask/design-system-react-native.
  • Replaced component-library Text, TextVariant, TextColor with design system equivalents (BodyMD→BodyMd, BodySM→BodySm, TextColor.Alternative→TextColor.TextAlternative, TextColor.Default→TextColor.TextDefault, raw colors.primary.default→TextColor.PrimaryDefault)
  • Replaced inline style={styles.wrapper} and style={styles.rowWrapper} with twClassName props
  • Removed @ts-expect-error workaround that was needed for the old View style array

Jira: https://consensyssoftware.atlassian.net/browse/TO-598

Changelog

CHANGELOG entry: null

Related issues

Fixes:

Manual testing steps

Feature: Reveal Secret Recovery Phrase

  Scenario: user views SRP introduction screen
    Given user is logged into the wallet
    When user navigates to Settings > Security & Privacy > Reveal Secret Recovery Phrase
    Then the SRP quiz introduction screen is displayed with correct styling

  Scenario: user completes quiz and enters password
    Given user is on the SRP quiz introduction screen
    When user completes the 2-question security quiz
    Then the password entry screen is displayed with warning banner and correct padding

  Scenario: user reveals SRP after authentication
    Given user is on the password entry screen
    When user enters correct password and taps Confirm
    Then the SRP is displayed in text/QR tabs with "Done" button
    And text colors and spacing match the original design

  Scenario: user copies SRP to clipboard
    Given user has revealed the SRP
    When user taps "Copy to clipboard"
    Then a toast notification confirms the copy action

Screenshots/Recordings

Before

Screen.Recording.2026-03-18.at.6.01.17.PM.mov

After

Screen.Recording.2026-03-18.at.4.50.02.PM.mov

Pre-merge author checklist

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
Mostly a UI refactor, but it touches the Secret Recovery Phrase reveal screen; layout/token changes could inadvertently affect visibility, spacing, or test coverage for a security-sensitive flow.

Overview
Migrates RevealPrivateCredential from legacy React Native View/component-library Text usage to the MetaMask design system, swapping in Box + design-system Text and updating typography/color tokens and wrapper layout to twClassName.

Adds snapshot coverage for three key states (intro, password entry, and unlocked SRP view) and checks in the new RevealPrivateCredential.test.tsx.snap file to lock down rendering output.

Written by Cursor Bugbot for commit 79feaf6. Configure here.

@grvgoel81 grvgoel81 self-assigned this Mar 18, 2026
@grvgoel81 grvgoel81 added the team-onboarding Onboarding team label Mar 18, 2026
@github-actions

github-actions Bot commented Mar 18, 2026

Copy link
Copy Markdown
Contributor

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.

@github-actions github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk size-M labels Mar 18, 2026
cursor[bot]
cursor Bot reviewed Mar 18, 2026
View reviewed changes

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Comment thread app/components/Views/RevealPrivateCredential/RevealPrivateCredential.test.tsx Outdated
@github-actions github-actions Bot added size-S risk-medium Moderate testing recommended · Possible bug introduction risk and removed size-M risk-medium Moderate testing recommended · Possible bug introduction risk labels Mar 18, 2026
@grvgoel81 grvgoel81 changed the title refactor: migrate RevealPrivateCredential to design system components refactor: migrate RevealPrivateCredential to new design system components Mar 18, 2026
@grvgoel81 grvgoel81 changed the title refactor: migrate RevealPrivateCredential to new design system components feat: migrate RevealPrivateCredential to new design system components Mar 18, 2026
@grvgoel81 grvgoel81 marked this pull request as ready for review March 18, 2026 12:38
@grvgoel81 grvgoel81 requested a review from a team as a code owner March 18, 2026 12:38
@grvgoel81 grvgoel81 added this pull request to the merge queue Mar 19, 2026
tylerc-consensys
tylerc-consensys requested changes Mar 19, 2026
View reviewed changes
Comment thread app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx
Comment thread app/components/Views/RevealPrivateCredential/RevealPrivateCredential.tsx Outdated
@grvgoel81 grvgoel81 removed this pull request from the merge queue due to a manual request Mar 19, 2026
@github-actions 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
@github-actions

github-actions Bot commented Mar 19, 2026

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeAccounts, SmokeWalletPlatform, SmokeIdentity
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: medium
  • AI Confidence: 90%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are a UI/styling refactor of the RevealPrivateCredential component (SRP/private key reveal screen):

  1. What changed:

    • Migrated from internal component library (Text, View) to @metamask/design-system-react-native (Box, Text, TextVariant, TextColor)
    • Updated enum values for TextVariant (BodyMD→BodyMd, BodySM→BodySm) and TextColor (Alternative→TextAlternative, Default→TextDefault)
    • Replaced inline styles with Tailwind class names (twClassName)
    • Removed normalText and rowWrapper style definitions from styles.ts

  2. Risk: Medium — while the logic is unchanged, visual regressions are possible if the design system components render differently (layout, colors, spacing). The SRP reveal screen is a security-sensitive UI that must display correctly.

  3. Tag selection:

    • SmokeAccounts: Directly covers SRP reveal flows from Settings and account action menus — the primary test suite for this component. The reveal-secret-recovery-phrase.spec.ts test navigates to this exact screen.
    • SmokeWalletPlatform: Required per SmokeAccounts tag description when changes touch SRP export flows — covers multi-SRP architecture and SRP export from Settings.
    • SmokeIdentity: Required per SmokeAccounts tag description when changes touch SRP export flows — covers account sync features that interact with SRP management.

  4. No performance impact: This is a pure UI refactoring with no changes to data loading, state management, or rendering performance characteristics.

Performance Test Selection:
The changes are a pure UI/styling refactor replacing View/Text components with design system equivalents and updating style definitions. There are no changes to data fetching, state management, list rendering, or any performance-sensitive code paths. No performance tests are warranted.

View GitHub Actions results

@github-actions

github-actions Bot commented Mar 19, 2026

Copy link
Copy Markdown
Contributor

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

@sonarqubecloud

sonarqubecloud Bot commented Mar 19, 2026

Copy link
Copy Markdown

Quality Gate Passed 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

@grvgoel81 grvgoel81 added this pull request to the merge queue Mar 20, 2026
Merged via the queue into main with commit 8a3a0c5 Mar 20, 2026
95 checks passed
@grvgoel81 grvgoel81 deleted the refactor/revealPrivateCredential-tailwind-migration branch March 20, 2026 03:10
@github-actions github-actions Bot locked and limited conversation to collaborators Mar 20, 2026
@metamaskbot metamaskbot added the release-7.72.0 Issue or pull request that will be included in release 7.72.0 label Mar 20, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Reviewers

@cursor cursor[bot] cursor[bot] left review comments

@tylerc-consensys tylerc-consensys tylerc-consensys approved these changes

Assignees

@grvgoel81 grvgoel81

Labels

release-7.72.0 Issue or pull request that will be included in release 7.72.0 risk-medium Moderate testing recommended · Possible bug introduction risk size-S team-onboarding Onboarding team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@grvgoel81 @tylerc-consensys @metamaskbot