区块链前端:Vue 3 + Web3.js的DApp钱包集成方案

区块链前端:Vue 3 + Web3.js的DApp钱包集成方案

引言

大家好,欢迎来到今天的讲座!今天我们要聊的是如何在Vue 3项目中集成Web3.js来创建一个DApp(去中心化应用)钱包。如果你对区块链、智能合约和前端开发感兴趣,那么这篇文章绝对适合你!我们会用轻松诙谐的语言,带你一步步完成这个集成过程。准备好了吗?让我们开始吧!

什么是DApp?

首先,我们来简单了解一下什么是DApp。DApp是“去中心化应用”的缩写,它是一种基于区块链技术的应用程序。与传统的应用程序不同,DApp的数据存储在区块链上,而不是集中式的服务器中。这意味着DApp具有更高的透明度、安全性和抗审查性。

为了与区块链交互,我们需要使用一种叫做“钱包”的工具。钱包可以帮助我们管理私钥、发送交易和与智能合约进行交互。常见的钱包有MetaMask、WalletConnect等。今天我们要做的就是将这些钱包集成到我们的Vue 3项目中,让用户可以方便地与区块链进行交互。

环境准备

在开始之前,我们需要确保已经安装了以下工具:

  • Node.js:用于运行JavaScript代码。
  • npm 或 yarn:用于管理依赖包。
  • Vue CLI:用于创建和管理Vue项目。
  • MetaMask:一个流行的以太坊钱包扩展,用户可以通过它与DApp进行交互。

创建Vue 3项目

如果你还没有创建Vue 3项目,可以使用Vue CLI快速生成一个新项目:

vue create my-dapp

选择Vue 3作为默认版本,并安装必要的依赖。完成后,进入项目目录:

cd my-dapp

安装Web3.js

Web3.js是一个用于与以太坊区块链交互的JavaScript库。我们可以使用npm或yarn来安装它:

npm install web3

或者

yarn add web3

集成MetaMask

MetaMask是一个非常流行的以太坊钱包,它允许用户通过浏览器扩展与DApp进行交互。为了集成MetaMask,我们需要检测用户的浏览器是否已经安装了MetaMask,并连接到以太坊网络。

检测MetaMask

在Vue 3中,我们可以在mounted生命周期钩子中检测MetaMask是否存在。如果存在,我们可以获取当前连接的账户信息。

<template>
  <div>
    <h1>我的DApp</h1>
    <p v-if="account">当前账户: {{ account }}</p>
    <button @click="connectWallet" v-else>连接钱包</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import Web3 from 'web3';

export default {
  setup() {
    const account = ref(null);
    const web3 = new Web3(window.ethereum);

    const connectWallet = async () => {
      try {
        // 请求用户授权连接钱包
        await window.ethereum.request({ method: 'eth_requestAccounts' });
        const accounts = await web3.eth.getAccounts();
        account.value = accounts[0];
        console.log('Connected to MetaMask:', account.value);
      } catch (error) {
        console.error('用户拒绝连接钱包', error);
      }
    };

    onMounted(() => {
      if (window.ethereum) {
        // 如果MetaMask已安装,自动连接
        connectWallet();
      } else {
        console.warn('请安装MetaMask');
      }
    });

    return {
      account,
      connectWallet,
    };
  },
};
</script>

监听账户变化

用户可能会在页面加载后切换账户或断开钱包连接。为了处理这种情况,我们可以监听accountsChanged事件,并在账户发生变化时更新状态。

onMounted(() => {
  if (window.ethereum) {
    // 自动连接钱包
    connectWallet();

    // 监听账户变化
    window.ethereum.on('accountsChanged', (accounts) => {
      if (accounts.length > 0) {
        account.value = accounts[0];
        console.log('账户已更改:', account.value);
      } else {
        account.value = null;
        console.log('钱包已断开');
      }
    });

    // 监听网络变化
    window.ethereum.on('chainChanged', (chainId) => {
      console.log('网络已更改:', chainId);
    });
  } else {
    console.warn('请安装MetaMask');
  }
});

与智能合约交互

现在我们已经成功连接了MetaMask,接下来可以与智能合约进行交互了。假设我们有一个简单的ERC-20代币合约,合约地址为0x...,ABI(应用程序二进制接口)如下:

[
  {
    "constant": true,
    "inputs": [],
    "name": "name",
    "outputs": [
      {
        "name": "",
        "type": "string"
      }
    ],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [],
    "name": "symbol",
    "outputs": [
      {
        "name": "",
        "type": "string"
      }
    ],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  },
  {
    "constant": true,
    "inputs": [
      {
        "name": "_owner",
        "type": "address"
      }
    ],
    "name": "balanceOf",
    "outputs": [
      {
        "name": "balance",
        "type": "uint256"
      }
    ],
    "payable": false,
    "stateMutability": "view",
    "type": "function"
  }
]

我们可以使用Web3.js与这个合约进行交互。首先,定义合约实例:

const contractAddress = '0x...'; // 合约地址
const contractABI = [/* ABI内容 */]; // 合约ABI

const contract = new web3.eth.Contract(contractABI, contractAddress);

然后,我们可以调用合约中的方法。例如,查询用户的代币余额:

const getBalance = async () => {
  if (account.value) {
    try {
      const balance = await contract.methods.balanceOf(account.value).call();
      console.log('用户余额:', web3.utils.fromWei(balance, 'ether'), 'ETH');
    } catch (error) {
      console.error('获取余额失败', error);
    }
  } else {
    console.warn('请先连接钱包');
  }
};

发送交易

除了查询数据,我们还可以通过DApp发送交易。例如,用户可以将代币转账给其他地址。发送交易需要用户签名并广播到区块链网络。

const sendTokens = async (toAddress, amount) => {
  if (account.value) {
    try {
      const tx = await contract.methods.transfer(toAddress, web3.utils.toWei(amount, 'ether')).send({
        from: account.value,
      });
      console.log('交易成功:', tx.transactionHash);
    } catch (error) {
      console.error('交易失败', error);
    }
  } else {
    console.warn('请先连接钱包');
  }
};

处理Gas费用

在以太坊网络中,每笔交易都需要支付Gas费用。Gas费用是用来支付矿工打包交易的报酬。我们可以使用Web3.js来估算Gas费用,并提示用户确认交易。

const estimateGas = async (toAddress, amount) => {
  if (account.value) {
    try {
      const gas = await contract.methods.transfer(toAddress, web3.utils.toWei(amount, 'ether')).estimateGas({
        from: account.value,
      });
      console.log('预计Gas费用:', gas);
    } catch (error) {
      console.error('估算Gas失败', error);
    }
  } else {
    console.warn('请先连接钱包');
  }
};

总结

通过今天的讲座,我们学习了如何在Vue 3项目中集成Web3.js和MetaMask,创建一个简单的DApp钱包。我们不仅学会了如何连接钱包、监听账户变化,还掌握了如何与智能合约进行交互和发送交易。

当然,这只是DApp开发的冰山一角。如果你想进一步深入学习,建议阅读以下文档:

  • Web3.js官方文档:详细介绍了Web3.js的各种功能和API。
  • Ethereum官方文档:提供了关于以太坊网络、智能合约和Gas费用的详细介绍。

希望今天的讲座对你有所帮助!如果你有任何问题,欢迎在评论区留言。我们下次再见! 😊

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注