wallet connect简单使用

准备工作

新建一个文件夹xxx
右键在终端中打开

npm init -y

在文件夹中新建src目录
在src目录中新建index.html和index.js文件
目录大概就这样我这是打包过的

安装

按照官方文档先安装
官方页面长这样
我们需要用到的是web3Modal

点进去我们可以看到两个选项，我这边用的是第二个

点进去复制命令并运行

npm install @web3modal/ethereum @web3modal/html @wagmi/core v

配置

安装完成以后在index.js中添加以下代码

import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'
import { configureChains, createConfig } from '@wagmi/core'
import {bsc,arbitrum, mainnet, polygon } from '@wagmi/core/chains'

const chains = [bsc,mainnet, polygon,arbitrum]
const projectId = 'db7b6ce8400c28046ecf596904518647'

const { publicClient } = configureChains(chains, [w3mProvider({ projectId })])
const wagmiConfig = createConfig({
  autoConnect: true,
  connectors: w3mConnectors({ projectId, chains }),
  publicClient
})
const ethereumClient = new EthereumClient(wagmiConfig, chains)
const web3modal = new Web3Modal({ projectId }, ethereumClient)


console.log(ethereumClient.getNetwork())
console.log(ethereumClient.getAccount());

这段代码官网上也有，只是我们需要配置自己的projectId ，以及配置公链，支持的公链可以在\node_modules\viem\chains下查看

const chains = [bsc,mainnet, polygon,arbitrum]

公链配置哪个写在前面哪个就是默认连接的公链
projectId 要自己申请
在这个地方点进去直接申请就可以

在index.html中添加一个按钮

<w3m-core-button></w3m-core-button>

这个也还是官方文档上有

打包

做完上面的配置我们需要用webpack打包项目
如果没有打包我们直接打开的话我们会报如下的错误

打包命令

npx webpack build

没有安装webpack的需要自己安装，我直接使用是因为我全局安装过

npm insatll webpack -g

打包完成后会在文件夹中多出一个dist文件夹，里面会有个main.js文件
在html中引入main.js

测试

打开html文件
不出意外应该会有这么一个按钮

点击按钮就可以显示二维码了
当然我下面这个二维码是本地测试用的
扫了没用

可以扫码连接或者直接点下面的小图标用浏览器插件连接
连接成功

要退出或者切换公链只需在次点击按钮即可

完结