小试牛刀-walletconnect二维码及交互

目录

1.编写目的

2.实现功能

3.功能详解

依赖组件

3.1 二维码生成

3.1.1 初始化SignClient

 3.1.2 创建会话空间获取WC协议uri

3.1.3 生成二维码供用户扫描

3.1.4 等待扫描

3.2 发送交易事务

3.2.1 创建交易事务

3.2.2 向用户发送交易事务

3.3 签名事务

3.3.1 接收签名事务并验证

3.3.2 发送签名并发送到链上

3.4 签名任意数据并验证

---

Welcome to Code Block's blog

本篇文章主要介绍了

[walletconnect二维码及交互]
❤博主广交技术好友，喜欢文章的可以关注一下❤

1.编写目的

       最近在使用walletconnect协议和typescript语言实现相关交互功能,在此对从walletconnet协议二维码生成、连接后发送交易事务、签名事务、签名任意信息的处理进行记录,加深对walletconnect的理解,熟悉对其组件的使用,同时希望帮助到有实现相关功能的朋友。

2.实现功能

1. 二维码生成:生成wc:协议二维码供用户扫码连接.
2. 发送交易事务:向用户发送Transaction以供用户签名.
3. 签名事务:用户签名后将transaction提交的链上.
4. 签名任意信息:用户对任意信息签名,同时可以完成对签名信息的验证.

3.功能详解

依赖组件

名称	版本	作用
@solana/web3.js	1.95.2	链上相关操作:生成交易事务,提交事务到链上
@walletconnect/sign-client	2.14.0	walletconnect协议相关操作:生成二维码、发送事务
solana/spl-token	0.4.8	SPL代币事务操作:生成SPL代币事务
qrcode	1.5.3	生成二维码

注:这里的链是SOL链,其它链用法类似.SPL代币即除主要代币之外的代币. 

3.1 二维码生成

3.1.1 初始化SignClient

        SignClient作为与用户wallet交互的主要实现类,在开始时要进行初始化,初始化要使用参数分别是metadata和projectId,metadata是项目相关信息,这些信息会在连接时进行展示.projectId是在walletconnect官网申请的项目ID.代码如下:

const metadata={
  //项目名称
  name: 'BoggyGame',
  //项目解释
  description: 'BoggyGame Bot',
  //项目官网
  url: 'https://www.boggycoin.com',
  //项目图片
  icons: [
    "https://i.postimg.cc/sftPCk3M/photo-2024-07-12-14-12-43.jpg"
  ]
}
//项目ID
const projectId="0176e783e7c5b0713450333ff866c2d6"

        然后就可以对SignClient进行初始化,为保证性能,这里Sign