chore: Update card welcome splash screen

[sophieqgu]

Update nav options

Update Signup

Update ConfirmEmail

Update ConfirmPhoneNumber

Update Address

Update VerifyIdentity

Update PersonalDetails

Update KYC success and failure

Description

Update card onboarding flow according to new design
CARD-213
CARD-216
CARD-217
CARD-220
Half of CARD-221 since address search and autocompletion requires a new library
CARD-222
CARD-223
CARD-224

Changelog

CHANGELOG entry: Update card onboarding flow according to new design

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

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

Revamps MetaMask Card onboarding with new UI, navigation flow (adds Complete, updates Validating/KYCFailed), improved input/resend UX, metrics, and updated copy; removes legacy consent/mailing steps.

• Onboarding UI/UX:
  • Rebuilds screens (VerifyIdentity, ValidatingKYC, KYCFailed, Complete, CardWelcome) with new images, typography, and responsive layouts; updates OnboardingStep structure.
  • Adds validation icons on password fields; tweaks titles/descriptions and resend UX (clickable “Resend it”).
  • Phone country/area selector now shows flags via countryCodeToFlag and uses ISO-callingCode values.
• Navigation/Flow:
  • Adds Routes.CARD.ONBOARDING.COMPLETE; ValidatingKYC now resets to COMPLETE or KYC_FAILED.
  • Simplifies headers (default options), hides header on Card Welcome.
  • PhysicalAddress now routes to VERIFY_IDENTITY on success; removes mailing-address and consent checkbox flow.
• Behavioral changes:
  • ConfirmEmail/ConfirmPhoneNumber: resend control split into hint + clickable link; updated cooldown handling.
  • SelectComponent: supports disabled and showDropDown props; blocks picker when disabled.
• Metrics:
  • Adds view/button tracking across screens (e.g., Card Welcome, VerifyIdentity, KYC screens).
• Localization:
  • Overhauls copy for onboarding (titles, descriptions, buttons, terms) to match new design.
• Tests:
  • Updates/extends tests to reflect new flows, navigation targets, component props, and copy.

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

[github-actions]

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]

Bug: State initialization may use stale async data

The selectedCountryAreaCode and selectedCountryIsoCode states are initialized from initialSelectedCountryAreaCode (a useMemo depending on registrationSettings) and selectedCountry, respectively. Since useState only uses the initial value on first render, if registrationSettings loads asynchronously after mount or selectedCountry changes in Redux, these state values won't be updated. This could cause the country area code dropdown to display incorrect values (e.g., always showing '+1' regardless of the user's selected country) until manually changed.

 

[cursor]

Bug: Screen dimensions captured at module load won't update

Dimensions.get('window') is called at module initialization time (line 6), meaning screenWidth, screenHeight, and all derived scaling values are computed once when the module loads. These values won't update if the device rotates, enters split-screen mode, or if it's a foldable device that changes dimensions. This could cause incorrect layout calculations on tablets, foldables, or when orientation changes.

 

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeCard
• Risk Level: medium
• AI Confidence: 90%

click to see 🤖 AI reasoning details

The changes are entirely focused on the MetaMask Card feature:

1. Card Onboarding Flow Refactoring: All 38 changed files are either:

   • Card-specific components (app/components/UI/Card/...)
   • Card-related images (app/images/mm-card-*.png)
   • Card-related locale strings in en.json
   • A SelectComponent enhancement with showDropDown and disabled props used primarily by Card components

2. Changes Include:

   • CardWelcome view redesign
   • OnboardingNavigator route and flow changes
   • Multiple onboarding screens updates (Complete, ConfirmEmail, ConfirmPhoneNumber, KYCFailed, OnboardingStep, PersonalDetails, PhysicalAddress, SetPhoneNumber, SignUp, ValidatingKYC, VerifyIdentity)
   • New countryCodeToFlag utility function
   • Navigation options refactoring
   • Localization updates for card onboarding

3. SelectComponent Changes: The shared SelectComponent now has showDropDown and disabled props. This is used in SecuritySettings (AutoLock) and IPFSGatewaySettings, but the changes are backward-compatible with default values (showDropDown=true, disabled=false), and the snapshot change confirms no behavioral impact.

4. Risk Assessment:

   • Medium risk because these are significant UI/UX changes to the Card onboarding flow
   • The changes affect navigation flow and user experience
   • However, all changes are scoped to the Card feature
   • The E2E Card tests are currently skipped but should still be triggered in case they get enabled

Only SmokeCard is needed as all changes are Card-specific. No need to run other test suites as:

• SelectComponent changes are backward-compatible
• No core wallet functionality is affected
• No other feature areas are impacted

View GitHub Actions results

[sonarqubecloud]

Quality Gate failed

Failed conditions
10.5% Duplication on New Code (required ≤ 10%)

See analysis details on SonarQube Cloud