WalletConnect 钱包连接

最新推荐文章于 2023-12-30 11:29:19 发布

子玖

最新推荐文章于 2023-12-30 11:29:19 发布

阅读量1.3k

点赞数 5

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_61463372/article/details/129959036

版权

下载依赖

  npm install --save @walletconnect/sign-client @web3modal/standalone

配置命令
utils/wallet.js

// 钱包连接-
import { SignClient } from '@walletconnect/sign-client'
import { Web3Modal } from '@web3modal/standalone'

// 1. Define constants
const projectId = 'xxxxxxxxxxxxxxxxxxxx'
const namespaces = {
  eip155: { methods: ['eth_sign'], chains: ['eip155:1'], events: ['accountsChanged'] }
}

// 3. Create modal client
const web3Modal = new Web3Modal({ projectId, standaloneChains: namespaces.eip155.chains })
let signClient = undefined

// 4. Initialise clients
export async function initClient() {
  setInterval(() => {
    console.log('keep alive')
  }, 2000)
  try {
    signClient = await SignClient.init({ projectId })
  } catch (err) {
    console.error(err)
  }
}

// 5. 打开钱包
export const openWallet = async () => {
  try {
    if (signClient) {
      const { uri, approval } = await signClient.connect({ requiredNamespaces: namespaces })
      if (uri) {
        await web3Modal.openModal({ uri })
        await approval()
        web3Modal.closeModal()
      }
    }
  } catch (err) {
    console.error(err)
  }
}

使用app.vue

<template>
  <a-button v-if="initWalletSuccess" type="primary" class="qr-code-btn" @click="onClickWallet">
    Open in wallet
  </a-button>
</template>

<script>
import { openWallet, initClient  } from '@/utils/wallet.js'
export default {
  data () {
    return {
      initWalletSuccess: false
    }
  },
  mounted() {
    this.initWallet()
  },
  methods: {
    async initWallet() { // 初始化wallet钱包
      console.log('init wallet ...')
      this.initWalletSuccess = false;
      await initClient()
      this.initWalletSuccess = true;
      console.log('init wallet success')
    },
    async onClickWallet() { // 使用wallet钱包
      console.log('onClickWallet')
      openWallet()
    }
  }
}
</script>

其他 - 报错

列如：
在这里插入图片描述

解决：

module.exports = {
  configureWebpack: {
    module: {
       rules: [{ test: /node_modules[\\/]@walletconnect/, loader: 'babel-loader' }, { test: /node_modules[\\/]@web3modal/, loader: 'babel-loader' }]
    }
  }
}