Description

This PR addresses multiple UI/UX issues in the MetaMask Card feature:

1. Improved error handling for card provisioning: Previously, when card provisioning failed, the app showed a generic error message. Now it displays the actual error message returned by the API endpoint (e.g., "Unable to place a card order. Please contact customer support"), falling back to a generic message only when no specific error is provided.

2. Updated UI copy and text improvements:

   • Updated card onboarding description to mention "3% cashback" instead of generic "earn rewards"
   • Fixed "Not now" button to use proper localization key
   • Updated KYC verification screen text to better reflect the "awaiting approval" state
   • Fixed physical address description text
   • Fixed spacing in "View document (PDF)" text

3. Visual improvements:

   • Replaced ActivityIndicator with AnimatedSpinner in the KYC verification screen for consistent styling
   • Updated the verify identity image

4. Code cleanup:

   • Removed unused MailingAddress route from onboarding navigator
   • Removed unused VerifyingRegistration route from card routes

Changelog

CHANGELOG entry: Fixed card provisioning to show specific API error messages instead of generic errors

Related issues

Fixes:

Manual testing steps

Feature: Card Provisioning Error Messages

  Scenario: user sees specific error message when card provisioning fails
    Given user is authenticated and on Card Home screen
    And the card provisioning API returns an error with message "Unable to place a card order. Please contact customer support"

    When user taps "Enable Card" button
    Then a toast notification appears with the message "Unable to place a card order. Please contact customer support"

  Scenario: user sees fallback error when API returns no message
    Given user is authenticated and on Card Home screen
    And the card provisioning API returns an error without a message field

    When user taps "Enable Card" button
    Then a toast notification appears with a generic error message

Feature: KYC Verification Screen

  Scenario: user sees updated UI during KYC verification
    Given user has completed the Veriff KYC flow

    When user is redirected to the verification screen
    Then user sees "Awaiting approval" as the title
    And user sees an animated spinner instead of a static activity indicator
    And user sees updated helper text "This usually takes a few seconds. Please do not close the app."

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.