thirdweb 5.73.1-nightly-33c23e789e577bd6463e135cec4e25cfcfc9964a-20241205000340 → 5.75.0-nightly-ec84ed37d6db8281d3afb12bc47a20ccc5fe9713-20241207000341

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/prebuilt/Account/avatar.tsx

@@ -206,6 +206,7 @@ export function AccountAvatar({
 
       throw new Error("Failed to resolve social + ens avatar");
     },
+    retry: false,
     ...queryOptions,
   });
 

package/src/react/web/ui/prebuilt/Account/balance.tsx

@@ -179,6 +179,7 @@ export function AccountBalance({
         tokenAddress,
       });
     },
+    retry: false,
     ...queryOptions,
   });
 

package/src/react/web/ui/prebuilt/Account/name.tsx

@@ -160,6 +160,7 @@ export function AccountName({
       }
       return formatFn ? formatFn(name) : name;
     },
+    retry: false,
     ...queryOptions,
   });
 

package/src/react/web/utils/usePreloadWalletProviders.ts

@@ -21,7 +21,7 @@ export function usePreloadWalletProviders({
           switch (true) {
             case COINBASE === w.id: {
               const { getCoinbaseWebProvider } = await import(
-                "../../../wallets/coinbase/coinbaseWebSDK.js"
+                "../../../wallets/coinbase/coinbase-web.js"
               );
               await getCoinbaseWebProvider(
                 w.getConfig() as CreateWalletArgs<typeof COINBASE>[1],

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/transaction/actions/estimate-gas.ts

@@ -3,7 +3,7 @@ import { roundUpGas } from "../../gas/op-gas-fee-reducer.js";
 import { resolvePromisedValue } from "../../utils/promise/resolve-promised-value.js";
 import type { Prettify } from "../../utils/type-utils.js";
 import type { Account } from "../../wallets/interfaces/wallet.js";
-import { extractError as parseEstimationError } from "../extract-error.js";
+import { extractError } from "../extract-error.js";
 import type { PreparedTransaction } from "../prepare-transaction.js";
 
 export type EstimateGasOptions = Prettify<
@@ -83,7 +83,7 @@ export async function estimateGas(
         }
         return gas;
       } catch (error) {
-        throw await parseEstimationError({
+        throw await extractError({
           error,
           contract: options.transaction.__contract,
         });
@@ -120,7 +120,7 @@ export async function estimateGas(
       }
       return gas;
     } catch (error) {
-      throw await parseEstimationError({
+      throw await extractError({
         error,
         contract: options.transaction.__contract,
       });

package/src/transaction/actions/gasless/providers/biconomy.ts

@@ -1,5 +1,5 @@
 import type { Address } from "abitype";
-import { type TransactionSerializable, encodeAbiParameters } from "viem";
+import { encodeAbiParameters } from "viem";
 import { ZERO_ADDRESS } from "../../../../constants/addresses.js";
 import { getContract } from "../../../../contract/contract.js";
 import { isHex } from "../../../../utils/encoding/helpers/is-hex.js";
@@ -8,6 +8,7 @@ import { stringify } from "../../../../utils/json.js";
 import type { Account } from "../../../../wallets/interfaces/wallet.js";
 import type { PreparedTransaction } from "../../../prepare-transaction.js";
 import { readContract } from "../../../read-contract.js";
+import type { SerializableTransaction } from "../../../serialize-transaction.js";
 import type { WaitForReceiptOptions } from "../../wait-for-tx-receipt.js";
 
 /**
@@ -27,7 +28,7 @@ type SendBiconomyTransactionOptions = {
   // TODO: update this to `Transaction<"prepared">` once the type is available to ensure only prepared transactions are accepted
   // biome-ignore lint/suspicious/noExplicitAny: library function that accepts any prepared transaction type
   transaction: PreparedTransaction<any>;
-  serializableTransaction: TransactionSerializable;
+  serializableTransaction: SerializableTransaction;
   gasless: BiconomyOptions;
 };
 

package/src/transaction/actions/gasless/providers/engine.ts

@@ -1,10 +1,10 @@
 import type { Address } from "abitype";
-import type { TransactionSerializable } from "viem";
 import { getContract } from "../../../../contract/contract.js";
 import { stringify } from "../../../../utils/json.js";
 import type { Account } from "../../../../wallets/interfaces/wallet.js";
 import type { PreparedTransaction } from "../../../prepare-transaction.js";
 import { readContract } from "../../../read-contract.js";
+import type { SerializableTransaction } from "../../../serialize-transaction.js";
 import {
   type WaitForReceiptOptions,
   waitForReceipt,
@@ -28,7 +28,7 @@ type SendengineTransactionOptions = {
   // TODO: update this to `Transaction<"prepared">` once the type is available to ensure only prepared transactions are accepted
   // biome-ignore lint/suspicious/noExplicitAny: library function that accepts any prepared transaction type
   transaction: PreparedTransaction<any>;
-  serializableTransaction: TransactionSerializable;
+  serializableTransaction: SerializableTransaction;
   gasless: EngineOptions;
 };
 

package/src/transaction/actions/gasless/providers/openzeppelin.ts

@@ -1,11 +1,11 @@
 import type { Address } from "abitype";
-import type { TransactionSerializable } from "viem";
 import { getContract } from "../../../../contract/contract.js";
 import { isHex } from "../../../../utils/encoding/helpers/is-hex.js";
 import { stringify } from "../../../../utils/json.js";
 import type { Account } from "../../../../wallets/interfaces/wallet.js";
 import type { PreparedTransaction } from "../../../prepare-transaction.js";
 import { readContract } from "../../../read-contract.js";
+import type { SerializableTransaction } from "../../../serialize-transaction.js";
 import type { WaitForReceiptOptions } from "../../wait-for-tx-receipt.js";
 
 /**
@@ -26,7 +26,7 @@ type SendOpenZeppelinTransactionOptions = {
   // TODO: update this to `Transaction<"prepared">` once the type is available to ensure only prepared transactions are accepted
   // biome-ignore lint/suspicious/noExplicitAny: library function that accepts any prepared transaction type
   transaction: PreparedTransaction<any>;
-  serializableTransaction: TransactionSerializable;
+  serializableTransaction: SerializableTransaction;
   gasless: OpenZeppelinOptions;
 };
 

package/src/transaction/actions/gasless/send-gasless-transaction.ts

@@ -1,6 +1,6 @@
-import type { TransactionSerializable } from "viem";
 import type { Account } from "../../../wallets/interfaces/wallet.js";
 import type { PreparedTransaction } from "../../prepare-transaction.js";
+import type { SerializableTransaction } from "../../serialize-transaction.js";
 import { addTransactionToStore } from "../../transaction-store.js";
 import type { WaitForReceiptOptions } from "../wait-for-tx-receipt.js";
 import type { GaslessOptions } from "./types.js";
@@ -10,7 +10,7 @@ type SendGaslessTransactionOptions = {
   // TODO: update this to `Transaction<"prepared">` once the type is available to ensure only prepared transactions are accepted
   // biome-ignore lint/suspicious/noExplicitAny: library function that accepts any prepared transaction type
   transaction: PreparedTransaction<any>;
-  serializableTransaction: TransactionSerializable;
+  serializableTransaction: SerializableTransaction;
   gasless: GaslessOptions;
 };