@tomo-inc/wallet-connect-protocol 0.0.8 → 0.0.9

package/README.md

@@ -1,20 +1,20 @@
 # @tomo-inc/wallet-connect-protocol
 
-> WalletConnect Protocol SDK for Tomo Wallet - Simple and Easy-to-use WalletConnect Integration
+> WalletConnect Protocol SDK for Tomo Wallet - Pure JavaScript / Framework-Agnostic
 
 ## 📖 Introduction
 
-`@tomo-inc/wallet-connect-protocol` is a lightweight WalletConnect SDK designed specifically for the Tomo Wallet ecosystem. It provides a clean API and out-of-the-box React components for quickly integrating WalletConnect protocol into your applications.
+`@tomo-inc/wallet-connect-protocol` is a lightweight, framework-agnostic WalletConnect SDK designed specifically for the Tomo Wallet ecosystem. It provides a clean JavaScript API for integrating WalletConnect protocol into any application, regardless of the framework you use.
 
 ### ✨ Features
 
-- 🚀 **Simple & Easy** - Provider component and Hooks, ready to use
+- 🚀 **Framework-Agnostic** - Works with vanilla JavaScript, Vue, Angular, Svelte, React, or any other framework
 - 🌐 **Multi-Chain Support** - Supports Ethereum, Solana, Aptos, Cosmos, and more
 - 📱 **QR Code Generation** - Built-in QR code generation with multiple format support
 - 🔗 **URI Management** - Automatic generation and management of WalletConnect URIs
 - 📦 **TypeScript Support** - Full type definitions
-- ⚡ **Lightweight** - Core logic only, no UI dependencies
-- 🎯 **React Friendly** - Native support for React Context and Hooks
+- ⚡ **Lightweight** - Minimal dependencies, no framework overhead
+- 🎯 **Simple API** - Clean, intuitive API design
 
 ## 📦 Installation
 
@@ -29,135 +29,75 @@ npm install @tomo-inc/wallet-connect-protocol
 yarn add @tomo-inc/wallet-connect-protocol
 ```
 
-## 🎯 Framework Support
-
-This SDK supports both **React** and **non-React** frameworks:
-
-### React Usage (Default)
-
-```typescript
-import {
-  WalletConnectProvider,
-  useWalletConnect,
-} from "@tomo-inc/wallet-connect-protocol";
-```
-
-### Pure JavaScript / Non-React Usage
-
-For vanilla JavaScript, Vue, Angular, Svelte, or any other framework:
-
-```typescript
-import {
-  WalletConnectClient,
-  getAllWallets,
-} from "@tomo-inc/wallet-connect-protocol/vanilla";
-```
-
-📖 **See [VANILLA_JS.md](./VANILLA_JS.md) for complete pure JavaScript usage guide with examples for Vue, Angular, Svelte, etc.**
-
 ## 🚀 Quick Start
 
 ### 1. Get Project ID
 
 First, obtain a free Project ID from [WalletConnect Cloud](https://cloud.walletconnect.com).
 
-### 2. Setup Provider
+### 2. Create Client
 
-Wrap your root component with `WalletConnectProvider`:
+```typescript
+import { WalletConnectClient } from "@tomo-inc/wallet-connect-protocol";
 
-```tsx
-import { WalletConnectProvider } from "@tomo-inc/wallet-connect-protocol";
+const client = new WalletConnectClient({
+  projectId: "YOUR_PROJECT_ID",
+  metadata: {
+    name: "My DApp",
+    description: "My awesome decentralized application",
+    url: "https://myapp.com",
+    icons: ["https://myapp.com/icon.png"],
+  },
+});
 
-function App() {
-  return (
-    <WalletConnectProvider
-      config={{
-        projectId: "YOUR_PROJECT_ID",
-        metadata: {
-          name: "My DApp",
-          description: "My awesome decentralized application",
-          url: "https://myapp.com",
-          icons: ["https://myapp.com/icon.png"],
-        },
-      }}
-      autoInit // Auto-initialize
-    >
-      <YourApp />
-    </WalletConnectProvider>
-  );
-}
+// Initialize the client
+await client.initialize();
 ```
 
