thirdweb 5.56.0 → 5.57.0

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

@@ -0,0 +1,159 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { setLastAuthProvider } from "../../../core/utils/storage.js";
+import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
+import { Spacer } from "../../ui/components/Spacer.js";
+import { Spinner } from "../../ui/components/Spinner.js";
+import { Container, ModalHeader } from "../../ui/components/basic.js";
+import { Button } from "../../ui/components/buttons.js";
+import { Text } from "../../ui/components/text.js";
+import type { ConnectWalletSelectUIState } from "./ConnectWalletSocialOptions.js";
+import type { InAppWalletLocale } from "./locale/types.js";
+
+/**
+ * @internal
+ */
+export function GuestLogin(props: {
+  locale: InAppWalletLocale;
+  wallet: Wallet;
+  done: () => void;
+  goBack?: () => void;
+  state: ConnectWalletSelectUIState;
+  size: "compact" | "wide";
+  client: ThirdwebClient;
+  connectLocale: ConnectLocale;
+}) {
+  const ewLocale = props.locale;
+  const locale = ewLocale.socialLoginScreen;
+
+  const [authError, setAuthError] = useState<string | undefined>(undefined);
+  const { done, wallet } = props;
+  const [status, setStatus] = useState<"connecting" | "connected" | "error">(
+    "connecting",
+  );
+
+  const handleGuestLogin = async () => {
+    const connectOptions = {
+      client: props.client,
+      ecosystem: isEcosystemWallet(wallet)
+        ? {
+            id: wallet.id,
+            partnerId: wallet.getConfig()?.partnerId,
+          }
+        : undefined,
+      strategy: "guest" as const,
+    };
+    try {
+      await wallet.connect(connectOptions);
+      await setLastAuthProvider("guest", webLocalStorage);
+
+      setStatus("connected");
+      done();
+    } catch (e) {
+      setStatus("error");
+      // TODO this only happens on 'retry' button click, not on initial login
+      // should pass auth error message to this component
+      if (
+        e instanceof Error &&
+        e?.message?.includes("PAYMENT_METHOD_REQUIRED")
+      ) {
+        setAuthError(ewLocale.maxAccountsExceeded);
+      }
+      console.error("Error generating guest account", e);
+    }
+  };
+
+  const guestLogin = props.state?.guestLogin;
+
+  const socialLoginStarted = useRef(false);
+  useEffect(() => {
+    if (socialLoginStarted.current) {
+      return;
+    }
+
+    if (guestLogin) {
+      socialLoginStarted.current = true;
+      setStatus("connecting");
+      guestLogin.connectionPromise
+        .then(() => {
+          done();
+          setStatus("connected");
+        })
+        .catch((e) => {
+          setAuthError(e.message);
+          setStatus("error");
+        });
+    }
+  }, [done, guestLogin]);
+
+  return (
+    <Container animate="fadein" flex="column" fullHeight>
+      <Container
+        flex="column"
+        expand
+        p="lg"
+        style={{
+          paddingBottom: 0,
+        }}
+      >
+        {props.goBack && (
+          <ModalHeader title={locale.title} onBack={props.goBack} />
+        )}
+
+        {props.size === "compact" ? <Spacer y="xl" /> : null}
+
+        <Container
+          flex="column"
+          center="both"
+          expand
+          style={{
+            textAlign: "center",
+            minHeight: "250px",
+          }}
+        >
+          {status !== "error" && (
+            <Container animate="fadein">
+              <Text
+                color="primaryText"
+                center
+                multiline
+                style={{
+                  maxWidth: "250px",
+                }}
+              >
+                Generating your guest account
+              </Text>
+              <Spacer y="xl" />
+              <Container center="x" flex="row">
+                <Spinner size="lg" color="accentText" />
+              </Container>
+
+              <Spacer y="xxl" />
+            </Container>
+          )}
+
+          {status === "error" && (
+            <Container animate="fadein">
+              {authError ? (
+                <Text center color="danger">
+                  {authError}
+                </Text>
+              ) : (
+                <Text color="danger">{locale.failed}</Text>
+              )}
+              <Spacer y="lg" />
+              <Button variant="primary" onClick={handleGuestLogin}>
+                {locale.retry}
+              </Button>
+              <Spacer y="xxl" />
+            </Container>
+          )}
+        </Container>
+      </Container>
+    </Container>
+  );
+}

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

