Add thirdweb inAppWallet connector

packages/connectors/package.json

@@ -37,6 +37,7 @@
   "peerDependencies": {
     "@wagmi/core": "workspace:*",
     "typescript": ">=5.0.4",
+    "thirdweb": "^5.68.0",
     "viem": "2.x"
   },
   "peerDependenciesMeta": {
@@ -54,7 +55,8 @@
   },
   "devDependencies": {
     "@wagmi/core": "workspace:*",
-    "msw": "^2.4.9"
+    "msw": "^2.4.9",
+    "thirdweb": "5.68.0"
   },
   "contributors": ["awkweb.eth <[email protected]>", "jxom.eth <[email protected]>"],
   "funding": "https://github.com/sponsors/wevm",

packages/connectors/src/exports/index.ts

@@ -20,4 +20,6 @@ export {
   walletConnect,
 } from '../walletConnect.js'
 
+export { inAppWallet } from '../thirdweb.js'
+
 export { version } from '../version.js'

packages/connectors/src/thirdweb.test.ts

@@ -0,0 +1,17 @@
+import { config } from '@wagmi/test'
+import { expect, test } from 'vitest'
+
+import { inAppWalletConnector } from './thirdweb.js'
+import { createThirdwebClient } from 'thirdweb'
+
+/**
+ * To manually test this connector:
+ * 1. get a clientId from https://thirdweb.com
+ * 2. clone the wagmi starter repo
+ * 3. add this connector to the wagmi config
+ */
+test('setup', () => {
+  const connectorFn = inAppWalletConnector({ client: createThirdwebClient({ clientId: "testClientId" }), strategy: "google" })
+  const connector = config._internal.connectors.setup(connectorFn)
+  expect(connector.name).toEqual('In-App wallet')
+})

packages/connectors/src/thirdweb.ts

@@ -0,0 +1,101 @@
+import { defineChain } from "thirdweb";
+import { createConnector, type CreateConnectorFn } from "@wagmi/core";
+import type { Address } from "viem/accounts";
+import {
+  ecosystemWallet,
+  EIP1193,
+  inAppWallet as thirdwebInAppWallet,
+  type InAppWalletConnectionOptions,
+} from "thirdweb/wallets";
+import type { InAppWalletCreationOptions } from "thirdweb/wallets/in-app";
+
+/**
+ * Connect to an in-app wallet using the auth strategy of your choice.
+ * @param args - Options for the in-app wallet connection.
+ * @returns A wagmi connector.
+ * @example
+ * ```ts
+ * import { createThirdwebClient } from "thirdweb";
+ * import { http, createConfig } from "wagmi";
+ * import { inAppWallet } from "@wagmi/connectors";
+ *
+ * const client = createThirdwebClient({
+ *   clientId: "...",
+ * })
+ *
+ * export const config = createConfig({
+ *  chains: [sepolia],
+ *  connectors: [
+ *    inAppWallet({
+ *      client,
+ *      strategy: "google",
+ *   }),
+ *  ],
+ *  transports: {
+ *    [sepolia.id]: http(),
+ *  },
+ * });
+ * ```
+ */
+export function inAppWallet(
+  args: InAppWalletConnectionOptions &
+    InAppWalletCreationOptions & { ecosystemId?: `ecosystem.${string}` }
+): CreateConnectorFn {
+  const { client, ecosystemId } = args;
+  const wallet = ecosystemId
+    ? ecosystemWallet(ecosystemId, { partnerId: args.partnerId })
+    : thirdwebInAppWallet(args);
+  return createConnector((config) => ({
+    id: "in-app-wallet",
+    name: "In-App wallet",
+    type: "in-app",
+    connect: async (params) => {
+      const chain = defineChain(params?.chainId || 1);
+      const account = params?.isReconnecting
+        ? await wallet.autoConnect({
+            client,
+            chain,
+          })
+        : await wallet.connect(args);
+      return { accounts: [account.address as Address], chainId: chain.id };
+    },
+    disconnect: async () => {
+      await wallet.disconnect();
+    },
+    getAccounts: async () => {
+      const account = wallet.getAccount();
+      if (!account) {
+        throw new Error("Wallet not connected");
+      }
+      return [account.address as Address];
+    },
+    getChainId: async () => {
+      return wallet.getChain()?.id || 1;
+    },
+    getProvider: async (params) => {
+      return EIP1193.toProvider({
+        wallet,
+        client,
+        chain: wallet.getChain() || defineChain(params?.chainId || 1),
+      });
+    },
+    isAuthorized: async () => true,
+    switchChain: async (params) => {
+      const chain = config.chains.find((x) => x.id === params.chainId);
+      if (!chain) {
+        throw new Error(`Chain ${params.chainId} not supported`);
+      }
+      await wallet.switchChain(defineChain(chain.id));
+      return chain;
+    },
+    onAccountsChanged: () => {
+      // no-op
+    },
+    onChainChanged: () => {
+      // no-op
+    },
+    onDisconnect: () => {
+      // no-op
+    },
+  }));
+}