WalletConnect Web 示例项目教程

1. 项目介绍

WalletConnect 是一个开源协议，旨在连接钱包和去中心化应用（dApps），使得用户可以通过钱包与 dApps 进行交互。WalletConnect/web-examples 项目是 WalletConnect 官方提供的示例代码库，展示了如何使用 WalletConnect v2 协议实现钱包和 dApp 的集成。

该项目包含了多种技术栈的示例，如 React、SvelteKit、Next.js 等，涵盖了 Web3Modal SDK、Web3Wallet SDK、Sign API、Auth API 和 Chat API 的使用。每个示例都附带了详细的 README 文件，指导开发者如何配置和运行这些示例。

2. 项目快速启动

2.1 克隆项目

首先，克隆 WalletConnect/web-examples 项目到本地：

git clone https://github.com/WalletConnect/web-examples.git
cd web-examples

2.2 安装依赖

进入项目目录后，安装所需的依赖：

npm install

2.3 运行示例

选择一个示例项目，例如 React Web3Wallet SDK，进入该目录并运行：

cd dapps/react-web3wallet-sdk
npm start

这将启动一个本地开发服务器，你可以在浏览器中访问 http://localhost:3000 查看运行效果。

3. 应用案例和最佳实践

3.1 使用 Web3Modal SDK

Web3Modal SDK 是一个简化钱包连接的库，支持多种钱包提供商。以下是一个简单的 React 示例：

import { Web3Modal } from "@web3modal/react";

function App() {
  return (
    <Web3Modal
      projectId="your-project-id"
      theme="dark"
      accentColor="default"
      ethereum={{
        appName: "My App",
      }}
    />
  );
}

export default App;

3.2 使用 Sign API

Sign API 允许 dApp 请求用户签名。以下是一个使用 React 和 EthereumProvider 的示例：

import { EthereumProvider } from "@walletconnect/ethereum-provider";

const provider = EthereumProvider.init({
  projectId: "your-project-id",
  chains: [1], // Ethereum mainnet
});

async function signMessage() {
  const accounts = await provider.enable();
  const signer = provider.getSigner();
  const signature = await signer.signMessage("Hello, WalletConnect!");
  console.log(signature);
}

4. 典型生态项目

4.1 Web3Modal SDK

Web3Modal SDK 是一个广泛使用的库，支持多种钱包提供商，适用于需要快速集成钱包连接的 dApp。

4.2 Web3Wallet SDK

Web3Wallet SDK 提供了更高级的功能，如多链支持、自定义 UI 等，适用于需要更多控制和定制化的钱包应用。

4.3 Sign API

Sign API 是 WalletConnect 的核心功能之一，允许 dApp 请求用户签名，适用于需要用户授权的场景。

4.4 Auth API

Auth API 提供了基于区块链的身份验证功能，适用于需要用户身份验证的应用。

4.5 Chat API

Chat API 允许钱包和 dApp 之间进行实时通信，适用于需要实时交互的应用场景。

通过这些示例和教程，开发者可以快速上手 WalletConnect 协议，实现钱包和 dApp 的无缝集成。