thirdweb 5.67.1-nightly-040e478ad6cf630dedf666eac7abeb668d323666-20241113000339 → 5.68.0

package/src/adapters/eip1193/from-eip1193.ts

@@ -0,0 +1,171 @@
+import * as ox__Hex from "ox/Hex";
+import { trackConnect } from "../../analytics/track/connect.js";
+import type { Chain } from "../../chains/types.js";
+import { getCachedChainIfExists } from "../../chains/utils.js";
+import {
+  autoConnectEip1193Wallet,
+  connectEip1193Wallet,
+} from "../../wallets/injected/index.js";
+import type { Account, Wallet } from "../../wallets/interfaces/wallet.js";
+import { createWalletEmitter } from "../../wallets/wallet-emitter.js";
+import type { WalletId } from "../../wallets/wallet-types.js";
+import type { EIP1193Provider } from "./types.js";
+
+/**
+ * Options for creating an EIP-1193 provider adapter.
+ */
+export type FromEip1193AdapterOptions = {
+  provider: EIP1193Provider | (() => Promise<EIP1193Provider>);
+  walletId?: WalletId;
+};
+
+/**
+ * Creates a Thirdweb wallet from an EIP-1193 compatible provider.
+ *
+ * This adapter allows you to use any EIP-1193 provider (like MetaMask, WalletConnect, etc.) as a Thirdweb wallet.
+ * It handles all the necessary conversions between the EIP-1193 interface and Thirdweb's wallet interface.
+ *
+ * @param options - Configuration options for creating the wallet adapter
+ * @param options.provider - An EIP-1193 compatible provider or a function that returns one
+ * @param options.walletId - Optional custom wallet ID to identify this provider (defaults to "adapter")
+ * @returns A Thirdweb wallet instance that wraps the EIP-1193 provider
+ *
+ * @example
+ * ```ts
+ * import { EIP1193 } from "thirdweb/wallets";
+ *
+ * // Create a Thirdweb wallet from MetaMask's provider
+ * const wallet = EIP1193.fromProvider({
+ *   provider: window.ethereum,
+ *   walletId: "io.metamask"
+ * });
+ *
+ * // Use like any other Thirdweb wallet
+ * const account = await wallet.connect({
+ *   client: createThirdwebClient({ clientId: "..." })
+ * });
+ *
+ * // Sign messages
+ * await account.signMessage({ message: "Hello World" });
+ *
+ * // Send transactions
+ * await account.sendTransaction({
+ *   to: "0x...",
+ *   value: 1000000000000000000n
+ * });
+ * ```
+ */
+export function fromProvider(options: FromEip1193AdapterOptions): Wallet {
+  const id: WalletId = options.walletId ?? "adapter";
+  const emitter = createWalletEmitter();
+  let account: Account | undefined = undefined;
+  let chain: Chain | undefined = undefined;
+  let provider: EIP1193Provider | undefined = undefined;
+  const getProvider = async () => {
+    if (!provider) {
+      provider =
+        typeof options.provider === "function"
+          ? await options.provider()
+          : options.provider;
+    }
+    return provider;
+  };
+
+  const unsubscribeChain = emitter.subscribe("chainChanged", (newChain) => {
+    chain = newChain;
+  });
+
+  function reset() {
+    account = undefined;
+    chain = undefined;
+  }
+
+  let handleDisconnect = async () => {};
+
+  const unsubscribeDisconnect = emitter.subscribe("disconnect", () => {
+    reset();
+    unsubscribeChain();
+    unsubscribeDisconnect();
+  });
+
+  emitter.subscribe("accountChanged", (_account) => {
+    account = _account;
+  });
+
+  let handleSwitchChain: (c: Chain) => Promise<void> = async (c) => {
+    await provider?.request({
+      method: "wallet_switchEthereumChain",
+      params: [{ chainId: ox__Hex.fromNumber(c.id) }],
+    });
+  };
+
+  return {
+    id,
+    subscribe: emitter.subscribe,
+    getConfig: () => undefined,
+    getChain() {
+      if (!chain) {
+        return undefined;
+      }
+
+      chain = getCachedChainIfExists(chain.id) || chain;
+      return chain;
+    },
+    getAccount: () => account,
+    connect: async (connectOptions) => {
+      const [connectedAccount, connectedChain, doDisconnect, doSwitchChain] =
+        await connectEip1193Wallet({
+          id,
+          provider: await getProvider(),
+          client: connectOptions.client,
+          chain: connectOptions.chain,
+          emitter,
+        });
+      // set the states
+      account = connectedAccount;
+      chain = connectedChain;
+      handleDisconnect = doDisconnect;
+      handleSwitchChain = doSwitchChain;
+      emitter.emit("onConnect", connectOptions);
+      trackConnect({
+        client: connectOptions.client,
+        walletType: id,
+        walletAddress: account.address,
+      });
+      // return account
+      return account;
+    },
+    autoConnect: async (connectOptions) => {
+      const [connectedAccount, connectedChain, doDisconnect, doSwitchChain] =
+        await autoConnectEip1193Wallet({
+          id,
+          provider: await getProvider(),
+          emitter,
+          chain: connectOptions.chain,
+          client: connectOptions.client,
+        });
+      // set the states
+      account = connectedAccount;
+      chain = connectedChain;
+      handleDisconnect = doDisconnect;
+      handleSwitchChain = doSwitchChain;
+      emitter.emit("onConnect", connectOptions);
+      trackConnect({
+        client: connectOptions.client,
+        walletType: id,
+        walletAddress: account.address,
+      });
+      // return account
+      return account;
+    },
+    disconnect: async () => {
+      reset();
+      await handleDisconnect();
+      emitter.emit("disconnect", undefined);
+    },
+    switchChain: async (c) => {
+      await handleSwitchChain(c);
+      emitter.emit("chainChanged", c);
+    },
+  };
+}