-### 3. Use Hook
-
-Use the `useWalletConnect` Hook in your components:
-
-```tsx
-import { useWalletConnect } from "@tomo-inc/wallet-connect-protocol";
-import { useState } from "react";
+### 3. Connect
 
-function ConnectButton() {
-  const { connect, uri, generateQRCode, sessions } = useWalletConnect();
-  const [qrCode, setQrCode] = useState<string | null>(null);
+```typescript
+// Create connection and get URI
+const uri = await client.connect();
 
-  const handleConnect = async () => {
-    try {
-      // Create connection and get URI
-      const connectionUri = await connect();
-
-      // Generate QR code
-      const qr = await generateQRCode(connectionUri, {
-        width: 300,
-        margin: 4,
-      });
+// Generate QR code
+const qrCodeBase64 = await client.generateQRCode(uri, {
+  width: 300,
+  margin: 4,
+});
 
-      setQrCode(qr);
-    } catch (error) {
-      console.error("Connection failed:", error);
-    }
-  };
+// Display QR code
+document.getElementById("qr-code").src = qrCodeBase64;
+```
 
-  return (
-    <div>
-      <button onClick={handleConnect}>Connect Wallet</button>
+### 4. Listen to Events
 
-      {qrCode && (
-        <div>
-          <h3>Scan QR Code to Connect</h3>
-          <img src={qrCode} alt="WalletConnect QR Code" />
-        </div>
-      )}
+```typescript
+// Listen for session approval
+client.on("session_update", (session) => {
+  console.log("Session approved:", session);
+  // Handle successful connection
+});
 
