Description

Adds a "View PIN" option to the Card Home manage card section, allowing users to securely view their card PIN through a PCI-compliant image-based display.

Why: Users need to retrieve their card PIN (e.g. for ATM use or in-store transactions). The PIN is never transmitted as plain text — it is rendered as an image via a time-limited, single-use secure token from the POST /v1/card/pin/token endpoint, ensuring PCI compliance.

What changed:

• New SDK method (CardSDK.generateCardPinToken): Calls POST /v1/card/pin/token with optional customCss for theming the PIN image. Mirrors the existing generateCardDetailsToken pattern with proper error handling.
• React Query integration: New cardQueries.pin key factory and pinTokenMutationFn following the established React Query patterns from the codebase.
• useCardPinToken hook: Wraps useMutation for PIN token generation. Automatically applies dark/light theme-aware customCss (background and text colors) so the PIN image matches the app appearance.
• ViewPinBottomSheet component: Displays the PIN image in a bottom sheet with a skeleton loader and CardScreenshotDeterrent enabled to prevent screenshots of sensitive data.
• CardHome integration: New ManageCardListItem for "View PIN" with biometric authentication gating (matching the "View Card Details" flow). Falls back to password bottom sheet with a PIN-specific description when biometrics are not configured. Visible for US users (all card types) and international users with non-virtual cards.
• Analytics: Added VIEW_PIN_BUTTON action to CardActions enum, tracked via CARD_BUTTON_CLICKED event.
• Navigation: Registered CardViewPinModal route and added the ViewPinBottomSheet screen to CardModalsRoutes.
• Tests: Added tests across 5 files — SDK method tests, query layer tests, hook tests, bottom sheet snapshot/render tests, and 11 new CardHome integration tests covering visibility conditions, biometric auth flow, password fallback, and loading guards.

Changelog

CHANGELOG entry: Added "View PIN" option to the Card Home screen, allowing users to securely view their card PIN via biometric or password authentication.

Related issues

Fixes:

Manual testing steps

Feature: View card PIN

  Scenario: View PIN button is visible for eligible users
    Given the user is authenticated with an active card
    And the user is a US user OR has a non-virtual (metal) card
    When the user navigates to the Card Home screen
    Then a "View PIN" option is displayed in the manage card section

  Scenario: View PIN button is hidden for international virtual card users
    Given the user is an international user with a virtual card
    When the user navigates to the Card Home screen
    Then the "View PIN" option is NOT displayed

  Scenario: View PIN with biometric authentication
    Given the user has biometric authentication configured
    When the user taps "View PIN"
    Then a biometric prompt is displayed
    And upon successful authentication, the card PIN is shown as an image in a bottom sheet
    And the PIN image matches the current theme (light/dark background)

  Scenario: View PIN with password fallback
    Given the user does NOT have biometric authentication configured
    When the user taps "View PIN"
    Then a password bottom sheet appears with the message "Enter your wallet password to view your card PIN."
    And upon entering the correct password, the card PIN is shown in a bottom sheet

  Scenario: View PIN biometric cancellation
    Given the user has biometric authentication configured
    When the user taps "View PIN" and cancels the biometric prompt
    Then no PIN is displayed and the user returns to Card Home

  Scenario: View PIN error handling
    Given the user taps "View PIN" and authentication succeeds
    When the PIN token request fails
    Then an error toast is shown with "Failed to load PIN. Please try again."

  Scenario: Screenshot prevention
    Given the card PIN bottom sheet is displayed
    When the user attempts to take a screenshot
    Then the screenshot deterrent is active and prevents capture of the PIN

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.