Skip to content

Commit 1e72932

Browse files
jasonandjayjasonandjay
authored
Merge pull request #1206 from Catherine9201/main
fix: fix and optimize connect-wallet task
2 parents 2c223ab + b80f98d commit 1e72932

File tree

5 files changed

+291
-173
lines changed

5 files changed

+291
-173
lines changed

‎basic/78-wallet-connect/README.md

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
# WalletConnect
2+
3+
## 简介
4+
5+
**WalletConnect** 是一个开放协议，允许用户将加密钱包安全地连接到去中心化应用（DApps），并支持多区块链网络的交互。用户只需扫描二维码或使用深度链接，即可与 DApp 进行交互，而无需暴露私钥，提供了安全、便捷的体验。
6+
7+
WalletConnect 通过加密消息在钱包与 DApp 之间传递信息，确保安全性。此外，WalletConnect 还支持多链和多会话连接，已广泛应用于 DeFi 和 NFT 平台等 Web3 领域。
8+
9+
## 功能
10+
11+
- **多链支持**：WalletConnect v2 支持跨多个区块链网络的连接，用户可以在单一会话中管理多链资产。
12+
- **安全消息传递**：所有通信均加密，确保钱包和 DApp 之间的交互安全。
13+
- **灵活的会话管理**：支持多会话，用户可以轻松在不同 DApps 和区块链网络之间切换。
14+
- **简单的集成方式**：DApp 和钱包开发者可以使用 WalletConnect SDK 快速集成，并支持广泛的钱包连接。
15+
- **跨平台兼容**：支持 iOS、Android 和 Web，确保用户在各种设备上都能访问。
16+
17+
## 安装
18+
19+
在 DApp 中使用 WalletConnect 时，可以安装 WalletConnect JavaScript 客户端库：
20+
21+
```bash
22+
npm install @walletconnect/client
23+
```
24+
25+
对于钱包提供方，需要集成 WalletConnect SDK（提供 iOS、Android 和 Web 版本）。
26+
27+
## 使用
28+
29+
### 步骤 1：初始化 WalletConnect 客户端
30+
31+
在 JavaScript/TypeScript 代码中，导入并初始化 WalletConnect 客户端：
32+
33+
```javascript
34+
import WalletConnect from "@walletconnect/client";
35+
import QRCodeModal from "@walletconnect/qrcode-modal";
36+
37+
// 创建 WalletConnect 客户端实例
38+
const connector = new WalletConnect({
39+
bridge: "https://bridge.walletconnect.org", // 必填项
40+
qrcodeModal: QRCodeModal,
41+
});
42+
```
43+
44+
### 步骤 2：检查连接并创建会话
45+
46+
如果没有已建立的连接，则创建一个新会话，提示用户连接钱包。
47+
48+
```javascript
49+
// 检查是否已连接
50+
if (!connector.connected) {
51+
// 创建新会话
52+
await connector.createSession();
53+
}
54+
55+
// 监听会话事件
56+
connector.on("connect", (error, payload) => {
57+
if (error) {
58+
throw error;
59+
}
60+
61+
// 连接成功
62+
const { accounts, chainId } = payload.params[0];
63+
});
64+
65+
connector.on("session_update", (error, payload) => {
66+
if (error) {
67+
throw error;
68+
}
69+
70+
// 更新的账户和链ID
71+
const { accounts, chainId } = payload.params[0];
72+
});
73+
74+
connector.on("disconnect", (error, payload) => {
75+
if (error) {
76+
throw error;
77+
}
78+
79+
// 已断开连接
80+
});
81+
```
82+
83+
### 步骤 3：发送交易
84+
85+
连接成功后，即可与区块链进行交互。例如，发送一笔交易：
86+
87+
```javascript
88+
// 设置交易详情
89+
const tx = {
90+
from: accounts[0], // 用户地址
91+
to: "0xRecipientAddress",
92+
value: "0xAmountInWei", // 金额，单位为 wei
93+
data: "0x", // 可选数据
94+
};
95+
96+
// 发送交易请求
97+
const result = await connector.sendTransaction(tx);
98+
```
99+
100+
## 从 WalletConnect v1 迁移到 v2
101+
102+
随着 WalletConnect v2 的发布，应用现已支持多链、多会话功能，并提供了更高的安全性。如果您仍在使用 WalletConnect v1，建议尽快迁移到 v2，以享受这些新功能的优势。
103+
104+
105+
## WalletConnect V1 与 V2 对比
106+
107+
WalletConnect V2 引入了多链、多会话支持和改进的协议设计，提升了用户体验和开发灵活性。以下是 V1 和 V2 主要功能的对比：
108+
109+
| 功能 | WalletConnect V1 | WalletConnect V2 |
110+
|---------------------------|-----------------------------------------|------------------------------------------------|
111+
| **多链支持** | 不支持 | 支持多个区块链网络，允许跨链操作 |
112+
| **多会话管理** | 不支持 | 支持多个会话同时存在，简化用户切换 |
113+
| **连接效率** | 单一桥接服务器，容易过载 | 分布式桥接，降低延迟，提升连接稳定性 |
114+
| **消息加密方式** | 使用 AES-256-CBC 加密 | 使用 X25519 和 Noise 协议的混合加密方案 |
115+
| **会话恢复** | 每次需重新连接，体验不佳 | 支持持久会话，用户无需频繁扫码 |
116+
| **会话控制和管理** | 简单控制，功能有限 | 提供更细致的权限控制和管理接口 |
117+
| **拓展性** | 限制较多 | 模块化设计，支持不同应用场景的灵活扩展 |
118+
| **链选择** | 无法在会话中切换链 | 用户可在单一会话中选择并切换多个区块链 |
119+
| **连接稳定性** | 依赖于中心化桥接服务器 | 支持分布式和多节点桥接，增强连接稳定性 |
120+
| **事件监听** | 支持基础事件监听 | 提供丰富的事件 API，简化多链事件处理 |
121+
| **开发难度** | 较低 | 功能更强大，集成更复杂，需要额外的配置 |
122+
123+
## 常见问题
124+
125+
- **二维码未显示**：请确保 `QRCodeModal` 正确导入并配置。
126+
- **连接问题**：请检查桥接 URL，默认桥接为 `"https://bridge.walletconnect.org"`，也支持自托管桥接。
127+
128+
## 资源
129+
130+
- [WalletConnect 文档](https://docs.walletconnect.com/)
131+
- [WalletConnect GitHub](https://github.com/WalletConnect)
132+
- [WalletConnect 博客](https://walletconnect.com/blog)
133+
134+
## 许可证
135+
136+
本项目采用 MIT 许可证。

‎basic/78-wallet-connect/v2/basic-dapp-example/README.md

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,29 @@
1+
# Wallet Connect Demo
12

2-
# Run the demo
3-
```
4-
yarn
5-
yarn start
6-
```
3+
This demo showcases how to set up Wallet Connect with React, using `wagmi` and `web3modal` for blockchain connection and user authentication.
74

8-
# Reference
9-
- https://wagmi.sh/react/getting-started
10-
- https://wagmi.sh/examples/connect-wallet
5+
## Setup Instructions
116

7+
1. **Install Dependencies**
8+
```bash
9+
yarn
10+
```
11+
12+
2. **Create `.env` File**
13+
14+
Create a `.env` file in the root of your project and add your Wallet Connect Project ID. You can obtain a Project ID by signing up at [Wallet Connect Cloud](https://cloud.walletconnect.com).
15+
16+
```plaintext
17+
REACT_APP_PROJECT_ID=your_project_id_here
18+
```
19+
20+
3. **Start the Demo**
21+
```bash
22+
yarn start
23+
```
24+
25+
## References
26+
27+
For more details, see the following resources:
28+
- [Wagmi Getting Started](https://wagmi.sh/react/getting-started)
29+
- [Wagmi Connect Wallet Example](https://wagmi.sh/examples/connect-wallet)

‎basic/78-wallet-connect/v2/basic-dapp-example/src/App.js

Lines changed: 21 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,45 @@
1-
//Ignore this
2-
import Button from '@material-ui/core/Button';
1+
// Import core components and styles
32
import './App.css';
43

5-
//WalletConnect basic imports
6-
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
4+
// WalletConnect and Wagmi imports
5+
import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum';
6+
import { Web3Modal, Web3Button, Web3NetworkSwitch } from '@web3modal/react';
7+
import { configureChains, createConfig, WagmiConfig } from 'wagmi';
8+
import { mainnet, arbitrum, polygon, localhost } from 'wagmi/chains';
79

8-
//WalletConenct UI components
9-
import { Web3Modal } from '@web3modal/react';
10-
import { Web3Button } from '@web3modal/react';
11-
import { Web3NetworkSwitch } from '@web3modal/react';
12-
import { W3mQrCode } from '@web3modal/react';
10+
// Define chains and project ID
11+
const chains = [mainnet, arbitrum, polygon, localhost];
12+
const projectId = process.env.REACT_APP_PROJECT_ID || "453f2a8e1d89bc35b8bc49eb781167b9";
1313

14-
15-
//WalletConnect Hooks to controll the UI status
16-
import { useWeb3Modal } from '@web3modal/react';
17-
18-
//Wagami imports
19-
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
20-
import { mainnet, arbitrum, polygon, localhost} from 'wagmi/chains'
21-
22-
23-
//Define which blockchains you want to connect
24-
const chains = [mainnet, arbitrum, polygon,localhost];
25-
//Your project id, apply one at https://cloud.walletconnect.com
26-
const projectId = process.env.REACT_APP_PROJECT_ID;
27-
28-
//Wagmi client
29-
const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
14+
// Configure Wagmi client and Ethereum client
15+
const { publicClient } = configureChains(chains, [w3mProvider({ projectId })]);
3016
const wagmiConfig = createConfig({
3117
autoConnect: true,
3218
connectors: w3mConnectors({ projectId, chains }),
3319
publicClient
34-
})
35-
const ethereumClient = new EthereumClient(wagmiConfig, chains)
20+
});
21+
const ethereumClient = new EthereumClient(wagmiConfig, chains);
3622

3723
function App() {
3824
return (
3925
<div>
4026
<WagmiConfig config={wagmiConfig}>
41-
<HomePageExample1 />
27+
<HomePage />
4228
</WagmiConfig>
4329

4430
<Web3Modal projectId={projectId} ethereumClient={ethereumClient} />
4531
</div>
46-
)
32+
);
4733
}
4834

49-
50-
51-
function HomePageExample1() {
52-
53-
return (<div className='homepage'>
54-
<Web3NetworkSwitch/>
55-
<Web3Button style={{
56-
marginTop: '20px'
57-
}}/>
58-
35+
function HomePage() {
36+
return (
37+
<div className="homepage">
38+
<Web3NetworkSwitch />
39+
<Web3Button style={{ marginTop: '20px' }} />
5940
</div>
6041
);
6142
}
6243

63-
function HomePageExample2() {
64-
const { open, close } = useWeb3Modal();
65-
66-
return (<div className='homepage'>
67-
<Button variant="contained" color="primary"
68-
onClick={() => open()}>Wallet Connect
69-
</Button>
70-
</div>
71-
);
72-
}
7344

74-
export default App;
45+
export default App;

‎basic/78-wallet-connect/v2/sign-example/README.md

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,29 @@
1+
# Wallet Connect Sign Demo
12

2-
# Reference
3-
- https://github.com/WalletConnect/web3modal-examples/blob/main/walletconnect-modal-sign-react/src/pages/index.jsx
3+
This demo showcases how to set up Wallet Connect with React, using `wagmi` and `web3modal` for blockchain connection and user authentication.
4+
5+
## Setup Instructions
6+
7+
1. **Install Dependencies**
8+
```bash
9+
yarn
10+
```
11+
12+
2. **Create `.env` File**
13+
14+
Create a `.env` file in the root of your project and add your Wallet Connect Project ID. You can obtain a Project ID by signing up at [Wallet Connect Cloud](https://cloud.walletconnect.com).
15+
16+
```plaintext
17+
REACT_APP_PROJECT_ID=your_project_id_here
18+
```
19+
20+
3. **Start the Demo**
21+
```bash
22+
yarn start
23+
```
24+
25+
## References
26+
27+
For more details, see the following resources:
28+
- [Wagmi Getting Started](https://wagmi.sh/react/getting-started)
29+
- [Wagmi Connect Wallet Example](https://wagmi.sh/examples/connect-wallet)

0 commit comments

Comments
 (0)