thirdweb 5.105.20 → 5.105.22

package/src/wallets/in-app/core/wallet/enclave-wallet.ts

@@ -179,7 +179,7 @@ export class EnclaveWallet implements IWebWallet {
         storage,
       });
     };
-    return {
+    const account: Account = {
       address: getAddress(address),
       async sendTransaction(tx) {
         const rpcRequest = getRpcClient({
@@ -264,7 +264,42 @@ export class EnclaveWallet implements IWebWallet {
 
         return signature as Hex;
       },
+      sendCalls: async (options) => {
+        const { inAppWalletSendCalls } = await import(
+          "../eip5792/in-app-wallet-calls.js"
+        );
+        const firstCall = options.calls[0];
+        if (!firstCall) {
+          throw new Error("No calls to send");
+        }
+        const client = firstCall.client;
+        const chain = firstCall.chain || options.chain;
+        const id = await inAppWalletSendCalls({
+          account: account,
+          calls: options.calls,
+        });
+        return { chain, client, id };
+      },
+      getCallsStatus: async (options) => {
+        const { inAppWalletGetCallsStatus } = await import(
+          "../eip5792/in-app-wallet-calls.js"
+        );
+        return inAppWalletGetCallsStatus(options);
+      },
+      getCapabilities: async (options) => {
+        return {
+          [options.chainId ?? 1]: {
+            atomic: {
+              status: "unsupported",
+            },
+            paymasterService: {
+              supported: false,
+            },
+          },
+        };
+      },
     };
+    return account;
   }
 }
 

package/src/wallets/in-app/core/wallet/in-app-core.ts

@@ -57,7 +57,7 @@ export function createInAppWallet(args: {
   let client: ThirdwebClient | undefined;
   let authToken: string | null = null;
 
-  const resolveSmartAccountOptionsFromEcosystem = async (options: {
+  const resolveSmartAccountOptionsFromEcosystem = async (options?: {
     chain?: Chain;
   }) => {
     if (ecosystem) {
@@ -78,7 +78,7 @@ export function createInAppWallet(args: {
           // default to 4337
           const { defaultChainId } = ecosystemOptions.smartAccountOptions;
           const preferredChain =
-            options.chain ??
+            options?.chain ??
             (defaultChainId ? getCachedChain(defaultChainId) : undefined);
           if (!preferredChain) {
             throw new Error(
@@ -108,7 +108,7 @@ export function createInAppWallet(args: {
         ecosystem,
       );
 
-      await resolveSmartAccountOptionsFromEcosystem(options);
+      await resolveSmartAccountOptionsFromEcosystem();
 
       const {
         account: connectedAccount,
@@ -145,7 +145,7 @@ export function createInAppWallet(args: {
         ecosystem,
       );
 
-      await resolveSmartAccountOptionsFromEcosystem(options);
+      await resolveSmartAccountOptionsFromEcosystem();
 
       const {
         account: connectedAccount,

package/src/wallets/in-app/web/in-app.ts

@@ -299,6 +299,24 @@ import type {
  * });
  * ```
  *
+ * ### Get the auth token for the wallet
+ *
+ * You can get the auth token for the wallet by calling `wallet.getAuthToken()`.
+ *
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets";
+ *
+ * const wallet = inAppWallet();
+ *
+ * await wallet.connect({
+ *   client,
+ *   strategy: "google",
+ * });
+ *
+ * const authToken = await wallet.getAuthToken(); // this will return a JWT token that can be used to authenticate the user in the backend
+ * console.log(authToken);
+ * ```
+ *
  * @returns The created in-app wallet.
  * @wallet
  */

package/src/wallets/injected/index.ts

@@ -3,6 +3,7 @@ import {
   getTypesForEIP712Domain,
   type SignTypedDataParameters,
   serializeTypedData,
+  stringify,
   validateTypedData,
 } from "viem";
 import { isInsufficientFundsError } from "../../analytics/track/helpers.js";
@@ -22,6 +23,10 @@ import {
 } from "../../utils/encoding/hex.js";
 import { parseTypedData } from "../../utils/signatures/helpers/parse-typed-data.js";
 import type { InjectedSupportedWalletIds } from "../__generated__/wallet-ids.js";
+import { toGetCallsStatusResponse } from "../eip5792/get-calls-status.js";
+import { toGetCapabilitiesResult } from "../eip5792/get-capabilities.js";
+import { toProviderCallParams } from "../eip5792/send-calls.js";
+import type { GetCallsStatusRawResponse } from "../eip5792/types.js";
 import type { Account, SendTransactionOption } from "../interfaces/wallet.js";
 import type { DisconnectFn, SwitchChainFn } from "../types.js";
 import { getValidPublicRPCUrl } from "../utils/chains.js";
@@ -300,6 +305,64 @@ function createAccount({
       );
       return result;
     },
+    async sendCalls(options) {
+      try {
+        const { callParams, chain } = await toProviderCallParams(
+          options,
+          account,
+        );
+        const callId = await provider.request({
+          method: "wallet_sendCalls",
+          params: callParams,
+        });
+        if (callId && typeof callId === "object" && "id" in callId) {
+          return { chain, client, id: callId.id };
+        }
+        return { chain, client, id: callId };
+      } catch (error) {
+        if (/unsupport|not support/i.test((error as Error).message)) {
+          throw new Error(
+            `${id} errored calling wallet_sendCalls, with error: ${error instanceof Error ? error.message : stringify(error)}`,
+          );
+        }
+        throw error;
+      }
+    },
+    async getCallsStatus(options) {
+      try {
+        const rawResponse = (await provider.request({
+          method: "wallet_getCallsStatus",
+          params: [options.id],
+        })) as GetCallsStatusRawResponse;
+        return toGetCallsStatusResponse(rawResponse);
+      } catch (error) {
+        if (/unsupport|not support/i.test((error as Error).message)) {
+          throw new Error(
+            `${id} does not support wallet_getCallsStatus, reach out to them directly to request EIP-5792 support.`,
+          );
+        }
+        throw error;
+      }
+    },
+    async getCapabilities(options) {
+      const chainId = options.chainId;
+      try {
+        const result = await provider.request({
+          method: "wallet_getCapabilities",
+          params: [getAddress(account.address)],
+        });
+        return toGetCapabilitiesResult(result, chainId);
+      } catch (error: unknown) {
+        if (
+          /unsupport|not support|not available/i.test((error as Error).message)
+        ) {
+          return {
+            message: `${id} does not support wallet_getCapabilities, reach out to them directly to request EIP-5792 support.`,
+          };
+        }
+        throw error;
+      }
+    },
   };
 
   return account;

package/src/wallets/interfaces/wallet.ts

@@ -2,6 +2,7 @@ import type { Address } from "abitype";
 import type * as ox__TypedData from "ox/TypedData";
 import type { Hex, SignableMessage } from "viem";
 import type { Chain } from "../../chains/types.js";
+import type { ThirdwebClient } from "../../client/client.js";
 import type {
   AuthorizationRequest,
   SignedAuthorization,
@@ -12,6 +13,15 @@ import type {
 } from "../../transaction/prepare-transaction.js";
 import type { SerializableTransaction } from "../../transaction/serialize-transaction.js";
 import type { SendTransactionResult } from "../../transaction/types.js";
+import type { GetCapabilitiesResult } from "../eip5792/get-capabilities.js";
+import type {
+  SendCallsOptions,
+  SendCallsResult,
+} from "../eip5792/send-calls.js";
+import type {
+  GetCallsStatusResponse,
+  WalletSendCallsId,
+} from "../eip5792/types.js";
 import type { WalletEmitter } from "../wallet-emitter.js";
 import type {
   CreateWalletArgs,
@@ -300,4 +310,25 @@ export type Account = {
    * ```
    */
   watchAsset?: (asset: WatchAssetParams) => Promise<boolean>;
+
+  /**
+   * EIP-5792: Send the given array of calls via the wallet provider
+   */
+  sendCalls?: (
+    calls: Omit<SendCallsOptions, "wallet">,
+  ) => Promise<Omit<SendCallsResult, "wallet">>;
+  /**
+   * EIP-5792: Get the status of the given call bundle
+   */
+  getCallsStatus?: (options: {
+    id: WalletSendCallsId;
+    chain: Chain;
+    client: ThirdwebClient;
+  }) => Promise<GetCallsStatusResponse>;
+  /**
+   * EIP-5792: Get the capabilities of the wallet
+   */
+  getCapabilities?: (options: {
+    chainId?: number;
+  }) => Promise<GetCapabilitiesResult>;
 };

package/src/wallets/smart/index.ts

@@ -80,7 +80,7 @@ export async function connectSmartAccount(
   connectionOptions: SmartWalletConnectionOptions,
   creationOptions: SmartWalletOptions,
 ): Promise<[Account, Chain]> {
-  const { personalAccount, client, chain: connectChain } = connectionOptions;
+  const { personalAccount, client } = connectionOptions;
 
   if (!personalAccount) {
     throw new Error(
@@ -89,7 +89,7 @@ export async function connectSmartAccount(
   }
 
   const options = creationOptions;
-  const chain = connectChain ?? options.chain;
+  const chain = creationOptions.chain;
   const sponsorGas =
     "gasless" in options ? options.gasless : options.sponsorGas;
   if (await isZkSyncChain(chain)) {
@@ -226,7 +226,7 @@ async function createSmartAccount(
       );
     }
   }
-
+  const sponsorGas = options.sponsorGas;
   let accountContract = options.accountContract;
   const account: Account = {
     address: getAddress(accountContract.address),
@@ -366,6 +366,40 @@ async function createSmartAccount(
         typedData,
       });
     },
+    sendCalls: async (options) => {
+      const { inAppWalletSendCalls } = await import(
+        "../in-app/core/eip5792/in-app-wallet-calls.js"
+      );
+      const firstCall = options.calls[0];
+      if (!firstCall) {
+        throw new Error("No calls to send");
+      }
+      const client = firstCall.client;
+      const chain = firstCall.chain || options.chain;
+      const id = await inAppWalletSendCalls({
+        account: account,
+        calls: options.calls,
+      });
+      return { chain, client, id };
+    },
+    getCallsStatus: async (options) => {
+      const { inAppWalletGetCallsStatus } = await import(
+        "../in-app/core/eip5792/in-app-wallet-calls.js"
+      );
+      return inAppWalletGetCallsStatus(options);
+    },
+    getCapabilities: async (options) => {
+      return {
+        [options.chainId ?? 1]: {
+          atomic: {
+            status: "supported",
+          },
+          paymasterService: {
+            supported: sponsorGas ?? false,
+          },
+        },
+      };
+    },
   };
   return account;
 }
@@ -509,6 +543,40 @@ function createZkSyncAccount(args: {
       const typedData = parseTypedData(_typedData);
       return connectionOptions.personalAccount.signTypedData(typedData);
     },
+    sendCalls: async (options) => {
+      const { inAppWalletSendCalls } = await import(
+        "../in-app/core/eip5792/in-app-wallet-calls.js"
+      );
+      const firstCall = options.calls[0];
+      if (!firstCall) {
+        throw new Error("No calls to send");
+      }
+      const client = firstCall.client;
+      const chain = firstCall.chain || options.chain;
+      const id = await inAppWalletSendCalls({
+        account: account,
+        calls: options.calls,
+      });
+      return { chain, client, id };
+    },
+    getCallsStatus: async (options) => {
+      const { inAppWalletGetCallsStatus } = await import(
+        "../in-app/core/eip5792/in-app-wallet-calls.js"
+      );
+      return inAppWalletGetCallsStatus(options);
+    },
+    getCapabilities: async (options) => {
+      return {
+        [options.chainId ?? 1]: {
+          atomic: {
+            status: "unsupported",
+          },
+          paymasterService: {
+            supported: args.sponsorGas ?? false,
+          },
+        },
+      };
+    },
   };
   return account;
 }

package/src/wallets/smart/smart-wallet.ts

@@ -229,7 +229,7 @@ export function smartWallet(
       const { connectSmartAccount } = await import("./index.js");
       const [connectedAccount, connectedChain] = await connectSmartAccount(
         { ...lastConnectOptions, chain: newChain },
-        createOptions,
+        { ...createOptions, chain: newChain },
       );
       // set the states
       account = connectedAccount;

package/src/wallets/wallet-connect/qr-overlay.ts

@@ -0,0 +1,322 @@
+/**
+ * Vanilla JavaScript QR Code overlay utility for WalletConnect URIs
+ * Works in any browser context without requiring React or other frameworks
+ */
+
+interface QROverlayOptions {
+  /**
+   * Custom styles to apply to the overlay
+   */
+  overlayStyles?: Partial<CSSStyleDeclaration>;
+  /**
+   * Custom styles to apply to the modal container
+   */
+  modalStyles?: Partial<CSSStyleDeclaration>;
+  /**
+   * QR code size in pixels
+   */
+  qrSize?: number;
+  /**
+   * Show close button
+   */
+  showCloseButton?: boolean;
+  /**
+   * Custom close button text
+   */
+  closeButtonText?: string;
+  /**
+   * Theme preference
+   */
+  theme?: "light" | "dark";
+  /**
+   * Custom container element to append the overlay to
+   */
+  container?: HTMLElement;
+  /**
+   * Callback called when user cancels the overlay (closes without connecting)
+   */
+  onCancel?: () => void;
+}
+
+export interface QROverlay {
+  /**
+   * Remove the overlay from the DOM
+   */
+  destroy: () => void;
+  /**
+   * Hide the overlay (without removing from DOM)
+   */
+  hide: () => void;
+  /**
+   * Show the overlay
+   */
+  show: () => void;
+}
+
+/**
+ * Creates a QR code overlay for the given WalletConnect URI
+ */
+export function createQROverlay(
+  uri: string,
+  options: QROverlayOptions = {},
+): QROverlay {
+  const {
+    qrSize = 280,
+    showCloseButton = true,
+    closeButtonText = "×",
+    theme = "light",
+    container = document.body,
+    onCancel,
+  } = options;
+
+  // Create overlay backdrop
+  const overlay = document.createElement("div");
+  overlay.style.cssText = `
+    position: fixed;
+    inset: 0;
+    background-color: ${theme === "dark" ? "rgba(0, 0, 0, 0.8)" : "rgba(0, 0, 0, 0.5)"};
+    backdrop-filter: blur(10px);
+    z-index: 9999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    animation: fadeIn 300ms ease-out;
+  `;
+
+  // Apply custom overlay styles
+  if (options.overlayStyles) {
+    Object.assign(overlay.style, options.overlayStyles);
+  }
+
+  // Create modal container
+  const modal = document.createElement("div");
+  modal.style.cssText = `
+    background: ${theme === "dark" ? "#1f1f1f" : "#ffffff"};
+    border-radius: 16px;
+    padding: 24px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    max-width: 90vw;
+    max-height: 90vh;
+    position: relative;
+    animation: scaleIn 300ms ease-out;
+  `;
+
+  // Apply custom modal styles
+  if (options.modalStyles) {
+    Object.assign(modal.style, options.modalStyles);
+  }
+
+  // Create close button
+  if (showCloseButton) {
+    const closeButton = document.createElement("button");
+    closeButton.textContent = closeButtonText;
+    closeButton.style.cssText = `
+      position: absolute;
+      top: 16px;
+      right: 16px;
+      background: none;
+      border: none;
+      font-size: 24px;
+      cursor: pointer;
+      color: ${theme === "dark" ? "#ffffff" : "#000000"};
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 8px;
+      transition: background-color 0.2s;
+    `;
+
+    closeButton.addEventListener("mouseenter", () => {
+      closeButton.style.backgroundColor =
+        theme === "dark" ? "rgba(255, 255, 255, 0.1)" : "rgba(0, 0, 0, 0.1)";
+    });
+
+    closeButton.addEventListener("mouseleave", () => {
+      closeButton.style.backgroundColor = "transparent";
+    });
+
+    closeButton.addEventListener("click", () => {
+      destroyOverlay(true);
+    });
+
+    modal.appendChild(closeButton);
+  }
+
+  // Create QR code container
+  const qrContainer = document.createElement("div");
+  qrContainer.style.cssText = `
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+  `;
+
+  // Create title
+  const title = document.createElement("h3");
+  title.textContent = "Scan to Connect";
+  title.style.cssText = `
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: ${theme === "dark" ? "#ffffff" : "#000000"};
+    text-align: center;
+  `;
+
+  // Create QR code canvas
+  const qrCanvas = document.createElement("canvas");
+  qrCanvas.width = qrSize;
+  qrCanvas.height = qrSize;
+  qrCanvas.style.cssText = `
+    border: 1px solid ${theme === "dark" ? "#333333" : "#e5e5e5"};
+    border-radius: 12px;
+  `;
+
+  // Generate QR code
+  generateQRCode(uri, qrCanvas, qrSize).catch(console.error);
+
+  // Create copy button for the URI
+  const copyButton = document.createElement("button");
+  copyButton.textContent = "Copy URI";
+  copyButton.style.cssText = `
+    background: ${theme === "dark" ? "#333333" : "#f5f5f5"};
+    border: 1px solid ${theme === "dark" ? "#444444" : "#e5e5e5"};
+    color: ${theme === "dark" ? "#ffffff" : "#000000"};
+    padding: 8px 16px;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background-color 0.2s;
+  `;
+
+  copyButton.addEventListener("click", async () => {
+    try {
+      await navigator.clipboard.writeText(uri);
+      const originalText = copyButton.textContent;
+      copyButton.textContent = "Copied!";
+      setTimeout(() => {
+        copyButton.textContent = originalText;
+      }, 2000);
+    } catch (err) {
+      console.error("Failed to copy URI:", err);
+    }
+  });
+
+  // Assemble the modal
+  qrContainer.appendChild(title);
+  qrContainer.appendChild(qrCanvas);
+  qrContainer.appendChild(copyButton);
+  modal.appendChild(qrContainer);
+  overlay.appendChild(modal);
+
+  // Add CSS animations
+  const style = document.createElement("style");
+  style.textContent = `
+    @keyframes fadeIn {
+      from { opacity: 0; }
+      to { opacity: 1; }
+    }
+    @keyframes fadeOut {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+    @keyframes scaleIn {
+      from { transform: scale(0.9); opacity: 0; }
+      to { transform: scale(1); opacity: 1; }
+    }
+    @keyframes scaleOut {
+      from { transform: scale(1); opacity: 1; }
+      to { transform: scale(0.9); opacity: 0; }
+    }
+  `;
+  document.head.appendChild(style);
+
+  // Event handlers
+  const handleEscapeKey = (event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      destroyOverlay(true);
+    }
+  };
+
+  const handleOverlayClick = (event: MouseEvent) => {
+    if (event.target === overlay) {
+      destroyOverlay(true);
+    }
+  };
+
+  // Add event listeners
+  document.addEventListener("keydown", handleEscapeKey);
+  overlay.addEventListener("click", handleOverlayClick);
+
+  // Append to container
+  container.appendChild(overlay);
+
+  function destroyOverlay(userInitiated = false) {
+    document.removeEventListener("keydown", handleEscapeKey);
+    overlay.removeEventListener("click", handleOverlayClick);
+
+    // Call onCancel callback only if user initiated the close action
+    if (userInitiated && onCancel) {
+      onCancel();
+    }
+
+    // Animate both overlay and modal out
+    overlay.style.animation = "fadeOut 200ms ease-in";
+    modal.style.animation = "scaleOut 200ms ease-in";
+
+    const cleanup = () => {
+      if (overlay.parentNode) {
+        overlay.parentNode.removeChild(overlay);
+      }
+      if (style.parentNode) {
+        style.parentNode.removeChild(style);
+      }
+    };
+
+    overlay.addEventListener("animationend", cleanup, { once: true });
+
+    // Fallback cleanup in case animation doesn't fire
+    setTimeout(cleanup, 250);
+  }
+
+  function hideOverlay() {
+    overlay.style.display = "none";
+  }
+
+  function showOverlay() {
+    overlay.style.display = "flex";
+  }
+
+  return {
+    destroy: () => destroyOverlay(false), // Programmatic cleanup, don't call onCancel
+    hide: hideOverlay,
+    show: showOverlay,
+  };
+}
+
+/**
+ * QR code generator that tries to use a real QR library if available,
+ * otherwise falls back to a placeholder
+ */
+async function generateQRCode(
+  text: string,
+  canvas: HTMLCanvasElement,
+  size: number,
+) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return;
+
+  // Try to dynamically import a QR code library if available
+  // This allows the overlay to work with or without a QR code dependency
+  const { toCanvas } = await import("qrcode");
+  await toCanvas(canvas, text, {
+    width: size,
+    margin: 2,
+    color: {
+      dark: "#000000",
+      light: "#ffffff",
+    },
+  });
+  return;
+}

package/src/wallets/wallet-connect/types.ts

@@ -157,6 +157,19 @@ export type WCConnectOptions = {
        * ```
        */
       onDisplayUri?: (_uri: string) => void;
+      /**
+       * Callback that gets called when the user cancels the connection process (e.g., closes the QR modal).
+       * This is only called for user-initiated cancellations, not for programmatic cleanup.
+       *
+       * ```tsx
+       * await wallet.connect({
+       *  onCancel: () => {
+       *    console.log("User cancelled wallet connection");
+       *  }
+       * })
+       * ```
+       */
+      onCancel?: () => void;
     }
   >;
 };