docs: Perfect the details

Author: 1395466556

basic/78-wallet-connect/docs/introduction/overview.md

@@ -23,16 +23,59 @@ WalletConnect 通过加密消息在钱包与 DApp 之间传递信息，确保安
    - 采用分布式架构，提高可用性和性能
    - 支持 WebSocket 长连接，实现实时通信
 
+   示例配置：
+   ```javascript
+   const bridge = new WalletConnectBridge({
+     url: "wss://bridge.walletconnect.org",
+     pingInterval: 15000,
+     maxAttempts: 5
+   });
+   ```
+
 2. **Client SDK**：
    - 提供多语言支持（JavaScript、Swift、Kotlin等）
    - 封装核心协议逻辑，简化开发流程
    - 内置安全机制和错误处理
 
+   JavaScript 示例：
+   ```javascript
+   import WalletConnect from "@walletconnect/client";
+   
+   const connector = new WalletConnect({
+     bridge: "https://bridge.walletconnect.org",
+     qrcodeModal: QRCodeModal,
+     chainId: 1
+   });
+   
+   // 监听连接事件
+   connector.on("connect", (error, payload) => {
+     if (error) {
+       console.error(error);
+       return;
+     }
+     const { accounts, chainId } = payload.params[0];
+     console.log("Connected to", accounts[0]);
+   });
+   ```
+
 3. **协议层**：
    - 定义标准消息格式和通信流程
    - 实现跨平台兼容性
    - 支持协议版本升级和向后兼容
 
