[MNY-327] SDK: Display error returned from API in login with phone number UI (#8548)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on improving error handling and state management in the OTP authentication process. It enhances the way error messages are displayed and modifies the structure of `AccountStatus` to accommodate additional information.

### Detailed summary
- In `otp.ts`, enhanced error handling by parsing the response for a detailed message.
- Updated `AccountStatus` type in `OTPLoginUI.tsx` to an object structure, allowing for an error message.
- Modified state management for `accountStatus` to use the new object structure.
- Adjusted UI rendering logic to handle the new `AccountStatus` format.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **Bug Fixes**
  * Enhanced error message handling in OTP verification to display detailed server error messages to users instead of generic messages.
  * Improved error status display in OTP login interface.

* **Style**
  * Updated OTP login UI layout and spacing for better status presentation.

<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

packages/thirdweb/src/react/web/wallets/shared/OTPLoginUI.tsx

@@ -29,7 +29,10 @@ type VerificationStatus =
   | "valid"
   | "idle"
   | "payment_required";
-type AccountStatus = "sending" | "sent" | "error";
+type AccountStatus =
+  | { type: "sending" }
+  | { type: "sent" }
+  | { type: "error"; message: string | undefined };
 type ScreenToShow = "base" | "enter-password-or-recovery-code";
 
 /**
@@ -52,7 +55,9 @@ export function OTPLoginUI(props: {
   const [otpInput, setOtpInput] = useState("");
   const [verifyStatus, setVerifyStatus] = useState<VerificationStatus>("idle");
   const [error, setError] = useState<string | undefined>();
-  const [accountStatus, setAccountStatus] = useState<AccountStatus>("sending");
+  const [accountStatus, setAccountStatus] = useState<AccountStatus>({
+    type: "sending",
+  });
   const [countdown, setCountdown] = useState(0);
   const ecosystem = isEcosystemWallet(wallet)
     ? {
@@ -66,7 +71,7 @@ export function OTPLoginUI(props: {
   const sendEmailOrSms = useCallback(async () => {
     setOtpInput("");
     setVerifyStatus("idle");
-    setAccountStatus("sending");
+    setAccountStatus({ type: "sending" });
 
     try {
       if ("email" in userInfo) {
@@ -76,7 +81,7 @@ export function OTPLoginUI(props: {
           email: userInfo.email,
           strategy: "email",
         });
-        setAccountStatus("sent");
+        setAccountStatus({ type: "sent" });
         setCountdown(60); // Start 60-second countdown
       } else if ("phone" in userInfo) {
         await preAuthenticate({
@@ -85,15 +90,18 @@ export function OTPLoginUI(props: {
           phoneNumber: userInfo.phone,
           strategy: "phone",
         });
-        setAccountStatus("sent");
+        setAccountStatus({ type: "sent" });
         setCountdown(60); // Start 60-second countdown
       } else {
         throw new Error("Invalid userInfo");
       }
     } catch (e) {
       console.error(e);
       setVerifyStatus("idle");
-      setAccountStatus("error");
+      setAccountStatus({
+        type: "error",
+        message: e instanceof Error ? e.message : undefined,
+      });
     }
   }, [props.client, userInfo, ecosystem]);
 
@@ -317,19 +325,24 @@ export function OTPLoginUI(props: {
 
             {!isWideModal && <Line />}
 
-            <Container gap="xs" p={isWideModal ? undefined : "lg"}>
-              {accountStatus === "error" && (
+            <Container
+              gap="sm"
+              p={isWideModal ? undefined : "lg"}
+              flex="column"
+            >
+              {accountStatus.type === "error" && (
                 <Text
                   center
                   color="danger"
                   size="sm"
                   className="tw-screen-error"
                 >
-                  {locale.emailLoginScreen.failedToSendCode}
+                  {accountStatus.message ||
+                    locale.emailLoginScreen.failedToSendCode}
                 </Text>
               )}
 
-              {accountStatus === "sending" && (
+              {accountStatus.type === "sending" && (
                 <Container
                   center="both"
                   flex="row"
@@ -343,7 +356,7 @@ export function OTPLoginUI(props: {
                 </Container>
               )}
 
-              {accountStatus !== "sending" && (
+              {accountStatus.type !== "sending" && (
                 <LinkButton
                   onClick={countdown === 0 ? sendEmailOrSms : undefined}
                   style={{

packages/thirdweb/src/wallets/in-app/web/lib/auth/otp.ts

@@ -51,7 +51,17 @@ export const sendOtp = async (args: PreAuthArgsType): Promise<void> => {
   });
 
   if (!response.ok) {
-    throw new Error("Failed to send verification code");
+    const raw = await response.text();
+    let message: string | undefined;
+    try {
+      const parsed = JSON.parse(raw);
+      if (parsed && typeof parsed.message === "string") {
+        message = parsed.message;
+      }
+    } catch {
+      // ignore parse errors
+    }
+    throw new Error(message || "Failed to send verification code");
   }
 
   return await response.json();