package/src/adapters/eip1193/index.ts

@@ -0,0 +1,11 @@
+export {
+  type FromEip1193AdapterOptions,
+  fromProvider,
+} from "./from-eip1193.js";
+
+export {
+  type ToEip1193ProviderOptions,
+  toProvider,
+} from "./to-eip1193.js";
+
+export type { EIP1193Provider } from "./types.js";

package/src/adapters/eip1193/to-eip1193.test.ts

@@ -0,0 +1,187 @@
+import * as ox__Hex from "ox/Hex";
+import { describe, expect, test, vi } from "vitest";
+import { TEST_WALLET_B } from "~test/addresses.js";
+import { TEST_ACCOUNT_A } from "~test/test-wallets.js";
+import { typedData } from "~test/typed-data.js";
+import { ANVIL_CHAIN } from "../../../test/src/chains.js";
+import { TEST_CLIENT } from "../../../test/src/test-clients.js";
+import { prepareTransaction } from "../../transaction/prepare-transaction.js";
+import type { Account, Wallet } from "../../wallets/interfaces/wallet.js";
+import { createWalletEmitter } from "../../wallets/wallet-emitter.js";
+import { toProvider } from "./to-eip1193.js";
+
+describe("toProvider", () => {
+  const mockAccount: Account = TEST_ACCOUNT_A;
+  const emitter = createWalletEmitter();
+
+  const mockWallet: Wallet = {
+    id: "io.metamask",
+    subscribe: emitter.subscribe,
+    connect: vi.fn().mockResolvedValue(mockAccount),
+    autoConnect: vi.fn().mockResolvedValue(mockAccount),
+    disconnect: vi.fn(),
+    getAccount: () => mockAccount,
+    getChain: () => ANVIL_CHAIN,
+    getConfig: () => undefined,
+    switchChain: vi.fn(),
+  };
+
+  test("should create a provider with the correct interface", () => {
+    const provider = toProvider({
+      wallet: mockWallet,
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+    });
+
+    expect(provider.on).toBeDefined();
+    expect(provider.removeListener).toBeDefined();
+    expect(provider.request).toBeDefined();
+  });
+
+  test("should handle eth_requestAccounts", async () => {
+    const provider = toProvider({
+      wallet: mockWallet,
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+    });
+
+    const accounts = await provider.request({
+      method: "eth_requestAccounts",
+      params: [],
+    });
+
+    expect(accounts).toEqual([mockAccount.address]);
+  });
+
+  test("should handle eth_accounts", async () => {
+    const provider = toProvider({
+      wallet: mockWallet,
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+    });
+
+    const accounts = await provider.request({
+      method: "eth_accounts",
+      params: [],
+    });
+
+    expect(accounts).toEqual([mockAccount.address]);
+  });
+
+  test("should handle personal_sign", async () => {
+    const provider = toProvider({
+      wallet: mockWallet,
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+    });
+
+    const message = "0x48656c6c6f20776f726c64";
+    const result = await provider.request({
+      method: "personal_sign",
+      params: [message, mockAccount.address],
+    });
+
+    expect(result).toEqual(
+      "0x15a3fe3974ebe469b00e67ad67bb3860ad3fc3d739287cdbc4ba558ce7130bee205e5e38d6ef156f1ff6a4df17bfa72a1e61c429f92613f3efbc58394d00c9891b",
+    );
+  });
+
+  test("should handle eth_signTypedData_v4", async () => {
+    const provider = toProvider({
+      wallet: mockWallet,
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+    });
+
+    const result = await provider.request({
+      method: "eth_signTypedData_v4",
+      params: [mockAccount.address, JSON.stringify(typedData.basic)],
+    });
+
+    expect(result).toEqual(
+      "0x32f3d5975ba38d6c2fba9b95d5cbed1febaa68003d3d588d51f2de522ad54117760cfc249470a75232552e43991f53953a3d74edf6944553c6bef2469bb9e5921b",
+    );
+  });
+
+  test("should handle eth_sendTransaction", async () => {
+    const provider = toProvider({
+      wallet: mockWallet,
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+    });
+
+    const tx = prepareTransaction({
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+      value: 100n,
+      to: TEST_WALLET_B,
+    });
+
+    const result = await provider.request({
+      method: "eth_sendTransaction",
+      params: [tx],
+    });
+
+    expect(ox__Hex.validate(result)).toBe(true);
+  });
+
+  test("should handle eth_estimateGas", async () => {
+    const provider = toProvider({
+      wallet: mockWallet,
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+    });
+
+    const tx = prepareTransaction({
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+      value: 100n,
+      to: TEST_WALLET_B,
+    });
+
+    const result = await provider.request({
+      method: "eth_estimateGas",
+      params: [tx],
+    });
+
+    expect(result).toBeGreaterThan(0n);
+  });
+
+  test("should throw error when account is not connected", async () => {
+    const walletWithoutAccount = {
+      ...mockWallet,
+      getAccount: () => undefined,
+    };
+
+    const provider = toProvider({
+      wallet: walletWithoutAccount,
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+    });
+
+    await expect(
+      provider.request({
+        method: "eth_accounts",
+        params: [],
+      }),
+    ).rejects.toThrow("Account not connected");
+  });
+
+  test("should use custom connect override when provided", async () => {
+    const customConnect = vi.fn().mockResolvedValue(mockAccount);
+
+    const provider = toProvider({
+      wallet: mockWallet,
+      chain: ANVIL_CHAIN,
+      client: TEST_CLIENT,
+      connectOverride: customConnect,
+    });
+
+    await provider.request({
+      method: "eth_requestAccounts",
+      params: [],
+    });
+
+    expect(customConnect).toHaveBeenCalledWith(mockWallet);
+  });
+});

