thirdweb 5.73.0 → 5.74.0

package/src/react/web/ui/ConnectWallet/screens/SignatureScreen.test.tsx

@@ -0,0 +1,287 @@
+import { userEvent } from "@testing-library/user-event";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
+import { render, waitFor } from "../../../../../../test/src/react-render.js";
+import { TEST_CLIENT } from "../../../../../../test/src/test-clients.js";
+import { createWallet } from "../../../../../wallets/create-wallet.js";
+import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
+import type { ConnectLocale } from "../locale/types.js";
+import { SignatureScreen } from "./SignatureScreen.js";
+
+const mockAuth = vi.hoisted(() => ({
+  doLogin: vi.fn().mockResolvedValue(undefined),
+  doLogout: vi.fn().mockResolvedValue(undefined),
+  getLoginPayload: vi.fn().mockResolvedValue(undefined),
+  isLoggedIn: vi.fn().mockResolvedValue(true),
+}));
+
+vi.mock("../../../../core/hooks/auth/useSiweAuth", () => ({
+  useSiweAuth: () => mockAuth,
+}));
+
+vi.mock("../../../../core/hooks/wallets/useActiveWallet", () => ({
+  useActiveWallet: vi.fn().mockReturnValue(createWallet("io.metamask")),
+}));
+
+vi.mock("../../../../core/hooks/wallets/useActiveAccount", () => ({
+  useActiveAccount: () => vi.fn().mockReturnValue(TEST_ACCOUNT_A),
+}));
+
+vi.mock("../../../../core/hooks/wallets/useAdminWallet", () => ({
+  useAdminWallet: () => vi.fn().mockReturnValue(null),
+}));
+
+const mockConnectLocale = {
+  signatureScreen: {
+    title: "Sign In",
+    instructionScreen: {
+      title: "Sign Message",
+      instruction: "Please sign the message",
+      signInButton: "Sign In",
+      disconnectWallet: "Disconnect",
+    },
+    signingScreen: {
+      title: "Signing",
+      inProgress: "Signing in progress...",
+      failedToSignIn: "Failed to sign in",
+      prompt: "Please check your wallet",
+      tryAgain: "Try Again",
+    },
+  },
+  agreement: {
+    prefix: "By connecting, you agree to our",
+    termsOfService: "Terms of Service",
+    and: "and",
+    privacyPolicy: "Privacy Policy",
+  },
+} as unknown as ConnectLocale;
+
+describe("SignatureScreen", () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockAuth.doLogin.mockResolvedValue(undefined);
+  });
+
+  it("renders initial state correctly", () => {
+    const { getByTestId } = render(
+      <SignatureScreen
+        onDone={() => {}}
+        modalSize="wide"
+        connectLocale={mockConnectLocale}
+        client={TEST_CLIENT}
+        auth={mockAuth}
+      />,
+      { setConnectedWallet: true },
+    );
+
+    expect(getByTestId("sign-in-button")).toBeInTheDocument();
+    expect(getByTestId("disconnect-button")).toBeInTheDocument();
+  });
+
+  it("handles signing flow", async () => {
+    const onDoneMock = vi.fn();
+    const { getByRole, getByText } = render(
+      <SignatureScreen
+        onDone={onDoneMock}
+        modalSize="wide"
+        connectLocale={mockConnectLocale}
+        client={TEST_CLIENT}
+        auth={mockAuth}
+      />,
+      { setConnectedWallet: true },
+    );
+
+    const signInButton = getByRole("button", { name: "Sign In" });
+    await userEvent.click(signInButton);
+
+    // Should show signing in progress
+    await waitFor(() => {
+      expect(getByText("Signing in progress...")).toBeInTheDocument();
+    });
+  });
+
+  it("shows loading state when wallet is undefined", async () => {
+    vi.mocked(useActiveWallet).mockReturnValueOnce(undefined);
+
+    const { queryByTestId } = render(
+      <SignatureScreen
+        onDone={() => {}}
+        modalSize="wide"
+        connectLocale={mockConnectLocale}
+        client={TEST_CLIENT}
+        auth={mockAuth}
+      />,
+      { setConnectedWallet: true },
+    );
+
+    expect(queryByTestId("sign-in-button")).not.toBeInTheDocument();
+  });
+
+  it("handles error state", async () => {
+    mockAuth.doLogin.mockRejectedValueOnce(new Error("Signing failed"));
+    const { getByTestId, getByRole, getByText } = render(
+      <SignatureScreen
+        onDone={() => {}}
+        modalSize="wide"
+        connectLocale={mockConnectLocale}
+        client={TEST_CLIENT}
+        auth={mockAuth}
+      />,
+      { setConnectedWallet: true },
+    );
+
+    const signInButton = await waitFor(() => {
+      return getByTestId("sign-in-button");
+    });
+    await userEvent.click(signInButton);
+
+    // Should show error state
+    await waitFor(
+      () => {
+        expect(getByText("Signing failed")).toBeInTheDocument();
+        expect(getByRole("button", { name: "Try Again" })).toBeInTheDocument();
+      },
+      {
+        timeout: 2000,
+      },
+    );
+  });
+
+  describe("HeadlessSignIn", () => {
+    const mockWallet = createWallet("inApp");
+    beforeEach(() => {
+      vi.mocked(useActiveWallet).mockReturnValue(mockWallet);
+    });
+
+    it("automatically triggers sign in on mount", async () => {
+      render(
+        <SignatureScreen
+          onDone={() => {}}
+          modalSize="wide"
+          connectLocale={mockConnectLocale}
+          client={TEST_CLIENT}
+          auth={mockAuth}
+        />,
+        { setConnectedWallet: true },
+      );
+
+      await waitFor(() => {
+        expect(mockAuth.doLogin).toHaveBeenCalledTimes(1);
+      });
+    });
+
+    it("shows signing message during signing state", async () => {
+      const { getByText } = render(
+        <SignatureScreen
+          onDone={() => {}}
+          modalSize="wide"
+          connectLocale={mockConnectLocale}
+          client={TEST_CLIENT}
+          auth={mockAuth}
+        />,
+        { setConnectedWallet: true },
+      );
+
+      await waitFor(() => {
+        expect(getByText("Signing")).toBeInTheDocument();
+      });
+    });
+
+    it("shows error and retry button when signing fails", async () => {
+      mockAuth.doLogin.mockRejectedValueOnce(
+        new Error("Headless signing failed"),
+      );
+
+      const { getByText, getByRole } = render(
+        <SignatureScreen
+          onDone={() => {}}
+          modalSize="wide"
+          connectLocale={mockConnectLocale}
+          client={TEST_CLIENT}
+          auth={mockAuth}
+        />,
+        { setConnectedWallet: true },
+      );
+
+      await waitFor(
+        () => {
+          expect(getByText("Headless signing failed")).toBeInTheDocument();
+          expect(
+            getByRole("button", { name: "Try Again" }),
+          ).toBeInTheDocument();
+        },
+        { timeout: 2000 },
+      );
+    });
+
+    it("allows retry after failure", async () => {
+      mockAuth.doLogin
+        .mockRejectedValueOnce(new Error("Failed first time"))
+        .mockResolvedValueOnce(undefined);
+
+      const { getByRole, getByText } = render(
+        <SignatureScreen
+          onDone={() => {}}
+          modalSize="wide"
+          connectLocale={mockConnectLocale}
+          client={TEST_CLIENT}
+          auth={mockAuth}
+        />,
+        { setConnectedWallet: true },
+      );
+
+      // Wait for initial failure
+      await waitFor(
+        () => {
+          expect(getByText("Failed first time")).toBeInTheDocument();
+        },
+        { timeout: 2000 },
+      );
+
+      // Click retry
+      const retryButton = getByRole("button", { name: "Try Again" });
+      await userEvent.click(retryButton);
+
+      // Should show loading again
+      await waitFor(() => {
+        expect(getByText("Signing")).toBeInTheDocument();
+      });
+
+      // Should have called login twice
+      expect(mockAuth.doLogin).toHaveBeenCalledTimes(2);
+    });
+
+    it("allows disconnecting wallet after failure", async () => {
+      const mockDisconnect = vi.fn().mockResolvedValue(undefined);
+      mockAuth.doLogin.mockRejectedValueOnce(new Error("Failed"));
+      vi.mocked(useActiveWallet).mockReturnValueOnce({
+        ...createWallet("io.metamask"),
+        disconnect: mockDisconnect,
+      });
+
+      const { getByTestId } = render(
+        <SignatureScreen
+          onDone={() => {}}
+          modalSize="wide"
+          connectLocale={mockConnectLocale}
+          client={TEST_CLIENT}
+          auth={mockAuth}
+        />,
+        { setConnectedWallet: true },
+      );
+
+      // Wait for failure and click disconnect
+      await waitFor(
+        () => {
+          return getByTestId("disconnect-button");
+        },
+        { timeout: 2000 },
+      ).then((button) => userEvent.click(button));
+
+      // Should have attempted to disconnect
+      await waitFor(() => {
+        expect(mockDisconnect).toHaveBeenCalled();
+      });
+    });
+  });
+});

