【钱包】：WalletConnect 详解

上一文我们讲解了 EIP1193 与 EIP6963，今天我们来讲一下 WalletConnect协议。

什么是WalletConnect

WalletConnect 是一种开源协议，用于在去中心化应用（DApp）和加密钱包之间建立安全连接，实现跨设备通信。

它通过端到端加密的通信通道，允许用户通过移动钱包（如MetaMask Mobile、Trust Wallet等）与桌面或网页端的DApp进行连接和交易签名，而无需暴露私钥或敏感信息，为 Web3 应用提供了更安全、便捷的身份验证方式。

WalletConnect 是一个链无关的协议生态系统，专注于为用户提供跨钱包和应用程序的无缝连接服务。

起源与发展

WalletConnect 最初于 2018 年推出，旨在解决一个用户体验（UX）和开发者体验（DX）问题：在当时，去中心化应用（dApps）主要为桌面用户设计，但许多终端用户希望在移动设备上使用钱包。开发者需要一种统一的方式来支持所有用户的钱包。于是，WalletConnect 中继和二维码扫描功能诞生了，让数百万 Web3 用户能够将自己的钱包连接到想要使用的应用程序，为行业恢复了选择权和可组合性。

随着时间的推移，WalletConnect 不断解决更多的 UX/DX 问题：

• 让用户能够在移动应用/移动浏览器中使用他们的钱包
• 使用户能够使用多个浏览器扩展钱包
• 创建更简单的一键式 “以太坊登录”（SIWE）体验
• 将这些功能扩展到 EVM 以外的所有网络

WalletConnect 的关键里程碑包括：

• 扩展到超过 40,000 个应用程序和 600 多个钱包
• 截至 2024 年，已促成超过 1.5 亿次连接
• 日常远程连接的持续增长，证明了广泛的采用
• 过渡到由第三方节点运营商支持的许可制去中心化数据库

特点

• 去中心化连接：允许用户通过移动端钱包（如 MetaMask、Trust Wallet）与桌面或网页版 DApp 交互。
• 端到端加密：所有通信均通过加密通道传输，私钥始终由用户钱包本地管理，不会被 DApp 获取。
• 多链支持：兼容 Ethereum、Solana、BNB Chain、Polygon 等主流区块链。
• 跨平台：支持 iOS、Android、Web 和桌面端。

使用场景

• DeFi 交互：在 Uniswap、Aave 等平台交易或借贷。
• NFT 市场：在 OpenSea、Blur 等平台购买或出售 NFT。
• DAO 治理：通过钱包签署治理提案（如 Snapshot）。
• 跨链操作：在支持多链的钱包（如 Rainbow、Argent）中切换网络。

工作原理

1. 发起连接：

   • DApp 生成一个带有加密参数的二维码或深层链接（URI）。
   • 用户用钱包扫描二维码（或点击链接），钱包解析出连接请求。

2. 建立加密通道：

   • 双方通过中继服务器（Relay Server）交换加密密钥，建立点对点（P2P）通信。
   • 中继服务器仅转发消息，不存储数据。

3. 会话授权：

   • 钱包端显示 DApp 的权限请求（如访问地址、链 ID），用户确认后连接建立。

4. 数据传输：

   • 后续的签名交易、消息交互均通过加密通道完成。

实现

这里借助 ant-design/web3 库。

import { ConnectButton, Connector } from '@ant-design/web3';
import {
  Hardhat,
  Localhost,
  Mainnet,
  MetaMask,
  Polygon,
  WagmiWeb3ConfigProvider,
  WalletConnect,
  X1Testnet,
} from '@ant-design/web3-wagmi';
import { http } from 'wagmi';

const App: React.FC = () => {
  return (
    <WagmiWeb3ConfigProvider
      walletConnect={{
        projectId: 'c07c0051c2055890eade3556618e38a6',
      }}
      eip6963
      transports={{
        [Mainnet.id]: http(),
        [Polygon.id]: http(),
        [X1Testnet.id]: http(),
        [Hardhat.id]: http(),
        [Localhost.id]: http(),
      }}
      wallets={[MetaMask(), WalletConnect()]}
      chains={[Mainnet, Polygon, X1Testnet, Hardhat, Localhost]}
    >
      <Connector>
        <ConnectButton />
      </Connector>
    </WagmiWeb3ConfigProvider>
  );
};

export default App;