vue3+vite+ts接入walletconnect

版本

"vue": "^3.2.45",
"vite": "^4.0.0",
"@walletconnect/client": "^1.8.0",
"@walletconnect/qrcode-modal": "^1.8.0",
"vite-plugin-compression": "^0.5.1",

在main.ts中加入

// 目的是兼容vite,不然会一下报错,webpack不会出现
// global is not defined
// buffer is not defined
// util is not defined
// exports is not defined
import "walletconnect-vite-patch"

在vite.config.ts修改配置

    define: {
      globals: {
      // 这个是解决打开walletconnect不会提示ws错误
        globalThis: 'globalThis',
      },
    },
    build: {
      rollupOptions: {
        output: {
          globals: {
           // 这个是解决打包问题
            globalThis: 'globalThis',
          },
        }
      }
    },

使用walletconnect

import WalletConnect from "@walletconnect/client";
import QRCodeModal from "@walletconnect/qrcode-modal";
let connector = new WalletConnect({
    bridge: "https://bridge.walletconnect.org", // Required
    qrcodeModal: QRCodeModal,
})
// Events: connect, disconnect, session_request, session_update, call_request, wc_sessionRequest, wc_sessionUpdate
    // Subscribe to connection events
    connector.on("connect", (error, payload) => {
        // 链接
        if (error) {
            throw error;
        }

        // Get provided accounts and chainId
        console.log('connect')
        console.log(payload)
        // address = ...

        // Tip localstorage will add walletconnect
    });

    connector.on("session_update", (error, payload) => {
        // 更新
        if (error) {
            throw error;
        }

        // Get updated accounts and chainId
        console.log('session_update')
        console.log(payload)
    });

    connector.on("session_request", (error, payload) => {
        // 请求
        if (error) {
            throw error;
        }

        // Get updated accounts and chainId
        console.log('session_request')
        console.log(payload)
    });

    connector.on("wc_sessionRequest", (error, payload) => {
        if (error) {
            throw error;
        }

        // Get updated accounts and chainId
        console.log('wc_sessionRequest')
        console.log(payload)
    });

    connector.on("wc_sessionUpdate", (error, payload) => {
        if (error) {
            throw error;
        }

        // Get updated accounts and chainId
        console.log('wc_sessionUpdate')
        console.log(payload)
    });

    connector.on("call_request", (error, payload) => {
        if (error) {
            throw error;
        }

        // Get updated accounts and chainId
        console.log('call_request')
        console.log(payload)
    });

    connector.on("disconnect", (error, payload) => {
        // 断开
        if (error) {
            throw error;
        }

        // Delete connector
        console.log('Delete connector')
        console.log(payload)
    });
    // 触发链接
    connector.createSession()

注意：要想测试在手机浏览器链接钱包功能，需要正确上网和在https下才能实现