@tomo-inc/wallet-connect-protocol 0.0.4

package/README.md

@@ -0,0 +1,489 @@
+# @tomo-inc/wallet-connect-protocol
+
+> WalletConnect Protocol SDK for Tomo Wallet - Simple and Easy-to-use WalletConnect Integration
+
+## 📖 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.
+
+### ✨ Features
+
+- 🚀 **Simple & Easy** - Provider component and Hooks, ready to use
+- 🌐 **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
+
+## 📦 Installation
+
+```bash
+# Using pnpm
+pnpm add @tomo-inc/wallet-connect-protocol
+
+# Using npm
+npm install @tomo-inc/wallet-connect-protocol
+
+# Using yarn
+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
+
+Wrap your root component with `WalletConnectProvider`:
+
+```tsx
+import { WalletConnectProvider } from "@tomo-inc/wallet-connect-protocol";
+
+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>
+  );
+}
+```
+
+### 3. Use Hook
+
+Use the `useWalletConnect` Hook in your components:
+
+```tsx
+import { useWalletConnect } from "@tomo-inc/wallet-connect-protocol";
+import { useState } from "react";
+
+function ConnectButton() {
+  const { connect, uri, generateQRCode, sessions } = useWalletConnect();
+  const [qrCode, setQrCode] = useState<string | null>(null);
+
+  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,
+      });
+
+      setQrCode(qr);
+    } catch (error) {
+      console.error("Connection failed:", error);
+    }
+  };
+
+  return (
+    <div>
+      <button onClick={handleConnect}>Connect Wallet</button>
+
+      {qrCode && (
+        <div>
+          <h3>Scan QR Code to Connect</h3>
+          <img src={qrCode} alt="WalletConnect QR Code" />
+        </div>
+      )}
+
+      {sessions.length > 0 && (
+        <div>
+          <h3>Active Sessions</h3>
+          <ul>
+            {sessions.map((session) => (
+              <li key={session.topic}>{session.peer.metadata.name}</li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}
+```
+
+## 📚 API Documentation
+
+### WalletConnectProvider
+
+Provider component to wrap your application and provide WalletConnect context.
+
+#### Props
+
+| Property   | Type                  | Required | Default | Description                 |
+| ---------- | --------------------- | -------- | ------- | --------------------------- |
+| `config`   | `WalletConnectConfig` | ✅       | -       | WalletConnect configuration |
+| `autoInit` | `boolean`             | ❌       | `true`  | Auto-initialize on mount    |
+| `children` | `ReactNode`           | ✅       | -       | Child components            |
+
+#### WalletConnectConfig
+
+```typescript
+interface WalletConnectConfig {
+  projectId: string; // WalletConnect Project ID
+  metadata: {
+    name: string; // App name
+    description: string; // App description
+    url: string; // App URL
+    icons: string[]; // App icons
+  };
+  relayUrl?: string; // Optional relay server URL
+}
+```
+
+### useWalletConnect
+
+Hook to access WalletConnect functionality.
+
+#### Return Values
+
+| 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   |
+
+### useConnect
+
+Simplified connection Hook with automatic QR code generation.
+
+```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),
+});
+```
+
+### useQRCode
+
+QR code generation Hook.
+
+```typescript
+const { qrCode, loading, error, generate } = useQRCode(uri, {
+  width: 300,
+  margin: 4,
+});
+```
+
+### useSession
+
+Session management Hook.
+
+```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);
+```
+
+### WalletConnectClient
+
+Low-level client class providing advanced features.
+
+#### Methods
+
+```typescript
+// Initialize
+await client.initialize();
+
+// Create connection
+const uri = await client.connect();
+
+// Generate QR code (Base64)
+const qrCode = await client.generateQRCode(uri, {
+  width: 300,
+  height: 300,
+  margin: 4,
+  errorCorrectionLevel: "M",
+  color: {
+    dark: "#000000",
+    light: "#ffffff",
+  },
+});
+
+// Generate QR code to Canvas
+await client.generateQRCodeToCanvas(canvasElement, uri);
+
+// Get active sessions
+const sessions = client.getActiveSessions();
+
+// Disconnect session
+await client.disconnectSession(topic);
+
+// Listen to events
+client.on("session_proposal", (proposal) => {
+  console.log("Session proposal received:", proposal);
+});
+
+client.on("display_uri", ({ uri }) => {
+  console.log("WalletConnect URI:", uri);
+});
+
+// Remove event listener
+client.off("session_proposal", handler);
+
+// Destroy client
+await client.destroy();
+```
+
+## 🎯 Use Cases
+
+### Case 1: Basic Connection
+
+```tsx
+function BasicConnect() {
+  const { connect, uri } = useWalletConnect();
+
+  return (
+    <div>
+      <button onClick={connect}>Connect</button>
+      {uri && <p>URI: {uri}</p>}
+    </div>
+  );
+}
+```
+
+### Case 2: QR Code Display
+
+```tsx
+function QRCodeConnect() {
+  const { connect, generateQRCode } = useWalletConnect();
+  const [qr, setQr] = useState<string | null>(null);
+
+  const handleConnect = async () => {
+    const uri = await connect();
+    const qrCode = await generateQRCode(uri);
+    setQr(qrCode);
+  };
+
+  return (
+    <div>
+      <button onClick={handleConnect}>Show QR Code</button>
+      {qr && <img src={qr} alt="QR Code" />}
+    </div>
+  );
+}
+```
+
+### Case 3: Session Management
+
+```tsx
+function SessionManager() {
+  const { sessions, disconnect } = useWalletConnect();
+
+  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>
+  );
+}
+```
+
+### Case 4: Using Native Client
+
+For more control, use `WalletConnectClient` directly:
+
+```tsx
+import { WalletConnectClient } from "@tomo-inc/wallet-connect-protocol";
+
+const client = new WalletConnectClient({
+  projectId: "YOUR_PROJECT_ID",
+  metadata: {
+    name: "My App",
+    description: "My awesome app",
+    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);
+});
+
+// Create connection
+const uri = await client.connect();
+
+// Generate QR code
+const qrCode = await client.generateQRCode(uri);
+```
+
+## 🔧 Advanced Configuration
+
+### Custom QR Code Style
+
+```tsx
+const qrCode = await generateQRCode(uri, {
+  width: 400,
+  height: 400,
+  margin: 8,
+  errorCorrectionLevel: "H", // 'L' | 'M' | 'Q' | 'H'
+  color: {
+    dark: "#1a1a1a",
+    light: "#ffffff",
+  },
+});
+```
+
+### Manual Initialization
+
+```tsx
+<WalletConnectProvider
+  config={config}
+  autoInit={false} // Disable auto-init
+>
+  <App />
+</WalletConnectProvider>;
+
+// Manually initialize when needed
+function SomeComponent() {
+  const { initialize, initialized } = useWalletConnect();
+
+  useEffect(() => {
+    if (!initialized) {
+      initialize();
+    }
+  }, []);
+}
+```
+
+### Event Listening
+
+```tsx
+function EventListener() {
+  const { client } = useWalletConnect();
+
+  useEffect(() => {
+    if (!client) return;
+
+    const handleProposal = (proposal: any) => {
+      console.log("Proposal received:", proposal);
+    };
+
+    const handleRequest = (request: any) => {
+      console.log("Request received:", request);
+    };
+
+    client.on("session_proposal", handleProposal);
+    client.on("session_request", handleRequest);
+
+    return () => {
+      client.off("session_proposal", handleProposal);
+      client.off("session_request", handleRequest);
+    };
+  }, [client]);
+
+  return <div>Listening...</div>;
+}
+```
+
+## 🤝 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)
+
+## ❓ FAQ
+
+### How to get Project ID?
+
+Visit [WalletConnect Cloud](https://cloud.walletconnect.com), sign up and create a new project to get a free Project ID.
+
+### QR Code not showing?
+
+Ensure dependencies are correctly installed and the URI is a valid WalletConnect URI (starts with `wc:`).
+
+### How to handle connection errors?
+
+Use try-catch to handle errors:
+
+```tsx
+try {
+  await connect();
+} catch (error) {
+  console.error("Connection failed:", error);
+  // Handle error, e.g., show error message
+}
+```
+
+### Which browsers are supported?
+
+All modern browsers (Chrome, Firefox, Safari, Edge) are supported. ES2022+ support required.
+
+## 📞 Support
+
+For questions or suggestions, please [submit an issue](https://github.com/tomo-inc/tomo-wallet/issues).

package/VANILLA_JS.md

@@ -0,0 +1,491 @@
+# Pure JavaScript / Non-React Usage Guide
+
+This guide shows how to use `@tomo-inc/wallet-connect-protocol` in vanilla JavaScript, Vue, Angular, Svelte, or any other non-React framework.
+
+## 📦 Installation
+
+```bash
+npm install @tomo-inc/wallet-connect-protocol
+# or
+pnpm add @tomo-inc/wallet-connect-protocol
+# or
+yarn add @tomo-inc/wallet-connect-protocol
+```
+
+## 🚀 Import Methods
+
+### Method 1: Using `/vanilla` Export (Recommended)
+
+```javascript
+// Import from the vanilla export (excludes React dependencies)
+import {
+  WalletConnectClient,
+  getAllWallets,
+} from "@tomo-inc/wallet-connect-protocol/vanilla";
+```
+
+### Method 2: Direct Import
+
+```javascript
+// Import specific modules directly
+import { WalletConnectClient } from "@tomo-inc/wallet-connect-protocol";
+```
+
+## 💡 Basic Usage
+
+### 1. Initialize WalletConnect Client
+
+```javascript
+import { WalletConnectClient } from "@tomo-inc/wallet-connect-protocol/vanilla";
+
+// Create client instance
+const client = new WalletConnectClient({
+  projectId: "YOUR_PROJECT_ID", // Get from https://cloud.walletconnect.com
+  metadata: {
+    name: "My App",
+    description: "My awesome application",
+    url: "https://myapp.com",
+    icons: ["https://myapp.com/icon.png"],
+  },
+});
+
+// Initialize the client
+await client.initialize();
+```
+
+### 2. Connect Wallet
+
+```javascript
+// Create connection and get URI
+const uri = await client.connect({
+  requiredNamespaces: {
+    eip155: {
+      methods: ["eth_sendTransaction", "personal_sign"],
+      chains: ["eip155:1"], // Ethereum mainnet
+      events: ["chainChanged", "accountsChanged"],
+    },
+  },
+});
+
+console.log("WalletConnect URI:", uri);
+
+// Generate QR code
+const qrCode = await client.generateQRCode(uri, {
+  width: 400,
+  margin: 2,
+});
+
+// Display QR code
+document.getElementById("qr-code").src = qrCode;
+```
+
+### 3. Listen to Events
+
+```javascript
+// Listen for session events
+client.on("session_proposal", (proposal) => {
+  console.log("New session proposal:", proposal);
+});
+
+client.on("session_delete", () => {
+  console.log("Session disconnected");
+});
+
+client.on("session_update", (update) => {
+  console.log("Session updated:", update);
+});
+```
+
+### 4. Get Active Sessions
+
+```javascript
+const sessions = client.getActiveSessions();
+console.log("Active sessions:", sessions);
+```
+
+### 5. Send Requests
+
+```javascript
+if (sessions.length > 0) {
+  const session = sessions[0];
+
+  // Send transaction
+  const result = await client.request({
+    topic: session.topic,
+    chainId: "eip155:1",
+    request: {
+      method: "eth_sendTransaction",
+      params: [
+        {
+          from: "0x...",
+          to: "0x...",
+          value: "0x0",
+          data: "0x",
+        },
+      ],
+    },
+  });
+
+  console.log("Transaction result:", result);
+}
+```
+
+### 6. Disconnect
+
+```javascript
+// Disconnect specific session
+await client.disconnect(session.topic);
+
+// Or disconnect all sessions
+const sessions = client.getActiveSessions();
+for (const session of sessions) {
+  await client.disconnect(session.topic);
+}
+```
+
+## 🔧 Complete Example
+
+### Vanilla JavaScript
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>WalletConnect Vanilla JS Demo</title>
+  </head>
+  <body>
+    <div id="app">
+      <button id="connect-btn">Connect Wallet</button>
+      <div id="qr-container" style="display: none;">
+        <img id="qr-code" />
+      </div>
+      <div id="status"></div>
+    </div>
+
+    <script type="module">
+      import { WalletConnectClient } from "@tomo-inc/wallet-connect-protocol/vanilla";
+
+      const client = new WalletConnectClient({
+        projectId: "YOUR_PROJECT_ID",
+        metadata: {
+          name: "Vanilla JS Demo",
+          description: "WalletConnect Vanilla JS Demo",
+          url: "https://example.com",
+          icons: ["https://example.com/icon.png"],
+        },
+      });
+
+      // Initialize
+      await client.initialize();
+
+      // Event handlers
+      const connectBtn = document.getElementById("connect-btn");
+      const qrContainer = document.getElementById("qr-container");
+      const qrCode = document.getElementById("qr-code");
+      const status = document.getElementById("status");
+
+      connectBtn.addEventListener("click", async () => {
+        try {
+          status.textContent = "Connecting...";
+
+          const uri = await client.connect();
+          const qr = await client.generateQRCode(uri);
+
+          qrCode.src = qr;
+          qrContainer.style.display = "block";
+          status.textContent = "Scan QR code with your wallet";
+        } catch (error) {
+          status.textContent = "Error: " + error.message;
+        }
+      });
+
+      client.on("session_proposal", () => {
+        qrContainer.style.display = "none";
+        status.textContent = "Connected! ✓";
+      });
+    </script>
+  </body>
+</html>
+```
+
+### Vue.js 3
+
+```vue
+<template>
+  <div>
+    <button @click="connect">Connect Wallet</button>
+    <img v-if="qrCode" :src="qrCode" alt="QR Code" />
+    <div>{{ status }}</div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted } from "vue";
+import { WalletConnectClient } from "@tomo-inc/wallet-connect-protocol/vanilla";
+
+const qrCode = ref(null);
+const status = ref("");
+let client = null;
+
+onMounted(async () => {
+  client = new WalletConnectClient({
+    projectId: "YOUR_PROJECT_ID",
+    metadata: {
+      name: "Vue App",
+      description: "WalletConnect Vue Demo",
+      url: "https://example.com",
+      icons: ["https://example.com/icon.png"],
+    },
+  });
+
+  await client.initialize();
+
+  client.on("session_proposal", () => {
+    qrCode.value = null;
+    status.value = "Connected!";
+  });
+});
+
+const connect = async () => {
+  try {
+    status.value = "Connecting...";
+    const uri = await client.connect();
+    qrCode.value = await client.generateQRCode(uri);
+  } catch (error) {
+    status.value = "Error: " + error.message;
+  }
+};
+</script>
+```
+
+### Angular
+
+```typescript
+import { Component, OnInit } from "@angular/core";
+import { WalletConnectClient } from "@tomo-inc/wallet-connect-protocol/vanilla";
+
+@Component({
+  selector: "app-wallet-connect",
+  template: `
+    <button (click)="connect()">Connect Wallet</button>
+    <img *ngIf="qrCode" [src]="qrCode" alt="QR Code" />
+    <div>{{ status }}</div>
+  `,
+})
+export class WalletConnectComponent implements OnInit {
+  client: WalletConnectClient;
+  qrCode: string | null = null;
+  status: string = "";
+
+  async ngOnInit() {
+    this.client = new WalletConnectClient({
+      projectId: "YOUR_PROJECT_ID",
+      metadata: {
+        name: "Angular App",
+        description: "WalletConnect Angular Demo",
+        url: "https://example.com",
+        icons: ["https://example.com/icon.png"],
+      },
+    });
+
+    await this.client.initialize();
+
+    this.client.on("session_proposal", () => {
+      this.qrCode = null;
+      this.status = "Connected!";
+    });
+  }
+
+  async connect() {
+    try {
+      this.status = "Connecting...";
+      const uri = await this.client.connect();
+      this.qrCode = await this.client.generateQRCode(uri);
+    } catch (error) {
+      this.status = "Error: " + error.message;
+    }
+  }
+}
+```
+
+### Svelte
+
+```svelte
+<script>
+  import { onMount } from 'svelte';
+  import { WalletConnectClient } from '@tomo-inc/wallet-connect-protocol/vanilla';
+
+  let client;
+  let qrCode = null;
+  let status = '';
+
+  onMount(async () => {
+    client = new WalletConnectClient({
+      projectId: 'YOUR_PROJECT_ID',
+      metadata: {
+        name: 'Svelte App',
+        description: 'WalletConnect Svelte Demo',
+        url: 'https://example.com',
+        icons: ['https://example.com/icon.png']
+      }
+    });
+
+    await client.initialize();
+
+    client.on('session_proposal', () => {
+      qrCode = null;
+      status = 'Connected!';
+    });
+  });
+
+  async function connect() {
+    try {
+      status = 'Connecting...';
+      const uri = await client.connect();
+      qrCode = await client.generateQRCode(uri);
+    } catch (error) {
+      status = 'Error: ' + error.message;
+    }
+  }
+</script>
+
+<button on:click={connect}>Connect Wallet</button>
+{#if qrCode}
+  <img src={qrCode} alt="QR Code" />
+{/if}
+<div>{status}</div>
+```
+
+## 🌐 Get Wallet List
+
+```javascript
+import {
+  getAllWallets,
+  getWalletsByChain,
+} from "@tomo-inc/wallet-connect-protocol/vanilla";
+
+// Get all WalletConnect supported wallets
+const wallets = await getAllWallets();
+console.log(`Found ${wallets.length} wallets`);
+
+// Get wallets that support Ethereum
+const ethWallets = await getWalletsByChain("eip155:1");
+console.log(`Found ${ethWallets.length} Ethereum wallets`);
+
+// Display wallet options
+wallets.forEach((wallet) => {
+  console.log(`${wallet.name}: ${wallet.homepage}`);
+});
+```
+
+## 🔐 SIWE (Sign-In with Ethereum)
+
+```javascript
+import {
+  SiweAuth,
+  createSiweMessage,
+} from "@tomo-inc/wallet-connect-protocol/vanilla";
+
+// Create SIWE authenticator
+const siwe = new SiweAuth({
+  domain: window.location.host,
+  uri: window.location.origin,
+  statement: "Sign in to my app",
+});
+
+// After wallet is connected, sign in
+const session = client.getActiveSessions()[0];
+const address = session.namespaces.eip155.accounts[0].split(":")[2];
+
+// Create SIWE message
+const message = createSiweMessage({
+  domain: window.location.host,
+  address: address,
+  statement: "Sign in to my app",
+  uri: window.location.origin,
+  version: "1",
+  chainId: "1",
+  nonce: Math.random().toString(36).substring(7),
+});
+
+// Request signature
+const signature = await client.request({
+  topic: session.topic,
+  chainId: "eip155:1",
+  request: {
+    method: "personal_sign",
+    params: [message, address],
+  },
+});
+
+console.log("SIWE signature:", signature);
+```
+
+## 📚 Available Exports
+
+### Core Client
+
+- `WalletConnectClient` - Main WalletConnect client class
+
+### Utility Functions
+
+- `formatAddress` - Format Ethereum address
+- `extractAddressFromAccount` - Extract address from CAIP-10 account
+- `extractChainIdFromAccount` - Extract chain ID from CAIP-10 account
+- `generateDeepLink` - Generate wallet deep link
+- `parseWalletConnectUri` - Parse WalletConnect URI
+- `isValidWalletConnectUri` - Validate WalletConnect URI
+- `getChainName` - Get chain name from chain ID
+- `isMobile` - Detect mobile device
+
+### Wallet List API
+
+- `getAllWallets` - Get all supported wallets
+- `getWalletsByChain` - Get wallets by chain
+- `getMobileWallets` - Get mobile wallets
+- `getDesktopWallets` - Get desktop wallets
+- `getBrowserWallets` - Get browser extension wallets
+- `searchWallets` - Search wallets by name
+- `getWalletById` - Get specific wallet by ID
+- `POPULAR_WALLET_IDS` - Popular wallet IDs constant
+
+### Multi-Chain Support
+
+- `createMultiChainNamespaces` - Create multi-chain namespaces
+- `EVM_CHAINS` - EVM chain configurations
+- `SOLANA_CHAINS` - Solana chain configurations
+- `APTOS_CHAINS` - Aptos chain configurations
+
+### SIWE Support
+
+- `SiweAuth` - SIWE authentication class
+- `createSiweMessage` - Create SIWE message
+- `verifySiweSignature` - Verify SIWE signature
+- `parseSiweMessage` - Parse SIWE message
+
+## 🔍 Type Definitions
+
+All exports include full TypeScript type definitions:
+
+```typescript
+import type {
+  WalletConnectConfig,
+  SessionInfo,
+  ConnectParams,
+  Wallet,
+  WalletListOptions,
+} from "@tomo-inc/wallet-connect-protocol/vanilla";
+```
+
+## ⚠️ Important Notes
+
+1. **No React Required**: The `/vanilla` export doesn't require React as a dependency
+2. **Browser Only**: This SDK is designed for browser environments
+3. **Project ID**: You need a project ID from [WalletConnect Cloud](https://cloud.walletconnect.com)
+4. **ES Modules**: The package uses ES modules, make sure your build tool supports it
+
+## 🔗 Resources
+
+- [WalletConnect Documentation](https://docs.walletconnect.com)
+- [Get Project ID](https://cloud.walletconnect.com)
+- [WalletConnect Explorer](https://walletconnect.com/explorer)

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@tomo-inc/wallet-connect-protocol",
+  "version": "0.0.4",
+  "author": "tomo.inc",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "description": "WalletConnect protocol SDK for Tomo Wallet",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./vanilla": {
+      "types": "./dist/vanilla.d.ts",
+      "import": "./dist/vanilla.js",
+      "require": "./dist/vanilla.cjs"
+    }
+  },
+  "dependencies": {
+    "@walletconnect/sign-client": "^2.16.1",
+    "@walletconnect/types": "^2.16.1",
+    "@walletconnect/utils": "^2.16.1",
+    "qrcode": "^1.5.4",
+    "siwe": "^2.3.2"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/qrcode": "^1.5.5",
+    "@types/react": "^18.0.0",
+    "ethers": "^6.13.5",
+    "react": "^18.0.0",
+    "tsup": "^8.0.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": false
+    }
+  },
+  "keywords": [
+    "walletconnect",
+    "wallet",
+    "tomo",
+    "sdk",
+    "web3",
+    "ethereum"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  }
+}