+   消息格式示例：
+   ```json
+   {
+     "id": 1234567890,
+     "jsonrpc": "2.0",
+     "method": "eth_sendTransaction",
+     "params": [{
+       "from": "0x...",
+       "to": "0x...",
+       "value": "0x..."
+     }]
+   }
+
 ### 连接流程
 
 1. DApp 创建连接请求并生成二维码
@@ -93,17 +136,157 @@ WalletConnect 通过加密消息在钱包与 DApp 之间传递信息，确保安
    - 支持自动重连
    - 优化重连流程
 
+   重连实现示例：
+   ```javascript
+   class ConnectionManager {
+     constructor() {
+       this.reconnectAttempts = 0;
+       this.maxAttempts = 5;
+       this.baseDelay = 1000; // 1秒
+     }
+
+     async reconnect() {
+       if (this.reconnectAttempts >= this.maxAttempts) {
+         throw new Error("重连次数超过限制");
+       }
+
+       // 使用指数退避策略
+       const delay = this.baseDelay * Math.pow(2, this.reconnectAttempts);
+       await new Promise(resolve => setTimeout(resolve, delay));
+
+       try {
+         // 尝试恢复缓存的会话
+         const session = localStorage.getItem("walletconnect");
+         if (session) {
+           await connector.connect(JSON.parse(session));
+         } else {
+           await connector.createSession();
+         }
+         this.reconnectAttempts = 0;
+         return true;
+       } catch (error) {
+         this.reconnectAttempts++;
+         return this.reconnect();
+       }
+     }
+   }
+   ```
+
 2. **网络适应**：
    - 动态超时调整
    - 自动重试机制
    - 网络状态监控
 
+   网络适应示例：
+   ```javascript
+   class NetworkMonitor {
+     constructor() {
+       this.baseTimeout = 5000;
+       this.maxTimeout = 30000;
+       this.latencyHistory = [];
+     }
+
+     // 计算动态超时时间
+     calculateTimeout() {
+       if (this.latencyHistory.length === 0) {
+         return this.baseTimeout;
+       }
+
+       // 使用最近5次请求的平均延迟
+       const recentLatencies = this.latencyHistory.slice(-5);
+       const avgLatency = recentLatencies.reduce((a, b) => a + b, 0) / recentLatencies.length;
+       
+       // 动态超时 = 平均延迟 * 3 + 标准差
+       const timeout = (avgLatency * 3) + this.calculateStdDev(recentLatencies);
+       return Math.min(Math.max(timeout, this.baseTimeout), this.maxTimeout);
+     }
+
+     // 计算标准差
+     calculateStdDev(values) {
+       const avg = values.reduce((a, b) => a + b, 0) / values.length;
+       const squareDiffs = values.map(value => Math.pow(value - avg, 2));
+       const avgSquareDiff = squareDiffs.reduce((a, b) => a + b, 0) / squareDiffs.length;
+       return Math.sqrt(avgSquareDiff);
+     }
+
+     // 记录请求延迟
+     recordLatency(latency) {
+       this.latencyHistory.push(latency);
+       if (this.latencyHistory.length > 10) {
+         this.latencyHistory.shift();
+       }
+     }
+   }
+   ```
+
 ### 资源管理
 
 - 优化内存使用
 - 减少网络请求
 - 高效的状态同步
 
+资源管理示例：
+```javascript
+// 内存优化
+class ResourceManager {
+  constructor() {
+    this.subscriptions = new Map();
+    this.messageQueue = [];
+    this.maxQueueSize = 100;
+    this.processingInterval = 1000; // 1秒处理一次队列
+  }
+
+  // 批量处理消息队列
+  processMessageQueue() {
+    setInterval(() => {
+      const batch = this.messageQueue.splice(0, 10);
+      if (batch.length > 0) {
+        this.sendBatchMessage(batch);
+      }
+    }, this.processingInterval);
+  }
+
+  // 清理过期订阅
+  cleanupSubscriptions() {
+    const now = Date.now();
+    for (const [key, sub] of this.subscriptions) {
+      if (now - sub.lastActive > 5 * 60 * 1000) { // 5分钟无活动
+        sub.unsubscribe();
+        this.subscriptions.delete(key);
+      }
+    }
+  }
+
+  // 状态同步优化
+  async syncState() {
+    const lastSync = localStorage.getItem("lastSync");
+    const now = Date.now();
+    
+    // 增量同步
+    if (lastSync) {
+      const changes = await this.getStateChangesSince(lastSync);
+      this.applyStateChanges(changes);
+    } else {
+      // 全量同步
+      const state = await this.getFullState();
+      this.setState(state);
+    }
+    
+    localStorage.setItem("lastSync", now.toString());
+  }
+
+  // 性能指标监控
+  measurePerformance() {
+    return {
+      memoryUsage: performance.memory?.usedJSHeapSize || 0,
+      activeSubscriptions: this.subscriptions.size,
+      queueLength: this.messageQueue.length,
+      processingLatency: this.calculateProcessingLatency()
+    };
+  }
+}
+```
+
 ## 最佳实践
 
 ### 开发建议
@@ -113,18 +296,133 @@ WalletConnect 通过加密消息在钱包与 DApp 之间传递信息，确保安
    - 提供用户友好的错误提示
    - 记录详细的错误日志
 
+   错误处理示例：
+   ```javascript
+   connector.on("error", (error) => {
+     // 网络错误处理
+     if (error.message.includes("network")) {
+       showNetworkError();
+       attemptReconnect();
+       return;
+     }
+     
+     // 会话过期处理
+     if (error.message.includes("session")) {
+       clearSession();
+       requestNewConnection();
+       return;
+     }
+     
+     // 通用错误处理
+     console.error("WalletConnect错误:", error);
+     showUserFriendlyError(error);
+   });
+   
+   function showUserFriendlyError(error) {
+     const errorMessages = {
+       "user_rejected": "用户拒绝了请求",
+       "chain_not_supported": "当前钱包不支持该链",
+       "invalid_parameters": "无效的交易参数"
+     };
+     
+     const message = errorMessages[error.code] || "连接出现问题，请稍后重试";
+     displayError(message);
+   }
+   ```
+
 2. **用户体验**：
    - 显示连接状态和进度
    - 提供清晰的操作引导
    - 实现平滑的断开重连
 
+   状态管理示例：
+   ```javascript
+   const ConnectionState = {
+     CONNECTING: "connecting",
+     CONNECTED: "connected",
+     DISCONNECTED: "disconnected",
+     ERROR: "error"
+   };
+   
+   function updateConnectionUI(state) {
+     const stateMessages = {
+       [ConnectionState.CONNECTING]: "正在连接钱包...",
+       [ConnectionState.CONNECTED]: "钱包已连接",
+       [ConnectionState.DISCONNECTED]: "请连接钱包",
+       [ConnectionState.ERROR]: "连接出错"
+     };
+     
+     // 更新UI状态
+     updateStatusText(stateMessages[state]);
+     updateConnectButton(state);
+     updateLoadingIndicator(state === ConnectionState.CONNECTING);
+   }
+   ```
+
 ### 安全建议
 
 - 定期更新 SDK 版本
 - 实施请求频率限制
 - 验证所有用户输入
 - 实现会话超时机制
 
+安全实践示例：
+```javascript
+// 请求频率限制
+const rateLimiter = {
+  requests: {},
+  limit: 5,
+  interval: 60000, // 1分钟
+  
+  checkLimit(method) {
+    const now = Date.now();
+    const recentRequests = this.requests[method] || [];
+    
+    // 清理过期请求
+    this.requests[method] = recentRequests.filter(
+      time => now - time < this.interval
+    );
+    
+    if (this.requests[method].length >= this.limit) {
+      throw new Error("请求过于频繁，请稍后再试");
+    }
+    
+    this.requests[method].push(now);
+  }
+};
+
+// 输入验证
+function validateTransactionParams(params) {
+  const required = ["to", "value"];
+  for (const field of required) {
+    if (!params[field]) {
+      throw new Error(`缺少必要参数: ${field}`);
+    }
+  }
+  
+  // 验证地址格式
+  if (!/^0x[a-fA-F0-9]{40}$/.test(params.to)) {
+    throw new Error("无效的接收地址");
+  }
+  
+  // 验证金额
+  if (!/^[0-9]+$/.test(params.value)) {
+    throw new Error("无效的转账金额");
+  }
+}
+
+// 会话超时检查
+const SESSION_TIMEOUT = 30 * 60 * 1000; // 30分钟
+function checkSessionTimeout() {
+  const lastActivity = connector.lastActivityTime;
+  if (Date.now() - lastActivity > SESSION_TIMEOUT) {
+    connector.killSession();
+    return false;
+  }
+  return true;
+}
+```
+
 ## 未来发展
 
 ### 技术路线