thirdweb 5.116.0 → 5.116.2-nightly-151127d66825365cb0ed949ae28b9906ee4dfc8d-20251213000343

package/src/react/web/ui/ConnectWallet/in-app-wallet-icon.tsx

@@ -0,0 +1,195 @@
+"use client";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { AuthOption } from "../../../../wallets/types.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import {
+  iconSize,
+  radius,
+  spacing,
+} from "../../../core/design-system/index.js";
+import { socialIcons } from "../../../core/utils/walletIcon.js";
+import { defaultAuthOptions } from "../../wallets/shared/ConnectWalletSocialOptions.js";
+import { Img } from "../components/Img.js";
+import { EmailIcon } from "./icons/EmailIcon.js";
+import { FingerPrintIcon } from "./icons/FingerPrintIcon.js";
+import { GuestIcon } from "./icons/GuestIcon.js";
+import { PhoneIcon } from "./icons/PhoneIcon.js";
+
+export function InAppWalletIcon(props: {
+  client: ThirdwebClient;
+  wallet: Wallet<"inApp">;
+}) {
+  const enabledAuthMethods = (
+    props.wallet.getConfig()?.auth?.options || defaultAuthOptions
+  )
+    .slice() // clone
+    .sort((a, b) => {
+      if (a in socialIcons && !(b in socialIcons)) {
+        return -1;
+      }
+      if (!(a in socialIcons) && b in socialIcons) {
+        return 1;
+      }
+      return 0;
+    });
+
+  const theme = useCustomTheme();
+
+  const firstMethod = enabledAuthMethods[0];
+  const secondMethod = enabledAuthMethods[1];
+  const thirdMethod = enabledAuthMethods[2];
+  const fourthMethod = enabledAuthMethods[3];
+
+  const offset = "4px";
+  const offset2 = "6px";
+  const smallIconSize = "20";
+  const extraIconSize = "12";
+
+  if (firstMethod && secondMethod) {
+    return (
+      <div
+        style={{
+          width: `${iconSize.xl}px`,
+          height: `${iconSize.xl}px`,
+          position: "relative",
+          gap: spacing["3xs"],
+          border: `1px solid ${theme.colors.borderColor}`,
+          borderRadius: radius.md,
+          backgroundColor: theme.colors.tertiaryBg,
+        }}
+      >
+        <div
+          style={{
+            position: "absolute",
+            top: offset,
+            left: offset,
+            display: "flex",
+          }}
+        >
+          <AuthOptionIcon
+            authOption={firstMethod}
+            client={props.client}
+            size={smallIconSize}
+          />
+        </div>
+
+        <div
+          style={{
+            position: "absolute",
+            bottom: offset,
+            right: offset,
+            display: "flex",
+          }}
+        >
+          <AuthOptionIcon
+            authOption={secondMethod}
+            client={props.client}
+            size={smallIconSize}
+          />
+        </div>
+
+        <div>
+          {thirdMethod && (
+            <div
+              style={{
+                position: "absolute",
+                top: offset2,
+                right: offset2,
+                display: "flex",
+              }}
+            >
+              <AuthOptionIcon
+                authOption={thirdMethod}
+                client={props.client}
+                size={extraIconSize}
+              />
+            </div>
+          )}
+
+          {fourthMethod && (
+            <div
+              style={{
+                position: "absolute",
+                bottom: offset2,
+                left: offset2,
+                display: "flex",
+              }}
+            >
+              <AuthOptionIcon
+                authOption={fourthMethod}
+                client={props.client}
+                size={extraIconSize}
+              />
+            </div>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  if (firstMethod) {
+    return (
+      <div
+        style={{
+          width: `${iconSize.xl}px`,
+          height: `${iconSize.xl}px`,
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          border: `1px solid ${theme.colors.borderColor}`,
+          borderRadius: radius.md,
+          backgroundColor: theme.colors.tertiaryBg,
+        }}
+      >
+        <AuthOptionIcon
+          authOption={firstMethod}
+          client={props.client}
+          key={firstMethod}
+          size={iconSize.lg}
+        />
+      </div>
+    );
+  }
+
+  return null;
+}
+
+function AuthOptionIcon(props: {
+  authOption: AuthOption;
+  client: ThirdwebClient;
+  size: string;
+}) {
+  const theme = useCustomTheme();
+  if (props.authOption in socialIcons) {
+    const icon = socialIcons[props.authOption as keyof typeof socialIcons];
+    return (
+      <Img
+        src={icon}
+        width={props.size}
+        height={props.size}
+        client={props.client}
+      />
+    );
+  }
+
+  if (props.authOption === "phone") {
+    return <PhoneIcon size={props.size} color={theme.colors.secondaryText} />;
+  }
+
+  if (props.authOption === "email") {
+    return <EmailIcon size={props.size} color={theme.colors.secondaryText} />;
+  }
+
+  if (props.authOption === "passkey") {
+    return (
+      <FingerPrintIcon size={props.size} color={theme.colors.secondaryText} />
+    );
+  }
+
+  if (props.authOption === "guest") {
+    return <GuestIcon size={props.size} color={theme.colors.secondaryText} />;
+  }
+
+  return null;
+}

package/src/react/web/ui/components/Spinner.tsx

@@ -3,7 +3,7 @@ import { keyframes } from "@emotion/react";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { iconSize } from "../../../core/design-system/index.js";
-import { StyledCircle, StyledSvg } from "../design-system/elements.js";
+import { StyledSvg } from "../design-system/elements.js";
 
 /**
  * @internal
@@ -24,20 +24,25 @@ export const Spinner: React.FC<{
       viewBox="0 0 50 50"
       className="tw-spinner"
     >
-      <Circle
+      <circle
         cx="25"
         cy="25"
         fill="none"
         r="20"
+        style={{
+          strokeLinecap: "round",
+          animation: `tw-spinner-circle-dash 1.5s ease-in-out infinite`,
+        }}
         stroke={props.color ? theme.colors[props.color] : "currentColor"}
         strokeWidth={Number(iconSize[props.size]) > 64 ? "2" : "4"}
       />
+      <style>{dashAnimation}</style>
     </Svg>
   );
 };
-
 // animations
-const dashAnimation = keyframes`
+const dashAnimation = `
+@keyframes tw-spinner-circle-dash {
   0% {
     stroke-dasharray: 1, 150;
     stroke-dashoffset: 0;
@@ -63,8 +68,3 @@ const Svg = /* @__PURE__ */ StyledSvg({
   height: "1em",
   width: "1em",
 });
-
-const Circle = /* @__PURE__ */ StyledCircle({
-  animation: `${dashAnimation} 1.5s ease-in-out infinite`,
-  strokeLinecap: "round",
-});

package/src/react/web/ui/design-system/elements.ts

@@ -2,7 +2,6 @@ import styled from "@emotion/styled";
 
 export const StyledDiv = /* @__PURE__ */ styled.div;
 export const StyledSvg = /* @__PURE__ */ styled.svg;
-export const StyledCircle = /* @__PURE__ */ styled.circle;
 export const StyledSpan = /* @__PURE__ */ styled.span;
 export const StyledAnchor = /* @__PURE__ */ styled.a;
 export const StyledButton = /* @__PURE__ */ styled.button;

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -61,7 +61,7 @@ export type ConnectWalletSelectUIState =
       };
     };
 
-const defaultAuthOptions: AuthOption[] = [
+export const defaultAuthOptions: AuthOption[] = [
   "email",
   "phone",
   "google",

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.0";
+export const version = "5.116.2-nightly-151127d66825365cb0ed949ae28b9906ee4dfc8d-20251213000343";

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

package/src/x402/fetchWithPayment.ts

@@ -1,6 +1,10 @@
 import { getCachedChain } from "../chains/utils.js";
 import type { ThirdwebClient } from "../client/client.js";
+import { getAddress } from "../utils/address.js";
+import type { AsyncStorage } from "../utils/storage/AsyncStorage.js";
+import { webLocalStorage } from "../utils/storage/webStorage.js";
 import type { Wallet } from "../wallets/interfaces/wallet.js";
+import { clearPermitSignatureFromCache } from "./permitSignatureStorage.js";
 import {
   extractEvmChainId,
   networkToCaip2ChainId,
@@ -57,6 +61,11 @@ export function wrapFetchWithPayment(
     paymentRequirementsSelector?: (
       paymentRequirements: RequestedPaymentRequirements[],
     ) => RequestedPaymentRequirements | undefined;
+    /**
+     * Storage for caching permit signatures (for "upto" scheme).
+     * When provided, permit signatures will be cached and reused if the on-chain allowance is sufficient.
+     */
+    storage?: AsyncStorage;
   },
 ) {
   return async (input: RequestInfo, init?: RequestInit) => {
@@ -131,6 +140,7 @@ export function wrapFetchWithPayment(
       account,
       selectedPaymentRequirements,
       x402Version,
+      options?.storage ?? webLocalStorage,
     );
 
     const initParams = init || {};
@@ -150,6 +160,17 @@ export function wrapFetchWithPayment(
     };
 
     const secondResponse = await fetch(input, newInit);
+
+    // If payment was rejected (still 402), clear cached signature
+    if (secondResponse.status === 402 && options?.storage) {
+      await clearPermitSignatureFromCache(options.storage, {
+        chainId: paymentChainId,
+        asset: selectedPaymentRequirements.asset,
+        owner: getAddress(account.address),
+        spender: getAddress(selectedPaymentRequirements.payTo),
+      });
+    }
+
     return secondResponse;
   };
 }