refactor(onboarding): migrate OAuthRehydration to design system cp-7.73.0 by tylerc-consensys · Pull Request #28315 · MetaMask/metamask-mobile

tylerc-consensys · 2026-04-02T06:37:48Z

Description

Migrates the OAuthRehydration view from legacy StyleSheet.create(), raw View/Text, and component-library Button to the design system primitives (Box, Text, Button, Label from @metamask/design-system-react-native) with Tailwind CSS via useTailwind(). Also adds theme-aware background color to the SafeAreaView.

Key changes

View → Box with typed layout props (alignItems, gap, paddingHorizontal)
Text → DS Text with TextVariant / TextColor enums
StyleSheet.create() → twClassName and tw.style()
OldButton (ButtonVariants.Link) → DS Button (ButtonVariant.Tertiary)
Added backgroundColor: colors.background.default to SafeAreaView for proper theme support
Removed redundant default props, hoisted foxImageStyle to module-level constant
Deleted styles.ts and styles.test.ts
Extracted render helpers (renderPasswordField, renderHelperText, renderFooterAction) for cleaner JSX

Changelog

CHANGELOG entry: null

Related issues

Fixes: #28505
TO-663

Manual testing steps

Feature: OAuth Rehydration Login Screen

  Scenario: Existing social login user unlocks with password
    Given user has an existing social login wallet
    And user is on the OAuth rehydration (password) screen

    When user enters their password
    And taps the Unlock button
    Then the wallet unlocks successfully

  Scenario: Password error is displayed
    Given user is on the OAuth rehydration screen

    When user enters an incorrect password
    And taps the Unlock button
    Then an error message is displayed below the password field

  Scenario: Forgot password flow
    Given user is on the OAuth rehydration screen with an outdated password

    When user taps "Forgot password?"
    Then the delete wallet modal is presented

  Scenario: Other methods navigation
    Given user is on the OAuth rehydration screen (non-outdated password)

    When user taps "Use a different login method"
    Then user is navigated back to the previous screen

  Scenario: Screen uses correct theme background
    Given user is on the OAuth rehydration screen

    When the screen renders in light or dark mode
    Then the background color matches the current theme

Screenshots/Recordings

Light

State	Before	After
Empty
Filled
Error
Outdated

Dark

State	Before	After
Empty
Filled
Error
Outdated

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
Mostly a UI/styling refactor, but it touches the OAuth rehydration login screen layout and input handling, which could impact a critical unlock flow if rendering/spacing regresses (especially Android status bar/keyboard behavior).

Overview
Migrates OAuthRehydration from legacy StyleSheet/component-library UI to design-system components (Box, Text, Button, TextField) styled via useTailwind, including a theme-aware SafeAreaView background.

Reworks platform-specific layout behavior by adding Android StatusBar.currentHeight top padding and conditional spacing/keyboard scroll height, and extracts small render helpers for the password field, helper text, and footer action.

Updates tests to match the new DS components and layout (including an Android-specific spacing/padding assertion), adjusts the password-clear assertion to check rendered value removal, adds a react-native-qrcode-svg mock, and deletes styles.ts plus its unit test.

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

github-actions · 2026-04-02T06:37:57Z

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

^{Reviewed by Cursor Bugbot for commit 5349d3b. Configure here.}

smgv

LGTM!

…uth-rehydration

github-actions · 2026-04-07T07:31:25Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeIdentity, SmokeWalletPlatform
Selected Performance tags: @PerformanceLogin
Risk Level: low
AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are a pure UI refactoring of the OAuthRehydration screen — migrating from legacy StyleSheet-based styling to the new design system (Box, Text, TextField, Button from @metamask/design-system-react-native) and Tailwind (useTailwind). The styles.ts file was deleted and its styles moved inline. No business logic, navigation, or controller changes were made.

The OAuthRehydration screen is part of the seedless/social login (OAuth) onboarding flow. It is navigated to from the Login screen when seedless onboarding errors are detected. This screen is relevant to:

SmokeIdentity: Covers seedless onboarding sync, social login flows, and account sync features. The OAuthRehydration screen is a critical part of the OAuth/seedless login rehydration path.
SmokeWalletPlatform: Covers wallet lifecycle analytics and onboarding flows (new wallet creation, SRP import events). The screen tracks REHYDRATION_COMPLETED, LOGIN_SCREEN_VIEWED, and other onboarding analytics events.

Other tags (SmokeAccounts, SmokeConfirmations, etc.) are not relevant as this change is isolated to the OAuth rehydration login screen UI and does not touch account management, confirmations, network, or trading flows.

Risk is low because: (1) only UI/styling changed, not logic; (2) unit tests were updated to match; (3) the component's behavior (password unlock, error handling, navigation) is unchanged.