-      {sessions.length > 0 && (
-        <div>
-          <h3>Active Sessions</h3>
-          <ul>
-            {sessions.map((session) => (
-              <li key={session.topic}>{session.peer.metadata.name}</li>
-            ))}
-          </ul>
-        </div>
-      )}
-    </div>
-  );
-}
+// Listen for disconnection
+client.on("session_delete", (data) => {
+  console.log("Session disconnected:", data);
+});
 ```
 
 ## 📚 API Documentation
 
-### WalletConnectProvider
+### WalletConnectClient
 
-Provider component to wrap your application and provide WalletConnect context.
+Core client class providing all WalletConnect functionality.
 
-#### Props
+#### Constructor
 
-| Property   | Type                  | Required | Default | Description                 |
-| ---------- | --------------------- | -------- | ------- | --------------------------- |
-| `config`   | `WalletConnectConfig` | ✅       | -       | WalletConnect configuration |
-| `autoInit` | `boolean`             | ❌       | `true`  | Auto-initialize on mount    |
-| `children` | `ReactNode`           | ✅       | -       | Child components            |
+```typescript
+new WalletConnectClient(config: WalletConnectConfig)
+```
 
-#### WalletConnectConfig
+**WalletConnectConfig:**
 
 ```typescript
 interface WalletConnectConfig {
@@ -172,290 +112,643 @@ interface WalletConnectConfig {
 }
 ```
 
-### useWalletConnect
+#### Methods
 
-Hook to access WalletConnect functionality.
+##### `initialize(): Promise<void>`
 
-#### Return Values
+Initialize the WalletConnect client. Must be called before any other operations.
 
-| Property          | Type                                                        | Description            |
-| ----------------- | ----------------------------------------------------------- | ---------------------- |
-| `client`          | `WalletConnectClient \| null`                               | Client instance        |
-| `initialized`     | `boolean`                                                   | Whether initialized    |
-| `connecting`      | `boolean`                                                   | Whether connecting     |
-| `uri`             | `string \| null`                                            | Current connection URI |
-| `sessions`        | `SessionInfo[]`                                             | Active sessions        |
-| `initialize`      | `() => Promise<void>`                                       | Initialize client      |
-| `connect`         | `() => Promise<string>`                                     | Create connection      |
-| `generateQRCode`  | `(uri: string, options?: QRCodeOptions) => Promise<string>` | Generate QR code       |
-| `disconnect`      | `(topic: string) => Promise<void>`                          | Disconnect session     |
-| `refreshSessions` | `() => void`                                                | Refresh session list   |
+```typescript
+await client.initialize();
+```
 
-### useConnect
+##### `connect(params?: ConnectParams): Promise<string>`
 
-Simplified connection Hook with automatic QR code generation.
+Create a pairing connection and generate WalletConnect URI.
 
 ```typescript
-const { connect, uri, qrCode, connecting, error, reset } = useConnect({
-  autoGenerateQRCode: true,
-  qrCodeOptions: { width: 300 },
-  onConnect: (uri) => console.log("Connected:", uri),
-  onError: (error) => console.error("Error:", error),
+const uri = await client.connect();
+
+// With custom namespaces
+const uri = await client.connect({
+  requiredNamespaces: {
+    eip155: {
+      methods: ["eth_sendTransaction", "personal_sign"],
+      chains: ["eip155:1"],
+      events: ["chainChanged", "accountsChanged"],
+    },
+  },
 });
 ```
 
-### useQRCode
+##### `generateQRCode(uri: string, options?: QRCodeOptions): Promise<string>`
 
-QR code generation Hook.
+Generate QR code as Base64 data URL.
 
 ```typescript
-const { qrCode, loading, error, generate } = useQRCode(uri, {
+const qrCode = await client.generateQRCode(uri, {
   width: 300,
   margin: 4,
+  errorCorrectionLevel: "M",
+  color: {
+    dark: "#000000",
+    light: "#ffffff",
+  },
 });
 ```
 
-### useSession
+**QRCodeOptions:**
 
-Session management Hook.
+```typescript
+interface QRCodeOptions {
+  width?: number; // QR code width (default: 300)
+  margin?: number; // Margin size (default: 4)
+  errorCorrectionLevel?: "L" | "M" | "Q" | "H"; // Error correction (default: 'M')
+  color?: {
+    dark?: string; // Dark color (default: '#000000')
+    light?: string; // Light color (default: '#ffffff')
+  };
+}
+```
+
+##### `generateQRCodeToCanvas(canvas: HTMLCanvasElement, uri: string, options?: QRCodeOptions): Promise<void>`
+
+Generate QR code directly to a canvas element.
 
 ```typescript
-const {
-  session, // Current session
-  allSessions, // All sessions
-  disconnect, // Disconnect session
-  refresh, // Refresh sessions
-  isExpired, // Whether expired
-  getAccounts, // Get accounts
-  getChains, // Get chains
-  hasSession, // Has session
-} = useSession(topic);
+const canvas = document.getElementById("qr-canvas") as HTMLCanvasElement;
+await client.generateQRCodeToCanvas(canvas, uri, {
+  width: 300,
+  margin: 4,
+});
 ```
 
-### WalletConnectClient
+##### `getActiveSessions(): SessionInfo[]`
 
-Low-level client class providing advanced features.
+Get all active WalletConnect sessions.
 
-#### Methods
+```typescript
+const sessions = client.getActiveSessions();
+sessions.forEach((session) => {
+  console.log("Session:", session.topic);
+  console.log("Peer:", session.peer.metadata.name);
+  console.log("Chains:", session.namespaces);
+});
+```
+
+##### `disconnectSession(topic: string): Promise<void>`
+
+Disconnect a specific session.
 
 ```typescript
-// Initialize
-await client.initialize();
+await client.disconnectSession(sessionTopic);
+```
 
-// Create connection
-const uri = await client.connect();
+##### `sendRequest(params): Promise<any>`
 
-// Generate QR code (Base64)
-const qrCode = await client.generateQRCode(uri, {
-  width: 300,
-  height: 300,
-  margin: 4,
-  errorCorrectionLevel: "M",
-  color: {
-    dark: "#000000",
-    light: "#ffffff",
+Send JSON-RPC request to the connected wallet.
+
+```typescript
+const result = await client.sendRequest({
+  topic: sessionTopic,
+  chainId: "eip155:1",
+  request: {
+    method: "personal_sign",
+    params: ["0x...message", "0x...address"],
   },
 });
+```
 
-// Generate QR code to Canvas
-await client.generateQRCodeToCanvas(canvasElement, uri);
-
-// Get active sessions
-const sessions = client.getActiveSessions();
+##### `on<T>(event: WalletConnectEvent, handler: EventHandler<T>): void`
 
-// Disconnect session
-await client.disconnectSession(topic);
+Listen to WalletConnect events.
 
-// Listen to events
+```typescript
 client.on("session_proposal", (proposal) => {
-  console.log("Session proposal received:", proposal);
+  console.log("Session proposal:", proposal);
+});
+
+client.on("session_update", (session) => {
+  console.log("Session updated:", session);
+});
+
+client.on("session_delete", (data) => {
+  console.log("Session deleted:", data);
 });
 
 client.on("display_uri", ({ uri }) => {
   console.log("WalletConnect URI:", uri);
 });
+```
 
-// Remove event listener
-client.off("session_proposal", handler);
+**Available Events:**
 
-// Destroy client
-await client.destroy();
+- `session_proposal` - New session proposal received
+- `session_update` - Session updated or approved
+- `session_delete` - Session disconnected
+- `session_request` - Request received from wallet
+- `display_uri` - URI generated and ready to display
+
+##### `off<T>(event: WalletConnectEvent, handler: EventHandler<T>): void`
+
+Remove event listener.
+
+```typescript
+const handler = (data) => console.log(data);
+client.on("session_update", handler);
+client.off("session_update", handler);
 ```
 
-## 🎯 Use Cases
+##### `destroy(): Promise<void>`
 
-### Case 1: Basic Connection
+Destroy the client and clean up resources.
 
-```tsx
-function BasicConnect() {
-  const { connect, uri } = useWalletConnect();
+```typescript
+await client.destroy();
+```
 
-  return (
-    <div>
-      <button onClick={connect}>Connect</button>
-      {uri && <p>URI: {uri}</p>}
-    </div>
-  );
+##### `isInitialized(): boolean`
+
+Check if the client is initialized.
+
+```typescript
+if (client.isInitialized()) {
+  // Client is ready
 }
 ```
 
-### Case 2: QR Code Display
+##### `getConfig(): WalletConnectConfig`
 
-```tsx
-function QRCodeConnect() {
-  const { connect, generateQRCode } = useWalletConnect();
-  const [qr, setQr] = useState<string | null>(null);
+Get the current configuration.
 
-  const handleConnect = async () => {
-    const uri = await connect();
-    const qrCode = await generateQRCode(uri);
-    setQr(qrCode);
-  };
+```typescript
+const config = client.getConfig();
+console.log("Project ID:", config.projectId);
+```
 
-  return (
-    <div>
-      <button onClick={handleConnect}>Show QR Code</button>
-      {qr && <img src={qr} alt="QR Code" />}
+## 🎯 Usage Examples
+
+### Vanilla JavaScript
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>WalletConnect Example</title>
+  </head>
+  <body>
+    <button id="connect-btn">Connect Wallet</button>
+    <div id="qr-container" style="display: none;">
+      <h3>Scan QR Code</h3>
+      <img id="qr-code" />
     </div>
-  );
-}
-```
+    <div id="session-info"></div>
 
-### Case 3: Session Management
+    <script type="module">
+      import { WalletConnectClient } from "@tomo-inc/wallet-connect-protocol";
 
-```tsx
-function SessionManager() {
-  const { sessions, disconnect } = useWalletConnect();
+      const client = new WalletConnectClient({
+        projectId: "YOUR_PROJECT_ID",
+        metadata: {
+          name: "My DApp",
+          description: "Example DApp",
+          url: "https://myapp.com",
+          icons: ["https://myapp.com/icon.png"],
+        },
+      });
 
-  return (
-    <div>
-      <h2>Active Sessions ({sessions.length})</h2>
-      {sessions.map((session) => (
-        <div key={session.topic}>
-          <h3>{session.peer.metadata.name}</h3>
-          <p>{session.peer.metadata.description}</p>
-          <button onClick={() => disconnect(session.topic)}>Disconnect</button>
-        </div>
-      ))}
-    </div>
-  );
-}
+      await client.initialize();
+
+      document
+        .getElementById("connect-btn")
+        .addEventListener("click", async () => {
+          const uri = await client.connect();
+          const qrCode = await client.generateQRCode(uri);
+
+          document.getElementById("qr-code").src = qrCode;
+          document.getElementById("qr-container").style.display = "block";
+        });
+
+      client.on("session_update", (session) => {
+        document.getElementById("session-info").innerHTML =
+          `Connected to: ${session.peer.metadata.name}`;
+        document.getElementById("qr-container").style.display = "none";
+      });
+    </script>
+  </body>
+</html>
 ```
 
-### Case 4: Using Native Client
+### Vue 3
 
-For more control, use `WalletConnectClient` directly:
+```vue
+<template>
+  <div>
+    <button @click="handleConnect">Connect Wallet</button>
+    <div v-if="qrCode">
+      <h3>Scan QR Code</h3>
+      <img :src="qrCode" />
+    </div>
+    <div v-if="sessions.length > 0">
+      <h3>Connected Sessions</h3>
+      <ul>
+        <li v-for="session in sessions" :key="session.topic">
+          {{ session.peer.metadata.name }}
+          <button @click="disconnect(session.topic)">Disconnect</button>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
 
-```tsx
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from "vue";
 import { WalletConnectClient } from "@tomo-inc/wallet-connect-protocol";
 
 const client = new WalletConnectClient({
   projectId: "YOUR_PROJECT_ID",
   metadata: {
-    name: "My App",
-    description: "My awesome app",
+    name: "My Vue DApp",
+    description: "Example Vue DApp",
     url: "https://myapp.com",
     icons: ["https://myapp.com/icon.png"],
   },
 });
 
-// Initialize
-await client.initialize();
-
-// Listen to events
-client.on("session_proposal", (proposal) => {
-  console.log("Session proposal:", proposal);
-});
+const qrCode = ref<string | null>(null);
+const sessions = ref<any[]>([]);
 
-// Create connection
-const uri = await client.connect();
+onMounted(async () => {
+  await client.initialize();
 
-// Generate QR code
-const qrCode = await client.generateQRCode(uri);
-```
+  client.on("session_update", (session) => {
+    sessions.value = client.getActiveSessions();
+    qrCode.value = null;
+  });
+});
 
-## 🔧 Advanced Configuration
+const handleConnect = async () => {
+  const uri = await client.connect();
+  qrCode.value = await client.generateQRCode(uri);
+};
 
-### Custom QR Code Style
+const disconnect = async (topic: string) => {
+  await client.disconnectSession(topic);
+  sessions.value = client.getActiveSessions();
+};
 
-```tsx
-const qrCode = await generateQRCode(uri, {
-  width: 400,
-  height: 400,
-  margin: 8,
-  errorCorrectionLevel: "H", // 'L' | 'M' | 'Q' | 'H'
-  color: {
-    dark: "#1a1a1a",
-    light: "#ffffff",
-  },
+onUnmounted(async () => {
+  await client.destroy();
 });
+</script>
 ```
 
-### Manual Initialization
+### Angular
 
-```tsx
-<WalletConnectProvider
-  config={config}
-  autoInit={false} // Disable auto-init
->
-  <App />
-</WalletConnectProvider>;
+```typescript
+import { Component, OnInit, OnDestroy } from "@angular/core";
+import {
+  WalletConnectClient,
+  SessionInfo,
+} from "@tomo-inc/wallet-connect-protocol";
 
-// Manually initialize when needed
-function SomeComponent() {
-  const { initialize, initialized } = useWalletConnect();
+@Component({
+  selector: "app-wallet-connect",
+  template: `
+    <button (click)="handleConnect()">Connect Wallet</button>
+    <div *ngIf="qrCode">
+      <h3>Scan QR Code</h3>
+      <img [src]="qrCode" />
+    </div>
+    <div *ngIf="sessions.length > 0">
+      <h3>Connected Sessions</h3>
+      <ul>
+        <li *ngFor="let session of sessions">
+          {{ session.peer.metadata.name }}
+          <button (click)="disconnect(session.topic)">Disconnect</button>
+        </li>
+      </ul>
+    </div>
+  `,
+})
+export class WalletConnectComponent implements OnInit, OnDestroy {
+  private client: WalletConnectClient;
+  qrCode: string | null = null;
+  sessions: SessionInfo[] = [];
+
+  constructor() {
+    this.client = new WalletConnectClient({
+      projectId: "YOUR_PROJECT_ID",
+      metadata: {
+        name: "My Angular DApp",
+        description: "Example Angular DApp",
+        url: "https://myapp.com",
+        icons: ["https://myapp.com/icon.png"],
+      },
+    });
+  }
+
+  async ngOnInit() {
+    await this.client.initialize();
+
+    this.client.on("session_update", () => {
+      this.sessions = this.client.getActiveSessions();
+      this.qrCode = null;
+    });
+  }
+
+  async handleConnect() {
+    const uri = await this.client.connect();
+    this.qrCode = await this.client.generateQRCode(uri);
+  }
+
+  async disconnect(topic: string) {
+    await this.client.disconnectSession(topic);
+    this.sessions = this.client.getActiveSessions();
+  }
+
+  async ngOnDestroy() {
+    await this.client.destroy();
+  }
+}
+```
 
-  useEffect(() => {
-    if (!initialized) {
-      initialize();
+### Svelte
+
+```svelte
+<script lang="ts">
+  import { onMount, onDestroy } from 'svelte';
+  import { WalletConnectClient } from '@tomo-inc/wallet-connect-protocol';
+
+  let client: WalletConnectClient;
+  let qrCode: string | null = null;
+  let sessions: any[] = [];
+
+  onMount(async () => {
+    client = new WalletConnectClient({
+      projectId: 'YOUR_PROJECT_ID',
+      metadata: {
+        name: 'My Svelte DApp',
+        description: 'Example Svelte DApp',
+        url: 'https://myapp.com',
+        icons: ['https://myapp.com/icon.png'],
+      },
+    });
+
+    await client.initialize();
+
+    client.on('session_update', () => {
+      sessions = client.getActiveSessions();
+      qrCode = null;
+    });
+  });
+
+  async function handleConnect() {
+    const uri = await client.connect();
+    qrCode = await client.generateQRCode(uri);
+  }
+
+  async function disconnect(topic: string) {
+    await client.disconnectSession(topic);
+    sessions = client.getActiveSessions();
+  }
+
+  onDestroy(async () => {
+    if (client) {
+      await client.destroy();
     }
-  }, []);
-}
+  });
+</script>
+
+<button on:click={handleConnect}>Connect Wallet</button>
+
+{#if qrCode}
+  <div>
+    <h3>Scan QR Code</h3>
+    <img src={qrCode} alt="WalletConnect QR Code" />
+  </div>
+{/if}
+
+{#if sessions.length > 0}
+  <div>
+    <h3>Connected Sessions</h3>
+    <ul>
+      {#each sessions as session}
+        <li>
+          {session.peer.metadata.name}
+          <button on:click={() => disconnect(session.topic)}>Disconnect</button>
+        </li>
+      {/each}
+    </ul>
+  </div>
+{/if}
 ```
 
-### Event Listening
+### React
 
 ```tsx
-function EventListener() {
-  const { client } = useWalletConnect();
+import { useEffect, useState } from "react";
+import {
+  WalletConnectClient,
+  SessionInfo,
+} from "@tomo-inc/wallet-connect-protocol";
 
-  useEffect(() => {
-    if (!client) return;
+function WalletConnect() {
+  const [client] = useState(
+    () =>
+      new WalletConnectClient({
+        projectId: "YOUR_PROJECT_ID",
+        metadata: {
+          name: "My React DApp",
+          description: "Example React DApp",
+          url: "https://myapp.com",
+          icons: ["https://myapp.com/icon.png"],
+        },
+      }),
+  );
 
-    const handleProposal = (proposal: any) => {
-      console.log("Proposal received:", proposal);
-    };
+  const [qrCode, setQrCode] = useState<string | null>(null);
+  const [sessions, setSessions] = useState<SessionInfo[]>([]);
+
+  useEffect(() => {
+    client.initialize();
 
-    const handleRequest = (request: any) => {
-      console.log("Request received:", request);
+    const handleSessionUpdate = () => {
+      setSessions(client.getActiveSessions());
+      setQrCode(null);
     };
 
-    client.on("session_proposal", handleProposal);
-    client.on("session_request", handleRequest);
+    client.on("session_update", handleSessionUpdate);
 
     return () => {
-      client.off("session_proposal", handleProposal);
-      client.off("session_request", handleRequest);
+      client.off("session_update", handleSessionUpdate);
+      client.destroy();
     };
   }, [client]);
 
-  return <div>Listening...</div>;
+  const handleConnect = async () => {
+    const uri = await client.connect();
+    const qr = await client.generateQRCode(uri);
+    setQrCode(qr);
+  };
+
+  const disconnect = async (topic: string) => {
+    await client.disconnectSession(topic);
+    setSessions(client.getActiveSessions());
+  };
+
+  return (
+    <div>
+      <button onClick={handleConnect}>Connect Wallet</button>
+      {qrCode && (
+        <div>
+          <h3>Scan QR Code</h3>
+          <img src={qrCode} alt="WalletConnect QR Code" />
+        </div>
+      )}
+      {sessions.length > 0 && (
+        <div>
+          <h3>Connected Sessions</h3>
+          <ul>
+            {sessions.map((session) => (
+              <li key={session.topic}>
+                {session.peer.metadata.name}
+                <button onClick={() => disconnect(session.topic)}>
+                  Disconnect
+                </button>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
 }
 ```
 
-## 🤝 Contributing
+## 🔧 Advanced Usage
 
-Contributions are welcome! Please check our [Contributing Guide](../../CONTRIBUTING.md) for more information.
+### Multi-Chain Support
 
-## 📄 License
+```typescript
+import {
+  createMultiChainNamespaces,
+  EVM_CHAINS,
+  SOLANA_CHAINS,
+} from "@tomo-inc/wallet-connect-protocol";
 
-MIT © [Tomo Inc.](https://tomo.inc)
+// Create multi-chain namespaces configuration
+const namespaces = createMultiChainNamespaces({
+  evm: {
+    chains: [EVM_CHAINS.ethereum, EVM_CHAINS.polygon],
+    methods: ["eth_sendTransaction", "personal_sign"],
+  },
+  solana: {
+    chains: [SOLANA_CHAINS.mainnet],
+    methods: ["solana_signTransaction", "solana_signMessage"],
+  },
+});
 
-## 🔗 Related Links
+const uri = await client.connect({
+  requiredNamespaces: namespaces,
+});
+```
 
-- [WalletConnect Official Documentation](https://docs.walletconnect.com/)
-- [WalletConnect Cloud](https://cloud.walletconnect.com)
-- [Tomo Wallet](https://tomo.inc)
+### SIWE (Sign-In with Ethereum)
+
+```typescript
+import { SiweAuth, createSiweMessage } from "@tomo-inc/wallet-connect-protocol";
+
+const siwe = new SiweAuth({
+  domain: "myapp.com",
+  uri: "https://myapp.com",
+  statement: "Sign in to My DApp",
+});
+
+// Create SIWE message
+const message = createSiweMessage({
+  domain: "myapp.com",
+  address: "0x...",
+  chainId: 1,
+  uri: "https://myapp.com",
+  statement: "Sign in to My DApp",
+});
+
+// Request signature from wallet
+const signature = await client.sendRequest({
+  topic: sessionTopic,
+  chainId: "eip155:1",
+  request: {
+    method: "personal_sign",
+    params: [message, address],
+  },
+});
+
+// Verify signature
+const isValid = await siwe.verify(message, signature);
+```
+
+### Custom QR Code Styling
+
+```typescript
+const qrCode = await client.generateQRCode(uri, {
+  width: 400,
+  margin: 8,
+  errorCorrectionLevel: "H",
+  color: {
+    dark: "#1a1a1a",
+    light: "#f0f0f0",
+  },
+});
+```
+
+### Wallet Discovery
+
+```typescript
+import {
+  getAllWallets,
+  getRecommendedWallets,
+  searchWallets,
+} from "@tomo-inc/wallet-connect-protocol";
+
+// Get all available wallets
+const allWallets = await getAllWallets();
+
+// Get recommended wallets
+const recommended = await getRecommendedWallets();
+
+// Search for specific wallets
+const results = await searchWallets("metamask");
+```
+
+## 🌐 Utility Functions
+
+The SDK provides various utility functions:
+
+```typescript
+import {
+  formatAddress, // Format address: 0x1234...5678
+  isValidWalletConnectUri, // Validate WC URI
+  parseWalletConnectUri, // Parse WC URI
+  extractChainIdFromAccount, // Extract chain ID from account
+  extractAddressFromAccount, // Extract address from account
+  isSessionExpired, // Check if session expired
+  getSessionTimeRemaining, // Get remaining session time
+  generateDeepLink, // Generate wallet deep link
+  isMobile, // Check if on mobile device
+  copyToClipboard, // Copy text to clipboard
+} from "@tomo-inc/wallet-connect-protocol";
+
+// Example usage
+const shortAddress = formatAddress("0x1234567890abcdef");
+// Returns: '0x1234...cdef'
+
+const isValid = isValidWalletConnectUri(uri);
+// Returns: true or false
+
+const deepLink = generateDeepLink("metamask", uri);
+// Returns: 'metamask://wc?uri=...'
+```
 
 ## ❓ FAQ
 
@@ -471,9 +764,9 @@ Ensure dependencies are correctly installed and the URI is a valid WalletConnect
 
 Use try-catch to handle errors:
 
-```tsx
+```typescript
 try {
-  await connect();
+  await client.connect();
 } catch (error) {
   console.error("Connection failed:", error);
   // Handle error, e.g., show error message
@@ -484,6 +777,28 @@ try {
 
 All modern browsers (Chrome, Firefox, Safari, Edge) are supported. ES2022+ support required.
 
+### Can I use this with React?
+
+Yes! This SDK is framework-agnostic and works perfectly with React. See the React example above.
+
+### How do I support multiple chains?
+
+Use the `createMultiChainNamespaces` utility to configure support for multiple blockchain networks.
+
+## 🤝 Contributing
+
+Contributions are welcome! Please check our [Contributing Guide](../../CONTRIBUTING.md) for more information.
+
+## 📄 License
+
+MIT © [Tomo Inc.](https://tomo.inc)
+
+## 🔗 Related Links
+
+- [WalletConnect Official Documentation](https://docs.walletconnect.com/)
+- [WalletConnect Cloud](https://cloud.walletconnect.com)
+- [Tomo Wallet](https://tomo.inc)
+
 ## 📞 Support
 
 For questions or suggestions, please [submit an issue](https://github.com/tomo-inc/tomo-wallet/issues).