Description

This PR fixes two related issues in the OTP Code screen for the Deposit flow:

Issue 1: Missing Localization Key

The ResendButton component was referencing a non-existent localization key deposit.otp_code.resend_error, which would display the raw key string to users instead of the intended error message.

The correct key that exists in en.json is deposit.otp_code.resend_code_error with the value "Error resending code."

Issue 2: Test Not Capturing Error State

The test case "renders resend error snapshot when resend fails" was not properly testing the error state. It was taking a snapshot immediately after pressing the resend button, capturing the cooldown state ("Resend code in 30 seconds") instead of the error state ("Error resending code.").

This happened because:

1. The test pressed the button but didn't await the async operation
2. The snapshot was taken before the mockSendUserOtp.mockRejectedValue() promise rejection was processed
3. Therefore, the snapshot showed resendButtonState === 'cooldown' instead of resendButtonState === 'resendError'

Detailed Changes

Fix 1: Localization Key (OtpCode.tsx)

View diff

- text="deposit.otp_code.resend_error"
+ text="deposit.otp_code.resend_code_error"

Fix 2: Test Case (OtpCode.test.tsx)

View diff

  it('renders resend error snapshot when resend fails', async () => {
    mockSendUserOtp.mockRejectedValue(new Error('Failed to resend'));
    render(OtpCode);
    const resendButton = screen.getByText('Resend it');
-   fireEvent.press(resendButton);
+
+   await act(async () => {
+     fireEvent.press(resendButton);
+   });
+
+   await waitFor(() => {
+     expect(screen.getByText('Error resending code.')).toBeOnTheScreen();
+   });
+
    expect(screen.toJSON()).toMatchSnapshot();
  });

Fix 3: Updated Snapshot

View snapshot diff

The snapshot now correctly captures the error state UI:

-                               Resend code in 30 seconds
+                               Error resending code.
                              </Text>
+                             <TouchableOpacity
+                               onPress={[Function]}
+                             >
+                               <Text ...>
+                                 Contact support
+                               </Text>
+                             </TouchableOpacity>

Changelog

CHANGELOG entry: Fixes a small localization key bug in the OTP code screen for Buy (deposit)

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TRAM-2950

Manual testing steps

Feature: OTP Code Resend Error State

  Scenario: user sees error message when OTP resend fails
    Given user is on the OTP Code screen in the Deposit flow
    And the network request to resend OTP will fail

    When user taps "Resend it" button
    Then user sees "Error resending code." text
    And user sees "Contact support" link

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.