使用react连接区块链

步骤 1: 安装 Web3.js

在你的 React 项目中，首先需要安装 Web3.js。

npm install web3

步骤 2: 引入 Web3.js

在 React 组件中引入 Web3.js。

import Web3 from 'web3';

步骤 3: 设置 Web3 provider

通常使用 MetaMask 作为 provider，它是一个浏览器扩展，允许用户通过浏览器与以太坊区块链交互。

const web3 = new Web3(window.ethereum); // 通过 window.ethereum 访问 MetaMask

步骤 4: 请求用户允许访问 MetaMask

在用户浏览器中使用 MetaMask 扩展时，需要请求用户允许你的网页访问他们的账户。

const connect = async () => {
  try {
    const accounts = await web3.eth.requestAccounts();
    console.log('Connected', accounts[0]); // 打印用户账户地址
  } catch (error) {
    console.error('Error', error);
  }
};

步骤 5: 连接到智能合约

一旦你获得了用户的账户地址，就可以连接到智能合约。

const contractAddress = '你的智能合约地址'; // 智能合约地址
const contractABI =  [...]; // 智能合约 ABI

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

步骤 6: 调用智能合约函数

现在你可以调用智能合约的函数了。

const contractMethod = async () => {
  try {
    const result = await contract.methods.someMethod().call();
    console.log(result);
  } catch (error) {
    console.error('Error', error);
  }
};

例子

假设你有一个智能合约，它有一个 getBalance 方法，返回账户余额。

// React 组件
import React, { useState, useEffect } from 'react';
import Web3 from 'web3';

const web3 = new Web3(window.ethereum);

const BlockchainComponent = () => {
  const [balance, setBalance] = useState(''); // 存储余额状态

  useEffect(() => {
    if (window.ethereum) {
      connect();
    } else {
      console.log('Please install MetaMask');
    }
  }, []);

  const connect = async () => {
    try {
      const accounts = await web3.eth.requestAccounts();
      const balance = await web3.eth.getBalance(accounts[0]);
      console.log('Connected', accounts[0]);
      setBalance(balance);
    } catch (error) {
      console.error('Error', error);
    }
  };

  return (
    <div>
      <h1>React Blockchain Connection Example</h1>
      {balance ? <p>Balance: {balance}</p> : <p>Connect to MetaMask to see balance</p>}
    </div>
  );
};

export default BlockchainComponent;

在这个例子中，我们首先检查用户是否安装了 MetaMask，然后请求他们连接他们的账户。一旦连接，我们使用用户的账户地址获取余额，并将其显示在 React 组件中。