Headless WalletConnect Integration (#3181)

Author: gregfromstl

.changeset/cool-coats-march.md

@@ -0,0 +1,52 @@
+---
+"thirdweb": minor
+---
+
+Adds headless functions for creating and managing a WalletConnect session with a connected wallet
+
+### `createWalletConnectClient`
+
+```ts
+import { createWalletConnectClient } from "thirdweb/wallets/wallet-connect";
+
+createWalletConnectClient({
+  client: client,
+  wallet: wallet,
+  onConnect: (session: any) => {
+    alert("Connected");
+  },
+  onDisconnect: (session: any) => {
+    alert("Disconnected");
+  },
+});
+```
+
+### `createWalletConnectSession`
+
+```ts
+import { createWalletConnectSession } from "thirdweb/wallets/wallet-connect";
+
+createWalletConnectSession({
+  walletConnectClient: wcClient,
+  uri: "wc:...",
+});
+```
+
+### `getWalletConnectSessions`
+
+```ts
+import {
+  getWalletConnectSession,
+  type WalletConnectSession,
+} from "thirdweb/wallets/wallet-connect";
+
+const sessions: WalletConnectSession[] = await getWalletConnectSessions();
+```
+
+### `disconnectWalletConnectClient`
+
+```ts
+import { disconnectWalletConnectClient } from "thirdweb/wallets/wallet-connect";
+
+disconnectWalletConnectClient({ session, walletConnectClient: wcClient });
+```

packages/thirdweb/package.json

@@ -189,6 +189,7 @@
     "@radix-ui/react-tooltip": "1.0.7",
     "@tanstack/react-query": "5.29.2",
     "@walletconnect/ethereum-provider": "2.12.2",
+    "@walletconnect/sign-client": "^2.13.1",
     "abitype": "1.0.0",
     "fast-text-encoding": "^1.0.6",
     "fuse.js": "7.0.0",

packages/thirdweb/src/exports/wallets/wallet-connect.ts

@@ -0,0 +1,10 @@
+export {
+  createWalletConnectClient,
+  createWalletConnectSession,
+  disconnectWalletConnectSession,
+  getActiveWalletConnectSessions,
+} from "../../wallets/wallet-connect/consumer/index.js";
+export type {
+  WalletConnectClient,
+  WalletConnectSession,
+} from "../../wallets/wallet-connect/consumer/types.js";

packages/thirdweb/src/wallets/create-wallet.ts

@@ -150,7 +150,9 @@ export function createWallet<const ID extends WalletId>(
           }
 
           if (options && "client" in options) {
-            const { autoConnectWC } = await import("./wallet-connect/index.js");
+            const { autoConnectWC } = await import(
+              "./wallet-connect/controller.js"
+            );
 
             const [
               connectedAccount,
@@ -179,7 +181,9 @@ export function createWallet<const ID extends WalletId>(
         },
         connect: async (options) => {
           async function wcConnect(wcOptions: WCConnectOptions) {
-            const { connectWC } = await import("./wallet-connect/index.js");
+            const { connectWC } = await import(
+              "./wallet-connect/controller.js"
+            );
 
             const [
               connectedAccount,

packages/thirdweb/src/wallets/eip5792/get-calls-status.ts

@@ -4,7 +4,7 @@ import { isInAppWallet } from "../in-app/core/wallet/index.js";
 import { getInjectedProvider } from "../injected/index.js";
 import type { Wallet } from "../interfaces/wallet.js";
 import { isSmartWallet } from "../smart/index.js";
-import { isWalletConnect } from "../wallet-connect/index.js";
+import { isWalletConnect } from "../wallet-connect/controller.js";
 import type { GetCallsStatusResponse, WalletSendCallsId } from "./types.js";
 
 export type GetCallsStatusOptions = {

packages/thirdweb/src/wallets/eip5792/get-capabilities.ts

@@ -4,7 +4,7 @@ import { isInAppWallet } from "../in-app/core/wallet/index.js";
 import { getInjectedProvider } from "../injected/index.js";
 import type { Wallet } from "../interfaces/wallet.js";
 import { isSmartWallet } from "../smart/index.js";
-import { isWalletConnect } from "../wallet-connect/index.js";
+import { isWalletConnect } from "../wallet-connect/controller.js";
 import type { WalletId } from "../wallet-types.js";
 import type { WalletCapabilities, WalletCapabilitiesRecord } from "./types.js";
 

packages/thirdweb/src/wallets/eip5792/send-calls.ts

@@ -13,7 +13,7 @@ import { isInAppWallet } from "../in-app/core/wallet/index.js";
 import { getInjectedProvider } from "../injected/index.js";
 import type { Wallet } from "../interfaces/wallet.js";
 import { isSmartWallet } from "../smart/index.js";
-import { isWalletConnect } from "../wallet-connect/index.js";
+import { isWalletConnect } from "../wallet-connect/controller.js";
 import type { WalletId } from "../wallet-types.js";
 import type {
   EIP5792Call,

packages/thirdweb/src/wallets/eip5792/show-calls-status.ts

@@ -3,7 +3,7 @@ import { isInAppWallet } from "../in-app/core/wallet/index.js";
 import { getInjectedProvider } from "../injected/index.js";
 import type { Wallet } from "../interfaces/wallet.js";
 import { isSmartWallet } from "../smart/index.js";
-import { isWalletConnect } from "../wallet-connect/index.js";
+import { isWalletConnect } from "../wallet-connect/controller.js";
 import type { WalletSendCallsId } from "./types.js";
 
 export type ShowCallsStatusOptions = {

packages/thirdweb/src/wallets/in-app/core/constants/settings.ts

@@ -60,6 +60,12 @@ export const DEVICE_SHARE_LOCAL_STORAGE_NAME = (
   userId: string,
 ) => `${DEVICE_SHARE_LOCAL_STORAGE_PREFIX}-${clientId}-${userId}`;
 
+/**
+ * @internal
+ */
+export const WALLET_CONNECT_SESSIONS_LOCAL_STORAGE_NAME = (clientId: string) =>
+  `walletConnectSessions-${clientId}`;
+
 /**
  * @internal
  */

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

@@ -2,6 +2,7 @@ import {
   AUTH_TOKEN_LOCAL_STORAGE_NAME,
   DEVICE_SHARE_LOCAL_STORAGE_NAME,
   PASSKEY_CREDENTIAL_ID_LOCAL_STORAGE_NAME,
+  WALLET_CONNECT_SESSIONS_LOCAL_STORAGE_NAME,
   WALLET_USER_ID_LOCAL_STORAGE_NAME,
 } from "../../../core/constants/settings.js";
 
@@ -44,6 +45,25 @@ export class LocalStorage {
     return false;
   }
 
+  /**
+   * @internal
+   */
+  async getWalletConnectSessions(): Promise<string | null> {
+    return this.getItem(
+      WALLET_CONNECT_SESSIONS_LOCAL_STORAGE_NAME(this.clientId),
+    );
+  }
+
+  /**
+   * @internal
+   */
+  async saveWalletConnectSessions(stringifiedSessions: string): Promise<void> {
+    await this.setItem(
+      WALLET_CONNECT_SESSIONS_LOCAL_STORAGE_NAME(this.clientId),
+      stringifiedSessions,
+    );
+  }
+
   /**
    * @internal
    */