package/src/react/web/ui/ConnectWallet/screens/SignatureScreen.tsx

@@ -51,24 +51,26 @@ export const SignatureScreen: React.FC<{
   const adminWallet = useAdminWallet();
   const activeAccount = useActiveAccount();
   const siweAuth = useSiweAuth(wallet, activeAccount, props.auth);
-  const [status, setStatus] = useState<Status>("idle");
+  const [error, setError] = useState<string | undefined>(undefined);
+  const [status, setStatus] = useState<Status>(error ? "failed" : "idle");
   const { disconnect } = useDisconnect();
   const locale = connectLocale.signatureScreen;
 
   const signIn = useCallback(async () => {
     try {
+      setError(undefined);
       setStatus("signing");
       await siweAuth.doLogin();
       onDone?.();
     } catch (err) {
       await wait(1000);
+      setError((err as Error).message);
       setStatus("failed");
-      console.error("failed to log in", err);
     }
   }, [onDone, siweAuth]);
 
   if (!wallet) {
-    return <LoadingScreen />;
+    return <LoadingScreen data-testid="loading-screen" />;
   }
 
   if (
@@ -78,6 +80,7 @@ export const SignatureScreen: React.FC<{
   ) {
     return (
       <HeadlessSignIn
+        error={error}
         signIn={signIn}
         status={status}
         connectLocale={connectLocale}
@@ -126,6 +129,7 @@ export const SignatureScreen: React.FC<{
             <Button
               fullWidth
               variant="accent"
+              data-testid="sign-in-button"
               onClick={signIn}
               style={{
                 alignItems: "center",
@@ -138,6 +142,7 @@ export const SignatureScreen: React.FC<{
             <Button
               fullWidth
               variant="secondary"
+              data-testid="disconnect-button"
               onClick={() => {
                 disconnect(wallet);
               }}
@@ -162,7 +167,7 @@ export const SignatureScreen: React.FC<{
             <Container flex="column" gap="md" animate="fadein" key={status}>
               <Text size="lg" center color="primaryText">
                 {status === "failed"
-                  ? locale.signingScreen.failedToSignIn
+                  ? error || locale.signingScreen.failedToSignIn
                   : locale.signingScreen.inProgress}
               </Text>
 
@@ -224,12 +229,14 @@ export const SignatureScreen: React.FC<{
 
 function HeadlessSignIn({
   signIn,
+  error,
   status,
   connectLocale,
   wallet,
 }: {
   signIn: () => void;
   status: Status;
+  error: string | undefined;
   connectLocale: ConnectLocale;
   wallet: Wallet;
 }) {
@@ -262,7 +269,7 @@ function HeadlessSignIn({
           <Container>
             <Spacer y="lg" />
             <Text size="lg" center color="danger">
-              {locale.signingScreen.failedToSignIn}
+              {error || locale.signingScreen.failedToSignIn}
             </Text>
 
             <Spacer y="lg" />
@@ -288,6 +295,7 @@ function HeadlessSignIn({
               onClick={() => {
                 disconnect(wallet);
               }}
+              data-testid="disconnect-button"
               style={{
                 alignItems: "center",
                 padding: spacing.md,

package/src/react/web/ui/ConnectWallet/useConnectModal.tsx

@@ -5,7 +5,6 @@ import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
 import type { Theme } from "../../../core/design-system/index.js";
-import type { SiweAuthOptions } from "../../../core/hooks/auth/useSiweAuth.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
 import { WalletUIStatesProvider } from "../../providers/wallet-ui-states-provider.js";
 import { canFitWideModal } from "../../utils/canFitWideModal.js";
@@ -433,14 +432,6 @@ export type UseConnectModalOptions = {
    * If you want to hide the branding, set this prop to `false`
    */
   showThirdwebBranding?: boolean;
-
-  /**
-   * Enable SIWE (Sign in with Ethererum) by passing an object of type `SiweAuthOptions` to
-   * enforce the users to sign a message after connecting their wallet to authenticate themselves.
-   *
-   * Refer to the [`SiweAuthOptions`](https://portal.thirdweb.com/references/typescript/v5/SiweAuthOptions) for more details
-   */
-  auth?: SiweAuthOptions;
 };
 
 // TODO: consilidate Button/Embed/Modal props into one type with extras

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

@@ -0,0 +1,87 @@
+import { describe, expect, it, vi } from "vitest";
+import {
+  fireEvent,
+  render,
+  screen,
+} from "../../../../../test/src/react-render.js";
+import { TEST_CLIENT } from "../../../../../test/src/test-clients.js";
+import { createWallet } from "../../../../wallets/create-wallet.js";
+import { ConnectWalletSocialOptions } from "./ConnectWalletSocialOptions.js";
+import en from "./locale/en.js";
+
+describe("ConnectWalletSocialOptions", () => {
+  const mockSelect = vi.fn();
+  const mockDone = vi.fn();
+
+  const defaultProps = {
+    select: mockSelect,
+    done: mockDone,
+    locale: en,
+    chain: undefined,
+    client: TEST_CLIENT,
+    size: "compact" as const,
+    isLinking: false,
+    disabled: false,
+  };
+
+  it("renders Sign in with Wallet button when enabled and not linking", () => {
+    render(
+      <ConnectWalletSocialOptions
+        {...defaultProps}
+        wallet={createWallet("inApp", {
+          auth: {
+            options: ["wallet"],
+          },
+        })}
+      />,
+    );
+
+    const walletButton = screen.getByRole("button", {
+      name: /sign in with wallet/i,
+    });
+
+    expect(walletButton).toBeInTheDocument();
+    expect(walletButton).toHaveTextContent("Sign in with Wallet");
+  });
+
+  it("does not render Sign in with Wallet button when isLinking is true", () => {
+    render(
+      <ConnectWalletSocialOptions
+        {...defaultProps}
+        isLinking={true}
+        wallet={createWallet("inApp", {
+          auth: {
+            options: ["wallet"],
+          },
+        })}
+      />,
+    );
+
+    const walletButton = screen.queryByRole("button", {
+      name: /sign in with wallet/i,
+    });
+
+    expect(walletButton).not.toBeInTheDocument();
+  });
+
+  it("calls handleWalletLogin when Sign in with Wallet button is clicked", () => {
+    render(
+      <ConnectWalletSocialOptions
+        {...defaultProps}
+        wallet={createWallet("inApp", {
+          auth: {
+            options: ["wallet"],
+          },
+        })}
+      />,
+    );
+
+    const walletButton = screen.getByRole("button", {
+      name: /sign in with wallet/i,
+    });
+
+    fireEvent.click(walletButton);
+
+    expect(mockSelect).toHaveBeenCalled();
+  });
+});

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

@@ -474,7 +474,7 @@ export const ConnectWalletSocialOptions = (
       )}
 
       {/* SIWE login */}
-      {siweEnabled && (
+      {siweEnabled && !props.isLinking && (
         <WalletTypeRowButton
           client={props.client}
           icon={OutlineWalletIcon}

package/src/utils/any-evm/zksync/isZkSyncChain.ts

@@ -24,7 +24,10 @@ export async function isZkSyncChain(chain: Chain) {
     chain.id === 978658 ||
     chain.id === 531050104 ||
     chain.id === 4457845 ||
-    chain.id === 2741
+    chain.id === 2741 ||
+    chain.id === 240 ||
+    chain.id === 61166 ||
+    chain.id === 555271
   ) {
     return true;
   }

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.73.0";
+export const version = "5.74.0";

package/src/wallets/ecosystem/get-ecosystem-wallet-auth-options.ts

@@ -13,7 +13,7 @@ type EcosystemOptions = {
 };
 
 type SmartAccountOptions = {
-  chainIds: number[];
+  defaultChainId: number;
   sponsorGas: boolean;
   accountFactoryAddress: string;
 };

package/src/wallets/ecosystem/is-ecosystem-wallet.ts

@@ -10,7 +10,7 @@ export function isEcosystemWallet(wallet: string): wallet is EcosystemWalletId;
 /**
  * Checks if the given wallet is an ecosystem wallet.
  *
- * @param {string} walletId - The wallet ID to check.
+ * @param {Wallet | string} wallet - The wallet or wallet ID to check.
  * @returns {boolean} True if the wallet is an ecosystem wallet, false otherwise.
  * @internal
  */