@@ -280,11 +280,9 @@ export function OTPLoginUI(props: {
 
             <Container p={isWideModal ? undefined : "lg"}>
               {accountStatus === "error" && (
-                <>
-                  <Text size="sm" center color="danger">
-                    {locale.emailLoginScreen.failedToSendCode}
-                  </Text>
-                </>
+                <Text size="sm" center color="danger">
+                  {locale.emailLoginScreen.failedToSendCode}
+                </Text>
               )}
 
               {accountStatus === "sending" && (

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

@@ -50,7 +50,7 @@ export function SocialLogin(props: {
     const walletConfig = wallet.getConfig();
     const authMode =
       walletConfig && "auth" in walletConfig
-        ? walletConfig?.auth?.mode ?? "popup"
+        ? (walletConfig?.auth?.mode ?? "popup")
         : "popup";
 
     if (

package/src/react/web/wallets/shared/locale/de.ts

@@ -56,5 +56,6 @@ export default {
   signInWithPhone: "Mit Telefonnummer anmelden",
   phoneRequired: "Telefonnummer ist erforderlich",
   passkey: "Passkey",
-  linkWallet: "Link a Wallet",
+  linkWallet: "Verknüpfen Sie eine Brieftasche",
+  loginAsGuest: "Melden Sie sich als Gast an",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/en.ts

@@ -56,4 +56,5 @@ export default {
   phoneRequired: "Phone number is required",
   passkey: "Passkey",
   linkWallet: "Link a Wallet",
+  loginAsGuest: "Continue as guest",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/es.ts

@@ -55,5 +55,6 @@ export default {
   phoneRequired: "Se requiere número de teléfono",
   signInWithEmail: "Iniciar sesión con correo electrónico",
   passkey: "Clave de acceso",
-  linkWallet: "Link a Wallet",
+  linkWallet: "Vincular una billetera",
+  loginAsGuest: "Inicia sesión como invitado",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/fr.ts

@@ -56,5 +56,6 @@ export default {
   signInWithPhone: "Se connecter avec le numéro de téléphone",
   phoneRequired: "Le numéro de téléphone est requis",
   passkey: "Passkey",
-  linkWallet: "Link a Wallet",
+  linkWallet: "Lier un portefeuille",
+  loginAsGuest: "Connectez-vous en tant qu'invité",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/ja.ts

@@ -54,5 +54,6 @@ export default {
   signInWithPhone: "電話番号でサインイン",
   phoneRequired: "電話番号は必須です",
   passkey: "パスキー",
-  linkWallet: "Link a Wallet",
+  linkWallet: "ウォレットをリンクする",
+  loginAsGuest: "ゲストとしてログイン",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/kr.ts

@@ -52,5 +52,6 @@ export default {
   signInWithPhone: "전화번호로 로그인",
   phoneRequired: "전화번호가 필요합니다",
   passkey: "비밀번호",
-  linkWallet: "Link a Wallet",
+  linkWallet: "지갑 연결",
+  loginAsGuest: "게스트로 로그인",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/tl.ts

@@ -55,5 +55,6 @@ export default {
   signInWithPhone: "Mag-login gamit ang numero ng telepono",
   phoneRequired: "Kinakailangan ang numero ng telepono",
   passkey: "Passkey",
-  linkWallet: "Link a Wallet",
+  linkWallet: "Mag-link ng Wallet",
+  loginAsGuest: "Mag-login bilang bisita",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/types.ts

@@ -50,5 +50,6 @@ export type InAppWalletLocale = {
   submitEmail: string;
   maxAccountsExceeded: string;
   passkey: string;
+  loginAsGuest: string;
   linkWallet: string;
 };

package/src/react/web/wallets/shared/locale/vi.ts

@@ -56,4 +56,5 @@ export default {
   phoneRequired: "Vui lòng nhập số điện thoại",
   passkey: "Passkey",
   linkWallet: "Link a Wallet",
+  loginAsGuest: "Đăng nhập với tư cách khách",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/oauthSignIn.ts

@@ -1,6 +1,9 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getLoginUrl } from "../../../../wallets/in-app/core/authentication/getLoginPath.js";
-import type { InAppWalletSocialAuth } from "../../../../wallets/in-app/core/wallet/types.js";
+import type {
+  InAppWalletOAuth,
+  InAppWalletSocialAuth,
+} from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Ecosystem } from "../../../../wallets/in-app/web/types.js";
 import type { Theme } from "../../../core/design-system/index.js";
 
@@ -25,7 +28,7 @@ function getWidthAndHeight(authOption: InAppWalletSocialAuth) {
 }
 
 function getOauthLoginPath(
-  authOption: InAppWalletSocialAuth,
+  authOption: InAppWalletOAuth,
   client: ThirdwebClient,
   ecosystem?: Ecosystem,
 ) {
@@ -37,6 +40,7 @@ function getOauthLoginPath(
     case "telegram":
     case "line":
     case "x":
+    case "guest":
     case "discord":
       return getLoginUrl({ authOption, client, ecosystem });
     default:

package/src/utils/any-evm/deploy-metadata.ts

@@ -50,6 +50,7 @@ export async function fetchDeployMetadata(
     ...parsedMeta,
     version: rawMeta.version,
     bytecode: deployBytecode,
+    name: rawMeta.name,
   };
 }
 

package/src/utils/encoding/hex.ts

@@ -436,9 +436,8 @@ export function numberToHex(
     );
   }
 
-  const hex = `0x${(signed && value < 0
-    ? (1n << BigInt(size * 8)) + BigInt(value)
-    : value
+  const hex = `0x${(
+    signed && value < 0 ? (1n << BigInt(size * 8)) + BigInt(value) : value
   ).toString(16)}` as Hex;
   if (size) {
     return padHex(hex, { size }) as Hex;

package/src/utils/fetch.test.ts

@@ -0,0 +1,94 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import type { ThirdwebClient } from "../client/client.js";
+import type { Ecosystem } from "../wallets/in-app/web/types.js";
+import {
+  IS_THIRDWEB_URL_CACHE,
+  getClientFetch,
+  isThirdwebUrl,
+} from "./fetch.js";
+
+// Mock fetch
+global.fetch = vi.fn();
+
+describe("getClientFetch", () => {
+  const mockClient: ThirdwebClient = {
+    clientId: "test-client-id",
+    secretKey: undefined,
+  };
+  const mockEcosystem: Ecosystem = { id: "ecosystem.test" };
+
+  beforeEach(() => {
+    vi.resetAllMocks();
+  });
+
+  it("should set correct headers for thirdweb URLs", async () => {
+    vi.spyOn(global, "fetch").mockResolvedValue(new Response());
+    const clientFetch = getClientFetch(mockClient, mockEcosystem);
+    await clientFetch("https://api.thirdweb.com/test");
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      "https://api.thirdweb.com/test",
+      expect.objectContaining({
+        headers: expect.any(Headers),
+      }),
+    );
+
+    // biome-ignore lint/suspicious/noExplicitAny: `any` type ok for tests
+    const headers = (global.fetch as any).mock.calls[0][1].headers;
+    expect(headers.get("x-client-id")).toBe("test-client-id");
+    expect(headers.get("x-ecosystem-id")).toBe("ecosystem.test");
+  });
+
+  it("should not set headers for non-thirdweb URLs", async () => {
+    vi.spyOn(global, "fetch").mockResolvedValue(new Response());
+    const clientFetch = getClientFetch(mockClient, mockEcosystem);
+    await clientFetch("https://example.com");
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      "https://example.com",
+      expect.not.objectContaining({
+        headers: expect.any(Headers),
+      }),
+    );
+  });
+
+  it("should abort the request after timeout", async () => {
+    vi.useFakeTimers();
+    const abortSpy = vi.spyOn(AbortController.prototype, "abort");
+    const clientFetch = getClientFetch(mockClient);
+
+    const fetchPromise = clientFetch("https://api.thirdweb.com/test", {
+      requestTimeoutMs: 5000,
+    });
+    vi.advanceTimersByTime(5001);
+
+    await expect(fetchPromise).rejects.toThrow();
+    expect(abortSpy).toHaveBeenCalled();
+
+    vi.useRealTimers();
+  });
+});
+
+describe("isThirdwebUrl", () => {
+  it("should return true for thirdweb domains", () => {
+    expect(isThirdwebUrl("https://api.thirdweb.com")).toBe(true);
+    expect(isThirdwebUrl("https://example.ipfscdn.io")).toBe(true);
+  });
+
+  it("should return false for non-thirdweb domains", () => {
+    expect(isThirdwebUrl("https://example.com")).toBe(false);
+    expect(isThirdwebUrl("https://otherthirdweb.com")).toBe(false);
+  });
+
+  it("should handle invalid URLs", () => {
+    expect(isThirdwebUrl("not-a-url")).toBe(false);
+  });
+
+  it("should cache results", () => {
+    const url = "https://api.thirdweb.com";
+    isThirdwebUrl(url);
+    isThirdwebUrl(url);
+    // You might need to expose the cache to test this properly
+    expect(IS_THIRDWEB_URL_CACHE.get(url)).toBe(true);
+  });
+});

package/src/utils/fetch.ts

@@ -10,20 +10,10 @@ import {
 
 const DEFAULT_REQUEST_TIMEOUT = 60000;
 
-const FETCH_CACHE = new WeakMap<
-  { client: ThirdwebClient; ecosystem?: Ecosystem },
-  (url: string, init?: RequestInit) => Promise<Response>
->();
-
 /**
  * @internal
  */
 export function getClientFetch(client: ThirdwebClient, ecosystem?: Ecosystem) {
-  if (FETCH_CACHE.has({ client, ecosystem })) {
-    // biome-ignore lint/style/noNonNullAssertion: the `has` above ensures that this will always be set
-    return FETCH_CACHE.get({ client, ecosystem })!;
-  }
-
   /**
    * @internal
    */
@@ -83,7 +73,6 @@ export function getClientFetch(client: ThirdwebClient, ecosystem?: Ecosystem) {
       }
     });
   }
-  FETCH_CACHE.set({ client, ecosystem }, fetchWithHeaders);
   return fetchWithHeaders;
 }
 
@@ -96,7 +85,7 @@ const THIRDWEB_DOMAINS = [
   ".thirdweb-dev.com",
 ] as const;
 
-const IS_THIRDWEB_URL_CACHE = new LruMap<boolean>(4096);
+export const IS_THIRDWEB_URL_CACHE = new LruMap<boolean>(4096);
 
 /**
  * @internal