thirdweb 5.30.0-nightly-33777df88fb190c2af8ad25e4930040884996f1e-20240620000630 → 5.30.0-nightly-d320777eea5404f596aa39b2b49b5165d3e1959a-20240621000551

package/src/wallets/in-app/web/utils/Storage/LocalStorage.ts

@@ -1,3 +1,4 @@
+import type { EcosystemWalletId } from "../../../../wallet-types.js";
 import {
   AUTH_TOKEN_LOCAL_STORAGE_NAME,
   DEVICE_SHARE_LOCAL_STORAGE_NAME,
@@ -13,13 +14,16 @@ const data = new Map<string, string>();
  */
 export class LocalStorage {
   protected isSupported: boolean;
-  protected clientId: string;
+  protected key: string;
   /**
    * @internal
    */
-  constructor({ clientId }: { clientId: string }) {
+  constructor({
+    clientId,
+    ecosystemId,
+  }: { clientId: string; ecosystemId?: EcosystemWalletId }) {
     this.isSupported = typeof window !== "undefined" && !!window.localStorage;
-    this.clientId = clientId;
+    this.key = getLocalStorageKey(clientId, ecosystemId);
   }
 
   protected async getItem(key: string): Promise<string | null> {
@@ -49,9 +53,7 @@ export class LocalStorage {
    * @internal
    */
   async getWalletConnectSessions(): Promise<string | null> {
-    return this.getItem(
-      WALLET_CONNECT_SESSIONS_LOCAL_STORAGE_NAME(this.clientId),
-    );
+    return this.getItem(WALLET_CONNECT_SESSIONS_LOCAL_STORAGE_NAME(this.key));
   }
 
   /**
@@ -59,7 +61,7 @@ export class LocalStorage {
    */
   async saveWalletConnectSessions(stringifiedSessions: string): Promise<void> {
     await this.setItem(
-      WALLET_CONNECT_SESSIONS_LOCAL_STORAGE_NAME(this.clientId),
+      WALLET_CONNECT_SESSIONS_LOCAL_STORAGE_NAME(this.key),
       stringifiedSessions,
     );
   }
@@ -68,38 +70,33 @@ export class LocalStorage {
    * @internal
    */
   async savePasskeyCredentialId(id: string): Promise<void> {
-    await this.setItem(
-      PASSKEY_CREDENTIAL_ID_LOCAL_STORAGE_NAME(this.clientId),
-      id,
-    );
+    await this.setItem(PASSKEY_CREDENTIAL_ID_LOCAL_STORAGE_NAME(this.key), id);
   }
 
   /**
    * @internal
    */
   async getPasskeyCredentialId(): Promise<string | null> {
-    return this.getItem(
-      PASSKEY_CREDENTIAL_ID_LOCAL_STORAGE_NAME(this.clientId),
-    );
+    return this.getItem(PASSKEY_CREDENTIAL_ID_LOCAL_STORAGE_NAME(this.key));
   }
 
   /**
    * @internal
    */
   async saveAuthCookie(cookie: string): Promise<void> {
-    await this.setItem(AUTH_TOKEN_LOCAL_STORAGE_NAME(this.clientId), cookie);
+    await this.setItem(AUTH_TOKEN_LOCAL_STORAGE_NAME(this.key), cookie);
   }
   /**
    * @internal
    */
   async getAuthCookie(): Promise<string | null> {
-    return this.getItem(AUTH_TOKEN_LOCAL_STORAGE_NAME(this.clientId));
+    return this.getItem(AUTH_TOKEN_LOCAL_STORAGE_NAME(this.key));
   }
   /**
    * @internal
    */
   async removeAuthCookie(): Promise<boolean> {
-    return this.removeItem(AUTH_TOKEN_LOCAL_STORAGE_NAME(this.clientId));
+    return this.removeItem(AUTH_TOKEN_LOCAL_STORAGE_NAME(this.key));
   }
 
   /**
@@ -108,7 +105,7 @@ export class LocalStorage {
   async saveDeviceShare(share: string, userId: string): Promise<void> {
     await this.saveWalletUserId(userId);
     await this.setItem(
-      DEVICE_SHARE_LOCAL_STORAGE_NAME(this.clientId, userId),
+      DEVICE_SHARE_LOCAL_STORAGE_NAME(this.key, userId),
       share,
     );
   }
@@ -118,9 +115,7 @@ export class LocalStorage {
   async getDeviceShare(): Promise<string | null> {
     const userId = await this.getWalletUserId();
     if (userId) {
-      return this.getItem(
-        DEVICE_SHARE_LOCAL_STORAGE_NAME(this.clientId, userId),
-      );
+      return this.getItem(DEVICE_SHARE_LOCAL_STORAGE_NAME(this.key, userId));
     }
     return null;
   }
@@ -130,9 +125,7 @@ export class LocalStorage {
   async removeDeviceShare(): Promise<boolean> {
     const userId = await this.getWalletUserId();
     if (userId) {
-      return this.removeItem(
-        DEVICE_SHARE_LOCAL_STORAGE_NAME(this.clientId, userId),
-      );
+      return this.removeItem(DEVICE_SHARE_LOCAL_STORAGE_NAME(this.key, userId));
     }
     return false;
   }
@@ -141,21 +134,22 @@ export class LocalStorage {
    * @internal
    */
   async getWalletUserId(): Promise<string | null> {
-    return this.getItem(WALLET_USER_ID_LOCAL_STORAGE_NAME(this.clientId));
+    return this.getItem(WALLET_USER_ID_LOCAL_STORAGE_NAME(this.key));
   }
   /**
    * @internal
    */
   async saveWalletUserId(userId: string): Promise<void> {
-    await this.setItem(
-      WALLET_USER_ID_LOCAL_STORAGE_NAME(this.clientId),
-      userId,
-    );
+    await this.setItem(WALLET_USER_ID_LOCAL_STORAGE_NAME(this.key), userId);
   }
   /**
    * @internal
    */
   async removeWalletUserId(): Promise<boolean> {
-    return this.removeItem(WALLET_USER_ID_LOCAL_STORAGE_NAME(this.clientId));
+    return this.removeItem(WALLET_USER_ID_LOCAL_STORAGE_NAME(this.key));
   }
 }
+
+const getLocalStorageKey = (clientId: string, ecosystemId?: string) => {
+  return `${clientId}${ecosystemId ? `-${ecosystemId}` : ""}`;
+};

package/src/wallets/in-app/web/utils/iFrameCommunication/IframeCommunicator.ts

@@ -52,6 +52,7 @@ export class IframeCommunicator<T extends { [key: string]: any }> {
     // Creating the IFrame element for communication
     let iframe = document.getElementById(iframeId) as HTMLIFrameElement | null;
     const hrefLink = new URL(link);
+
     // TODO (ew) - bring back version tracking
     // const sdkVersion = process.env.THIRDWEB_EWS_SDK_VERSION;
     // if (!sdkVersion) {
@@ -60,24 +61,25 @@ export class IframeCommunicator<T extends { [key: string]: any }> {
     // hrefLink.searchParams.set("sdkVersion", sdkVersion);
     if (!iframe || iframe.src !== hrefLink.href) {
       // ! Do not update the hrefLink here or it'll cause multiple re-renders
-      if (!iframe) {
-        iframe = document.createElement("iframe");
-        const mergedIframeStyles = {
-          ...iframeBaseStyle,
-        };
-        Object.assign(iframe.style, mergedIframeStyles);
-        iframe.setAttribute("id", iframeId);
-        iframe.setAttribute("fetchpriority", "high");
-        container.appendChild(iframe);
-      }
+
+      iframe = document.createElement("iframe");
+      const mergedIframeStyles = {
+        ...iframeBaseStyle,
+      };
+      Object.assign(iframe.style, mergedIframeStyles);
+      iframe.setAttribute("id", iframeId);
+      iframe.setAttribute("fetchpriority", "high");
+      container.appendChild(iframe);
+
       iframe.src = hrefLink.href;
+
       // iframe.setAttribute("data-version", sdkVersion);
       // biome-ignore lint/suspicious/noExplicitAny: TODO: fix later
       const onIframeLoaded = (event: MessageEvent<any>) => {
         if (event.data.eventType === "ewsIframeLoaded") {
           window.removeEventListener("message", onIframeLoaded);
           if (!iframe) {
-            console.warn("thirdweb Iframe not found");
+            console.warn("thirdweb iFrame not found");
             return;
           }
           this.onIframeLoadHandler(iframe, onIframeInitialize)();

package/src/wallets/in-app/web/utils/iFrameCommunication/InAppWalletIframeCommunicator.ts

@@ -1,4 +1,5 @@
 import { IN_APP_WALLET_PATH } from "../../../core/constants/settings.js";
+import type { Ecosystem } from "../../types.js";
 import { LocalStorage } from "../Storage/LocalStorage.js";
 import { IframeCommunicator } from "./IframeCommunicator.js";
 
@@ -10,21 +11,32 @@ export class InAppWalletIframeCommunicator<
   T extends { [key: string]: any },
 > extends IframeCommunicator<T> {
   clientId: string;
+  ecosystem?: Ecosystem;
   /**
    * @internal
    */
-  constructor({ clientId, baseUrl }: { clientId: string; baseUrl: string }) {
+  constructor({
+    clientId,
+    baseUrl,
+    ecosystem,
+  }: {
+    clientId: string;
+    baseUrl: string;
+    ecosystem?: Ecosystem;
+  }) {
     super({
-      iframeId: IN_APP_WALLET_IFRAME_ID,
+      iframeId: IN_APP_WALLET_IFRAME_ID + (ecosystem?.id || ""),
       link: createInAppWalletIframeLink({
         clientId,
         path: IN_APP_WALLET_PATH,
+        ecosystem,
         baseUrl,
       }).href,
       baseUrl,
       container: document.body,
     });
     this.clientId = clientId;
+    this.ecosystem = ecosystem;
   }
 
   /**
@@ -33,6 +45,7 @@ export class InAppWalletIframeCommunicator<
   override async onIframeLoadedInitVariables() {
     const localStorage = new LocalStorage({
       clientId: this.clientId,
+      ecosystemId: this.ecosystem?.id,
     });
 
     return {
@@ -40,6 +53,8 @@ export class InAppWalletIframeCommunicator<
       deviceShareStored: await localStorage.getDeviceShare(),
       walletUserId: await localStorage.getWalletUserId(),
       clientId: this.clientId,
+      partnerId: this.ecosystem?.partnerId,
+      ecosystemId: this.ecosystem?.id,
     };
   }
 }
@@ -52,11 +67,13 @@ export function createInAppWalletIframeLink({
   clientId,
   baseUrl,
   path,
+  ecosystem,
   queryParams,
 }: {
   clientId: string;
   baseUrl: string;
   path: string;
+  ecosystem?: Ecosystem;
   queryParams?: { [key: string]: string | number };
 }) {
   const inAppWalletUrl = new URL(`${path}`, baseUrl);
@@ -69,6 +86,12 @@ export function createInAppWalletIframeLink({
     }
   }
   inAppWalletUrl.searchParams.set("clientId", clientId);
+  if (ecosystem?.partnerId !== undefined) {
+    inAppWalletUrl.searchParams.set("partnerId", ecosystem.partnerId);
+  }
+  if (ecosystem?.id !== undefined) {
+    inAppWalletUrl.searchParams.set("ecosystemId", ecosystem.id);
+  }
   return inAppWalletUrl;
 }
 export const IN_APP_WALLET_IFRAME_ID = "thirdweb-in-app-wallet-iframe";

package/src/wallets/native/create-wallet.ts

@@ -8,6 +8,7 @@ import type { WCSupportedWalletIds } from "../__generated__/wallet-ids.js";
 import { coinbaseWalletSDK } from "../coinbase/coinbase-wallet.js";
 import { getCoinbaseMobileProvider } from "../coinbase/coinbaseMobileSDK.js";
 import { COINBASE } from "../constants.js";
+import { isEcosystemWallet } from "../ecosystem/is-ecosystem-wallet.js";
 import { inAppWallet } from "../in-app/native/in-app.js";
 import type { Account, Wallet } from "../interfaces/wallet.js";
 import { smartWallet } from "../smart/smart-wallet.js";
@@ -40,11 +41,11 @@ export function createWallet<const ID extends WalletId>(
 ): Wallet<ID> {
   const [id, creationOptions] = args;
 
-  switch (id) {
+  switch (true) {
     /**
      * SMART WALLET
      */
-    case "smart": {
+    case id === "smart": {
       // same as web
       return smartWallet(
         creationOptions as CreateWalletArgs<"smart">[1],
@@ -53,18 +54,27 @@ export function createWallet<const ID extends WalletId>(
     /**
      * IN-APP WALLET
      */
-    case "embedded":
-    case "inApp": {
+    case id === "embedded":
+    case id === "inApp": {
       return inAppWallet(
         creationOptions as CreateWalletArgs<"inApp">[1],
       ) as Wallet<ID>;
     }
 
+    /**
+     * ECOSYSTEM WALLETS
+     */
+    case isEcosystemWallet(id): {
+      throw new Error(
+        "Ecosystem wallets are not yet supported in the React Native SDK",
+      );
+    }
+
     /**
      * COINBASE WALLET VIA SDK
      * -> if no injected coinbase found, we'll use the coinbase SDK
      */
-    case COINBASE: {
+    case id === COINBASE: {
       const options = creationOptions as CreateWalletArgs<typeof COINBASE>[1];
       return coinbaseWalletSDK({
         createOptions: options,

package/src/wallets/types.ts

@@ -19,5 +19,9 @@ export type AppMetadata = {
   logoUrl?: string;
 };
 
+export type SocialAuthOption = "google" | "apple" | "facebook";
+
+export type AuthOption = "email" | "phone" | "passkey" | SocialAuthOption;
+
 export type DisconnectFn = () => Promise<void>;
 export type SwitchChainFn = (chain: Chain) => Promise<void>;

package/src/wallets/wallet-connect/receiver/index.ts

@@ -5,12 +5,19 @@ import type { Prettify } from "../../../utils/type-utils.js";
 import type { Wallet } from "../../interfaces/wallet.js";
 import { getDefaultAppMetadata } from "../../utils/defaultDappMetadata.js";
 import { DEFAULT_PROJECT_ID } from "../constants.js";
+import { handleSendRawTransactionRequest } from "./request-handlers/send-raw-transaction.js";
+import { handleSendTransactionRequest } from "./request-handlers/send-transaction.js";
+import { handleSignTransactionRequest } from "./request-handlers/sign-transaction.js";
+import { handleSignTypedDataRequest } from "./request-handlers/sign-typed-data.js";
+import { handleSignRequest } from "./request-handlers/sign.js";
+import { handleSwitchChain } from "./request-handlers/switch-chain.js";
 import {
   getSessions,
   initializeSessionStore,
   removeSession,
 } from "./session-store.js";
 import type {
+  WalletConnectAddEthereumChainRequestParams,
   WalletConnectClient,
   WalletConnectConfig,
   WalletConnectRequestHandlers,
@@ -51,6 +58,11 @@ export type CreateWalletConnectClientOptions = Prettify<
      * Callback triggered whenever a session is disconnected.
      */
     onDisconnect?: (session: WalletConnectSession) => void;
+
+    /**
+     * Callback for handling errors.
+     */
+    onError?: (error: Error) => void;
   }
 >;
 
@@ -64,11 +76,6 @@ export type CreateWalletConnectSessionOptions = {
    * The WalletConnect session URI retrieved from the application to connect with.
    */
   uri: string;
-
-  /**
-   * Callback triggered when the session is successfully created.
-   */
-  onConnect?: (session: WalletConnectSession) => void;
 };
 
 let walletConnectClientCache = new WeakMap<
@@ -83,6 +90,26 @@ export const clearWalletConnectClientCache = () => {
   walletConnectClientCache = new WeakMap<ThirdwebClient, WalletConnectClient>();
 };
 
+/**
+ * Default request handlers for WalletConnect requests.
+ */
+export const DefaultWalletConnectRequestHandlers = {
+  personal_sign: handleSignRequest,
+  eth_sign: handleSignRequest,
+  eth_signTypedData: handleSignTypedDataRequest,
+  eth_signTypedData_v4: handleSignTypedDataRequest,
+  eth_signTransaction: handleSignTransactionRequest,
+  eth_sendTransaction: handleSendTransactionRequest,
+  eth_sendRawTransaction: handleSendRawTransactionRequest,
+  wallet_addEthereumChain: (_: {
+    wallet: Wallet;
+    params: WalletConnectAddEthereumChainRequestParams;
+  }) => {
+    throw new Error("Unsupported request method: wallet_addEthereumChain");
+  },
+  wallet_switchEthereumChain: handleSwitchChain,
+};
+
 /**
  * Creates a new WalletConnect client for interacting with another application.
  * @param options - The options to use to create the WalletConnect client.
@@ -90,7 +117,7 @@ export const clearWalletConnectClientCache = () => {
  * @returns The WalletConnect client. Use this client to connect to a WalletConnect URI with {@link createWalletConnectSession}.
  * @example
  * ```ts
- * import { createWalletConnectClient } from "thirdweb/wallets/wallet-connect";
+ * import { createWalletConnectClient } from "thirdweb/wallets";
  *
  * const client = await createWalletConnectClient({
  *   wallet: wallet,
@@ -99,13 +126,13 @@ export const clearWalletConnectClientCache = () => {
  * ```
  * Pass custom handlers:
  * ```ts
- * import { createWalletConnectClient } from "thirdweb/wallets/wallet-connect";
+ * import { createWalletConnectClient } from "thirdweb/wallets";
  *
  * const client = await createWalletConnectClient({
  *   wallet: wallet,
  *   client: client,
  *   requestHandlers: {
- *     eth_signTransaction: ({ transaction }) => {
+ *     eth_signTransaction: ({ account, chainId, params }) => {
  *       // handle transaction signing
  *     },
  *   },
@@ -113,7 +140,7 @@ export const clearWalletConnectClientCache = () => {
  * ```
  * Pass connect and disconnect callbacks:
  * ```ts
- * import { createWalletConnectClient } from "thirdweb/wallets/wallet-connect";
+ * import { createWalletConnectClient } from "thirdweb/wallets";
  *
  * const client = await createWalletConnectClient({
  *   wallet: wallet,
@@ -154,12 +181,18 @@ export async function createWalletConnectClient(
     "session_proposal",
     async (event: WalletConnectSessionProposalEvent) => {
       const { onSessionProposal } = await import("./session-proposal.js");
-      onSessionProposal({
+      await onSessionProposal({
         wallet,
         walletConnectClient,
         event,
         chains,
         onConnect,
+      }).catch((error) => {
+        if (options.onError) {
+          options.onError(error as Error);
+        } else {
+          throw error;
+        }
       });
     },
   );
@@ -168,11 +201,17 @@ export async function createWalletConnectClient(
     "session_request",
     async (event: WalletConnectSessionRequestEvent) => {
       const { fulfillRequest } = await import("./session-request.js");
-      fulfillRequest({
+      await fulfillRequest({
         wallet,
         walletConnectClient,
         event,
         handlers: requestHandlers,
+      }).catch((error) => {
+        if (options.onError) {
+          options.onError(error as Error);
+        } else {
+          throw error;
+        }
       });
     },
   );
@@ -197,6 +236,12 @@ export async function createWalletConnectClient(
       await disconnectWalletConnectSession({
         session: { topic: event.topic },
         walletConnectClient,
+      }).catch((error) => {
+        if (options.onError) {
+          options.onError(error as Error);
+        } else {
+          throw error;
+        }
       });
     },
   );
@@ -221,7 +266,7 @@ export async function createWalletConnectClient(
  * @param options - The options to use to create the WalletConnect session.
  * @example
  * ```ts
- * import { createWalletConnectClient, createWalletConnectSession } from "thirdweb/wallets/wallet-connect";
+ * import { createWalletConnectClient, createWalletConnectSession } from "thirdweb/wallets";
  *
  * const client = await createWalletConnectClient({
  *   wallet: wallet,
@@ -248,7 +293,7 @@ export function createWalletConnectSession(
  * @returns All active WalletConnect sessions.
  * @example
  * ```ts
- * import { getActiveWalletConnectSessions } from "thirdweb/wallets/wallet-connect";
+ * import { getActiveWalletConnectSessions } from "thirdweb/wallets";
  *
  * const sessions = await getActiveWalletConnectSessions();
  * ```
@@ -265,10 +310,10 @@ export async function getActiveWalletConnectSessions(): Promise<
  * @param options - The options to use to disconnect the WalletConnect session.
  * @example
  * ```ts
- * import { disconnectWalletConnectSession } from "thirdweb/wallets/wallet-connect";
+ * import { disconnectWalletConnectSession } from "thirdweb/wallets";
  *
  * await disconnectWalletConnectSession({
- *   session: { topic: "..." },
+ *   session: mySession,
  *   walletConnectClient: wcClient,
  * });
  * ```

package/src/wallets/wallet-connect/receiver/receiver.test.ts

@@ -148,6 +148,40 @@ describe("createWalletConnectClient", () => {
     await listeners.session_delete?.({ topic: "test" });
     expect(onDisconnect).toHaveBeenCalledWith({ topic: "test" });
   });
+
+  describe("onError handling", () => {
+    it("triggers callback when session_proposal handler throws an error", async () => {
+      const onError = vi.fn();
+      onSessionProposal.mockRejectedValue(new Error("Proposal Error"));
+
+      await createWalletConnectClient({
+        client: TEST_CLIENT,
+        wallet: TEST_IN_APP_WALLET_A,
+        onError,
+      });
+
+      await listeners.session_proposal?.();
+
+      expect(onError).toHaveBeenCalledWith(expect.any(Error));
+      expect(onError).toHaveBeenCalledTimes(1);
+    });
+
+    it("triggers callback when session_request handler throws an error", async () => {
+      const onError = vi.fn();
+      fulfillRequest.mockRejectedValue(new Error("Request Error"));
+
+      await createWalletConnectClient({
+        client: TEST_CLIENT,
+        wallet: TEST_IN_APP_WALLET_A,
+        onError,
+      });
+
+      await listeners.session_request?.();
+
+      expect(onError).toHaveBeenCalledWith(expect.any(Error));
+      expect(onError).toHaveBeenCalledTimes(1);
+    });
+  });
 });
 
 describe("createWalletConnectSession", () => {

package/src/wallets/wallet-connect/receiver/request-handlers/send-raw-transaction.ts

@@ -18,7 +18,7 @@ export async function handleSendRawTransactionRequest(options: {
 
   if (!account.sendRawTransaction) {
     throw new Error(
-      "[WalletConnect] The current account does not support sending raw transactions",
+      "The current account does not support sending raw transactions",
     );
   }
 

package/src/wallets/wallet-connect/receiver/request-handlers/sign-transaction.ts

@@ -21,7 +21,7 @@ export async function handleSignTransactionRequest(options: {
 
   if (!account.signTransaction) {
     throw new Error(
-      "[WalletConnect] The current account does not support signing transactions",
+      "The current account does not support signing transactions",
     );
   }
 

package/src/wallets/wallet-connect/receiver/session-proposal.test.ts

@@ -93,7 +93,7 @@ describe("session_proposal", () => {
     });
 
     await expect(promise).rejects.toThrow(
-      "[WalletConnect] No account connected to provided wallet",
+      "No account connected to provided wallet",
     );
   });
 
@@ -200,7 +200,7 @@ describe("session_proposal", () => {
       event: proposal,
     });
     await expect(promise).rejects.toThrow(
-      "[WalletConnect] No EIP155 namespace found in Wallet Connect session proposal",
+      "No EIP155 namespace found in Wallet Connect session proposal",
     );
   });
 

package/src/wallets/wallet-connect/receiver/session-proposal.ts

@@ -22,7 +22,7 @@ export async function onSessionProposal(options: {
 
   const account = wallet.getAccount();
   if (!account) {
-    throw new Error("[WalletConnect] No account connected to provided wallet");
+    throw new Error("No account connected to provided wallet");
   }
 
   const origin = event.verifyContext?.verified?.origin;
@@ -79,7 +79,7 @@ export async function acceptSessionProposal({
     !sessionProposal.params.optionalNamespaces?.eip155
   ) {
     throw new Error(
-      "[WalletConnect] No EIP155 namespace found in Wallet Connect session proposal",
+      "No EIP155 namespace found in Wallet Connect session proposal",
     );
   }