vue+MetaMask=》连接钱包以及签名（chatGPT）_vue 连接钱包

<template>
  <div>
    <button @click="connectWallet">连接钱包</button>
    <button @click="signMessage">签名</button>
  </div>
</template>

<script>
import Web3 from 'web3';

export default {
  data() {
    return {
      web3: null,
      connected: false,
      message: 'This is a test message',
      signature: '',
    };
  },
  methods: {
    async connectWallet() {
  if (!window.ethereum) {
    console.warn("请安装MetaMask");
    return;
  }

  try {
    await window.ethereum.request({ method: 'eth_requestAccounts' });
    this.web3 = await new Web3(window.ethereum);
    this.connected = true;
    console.log("已连接钱包");
  } catch (error) {
    console.error(error);
  }
},
// async connectWallet() {
//       if (window.ethereum) {
//         // 如果用户已经安装了狐狸钱包
//         await window.ethereum.request({ method: 'wallet_requestPermissions', params: [{ eth_accounts: {} }] })
//         // 并请求连接到用户当前选定的账户
//         await window.ethereum.enable()
//         // 取得连接到的用户地址
//         const address = await window.ethereum.selectedAddress
//         console.log(`已连接到地址 ${address}`)
//         this.connected = true;
//       } else {
//         alert('请您先安装狐狸钱包')
//       }
//     },

    async signMessage() {
      if (!this.connected) {
        console.warn("请先连接到钱包");
        return;
      }

      const address = (await this.web3.eth.getAccounts())[0];
      console.log(address);

      const signature = await this.web3.eth.personal.sign(this.message, address);
      this.signature = signature;
      console.log(signature);
    },
  },
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67