thirdweb 5.83.1 → 5.83.2-nightly-42a313f3b2d89696d5374e5a705e9f144bf46ebe-20250111000322

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

@@ -1,10 +1,10 @@
 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 { ANVIL_CHAIN } from "../../../../../../test/src/chains.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";
 
@@ -15,12 +15,18 @@ const mockAuth = vi.hoisted(() => ({
   isLoggedIn: vi.fn().mockResolvedValue(true),
 }));
 
+const useActiveWalletMock = vi.hoisted(() =>
+  vi.fn().mockReturnValue(undefined),
+);
+
+const useAdminWalletMock = vi.hoisted(() => vi.fn().mockReturnValue(undefined));
+
 vi.mock("../../../../core/hooks/auth/useSiweAuth", () => ({
   useSiweAuth: () => mockAuth,
 }));
 
 vi.mock("../../../../core/hooks/wallets/useActiveWallet", () => ({
-  useActiveWallet: vi.fn().mockReturnValue(createWallet("io.metamask")),
+  useActiveWallet: useActiveWalletMock,
 }));
 
 vi.mock("../../../../core/hooks/wallets/useActiveAccount", () => ({
@@ -28,7 +34,7 @@ vi.mock("../../../../core/hooks/wallets/useActiveAccount", () => ({
 }));
 
 vi.mock("../../../../core/hooks/wallets/useAdminWallet", () => ({
-  useAdminWallet: () => vi.fn().mockReturnValue(null),
+  useAdminWallet: useAdminWalletMock,
 }));
 
 const mockConnectLocale = {
@@ -56,105 +62,17 @@ const mockConnectLocale = {
   },
 } 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");
+describe("Signature screen", () => {
+  describe("Signature prompt screen", () => {
     beforeEach(() => {
-      vi.mocked(useActiveWallet).mockReturnValue(mockWallet);
+      const metamaskWallet = createWallet("io.metamask");
+      useActiveWalletMock.mockReturnValue(metamaskWallet);
+      vi.clearAllMocks();
+      mockAuth.doLogin.mockResolvedValue(undefined);
     });
 
-    it("automatically triggers sign in on mount", async () => {
-      render(
+    it("renders initial state correctly", () => {
+      const { getByTestId } = render(
         <SignatureScreen
           onDone={() => {}}
           modalSize="wide"
@@ -165,15 +83,15 @@ describe("SignatureScreen", () => {
         { setConnectedWallet: true },
       );
 
-      await waitFor(() => {
-        expect(mockAuth.doLogin).toHaveBeenCalledTimes(1);
-      });
+      expect(getByTestId("sign-in-button")).toBeInTheDocument();
+      expect(getByTestId("disconnect-button")).toBeInTheDocument();
     });
 
-    it("shows signing message during signing state", async () => {
-      const { getByText } = render(
+    it("handles signing flow", async () => {
+      const onDoneMock = vi.fn();
+      const { getByRole, getByText } = render(
         <SignatureScreen
-          onDone={() => {}}
+          onDone={onDoneMock}
           modalSize="wide"
           connectLocale={mockConnectLocale}
           client={TEST_CLIENT}
@@ -182,17 +100,18 @@ describe("SignatureScreen", () => {
         { setConnectedWallet: true },
       );
 
+      const signInButton = getByRole("button", { name: "Sign In" });
+      await userEvent.click(signInButton);
+
+      // Should show signing in progress
       await waitFor(() => {
-        expect(getByText("Signing")).toBeInTheDocument();
+        expect(getByText("Signing in progress...")).toBeInTheDocument();
       });
     });
 
-    it("shows error and retry button when signing fails", async () => {
-      mockAuth.doLogin.mockRejectedValueOnce(
-        new Error("Headless signing failed"),
-      );
-
-      const { getByText, getByRole } = render(
+    it("handles error state", async () => {
+      mockAuth.doLogin.mockRejectedValueOnce(new Error("Signing failed"));
+      const { getByTestId, getByRole, getByText } = render(
         <SignatureScreen
           onDone={() => {}}
           modalSize="wide"
@@ -203,85 +122,217 @@ describe("SignatureScreen", () => {
         { setConnectedWallet: true },
       );
 
+      const signInButton = await waitFor(() => {
+        return getByTestId("sign-in-button");
+      });
+      await userEvent.click(signInButton);
+
+      // Should show error state
       await waitFor(
         () => {
-          expect(getByText("Headless signing failed")).toBeInTheDocument();
+          expect(getByText("Signing failed")).toBeInTheDocument();
           expect(
             getByRole("button", { name: "Try Again" }),
           ).toBeInTheDocument();
         },
-        { timeout: 2000 },
+        {
+          timeout: 2000,
+        },
       );
     });
+  });
 
-    it("allows retry after failure", async () => {
-      mockAuth.doLogin
-        .mockRejectedValueOnce(new Error("Failed first time"))
-        .mockResolvedValueOnce(undefined);
+  it("Shows loading state when wallet is disconnected", async () => {
+    useActiveWalletMock.mockReturnValueOnce(undefined);
 
-      const { getByRole, getByText } = render(
-        <SignatureScreen
-          onDone={() => {}}
-          modalSize="wide"
-          connectLocale={mockConnectLocale}
-          client={TEST_CLIENT}
-          auth={mockAuth}
-        />,
-        { setConnectedWallet: true },
-      );
+    const { queryByTestId } = 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 },
-      );
+    expect(queryByTestId("sign-in-button")).not.toBeInTheDocument();
+  });
 
-      // Click retry
-      const retryButton = getByRole("button", { name: "Try Again" });
-      await userEvent.click(retryButton);
+  describe("Headless signature screen", () => {
+    function headlessTests() {
+      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);
+        });
+      });
 
-      // Should show loading again
-      await waitFor(() => {
-        expect(getByText("Signing")).toBeInTheDocument();
+      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();
+        });
       });
 
-      // Should have called login twice
-      expect(mockAuth.doLogin).toHaveBeenCalledTimes(2);
-    });
+      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 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,
+      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);
       });
 
-      const { getByTestId } = render(
-        <SignatureScreen
-          onDone={() => {}}
-          modalSize="wide"
-          connectLocale={mockConnectLocale}
-          client={TEST_CLIENT}
-          auth={mockAuth}
-        />,
-        { setConnectedWallet: true },
-      );
+      it("allows disconnecting wallet after failure", async () => {
+        const mockDisconnect = vi.fn().mockResolvedValue(undefined);
+        mockAuth.doLogin.mockRejectedValueOnce(new Error("Failed"));
+        useActiveWalletMock.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();
+        });
+      });
+    }
 
-      // Wait for failure and click disconnect
-      await waitFor(
-        () => {
-          return getByTestId("disconnect-button");
-        },
-        { timeout: 2000 },
-      ).then((button) => userEvent.click(button));
+    describe("InApp wallet", () => {
+      const inAppWallet = createWallet("inApp");
+      beforeEach(() => {
+        useActiveWalletMock.mockReturnValue(inAppWallet);
+      });
+      headlessTests();
+    });
 
-      // Should have attempted to disconnect
-      await waitFor(() => {
-        expect(mockDisconnect).toHaveBeenCalled();
+    describe("Ecosystem wallet", () => {
+      const ecosystemWallet = createWallet("ecosystem.foo");
+      beforeEach(() => {
+        useActiveWalletMock.mockReturnValue(ecosystemWallet);
+      });
+      headlessTests();
+    });
+
+    describe("Smart Wallet (active) + Ecosystem wallet (admin)", () => {
+      const ecosystemWallet = createWallet("ecosystem.foo");
+      const smartWallet = createWallet("smart", {
+        chain: ANVIL_CHAIN,
+        sponsorGas: false,
+      });
+      beforeEach(() => {
+        useActiveWalletMock.mockReturnValue(smartWallet);
+        useAdminWalletMock.mockReturnValue(ecosystemWallet);
+      });
+      headlessTests();
+    });
+
+    describe("Smart Wallet (active) + InApp wallet (admin)", () => {
+      const ecosystemWallet = createWallet("inApp");
+      const smartWallet = createWallet("smart", {
+        chain: ANVIL_CHAIN,
+        sponsorGas: false,
+      });
+      beforeEach(() => {
+        useActiveWalletMock.mockReturnValue(smartWallet);
+        useAdminWalletMock.mockReturnValue(ecosystemWallet);
       });
+      headlessTests();
     });
   });
 });

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

@@ -74,9 +74,10 @@ export const SignatureScreen: React.FC<{
   }
 
   if (
-    wallet.id === "inApp" ||
-    wallet.id === "embedded" ||
-    (wallet.id === "smart" && adminWallet?.id === "inApp")
+    isHeadlessSignSupported(wallet.id) ||
+    (wallet.id === "smart" &&
+      adminWallet &&
+      isHeadlessSignSupported(adminWallet.id))
   ) {
     return (
       <HeadlessSignIn
@@ -227,6 +228,14 @@ export const SignatureScreen: React.FC<{
   );
 };
 
+function isHeadlessSignSupported(walletId: Wallet["id"]) {
+  return (
+    walletId === "inApp" ||
+    walletId === "embedded" ||
+    walletId.startsWith("ecosystem")
+  );
+}
+
 function HeadlessSignIn({
   signIn,
   error,

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.83.1";
+export const version = "5.83.2-nightly-42a313f3b2d89696d5374e5a705e9f144bf46ebe-20250111000322";

package/src/wallets/smart/index.ts

@@ -463,45 +463,47 @@ async function _sendUserOp(args: {
   options: SmartAccountOptions;
 }): Promise<WaitForReceiptOptions> {
   const { executeTx, options } = args;
-  const unsignedUserOp = await createUnsignedUserOp({
-    transaction: executeTx,
-    factoryContract: options.factoryContract,
-    accountContract: options.accountContract,
-    adminAddress: options.personalAccount.address,
-    sponsorGas: options.sponsorGas,
-    overrides: options.overrides,
-  });
-  const signedUserOp = await signUserOp({
-    client: options.client,
-    chain: options.chain,
-    adminAccount: options.personalAccount,
-    entrypointAddress: options.overrides?.entrypointAddress,
-    userOp: unsignedUserOp,
-  });
-  const bundlerOptions: BundlerOptions = {
-    chain: options.chain,
-    client: options.client,
-    bundlerUrl: options.overrides?.bundlerUrl,
-    entrypointAddress: options.overrides?.entrypointAddress,
-  };
-  const userOpHash = await bundleUserOp({
-    options: bundlerOptions,
-    userOp: signedUserOp,
-  });
-  // wait for tx receipt rather than return the userOp hash
-  const receipt = await waitForUserOpReceipt({
-    ...bundlerOptions,
-    userOpHash,
-  });
-
-  // reset the isDeploying flag after every transaction
-  clearAccountDeploying(options.accountContract);
+  try {
+    const unsignedUserOp = await createUnsignedUserOp({
+      transaction: executeTx,
+      factoryContract: options.factoryContract,
+      accountContract: options.accountContract,
+      adminAddress: options.personalAccount.address,
+      sponsorGas: options.sponsorGas,
+      overrides: options.overrides,
+    });
+    const signedUserOp = await signUserOp({
+      client: options.client,
+      chain: options.chain,
+      adminAccount: options.personalAccount,
+      entrypointAddress: options.overrides?.entrypointAddress,
+      userOp: unsignedUserOp,
+    });
+    const bundlerOptions: BundlerOptions = {
+      chain: options.chain,
+      client: options.client,
+      bundlerUrl: options.overrides?.bundlerUrl,
+      entrypointAddress: options.overrides?.entrypointAddress,
+    };
+    const userOpHash = await bundleUserOp({
+      options: bundlerOptions,
+      userOp: signedUserOp,
+    });
+    // wait for tx receipt rather than return the userOp hash
+    const receipt = await waitForUserOpReceipt({
+      ...bundlerOptions,
+      userOpHash,
+    });
 
-  return {
-    client: options.client,
-    chain: options.chain,
-    transactionHash: receipt.transactionHash,
-  };
+    return {
+      client: options.client,
+      chain: options.chain,
+      transactionHash: receipt.transactionHash,
+    };
+  } finally {
+    // reset the isDeploying flag after every transaction or error
+    clearAccountDeploying(options.accountContract);
+  }
 }
 
 async function getEntrypointFromFactory(