chore(runway): cherry-pick fix(card): cp-7.60.0 fix OTP inputs frozen screens

[runway-github]

• fix(card): cp-7.60.0 fix OTP inputs frozen screens (fix(card): cp-7.60.0 fix OTP inputs frozen screens #22894)

Description

Fixed critical OTP input freezing issues affecting three Card
onboarding/authentication screens where users were unable to navigate,
proceed, or sometimes even focus the 6-digit OTP input field.

Problem:
Users experienced UI freezing on OTP verification screens, preventing
them from:

• Focusing the OTP input field
• Navigating back to previous screens
• Proceeding after entering the verification code

Root Cause:
The implementations were missing the useBlurOnFulfill hook from
react-native-confirmation-code-field, which is critical for proper
input lifecycle management. Without this hook:

• The input field remained focused after all digits were entered
• The keyboard wasn't properly dismissed
• Focus conflicts caused the UI to freeze
• Navigation became blocked

Solution:

• Added useBlurOnFulfill hook to properly manage OTP input focus and
  blur events
• Updated ref handling to use the hook's return value instead of manual
  useRef
• Fixed hook dependency arrays to prevent stale closure issues
• Fixed a cooldown timing bug in ConfirmPhoneNumber (was setting
  cooldown before API success)
• Updated all test mocks to include the new hook

The implementation now matches the working pattern used in the
Ramp/Deposit OTP screen (OtpCode.tsx), which doesn't experience these
issues.

Changelog

CHANGELOG entry: Fixed OTP input freezing issues on Card email and phone
verification screens

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

Integrates useBlurOnFulfill and platform-specific autoComplete for OTP fields, fixes resend cooldown timing, and updates tests/mocks accordingly.

• Card OTP flows (CardAuthentication, ConfirmEmail, ConfirmPhoneNumber):
  • Add useBlurOnFulfill for proper focus/blur handling and use its ref for CodeField.
  • Update focus effects and dependency arrays; remove manual useRef usage.
  • Use platform-specific autoComplete (android: sms-otp, default: one-time-code).
  • Keep auto-submit on full code entry; maintain useClearByFocusCell.
• Resend logic:
  • ConfirmPhoneNumber: start cooldown only after successful resend.
  • ConfirmEmail: store returned contactVerificationId from resend.
• Tests:
  • Update mocks for react-native-confirmation-code-field to include useBlurOnFulfill and align with ref changes.

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

9f9609f

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

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

The changes affect Card authentication and onboarding flows in MetaMask Mobile. All 6 changed files are related to the Card feature:

1. Component Files (3):

   • CardAuthentication.tsx: Handles login with OTP authentication flow
   • ConfirmEmail.tsx: Email verification during onboarding
   • ConfirmPhoneNumber.tsx: Phone number verification during onboarding

2. Test Files (3):

   • Corresponding .test.tsx files for each component

Analysis:
From reading the files, these components handle critical Card functionality including:

• Two-factor authentication with OTP codes
• Email and phone number verification during onboarding
• Auto-submit functionality when verification codes are complete
• Resend code functionality with cooldown timers
• Navigation between different onboarding steps
• Integration with Card SDK and verification hooks

Without git diffs available, I cannot determine the exact nature of changes, but these files contain:

• Complex state management for OTP flows
• Auto-submission logic
• Timer-based functionality (cooldown)
• Navigation logic
• Error handling

The test files are comprehensive with 1300+ lines each, indicating these are well-tested components.

Risk Assessment: Medium

• These are Card-specific flows (authentication/onboarding)
• Changes affect critical user authentication paths
• Comprehensive test coverage exists but functional changes need E2E validation
• Card feature has dedicated E2E tests (card-button.spec.ts, etc.)

Tag Selection:

• SmokeCard: Appropriate tag for Card authentication and onboarding flows

View GitHub Actions results

[sonarqubecloud]

Quality Gate failed

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

See analysis details on SonarQube Cloud

[metamaskbot]

No release label on PR. Adding release label release-7.60.0 on PR, as PR was cherry-picked in branch 7.60.0.