fix: update account status screen with new ui design system cp-7.73.0 by ieow · Pull Request #28507 · MetaMask/metamask-mobile

ieow · 2026-04-08T04:50:00Z

Description

The Account Status view (social login “wallet found” / “wallet not found”) was built with legacy component-library Text, Button, and a local index.styles.ts StyleSheet.

Reason: Align this onboarding screen with @metamask/design-system-react-native so typography, buttons, colors, and spacing stay consistent with the rest of the app and are easier to maintain.

Solution: Replace View/ScrollView layout wrappers with design system Box, swap to design system Text and Button (including ButtonVariant, isFullWidth, and children instead of label), and style the screen with useTailwind() plus semantic tokens (bg-default, etc.). Remove index.styles.ts. Use useWindowDimensions for responsive width and compute the hero image size from available width (capped at 343px, preserving aspect ratio). Footer spacing uses platform-specific Tailwind classes (mb-4 on iOS, mb-6 on Android). Snapshot tests were updated to reflect the new component tree and styles.

Changelog

CHANGELOG entry: Updated the social login account status screen to use MetaMask design system layout and buttons

Related issues

Fixes: #28505

Manual testing steps

Feature: Account Status screen (social login)

  Scenario: User sees wallet-found state with correct actions
    Given the user has navigated to Account Status with type "found" and a known account identifier
    When the screen loads
    Then the title, description, and hero image are visible
    And the primary action (Log in / Unlock wallet per copy) and "Use a different login method" are full-width design system buttons

  Scenario: User sees wallet-not-found state with correct actions
    Given the user has navigated to Account Status with type "not_exist"
    When the screen loads
    Then the title, description, and hero image are visible
    And the primary action is "Create a new wallet" and secondary is "Use a different login method"

  Scenario: User proceeds from Account Status
    Given Account Status is shown for a found wallet
    When the user taps the primary button
    Then navigation continues to the expected onboarding step (rehydrate / import flow)

  Scenario: User returns to choose another login method
    Given Account Status is shown
    When the user taps "Use a different login method"
    Then the user returns to the previous screen

Screenshots/Recordings

Before

Light	Dark

After

Light	Dark

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

Low Risk
Primarily a UI refactor to the Account Status onboarding screen (layout/styling and component swaps) with no meaningful changes to navigation, analytics, or data handling; main risk is visual/regression differences across platforms/screensizes.

Overview
Updates the AccountStatus onboarding view to use @metamask/design-system-react-native components (Box, Text, Button) and Tailwind styling (useTailwind) instead of the legacy component-library widgets and local StyleSheet.

Adds responsive hero image sizing via useWindowDimensions + memoized width/height calculation, tweaks scroll/content and platform-specific footer spacing, and removes index.styles.ts. Snapshot tests are updated to match the new component tree and style output.

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

github-actions · 2026-04-08T04:50:12Z

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

github-actions · 2026-04-08T05:08:05Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeWalletPlatform
Selected Performance tags: @PerformanceOnboarding
Risk Level: medium
AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are a UI/styling refactoring of the AccountStatus component, migrating from custom StyleSheet + component-library components to the @metamask/design-system-react-native design system (Box, Button, Text) and Tailwind-based styling.

Key findings:

The AccountStatus component is used in the social login / seedless onboarding flow (Google/Apple login for existing users)
The SocialLoginView page object (tests/page-objects/Onboarding/SocialLoginView.ts) references AccountStatusSelectorIDs - these test IDs are PRESERVED in the refactoring
The smoke tests in tests/smoke/seedless/ (google-login-existing-user.spec.ts, apple-login-existing-user.spec.ts) are tagged as SmokeWalletPlatform and directly test the AccountStatus screen
The button rendering changed from TouchableOpacity to View with different accessibility props (onClick vs onPress, different event handlers) - this could potentially affect element interaction in E2E tests
The visual layout and component hierarchy changed significantly (Box/ScrollView structure), though functional behavior is preserved

SmokeWalletPlatform is selected because the seedless onboarding tests (google-login-existing-user, apple-login-existing-user) that directly exercise the AccountStatus screen are tagged under this suite. No other test suites directly test this component.

Performance Test Selection:
The performance tests tests/performance/onboarding/seedless-apple-onboarding.spec.ts and seedless-google-onboarding.spec.ts both use SocialLoginView which references AccountStatus elements. The AccountStatus component was refactored to use a new design system (Box, useTailwind) which could affect rendering performance. The @PerformanceOnboarding tag covers onboarding flow performance including the seedless/social login path that goes through AccountStatus.

View GitHub Actions results

github-actions · 2026-04-08T05:24:58Z

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

sonarqubecloud · 2026-04-08T05:25:42Z

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 · 2026-04-08T05:39:31Z

lgtm. Just want to confirm with product or design team why we have different cta's for same button in android and ios.

cc @nakulmk

ieow · 2026-04-08T05:56:27Z

Due to apple rejection last year with the reason there should be no password needed after apple login
@nakulmk , should we revert back since that is not issue anymore

fix: update account status screen with new ui design system

f1673bb

metamaskbot added the team-onboarding Onboarding team label Apr 8, 2026

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

cursor Bot reviewed Apr 8, 2026

View reviewed changes

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

fix: cursor comments

66faf33

ieow marked this pull request as ready for review April 8, 2026 05:04

github-actions Bot added the risk-medium Moderate testing recommended · Possible bug introduction risk label Apr 8, 2026

ieow enabled auto-merge April 8, 2026 05:22

ieow changed the title ~~fix: update account status screen with new ui design system~~ fix: update account status screen with new ui design system cp-7.73.0 Apr 8, 2026

grvgoel81 approved these changes Apr 8, 2026

View reviewed changes

ieow added this pull request to the merge queue Apr 8, 2026

Merged via the queue into main with commit c9a5b45 Apr 8, 2026
99 checks passed

ieow deleted the cw/social-account-status-design-system branch April 8, 2026 06:01

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

metamaskbot added the release-7.78.0 label Apr 8, 2026

weitingsun added release-7.74.0 Issue or pull request that will be included in release 7.74.0 and removed release-7.78.0 labels Apr 8, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix: update account status screen with new ui design system cp-7.73.0#28507

fix: update account status screen with new ui design system cp-7.73.0#28507
ieow merged 2 commits into
mainfrom
cw/social-account-status-design-system

ieow commented Apr 8, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 8, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Apr 8, 2026

Uh oh!

github-actions Bot commented Apr 8, 2026

Uh oh!

sonarqubecloud Bot commented Apr 8, 2026

Uh oh!

grvgoel81 commented Apr 8, 2026

Uh oh!

ieow commented Apr 8, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

ieow commented Apr 8, 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 Apr 8, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Apr 8, 2026

🔍 Smart E2E Test Selection

Uh oh!

github-actions Bot commented Apr 8, 2026

Uh oh!

sonarqubecloud Bot commented Apr 8, 2026

Quality Gate passed

Uh oh!

grvgoel81 commented Apr 8, 2026

Uh oh!

ieow commented Apr 8, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ieow commented Apr 8, 2026 •

edited

Loading

ieow commented Apr 8, 2026 •

edited

Loading