[SDK] Feature: Adds EIP-1193 Adapter

packages/thirdweb/scripts/wallets/extra-wallets.json

@@ -91,5 +91,33 @@
       "native": null,
       "universal": null
     }
+  },
+  {
+    "id": "abstract",
+    "name": "Abstract Global Wallet",
+    "homepage": "https://abs.xyz/",
+    "image_id": "abstract.png",
+    "app": {
+      "browser": null,
+      "ios": null,
+      "android": null,
+      "mac": null,
+      "windows": null,
+      "linux": null,
+      "chrome": null,
+      "firefox": null,
+      "safari": null,
+      "edge": null,
+      "opera": null
+    },
+    "rdns": "xyz.abs",
+    "mobile": {
+      "native": null,
+      "universal": null
+    },
+    "desktop": {
+      "native": null,
+      "universal": null
+    }
   }
 ]

packages/thirdweb/src/adapters/eip1193/from-eip1193.ts

@@ -0,0 +1,136 @@
+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";
+
+export type FromEip1193AdapterOptions = {
+  provider: EIP1193Provider | (() => Promise<EIP1193Provider>);
+  walletId?: WalletId;
+};
+
+/**
+ * Converts an EIP1193 provider to a Thirdweb wallet.
+ *
+ * @param options - The options for converting an EIP1193 provider to a Thirdweb wallet.
+ * @returns A Thirdweb wallet.
+ * @example
+ * ```ts
+ * import { EIP1193 } from "thirdweb/wallets";
+ * const wallet = EIP1193.fromProvider({ provider });
+ *
+ * // ... now you can use wallet with ConnectButton, useConnect, etc
+ * ```
+ * @walletUtils
+ */
+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: (chain: Chain) => Promise<void> = async () => {
+    throw new Error("Not implemented");
+  };
+
+  return {
+    id: options.walletId as WalletId,
+    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;
+      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;
+      trackConnect({
+        client: connectOptions.client,
+        walletType: id,
+        walletAddress: account.address,
+      });
+      // return account
+      return account;
+    },
+    disconnect: async () => {
+      reset();
+      await handleDisconnect();
+    },
+    switchChain: (c) => handleSwitchChain(c),
+  };
+}

packages/thirdweb/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";

packages/thirdweb/src/adapters/eip1193/to-eip1193.ts

@@ -0,0 +1,111 @@
+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 an EIP1193 provider to a Thirdweb wallet.
+ *
+ * @param options - The options for converting an EIP1193 provider to a Thirdweb wallet.
+ * @returns A Thirdweb wallet.
+ * @example
+ * ```ts
+ * import { EIP1193 } from "thirdweb/wallets";
+ * const provider = EIP1193.toProvider({ wallet, chain, client });
+ *
+ * // ... now you can use this providers with third party libraries
+ * ```
+ * @walletUtils
+ */
+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);
+    },
+  };
+}

packages/thirdweb/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>;
+};

packages/thirdweb/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;

packages/thirdweb/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 = () => {

packages/thirdweb/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

packages/thirdweb/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();