thirdweb 5.116.1 → 5.116.2-nightly-151127d66825365cb0ed949ae28b9906ee4dfc8d-20251214000442

package/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,7 +90,7 @@ 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");
@@ -93,7 +98,10 @@ export function OTPLoginUI(props: {
     } 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={{

package/src/stories/ConnectEmbed.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta } from "@storybook/react";
 import { ConnectButton } from "../react/web/ui/ConnectWallet/ConnectButton.js";
 import { ConnectEmbed } from "../react/web/ui/ConnectWallet/Modal/ConnectEmbed.js";
+import { createWallet } from "../wallets/create-wallet.js";
 import { ecosystemWallet } from "../wallets/in-app/web/ecosystem.js";
 import { inAppWallet } from "../wallets/in-app/web/in-app.js";
 import { storyClient } from "./utils.js";
@@ -110,6 +111,60 @@ export function AllInAppWalletAuthMethods() {
   );
 }
 
+export function ConfiguredInAppWalletWideModal() {
+  return (
+    <ConnectEmbed
+      client={storyClient}
+      className="foo-bar"
+      modalSize="wide"
+      wallets={[
+        createWallet("io.metamask"),
+        inAppWallet({
+          auth: {
+            options: ["google", "github", "email"],
+          },
+        }),
+      ]}
+    />
+  );
+}
+
+export function GoogleLoginWideModal() {
+  return (
+    <ConnectEmbed
+      client={storyClient}
+      className="foo-bar"
+      modalSize="wide"
+      wallets={[
+        createWallet("io.metamask"),
+        inAppWallet({
+          auth: {
+            options: ["google"],
+          },
+        }),
+      ]}
+    />
+  );
+}
+
+export function GithubLoginWideModal() {
+  return (
+    <ConnectEmbed
+      client={storyClient}
+      className="foo-bar"
+      modalSize="wide"
+      wallets={[
+        createWallet("io.metamask"),
+        inAppWallet({
+          auth: {
+            options: ["github"],
+          },
+        }),
+      ]}
+    />
+  );
+}
+
 export function EcosystemWallet() {
   return (
     <ConnectEmbed

package/src/stories/in-app-wallet-icon.stories.tsx

@@ -0,0 +1,163 @@
+import type { Meta } from "@storybook/react";
+import {
+  CustomThemeProvider,
+  useCustomTheme,
+} from "../react/core/design-system/CustomThemeProvider.js";
+import { InAppWalletIcon } from "../react/web/ui/ConnectWallet/in-app-wallet-icon.js";
+import { defaultAuthOptions } from "../react/web/wallets/shared/ConnectWalletSocialOptions.js";
+import { inAppWallet } from "../wallets/in-app/web/in-app.js";
+import type { AuthOption } from "../wallets/types.js";
+import { storyClient } from "./utils.js";
+
+const meta: Meta<typeof Variant> = {
+  title: "Components/in-app-wallet-icon",
+  decorators: [
+    (Story) => {
+      return (
+        <CustomThemeProvider theme="dark">
+          <Story />
+        </CustomThemeProvider>
+      );
+    },
+  ],
+};
+export default meta;
+
+function Variants() {
+  const theme = useCustomTheme();
+  return (
+    <div
+      style={{
+        backgroundColor: theme.colors.modalBg,
+        padding: "14px",
+        borderRadius: "10px",
+        display: "flex",
+        flexDirection: "column",
+        gap: "12px",
+      }}
+    >
+      <div>
+        <SectionTitle title="Default" />
+        <Variant authOptions={defaultAuthOptions} />
+      </div>
+
+      <div>
+        <SectionTitle title="Single method enabled" />
+        <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+          <Variant authOptions={["email"]} />
+          <Variant authOptions={["phone"]} />
+          <Variant authOptions={["passkey"]} />
+          <Variant authOptions={["guest"]} />
+          <Variant authOptions={["google"]} />
+          <Variant authOptions={["apple"]} />
+          <Variant authOptions={["facebook"]} />
+          <Variant authOptions={["discord"]} />
+          <Variant authOptions={["github"]} />
+          <Variant authOptions={["twitch"]} />
+          <Variant authOptions={["x"]} />
+          <Variant authOptions={["telegram"]} />
+          <Variant authOptions={["line"]} />
+          <Variant authOptions={["coinbase"]} />
+          <Variant authOptions={["epic"]} />
+          <Variant authOptions={["farcaster"]} />
+          <Variant authOptions={["tiktok"]} />
+          <Variant authOptions={["steam"]} />
+        </div>
+      </div>
+
+      <div>
+        <SectionTitle title="Two methods enabled" />
+        <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+          <Variant authOptions={["email", "phone"]} />
+          <Variant authOptions={["email", "passkey"]} />
+          <Variant authOptions={["email", "guest"]} />
+          <Variant authOptions={["email", "google"]} />
+          <Variant authOptions={["email", "apple"]} />
+          <Variant authOptions={["email", "facebook"]} />
+          <Variant authOptions={["google", "discord"]} />
+          <Variant authOptions={["google", "github"]} />
+          <Variant authOptions={["google", "twitch"]} />
+          <Variant authOptions={["google", "x"]} />
+          <Variant authOptions={["google", "telegram"]} />
+          <Variant authOptions={["google", "line"]} />
+          <Variant authOptions={["google", "coinbase"]} />
+          <Variant authOptions={["google", "epic"]} />
+        </div>
+      </div>
+
+      <div>
+        <SectionTitle title="Three methods enabled" />
+        <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+          <Variant authOptions={["google", "apple", "github"]} />
+          <Variant authOptions={["email", "phone", "guest"]} />
+          <Variant authOptions={["email", "phone", "google"]} />
+          <Variant authOptions={["email", "phone", "apple"]} />
+          <Variant authOptions={["email", "phone", "facebook"]} />
+        </div>
+      </div>
+
+      <div>
+        <SectionTitle title="Four or more methods enabled" />
+        <div style={{ display: "flex", gap: "10px", flexWrap: "wrap" }}>
+          <Variant
+            authOptions={["email", "phone", "google", "apple", "facebook"]}
+          />
+          <Variant authOptions={["epic", "tiktok", "github", "email"]} />
+          <Variant
+            authOptions={["twitch", "tiktok", "epic", "email", "phone"]}
+          />
+          <Variant authOptions={["email", "phone", "passkey", "guest"]} />
+          <Variant
+            authOptions={[
+              "google",
+              "apple",
+              "facebook",
+              "github",
+              "discord",
+              "twitch",
+              "x",
+            ]}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function LightTheme() {
+  return <ThemeSetup theme="light" />;
+}
+
+export function DarkTheme() {
+  return <ThemeSetup theme="dark" />;
+}
+
+function ThemeSetup(props: { theme: "light" | "dark" }) {
+  return (
+    <CustomThemeProvider theme={props.theme}>
+      <Variants />
+    </CustomThemeProvider>
+  );
+}
+
+function Variant(props: { authOptions: AuthOption[] }) {
+  return (
+    <InAppWalletIcon
+      client={storyClient}
+      wallet={inAppWallet({
+        auth: {
+          options: props.authOptions,
+        },
+      })}
+    />
+  );
+}
+
+function SectionTitle(props: { title: string }) {
+  const theme = useCustomTheme();
+  return (
+    <p style={{ color: theme.colors.secondaryText, fontSize: "14px" }}>
+      {props.title}
+    </p>
+  );
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.116.1";
+export const version = "5.116.2-nightly-151127d66825365cb0ed949ae28b9906ee4dfc8d-20251214000442";

package/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();