package/src/adapters/eip1193/to-eip1193.ts

@@ -0,0 +1,132 @@
+import type { Account } from "viem/accounts";
+
+import type { Chain } from "../../chains/types.js";
+import type { ThirdwebClient } from "../../client/client.js";
+import { getRpcClient } from "../../rpc/rpc.js";
+import { estimateGas } from "../../transaction/actions/estimate-gas.js";
+import { sendTransaction } from "../../transaction/actions/send-transaction.js";
+import { prepareTransaction } from "../../transaction/prepare-transaction.js";
+import type { Wallet } from "../../wallets/interfaces/wallet.js";
+import type { EIP1193Provider } from "./types.js";
+
+export type ToEip1193ProviderOptions = {
+  wallet: Wallet;
+  chain: Chain;
+  client: ThirdwebClient;
+  connectOverride?: (wallet: Wallet) => Promise<Account>;
+};
+
+/**
+ * Converts a Thirdweb wallet into an EIP-1193 compatible provider.
+ *
+ * This adapter allows you to use a Thirdweb wallet with any library or dApp that expects an EIP-1193 provider.
+ * The provider implements the standard EIP-1193 interface including request handling and event subscription.
+ *
+ * @param options - Configuration options for creating the provider
+ * @param options.wallet - The Thirdweb wallet to adapt into a provider
+ * @param options.chain - The blockchain chain to connect to
+ * @param options.client - The Thirdweb client instance
+ * @param options.connectOverride - Optional custom connect handler to override default connection behavior
+ * @returns An EIP-1193 compatible provider that wraps the Thirdweb wallet
+ *
+ * @example
+ * ```ts
+ * import { EIP1193 } from "thirdweb/wallets";
+ *
+ * // Create an EIP-1193 provider from a Thirdweb wallet
+ * const provider = EIP1193.toProvider({
+ *   wallet,
+ *   chain: ethereum,
+ *   client: createThirdwebClient({ clientId: "..." })
+ * });
+ *
+ * // Use with any EIP-1193 compatible library
+ * const accounts = await provider.request({
+ *   method: "eth_requestAccounts"
+ * });
+ *
+ * // Listen for events
+ * provider.on("accountsChanged", (accounts) => {
+ *   console.log("Active accounts:", accounts);
+ * });
+ * ```
+ */
+export function toProvider(options: ToEip1193ProviderOptions): EIP1193Provider {
+  const { chain, client, wallet, connectOverride } = options;
+  const rpcClient = getRpcClient({ client, chain });
+  return {
+    on: wallet.subscribe,
+    removeListener: () => {
+      // should invoke the return fn from subscribe instead
+    },
+    request: async (request) => {
+      if (request.method === "eth_sendTransaction") {
+        const account = wallet.getAccount();
+        if (!account) {
+          throw new Error("Account not connected");
+        }
+        const result = await sendTransaction({
+          transaction: prepareTransaction({
+            ...request.params[0],
+            chain,
+            client,
+          }),
+          account: account,
+        });
+        return result.transactionHash;
+      }
+      if (request.method === "eth_estimateGas") {
+        const account = wallet.getAccount();
+        if (!account) {
+          throw new Error("Account not connected");
+        }
+        return estimateGas({
+          transaction: prepareTransaction({
+            ...request.params[0],
+            chain,
+            client,
+          }),
+          account,
+        });
+      }
+      if (request.method === "personal_sign") {
+        const account = wallet.getAccount();
+        if (!account) {
+          throw new Error("Account not connected");
+        }
+        return account.signMessage({
+          message: {
+            raw: request.params[0],
+          },
+        });
+      }
+      if (request.method === "eth_signTypedData_v4") {
+        const account = wallet.getAccount();
+        if (!account) {
+          throw new Error("Account not connected");
+        }
+        const data = JSON.parse(request.params[1]);
+        return account.signTypedData(data);
+      }
+      if (request.method === "eth_accounts") {
+        const account = wallet.getAccount();
+        if (!account) {
+          throw new Error("Account not connected");
+        }
+        return [account.address];
+      }
+      if (request.method === "eth_requestAccounts") {
+        const account = connectOverride
+          ? await connectOverride(wallet)
+          : await wallet.connect({
+              client,
+            });
+        if (!account) {
+          throw new Error("Unable to connect wallet");
+        }
+        return [account.address];
+      }
+      return rpcClient(request);
+    },
+  };
+}

