接入wallet connect

案例demo  

核心库如下

@wagmi/core：用于在 Web 应用中与以太坊及其他 EVM（以太坊虚拟机）兼容的区块链（如 Polygon, Arbitrum, Optimism, BNB Smart Chain 等）进行交互  

// 导入 Web3Modal 库的 HTML 版本，这是一个框架无关的预构建UI模态框
// 用于显示钱包连接界面，让用户可以选择和连接他们的加密货币钱包
import { Web3Modal } from "@web3modal/html";

// 从 @wagmi/core 库导入核心功能函数
import {
  configureChains,   // 配置应用支持的区块链网络和RPC提供商
  createConfig,      // 创建wagmi的客户端配置对象（包含链、连接器、提供商等）
  watchNetwork,      // 监听函数：当用户切换区块链网络时触发回调
  watchAccount,      // 监听函数：当用户切换钱包账户或连接状态变化时触发回调
} from "@wagmi/core";

// 从预定义的链列表中导入特定的区块链网络配置对象
// 这些对象包含网络的标准信息：链ID、名称、货币符号、RPC URL、区块浏览器等
import { mainnet, polygon } from "@wagmi/core/chains"; 
// mainnet: Ethereum 主网 (链ID: 1)
// polygon: Polygon PoS 主网 (链ID: 137)

基于 WalletConnect Cloud创建的，官网Dashboard | Reown  

一直有个报错，暂未解决  

写了个公共hooks，方便后续引用  

 "@wagmi/core": "^1.3.9",
 "@web3modal/ethereum": "^2.7.1",
 "@web3modal/html": "^2.7.1"

import { EthereumClient, w3mConnectors, w3mProvider } from '@web3modal/ethereum'
import { Web3Modal } from '@web3modal/html'
import {
  configureChains,
  createConfig,
  watchNetwork,
  watchAccount,
} from '@wagmi/core'
import { mainnet, polygon } from '@wagmi/core/chains'
import { ref, onMounted } from 'vue'

export function useWallet(
  callback: Function,
  id: string = 'ebaed7e2736beb0b53fad92933e247e4',
) {
  const chains = [mainnet, polygon]
  const projectId = id
  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 as any)

  const accountAddress = ref('')
  const isConnected = ref(false)
  async function connect() {
    await web3modal.openModal()
    console.log('web3modal: opened')
  }

  onMounted(() => {
    watchAccount((account: any) => {
      console.log('web3modal: account', account)
      accountAddress.value = account.address
      isConnected.value = account.isConnected
      callback?.()
    })
  })
  async function disconnect() {
    // do not use this method in production
    await ethereumClient.disconnect()
    console.log('web3modal: disconnected')
  }

  function getName(networkId: number) {
    switch (networkId) {
      case 1:
        return 'Mainnet'
      case 3:
        return 'Ropsten'
      case 4:
        return 'Rinkeby'
      case 5:
        return 'Goerli'
      case 42:
        return 'Kovan'
      case 137:
        return 'Polygon'
      case 80001:
        return 'Mumbai'
      case 1101:
        return 'zkEVM'
      default:
        return 'Unknown Chain'
    }
  }

  return {
    accountAddress,
    isConnected,
    connect,
    disconnect,
    getName,
    watchNetwork,
    watchAccount,
  }
}

实现以上效果  

vue/vue-wagmi

基本上和要求一模一样了。