package/project.json

@@ -0,0 +1,58 @@
+{
+  "name": "wallet-connect-protocol",
+  "sourceRoot": "packages/wallet-connect-protocol/src",
+  "projectType": "library",
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "outputs": ["{projectRoot}/dist"],
+      "options": {
+        "command": "tsup",
+        "cwd": "packages/wallet-connect-protocol"
+      }
+    },
+    "dev": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "tsup --watch",
+        "cwd": "packages/wallet-connect-protocol"
+      }
+    },
+    "typecheck": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "tsc --noEmit",
+        "cwd": "packages/wallet-connect-protocol"
+      }
+    },
+    "lint": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "eslint src/**/*.{ts,tsx}",
+        "cwd": "packages/wallet-connect-protocol"
+      }
+    },
+    "lint:fix": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "eslint src/**/*.{ts,tsx} --fix",
+        "cwd": "packages/wallet-connect-protocol"
+      }
+    },
+    "format": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "prettier --write \"src/**/*.{ts,tsx}\"",
+        "cwd": "packages/wallet-connect-protocol"
+      }
+    },
+    "clean": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "rm -rf dist",
+        "cwd": "packages/wallet-connect-protocol"
+      }
+    }
+  },
+  "tags": ["scope:wallet-connect", "type:library"]
+}