package/src/adapters/eip1193/types.ts

@@ -0,0 +1,9 @@
+// loose interface on purpose to adapt to any version of viem, ethers, ox, web3js, etc
+export type EIP1193Provider = {
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  on(event: any, listener: (params: any) => any): void;
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  removeListener(event: any, listener: (params: any) => any): void;
+  // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+  request: (params: any) => Promise<any>;
+};

package/src/analytics/track/transaction.ts

@@ -9,7 +9,7 @@ type TransactionEvent = {
   ecosystem?: Ecosystem;
   transactionHash?: string;
   walletAddress?: string;
-  walletType?: WalletId;
+  walletType?: WalletId | ({} & string);
   chainId?: number;
   contractAddress?: string;
   functionName?: string;

package/src/exports/wallets.native.ts

@@ -134,6 +134,9 @@ export type {
   WalletConnectSession,
 } from "../wallets/wallet-connect/receiver/types.js";
 
+// eip1193
+export * as EIP1193 from "../adapters/eip1193/index.js";
+
 // NOT SUPPORTED
 
 export const injectedProvider = () => {

package/src/exports/wallets.ts

@@ -144,6 +144,9 @@ export type {
   WalletConnectSession,
 } from "../wallets/wallet-connect/receiver/types.js";
 
+// eip1193
+export * as EIP1193 from "../adapters/eip1193/index.js";
+
 // WEB ONLY EXPORTS
 
 // injected

package/src/react/core/hooks/wallets/useAdminWallet.ts

@@ -5,6 +5,7 @@ import { useConnectedWallets } from "./useConnectedWallets.js";
  * Get the admin wallet for the active wallet
  * Useful for smart wallets to get the underlying personal account
  * @returns The admin wallet for the active wallet, or the active wallet if it doesn't have an admin account
+ * @walletConnection
  */
 export function useAdminWallet() {
   const activeWallet = useActiveWallet();

package/src/react/web/ui/ConnectWallet/Modal/AnyWalletConnectUI.tsx

@@ -9,7 +9,6 @@ import type {
   InjectedSupportedWalletIds,
   WCSupportedWalletIds,
 } from "../../../../../wallets/__generated__/wallet-ids.js";
-import { COINBASE } from "../../../../../wallets/constants.js";
 import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { getInstalledWalletProviders } from "../../../../../wallets/injected/mipdStore.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
@@ -197,27 +196,6 @@ export function AnyWalletConnectUI(props: {
     );
   }
 
-  // coinbase wallet sdk
-  if (props.wallet.id === COINBASE) {
-    return (
-      <Suspense fallback={<LoadingScreen />}>
-        <CoinbaseSDKWalletConnectUI
-          locale={locale}
-          onGetStarted={() => {
-            setScreen("get-started");
-          }}
-          onBack={props.onBack}
-          done={props.done}
-          wallet={props.wallet as Wallet<typeof COINBASE>}
-          walletInfo={walletInfo.data}
-          chain={props.chain}
-          client={props.client}
-          size={props.size}
-        />
-      </Suspense>
-    );
-  }
-
   // wallet connect
   if (walletInfo.data.mobile.native || walletInfo.data.mobile.universal) {
     return (
@@ -294,6 +272,27 @@ export function AnyWalletConnectUI(props: {
     );
   }
 
+  // any other known wallet
+  if (props.wallet.id) {
+    return (
+      <Suspense fallback={<LoadingScreen />}>
+        <CoinbaseSDKWalletConnectUI
+          locale={locale}
+          onGetStarted={() => {
+            setScreen("get-started");
+          }}
+          onBack={props.onBack}
+          done={props.done}
+          wallet={props.wallet}
+          walletInfo={walletInfo.data}
+          chain={props.chain}
+          client={props.client}
+          size={props.size}
+        />
+      </Suspense>
+    );
+  }
+
   // if can't connect in any way - show get started screen
   return (
     <GetStartedScreen

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

@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
-import type { COINBASE } from "../../../../wallets/constants.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { WalletInfo } from "../../../../wallets/wallet-info.js";
 import type { InjectedWalletLocale } from "../injected/locale/types.js";
@@ -10,12 +9,12 @@ import { ConnectingScreen } from "./ConnectingScreen.js";
 /**
  * @internal
  */
-function CoinbaseSDKWalletConnectUI(props: {
+function ExternalWalletConnectUI(props: {
   onBack?: () => void;
   onGetStarted: () => void;
   done: () => void;
   locale: InjectedWalletLocale;
-  wallet: Wallet<typeof COINBASE>;
+  wallet: Wallet;
   walletInfo: WalletInfo;
   client: ThirdwebClient;
   chain: Chain | undefined;
@@ -70,4 +69,4 @@ function CoinbaseSDKWalletConnectUI(props: {
   );
 }
 
-export default CoinbaseSDKWalletConnectUI;
+export default ExternalWalletConnectUI;

package/src/transaction/actions/to-serializable-transaction.ts

@@ -1,6 +1,8 @@
 import type { TransactionSerializable } from "viem";
 import { getGasOverridesForTransaction } from "../../gas/fee-data.js";
 import { getRpcClient } from "../../rpc/rpc.js";
+import { getAddress } from "../../utils/address.js";
+import { isZkSyncChain } from "../../utils/any-evm/zksync/isZkSyncChain.js";
 import { resolvePromisedValue } from "../../utils/promise/resolve-promised-value.js";
 import type { PreparedTransaction } from "../prepare-transaction.js";
 import { encode } from "./encode.js";
@@ -45,6 +47,25 @@ export type ToSerializableTransactionOptions = {
 export async function toSerializableTransaction(
   options: ToSerializableTransactionOptions,
 ) {
+  // zk chains require a different rpc method for gas estimation and gas fees
+  const isZkSync = await isZkSyncChain(options.transaction.chain);
+  if (isZkSync) {
+    const { getZkGasFees } = await import(
+      "./zksync/send-eip712-transaction.js"
+    );
+    const { gas, maxFeePerGas, maxPriorityFeePerGas } = await getZkGasFees({
+      transaction: options.transaction,
+      from: options.from ? getAddress(options.from) : undefined,
+    });
+    // passing these values here will avoid re-fetching them below
+    options.transaction = {
+      ...options.transaction,
+      gas,
+      maxFeePerGas,
+      maxPriorityFeePerGas,
+    };
+  }
+
   const rpcRequest = getRpcClient(options.transaction);
   const chainId = options.transaction.chain.id;
   const from = options.from;