fix: surface api errors and improve resend UX on OTP screen (MetaMask#26727)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

The OTP screen was showing a generic fallback error regardless of what
the API returned. This PR surfaces the actual Transak error messages to
the user on both OTP submission and resend failures.

The resend button state was also changed: instead of starting in the
"resend" state (waiting for the user to trigger a resend), the screen
now starts directly in cooldown mode because the OTP was already sent
when the user lands on this screen. The cooldown is also bumped from 30s
to 60s to match the actual resend window.

## **Changelog**

CHANGELOG entry: Fixed OTP error messages to show the actual error from
the server instead of a generic fallback.

## **Related issues**

Fixes: TRAM-3291

## **Manual testing steps**

```gherkin
Feature: OTP error display

  Scenario: user submits an invalid OTP code
    Given the user is on the OTP screen after starting a buy flow
    When the user enters a wrong 6-digit code
    Then the error message from the server is displayed instead of a generic one

  Scenario: user lands on the OTP screen
    Given the user navigated to the OTP screen
    Then a 60-second cooldown is immediately shown
    And the resend button is not visible until the cooldown ends

  Scenario: user tries to resend after cooldown
    Given the 60-second cooldown has elapsed
    When the user taps the resend button
    Then a new OTP is sent
    And a new 60-second cooldown starts
```

## **Screenshots/Recordings**

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

Surface error without reseting the countdown:


https://github.com/user-attachments/assets/d09b03d5-44f1-4448-8805-e8d7c18f43b1

Countdown starts as soon as user navigates to OTP screen:


https://github.com/user-attachments/assets/56016104-ad20-46d0-b7fb-88e88e066507



## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes OTP resend timing/state handling and error surfacing on a
critical ramp authentication step; mistakes could prevent users from
resending or understanding failures.
> 
> **Overview**
> **Improves OTP resend UX in the ramp native flow.** The OTP screen now
starts in a *60s cooldown* (was 30s) since an OTP is already sent on
entry, and the initial UI/snapshot reflects the cooldown text instead of
an immediate resend link.
> 
> **Resend failures now show user-facing API errors.** `handleResend` no
longer transitions to a `resendError`/"contact support" UI state on API
failure; it sets the screen `error` using `parseUserFacingError` with a
fallback translation key, and tests add coverage for both message and
no-message resend failures.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
a6a1749. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: AxelGes <axelges9@gmail.com>

Author: georgeweiler

app/components/UI/Ramp/Views/NativeFlow/OtpCode.test.tsx

@@ -301,6 +301,12 @@ describe('V2OtpCode', () => {
 
     const { getByText } = renderWithTheme(<V2OtpCode />);
 
+    for (let i = 0; i < 60; i++) {
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+    }
+
     await act(async () => {
       fireEvent.press(getByText('deposit.otp_code.resend_code_button'));
     });
@@ -315,6 +321,12 @@ describe('V2OtpCode', () => {
 
     const { getByText } = renderWithTheme(<V2OtpCode />);
 
+    for (let i = 0; i < 60; i++) {
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+    }
+
     await act(async () => {
       fireEvent.press(getByText('deposit.otp_code.resend_code_button'));
     });
@@ -370,4 +382,44 @@ describe('V2OtpCode', () => {
       expect(Clipboard.getString).toHaveBeenCalled();
     });
   });
+
+  it('shows error when sendUserOtp API fails', async () => {
+    mockSendUserOtp.mockRejectedValue(new Error('Network error'));
+
+    const { getByText } = renderWithTheme(<V2OtpCode />);
+
+    for (let i = 0; i < 60; i++) {
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+    }
+
+    await act(async () => {
+      fireEvent.press(getByText('deposit.otp_code.resend_code_button'));
+    });
+
+    await waitFor(() => {
+      expect(getByText('Network error')).toBeOnTheScreen();
+    });
+  });
+
+  it('shows fallback error when sendUserOtp fails without message', async () => {
+    mockSendUserOtp.mockRejectedValue(new Error());
+
+    const { getByText } = renderWithTheme(<V2OtpCode />);
+
+    for (let i = 0; i < 60; i++) {
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+    }
+
+    await act(async () => {
+      fireEvent.press(getByText('deposit.otp_code.resend_code_button'));
+    });
+
+    await waitFor(() => {
+      expect(getByText('deposit.otp_code.resend_code_error')).toBeOnTheScreen();
+    });
+  });
 });

app/components/UI/Ramp/Views/NativeFlow/OtpCode.tsx

@@ -54,7 +54,7 @@ export const createV2OtpCodeNavDetails =
   createNavigationDetails<V2OtpCodeParams>(Routes.RAMP.OTP_CODE);
 
 const CELL_COUNT = 6;
-const COOLDOWN_TIME = 30;
+const COOLDOWN_TIME = 60;
 const MAX_RESET_ATTEMPTS = 3;
 
 const ResendButton: FC<{
@@ -99,8 +99,8 @@ const V2OtpCode = () => {
   const [error, setError] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [resendButtonState, setResendButtonState] = useState<
-    'resend' | 'cooldown' | 'contactSupport' | 'resendError'
-  >('resend');
+    'resend' | 'cooldown' | 'contactSupport'
+  >('cooldown');
   const [cooldownSeconds, setCooldownSeconds] = useState(COOLDOWN_TIME);
   const timerRef = useRef<NodeJS.Timeout | null>(null);
   const [resetAttemptCount, setResetAttemptCount] = useState(0);
@@ -191,7 +191,9 @@ const V2OtpCode = () => {
           .build(),
       );
     } catch (e) {
-      setResendButtonState('resendError');
+      setError(
+        parseUserFacingError(e, strings('deposit.otp_code.resend_code_error')),
+      );
       Logger.error(e as Error, 'Error resending OTP code');
     }
   }, [
@@ -396,13 +398,6 @@ const V2OtpCode = () => {
                 button="deposit.otp_code.contact_support"
               />
             ) : null}
-            {resendButtonState === 'resendError' ? (
-              <ResendButton
-                onPress={handleContactSupport}
-                text="deposit.otp_code.resend_code_error"
-                button="deposit.otp_code.contact_support"
-              />
-            ) : null}
           </Row>
         </ScreenLayout.Content>
       </ScreenLayout.Body>

app/components/UI/Ramp/Views/NativeFlow/__snapshots__/OtpCode.test.tsx.snap

@@ -429,28 +429,8 @@ exports[`V2OtpCode matches snapshot 1`] = `
               }
             }
           >
-            deposit.otp_code.resend_code_description
+            deposit.otp_code.resend_cooldown
           </Text>
-          <TouchableOpacity
-            onPress={[Function]}
-          >
-            <Text
-              accessibilityRole="text"
-              style={
-                {
-                  "color": "#66676a",
-                  "fontFamily": "Geist-Regular",
-                  "fontSize": 16,
-                  "letterSpacing": 0,
-                  "lineHeight": 24,
-                  "marginLeft": 4,
-                  "textDecorationLine": "underline",
-                }
-              }
-            >
-              deposit.otp_code.resend_code_button
-            </Text>
-          </TouchableOpacity>
         </View>
       </View>
     </View>