Performance Test Selection:
The OAuthRehydration screen is part of the login/unlock flow. While the changes are purely UI/styling (no logic changes), the migration to new design system components (Box, TextField, Button from @metamask/design-system-react-native) and Tailwind could theoretically affect render performance. Running @PerformanceLogin is a conservative but reasonable choice to ensure the login flow performance is not regressed by the component library migration.

View GitHub Actions results

sonarqubecloud · 2026-04-07T07:47:46Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

github-actions · 2026-04-07T07:51:22Z

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

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

tylerc-consensys self-assigned this Apr 2, 2026

metamaskbot added the INVALID-PR-TEMPLATE PR's body doesn't match template label Apr 2, 2026

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

metamaskbot removed the INVALID-PR-TEMPLATE PR's body doesn't match template label Apr 2, 2026

tylerc-consensys changed the title ~~refactor: migrate OAuthRehydration to design system components~~ refactor(onboarding): migrate OAuthRehydration to design system components Apr 2, 2026

tylerc-consensys changed the title ~~refactor(onboarding): migrate OAuthRehydration to design system components~~ refactor: migrate OAuthRehydration to design system components Apr 2, 2026

tylerc-consensys changed the title ~~refactor: migrate OAuthRehydration to design system components~~ refactor(onboarding): migrate OAuthRehydration to design system Apr 2, 2026

tylerc-consensys marked this pull request as ready for review April 2, 2026 10:44

tylerc-consensys requested a review from a team as a code owner April 2, 2026 10:44

cursor Bot reviewed Apr 6, 2026

View reviewed changes

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

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Apr 6, 2026

github-actions Bot added the risk-low Low testing needed · Low bug introduction risk label Apr 7, 2026

cursor Bot reviewed Apr 7, 2026

View reviewed changes

Comment thread app/components/Views/OAuthRehydration/styles.test.ts Outdated

test(onboarding): remove orphaned oauth styles test

1227277

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Apr 7, 2026

test(onboarding): cover oauth rehydration android layout branches

6d84e22

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Apr 7, 2026

smgv approved these changes Apr 7, 2026

View reviewed changes

smgv requested a review from LeVinhGithub April 7, 2026 05:31

smgv added the needs-qa Any New Features that needs a full manual QA prior to being added to a release. label Apr 7, 2026

ieow reviewed Apr 7, 2026

View reviewed changes

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

Merge remote-tracking branch 'origin/main' into feat/design-system-oa…

c39e3e8

…uth-rehydration

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Apr 7, 2026

LeVinhGithub approved these changes Apr 7, 2026

View reviewed changes

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Apr 7, 2026

tylerc-consensys removed the needs-qa Any New Features that needs a full manual QA prior to being added to a release. label Apr 7, 2026

tylerc-consensys added this pull request to the merge queue Apr 7, 2026

Merged via the queue into main with commit 0a21a64 Apr 7, 2026
217 of 223 checks passed

tylerc-consensys deleted the feat/design-system-oauth-rehydration branch April 7, 2026 10:44

github-actions Bot locked and limited conversation to collaborators Apr 7, 2026

metamaskbot added the release-7.74.0 Issue or pull request that will be included in release 7.74.0 label Apr 7, 2026

ieow changed the title ~~refactor(onboarding): migrate OAuthRehydration to design system~~ refactor(onboarding): migrate OAuthRehydration to design system cp-7.74.0 Apr 8, 2026

ieow changed the title ~~refactor(onboarding): migrate OAuthRehydration to design system cp-7.74.0~~ refactor(onboarding): migrate OAuthRehydration to design system cp-7.73.0 Apr 8, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor(onboarding): migrate OAuthRehydration to design system cp-7.73.0#28315

refactor(onboarding): migrate OAuthRehydration to design system cp-7.73.0#28315
tylerc-consensys merged 16 commits into
mainfrom
feat/design-system-oauth-rehydration

tylerc-consensys commented Apr 2, 2026 •

edited by ieow

Loading

Uh oh!

github-actions Bot commented Apr 2, 2026

Uh oh!

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

smgv left a comment

Uh oh!

Uh oh!

github-actions Bot commented Apr 7, 2026

Uh oh!

sonarqubecloud Bot commented Apr 7, 2026

Uh oh!

github-actions Bot commented Apr 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

tylerc-consensys commented Apr 2, 2026 • edited by ieow Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Key changes

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Light

Dark

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Apr 2, 2026

Uh oh!

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

smgv left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Apr 7, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented Apr 7, 2026

Quality Gate passed

Uh oh!

github-actions Bot commented Apr 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

tylerc-consensys commented Apr 2, 2026 •

edited by ieow

Loading