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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@tomo-inc/wallet-connect-protocol",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "author": "tomo.inc",
   "license": "MIT",
   "private": false,
   "type": "module",
-  "description": "WalletConnect protocol SDK for Tomo Wallet",
+  "description": "WalletConnect protocol SDK for Tomo Wallet - Pure JavaScript",
   "main": "./dist/index.cjs",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -14,11 +14,6 @@
       "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": {
@@ -31,27 +26,19 @@
   "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"
+    "ethereum",
+    "vanilla-js",
+    "framework-agnostic"
   ],
   "scripts": {
     "build": "tsup",

package/VANILLA_JS.md

@@ -1,491 +0,0 @@
-# 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)