Web3快速入门指南：从前后端开发者到区块链开发者

// 简化的区块结构（类比理解）
{
  blockNumber: 1000,           // 区块高度
  timestamp: 1700000000,       // 时间戳
  transactions: [              // 交易列表
    {from: "0xABC...", to: "0xDEF...", value: "1.5 ETH"},
    {from: "0x123...", to: "0x456...", value: "0.5 ETH"}
  ],
  previousHash: "0x00001abc...",  // 前一个区块的哈希
  hash: "0x00002def...",          // 当前区块的哈希
  nonce: 12345                     // 用于挖矿的随机数
}

// 类比：Web2.0的API请求 → Web3.0的交易
// Web2.0
fetch('/api/transfer', {
  method: 'POST',
  body: { from: 'user1', to: 'user2', amount: 100 }
})

// Web3.0
{
  from: "0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb",
  to: "0x5aAeb6053F3E94C9b9A09f33669435E7Ef1BeAed",
  value: "1500000000000000000", // 1.5 ETH (单位是 wei)
  gas: 21000,                    // Gas 限制
  gasPrice: "20000000000",       // Gas 价格
  nonce: 5,                      // 交易序号
  signature: "0x..."             // 私钥签名
}

// 示例（使用SHA-256）
hash("Hello")  // → "185f8db32271fe25f561a6fc938b2e264306ec304eda518007d1764826381969"
hash("Hello!") // → "334d016f755cd6dc58c53a86e183882f8ec14f52fb05345887c8a5edd42c87b7"
// 完全不同！

// 使用 ethers.js 生成钱包
const { ethers } = require('ethers');

// 方法1: 随机生成
const wallet = ethers.Wallet.createRandom();
console.log('私钥:', wallet.privateKey);
// 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

console.log('地址:', wallet.address);
// 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266

// 方法2: 从私钥导入
const importedWallet = new ethers.Wallet('0xac0974bec...');
console.log('地址:', importedWallet.address);
// 相同的私钥永远对应相同的地址

// 从助记词恢复钱包
const mnemonic = "test test test test test test test test test test test junk";
const wallet = ethers.Wallet.fromMnemonic(mnemonic);

console.log('地址:', wallet.address);
// 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266

// 派生路径 (HD Wallet)
const hdNode = ethers.utils.HDNode.fromMnemonic(mnemonic);
const account0 = hdNode.derivePath("m/44'/60'/0'/0/0");
const account1 = hdNode.derivePath("m/44'/60'/0'/0/1");
const account2 = hdNode.derivePath("m/44'/60'/0'/0/2");

console.log('账户0:', account0.address);
console.log('账户1:', account1.address);
console.log('账户2:', account2.address);
// 一个助记词可以管理多个账户

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;  // 指定编译器版本

// 合约定义（类似 class）
contract HelloWorld {
    // 状态变量（存储在区块链上）
    string public message;
    
    // 构造函数（部署时执行一次）
    constructor(string memory _message) {
        message = _message;
    }
    
    // 公开函数（可被外部调用）
    function setMessage(string memory _newMessage) public {
        message = _newMessage;  // 修改状态，需要花费Gas
    }
    
    // 视图函数（只读，不消耗Gas）
    function getMessage() public view returns (string memory) {
        return message;
    }
}

// 类似的JavaScript类
class HelloWorld {
    constructor(message) {
        this.message = message;  // 存在内存中，重启丢失
    }
    
    setMessage(newMessage) {
        this.message = newMessage;
    }
    
    getMessage() {
        return this.message;
    }
}

// Solidity的状态变量存储在区块链上
// 类似于永久保存到数据库

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract SimpleVote {
    // 状态变量
    mapping(address => bool) public hasVoted;  // 记录是否已投票
    mapping(string => uint) public votes;      // 记录每个选项的票数
    
    string[] public options;  // 投票选项列表
    
    // 事件（类似日志，前端可以监听）
    event Voted(address indexed voter, string option);
    
    // 构造函数
    constructor(string[] memory _options) {
        options = _options;
    }
    
    // 投票函数
    function vote(string memory option) public {
        // 检查是否已投票
        require(!hasVoted[msg.sender], "You have already voted");
        
        // 记录投票
        hasVoted[msg.sender] = true;
        votes[option] += 1;
        
        // 触发事件
        emit Voted(msg.sender, option);
    }
    
    // 获取选项票数
    function getVotes(string memory option) public view returns (uint) {
        return votes[option];
    }
}

// 如果没有Gas，恶意代码可以无限循环
contract Malicious {
    function attack() public {
        while(true) {  // 无限循环，瘫痪网络
            // ...
        }
    }
}

// 有了Gas，循环会在Gas耗尽时停止
// 攻击者需要支付大量费用，不划算

// 转账 1 ETH
Gas Used: 21,000
Gas Price: 20 Gwei

总费用 = 21,000 × 20 Gwei
       = 420,000 Gwei
       = 0.00042 ETH
       ≈ $0.84（假设1 ETH = $2000）

// 调用投票合约的vote()函数
Gas Used: 65,000
Gas Price: 50 Gwei（网络拥堵，价格高）

总费用 = 65,000 × 50 Gwei
       = 3,250,000 Gwei
       = 0.00325 ETH
       ≈ $6.50

const { ethers } = require('ethers');

// 连接到以太坊网络
const provider = new ethers.providers.JsonRpcProvider('https://eth-mainnet.g.alchemy.com/v2/YOUR-API-KEY');

// 估算转账Gas
const gasEstimate = await provider.estimateGas({
    to: '0x742d35Cc6634C0532925a3b844Bc9e7595f0bEb',
    value: ethers.utils.parseEther('1.0')
});
console.log('预估Gas用量:', gasEstimate.toString());  // 21000

// 获取当前Gas价格
const gasPrice = await provider.getGasPrice();
console.log('当前Gas价格:', ethers.utils.formatUnits(gasPrice, 'gwei'), 'Gwei');

// 计算总费用
const totalCost = gasEstimate.mul(gasPrice);
console.log('预估费用:', ethers.utils.formatEther(totalCost), 'ETH');

// ❌ Gas浪费
contract Bad {
    uint[] public numbers;
    
    function sumArray() public view returns (uint) {
        uint sum = 0;
        for (uint i = 0; i < numbers.length; i++) {
            sum += numbers[i];  // 每次循环都读取存储
        }
        return sum;
    }
}

// ✅ Gas优化
contract Good {
    uint[] public numbers;
    
    function sumArray() public view returns (uint) {
        uint[] memory nums = numbers;  // 一次性读到内存
        uint sum = 0;
        for (uint i = 0; i < nums.length; i++) {
            sum += nums[i];  // 从内存读取，更便宜
        }
        return sum;
    }
}

# 创建React项目
npx create-react-app my-dapp
cd my-dapp

# 安装依赖
npm install ethers

// src/hooks/useWallet.js
import { useState, useEffect } from 'react';
import { ethers } from 'ethers';

export const useWallet = () => {
  const [account, setAccount] = useState(null);
  const [provider, setProvider] = useState(null);
  const [signer, setSigner] = useState(null);
  const [chainId, setChainId] = useState(null);

  // 连接钱包
  const connectWallet = async () => {
    try {
      // 检查是否安装MetaMask
      if (!window.ethereum) {
        alert('请安装MetaMask');
        return;
      }

      // 请求连接钱包
      const accounts = await window.ethereum.request({
        method: 'eth_requestAccounts'
      });

      // 创建Provider和Signer
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const network = await provider.getNetwork();

      setAccount(accounts[0]);
      setProvider(provider);
      setSigner(signer);
      setChainId(network.chainId);

      console.log('连接成功:', accounts[0]);
      console.log('网络ID:', network.chainId);
    } catch (error) {
      console.error('连接失败:', error);
    }
  };

  // 监听账户切换
  useEffect(() => {
    if (window.ethereum) {
      window.ethereum.on('accountsChanged', (accounts) => {
        setAccount(accounts[0]);
        console.log('账户已切换:', accounts[0]);
      });

      window.ethereum.on('chainChanged', (chainId) => {
        window.location.reload();  // 网络切换时重新加载
      });
    }

    return () => {
      if (window.ethereum) {
        window.ethereum.removeAllListeners();
      }
    };
  }, []);

  return {
    account,
    provider,
    signer,
    chainId,
    connectWallet,
    isConnected: !!account
  };
};

// src/App.js
import React from 'react';
import { useWallet } from './hooks/useWallet';

function App() {
  const { account, connectWallet, isConnected } = useWallet();

  return (
    <div>
      <h1>我的第一个DApp</h1>
      {!isConnected ? (
        <button onClick={connectWallet}>连接钱包</button>
      ) : (
        <div>
          <p>已连接: {account}</p>
          <p>地址缩写: {account.slice(0, 6)}...{account.slice(-4)}</p>
        </div>
      )}
    </div>
  );
}

export default App;

// 读取ETH余额
const getBalance = async (address) => {
  const balance = await provider.getBalance(address);
  const balanceInEth = ethers.utils.formatEther(balance);
  console.log(`余额: ${balanceInEth} ETH`);
  return balanceInEth;
};

// 读取区块信息
const getBlockInfo = async () => {
  const blockNumber = await provider.getBlockNumber();
  const block = await provider.getBlock(blockNumber);
  
  console.log('最新区块:', blockNumber);
  console.log('区块时间:', new Date(block.timestamp * 1000));
  console.log('交易数:', block.transactions.length);
};

// 读取智能合约数据
const contractAddress = '0x5FbDB2315678afecb367f032d93F642f64180aa3';
const contractABI = [
  'function getMessage() public view returns (string)',
  'function votes(string) public view returns (uint256)'
];

const contract = new ethers.Contract(contractAddress, contractABI, provider);

// 调用view函数（不消耗Gas）
const message = await contract.getMessage();
console.log('合约消息:', message);

const voteCount = await contract.votes('选项A');
console.log('选项A的票数:', voteCount.toString());

// 发送ETH转账
const sendEth = async (toAddress, amount) => {
  try {
    const tx = await signer.sendTransaction({
      to: toAddress,
      value: ethers.utils.parseEther(amount)  // 转换为wei
    });
    
    console.log('交易已发送:', tx.hash);
    console.log('等待确认...');
    
    // 等待交易被打包
    const receipt = await tx.wait();
    
    console.log('交易已确认!');
    console.log('区块高度:', receipt.blockNumber);
    console.log('Gas使用:', receipt.gasUsed.toString());
    
    return receipt;
  } catch (error) {
    console.error('交易失败:', error);
  }
};

// 调用合约的写入函数
const voteForOption = async (option) => {
  try {
    // 连接合约（需要signer来签名交易）
    const contract = new ethers.Contract(contractAddress, contractABI, signer);
    
    // 估算Gas
    const gasEstimate = await contract.estimateGas.vote(option);
    console.log('预估Gas:', gasEstimate.toString());
    
    // 调用函数
    const tx = await contract.vote(option, {
      gasLimit: gasEstimate.mul(120).div(100)  // 增加20%余量
    });
    
    console.log('投票交易已发送:', tx.hash);
    
    // 等待确认
    const receipt = await tx.wait();
    console.log('投票成功!');
    
    return receipt;
  } catch (error) {
    if (error.code === 'UNPREDICTABLE_GAS_LIMIT') {
      console.error('交易会失败，可能已经投过票了');
    } else {
      console.error('投票失败:', error.message);
    }
  }
};

// 监听合约事件
const listenToVoteEvents = () => {
  const contract = new ethers.Contract(contractAddress, contractABI, provider);
  
  // 监听Voted事件
  contract.on('Voted', (voter, option, event) => {
    console.log('新投票!');
    console.log('投票人:', voter);
    console.log('选项:', option);
    console.log('交易哈希:', event.transactionHash);
    
    // 更新UI
    updateVoteCount(option);
  });
  
  // 取消监听
  // contract.removeAllListeners('Voted');
};

// 查询历史事件
const getVoteHistory = async () => {
  const contract = new ethers.Contract(contractAddress, contractABI, provider);
  
  // 获取过去7天的Voted事件
  const currentBlock = await provider.getBlockNumber();
  const blocksPerDay = (24 * 60 * 60) / 12;  // 以太坊约12秒一个块
  const fromBlock = currentBlock - (7 * blocksPerDay);
  
  const filter = contract.filters.Voted();
  const events = await contract.queryFilter(filter, fromBlock, 'latest');
  
  console.log(`找到 ${events.length} 条投票记录`);
  
  events.forEach(event => {
    console.log('投票人:', event.args.voter);
    console.log('选项:', event.args.option);
  });
  
  return events;
};

// src/components/VotingApp.js
import React, { useState, useEffect } from 'react';
import { ethers } from 'ethers';
import { useWallet } from '../hooks/useWallet';

const CONTRACT_ADDRESS = '0x5FbDB2315678afecb367f032d93F642f64180aa3';
const CONTRACT_ABI = [
  'function vote(string memory option) public',
  'function getVotes(string memory option) public view returns (uint256)',
  'function hasVoted(address) public view returns (bool)',
  'event Voted(address indexed voter, string option)'
];

function VotingApp() {
  const { account, provider, signer, connectWallet, isConnected } = useWallet();
  const [options] = useState(['选项A', '选项B', '选项C']);
  const [voteCounts, setVoteCounts] = useState({});
  const [hasVoted, setHasVoted] = useState(false);
  const [loading, setLoading] = useState(false);

  // 加载投票数据
  useEffect(() => {
    if (isConnected && provider) {
      loadVoteData();
    }
  }, [isConnected, provider, account]);

  const loadVoteData = async () => {
    try {
      const contract = new ethers.Contract(CONTRACT_ADDRESS, CONTRACT_ABI, provider);
      
      // 获取每个选项的票数
      const counts = {};
      for (const option of options) {
        const count = await contract.getVotes(option);
        counts[option] = count.toNumber();
      }
      setVoteCounts(counts);
      
      // 检查当前用户是否已投票
      if (account) {
        const voted = await contract.hasVoted(account);
        setHasVoted(voted);
      }
    } catch (error) {
      console.error('加载数据失败:', error);
    }
  };

  const handleVote = async (option) => {
    if (!signer) {
      alert('请先连接钱包');
      return;
    }

    setLoading(true);
    try {
      const contract = new ethers.Contract(CONTRACT_ADDRESS, CONTRACT_ABI, signer);
      
      // 发送交易
      const tx = await contract.vote(option);
      console.log('交易已发送:', tx.hash);
      
      // 等待确认
      await tx.wait();
      console.log('投票成功!');
      
      // 重新加载数据
      await loadVoteData();
    } catch (error) {
      console.error('投票失败:', error);
      alert('投票失败: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  if (!isConnected) {
    return (
      <div style={{ textAlign: 'center', marginTop: '50px' }}>
        <h2>投票DApp</h2>
        <button onClick={connectWallet}>连接钱包</button>
      </div>
    );
  }

  return (
    <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
      <h2>投票DApp</h2>
      <p>连接地址: {account.slice(0, 6)}...{account.slice(-4)}</p>
      
      {hasVoted && (
        <p style={{ color: 'green' }}>✅ 你已经投过票了</p>
      )}
      
      <div style={{ marginTop: '30px' }}>
        {options.map(option => (
          <div key={option} style={{ 
            border: '1px solid #ddd', 
            padding: '15px', 
            marginBottom: '10px',
            borderRadius: '5px'
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <div>
                <strong>{option}</strong>
                <div>当前票数: {voteCounts[option] || 0}</div>
              </div>
              <button 
                onClick={() => handleVote(option)}
                disabled={hasVoted || loading}
                style={{
                  padding: '10px 20px',
                  backgroundColor: hasVoted ? '#ccc' : '#007bff',
                  color: 'white',
                  border: 'none',
                  borderRadius: '5px',
                  cursor: hasVoted ? 'not-allowed' : 'pointer'
                }}
              >
                {loading ? '投票中...' : hasVoted ? '已投票' : '投票'}
              </button>
            </div>
          </div>
        ))}
      </div>
      
      <button 
        onClick={loadVoteData}
        style={{
          marginTop: '20px',
          padding: '10px 20px',
          backgroundColor: '#28a745',
          color: 'white',
          border: 'none',
          borderRadius: '5px',
          cursor: 'pointer'
        }}
      >
        刷新数据
      </button>
    </div>
  );
}

export default VotingApp;

// contracts/MessageBoard.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract MessageBoard {
    // 消息结构
    struct Message {
        uint256 id;
        address author;
        string content;
        uint256 timestamp;
        uint256 tips;  // 收到的打赏金额
    }
    
    // 状态变量
    Message[] public messages;
    mapping(address => uint256) public userMessageCount;
    
    // 事件
    event MessagePosted(uint256 indexed id, address indexed author, string content);
    event MessageTipped(uint256 indexed id, address indexed tipper, uint256 amount);
    
    // 发布消息
    function postMessage(string memory _content) public {
        require(bytes(_content).length > 0, "Content cannot be empty");
        require(bytes(_content).length <= 280, "Content too long");
        
        uint256 messageId = messages.length;
        
        messages.push(Message({
            id: messageId,
            author: msg.sender,
            content: _content,
            timestamp: block.timestamp,
            tips: 0
        }));
        
        userMessageCount[msg.sender]++;
        
        emit MessagePosted(messageId, msg.sender, _content);
    }
    
    // 打赏消息
    function tipMessage(uint256 _messageId) public payable {
        require(_messageId < messages.length, "Message does not exist");
        require(msg.value > 0, "Tip must be greater than 0");
        
        Message storage message = messages[_messageId];
        message.tips += msg.value;
        
        // 转账给作者
        payable(message.author).transfer(msg.value);
        
        emit MessageTipped(_messageId, msg.sender, msg.value);
    }
    
    // 获取消息总数
    function getMessageCount() public view returns (uint256) {
        return messages.length;
    }
    
    // 获取最新的N条消息
    function getLatestMessages(uint256 count) public view returns (Message[] memory) {
        uint256 total = messages.length;
        uint256 returnCount = count > total ? total : count;
        
        Message[] memory latestMessages = new Message[](returnCount);
        
        for (uint256 i = 0; i < returnCount; i++) {
            latestMessages[i] = messages[total - 1 - i];
        }
        
        return latestMessages;
    }
}

# 创建项目目录
mkdir message-board-dapp
cd message-board-dapp

# 初始化npm项目
npm init -y

# 安装Hardhat和依赖
npm install --save-dev hardhat @nomiclabs/hardhat-ethers ethers
npm install --save-dev @nomiclabs/hardhat-waffle ethereum-waffle chai

# 初始化Hardhat项目
npx hardhat

# 选择：Create a JavaScript project

// hardhat.config.js
require("@nomiclabs/hardhat-waffle");
require("@nomiclabs/hardhat-ethers");

module.exports = {
  solidity: "0.8.19",
  networks: {
    hardhat: {
      chainId: 1337
    },
    sepolia: {
      url: "https://eth-sepolia.g.alchemy.com/v2/YOUR-API-KEY",
      accounts: ["YOUR-PRIVATE-KEY"]  // ⚠️ 生产环境使用环境变量
    }
  }
};

// test/MessageBoard.test.js
const { expect } = require("chai");
const { ethers } = require("hardhat");

describe("MessageBoard", function () {
  let messageBoard;
  let owner, user1, user2;

  beforeEach(async function () {
    // 获取测试账户
    [owner, user1, user2] = await ethers.getSigners();
    
    // 部署合约
    const MessageBoard = await ethers.getContractFactory("MessageBoard");
    messageBoard = await MessageBoard.deploy();
    await messageBoard.deployed();
  });

  it("应该能发布消息", async function () {
    await messageBoard.connect(user1).postMessage("Hello Web3!");
    
    const count = await messageBoard.getMessageCount();
    expect(count).to.equal(1);
    
    const message = await messageBoard.messages(0);
    expect(message.content).to.equal("Hello Web3!");
    expect(message.author).to.equal(user1.address);
  });

  it("不应该允许空消息", async function () {
    await expect(
      messageBoard.postMessage("")
    ).to.be.revertedWith("Content cannot be empty");
  });

  it("应该能打赏消息", async function () {
    // 发布消息
    await messageBoard.connect(user1).postMessage("Great content!");
    
    // 记录打赏前的余额
    const balanceBefore = await ethers.provider.getBalance(user1.address);
    
    // 打赏
    const tipAmount = ethers.utils.parseEther("0.1");
    await messageBoard.connect(user2).tipMessage(0, { value: tipAmount });
    
    // 验证余额变化
    const balanceAfter = await ethers.provider.getBalance(user1.address);
    expect(balanceAfter.sub(balanceBefore)).to.equal(tipAmount);
    
    // 验证消息的tips字段
    const message = await messageBoard.messages(0);
    expect(message.tips).to.equal(tipAmount);
  });

  it("应该能获取最新消息", async function () {
    // 发布多条消息
    await messageBoard.postMessage("Message 1");
    await messageBoard.postMessage("Message 2");
    await messageBoard.postMessage("Message 3");
    
    // 获取最新2条
    const latestMessages = await messageBoard.getLatestMessages(2);
    expect(latestMessages.length).to.equal(2);
    expect(latestMessages[0].content).to.equal("Message 3");
    expect(latestMessages[1].content).to.equal("Message 2");
  });
});

npx hardhat test

# 输出：
#   MessageBoard
#     ✓ 应该能发布消息
#     ✓ 不应该允许空消息
#     ✓ 应该能打赏消息
#     ✓ 应该能获取最新消息
#
#   4 passing (2s)

// scripts/deploy.js
const hre = require("hardhat");

async function main() {
  console.log("开始部署 MessageBoard 合约...");
  
  const MessageBoard = await hre.ethers.getContractFactory("MessageBoard");
  const messageBoard = await MessageBoard.deploy();
  
  await messageBoard.deployed();
  
  console.log("✅ MessageBoard 已部署到:", messageBoard.address);
  console.log("📋 请保存此地址，前端需要使用");
  
  // 验证部署
  const count = await messageBoard.getMessageCount();
  console.log("初始消息数:", count.toString());
}

main()
  .then(() => process.exit(0))
  .catch((error) => {
    console.error(error);
    process.exit(1);
  });

# 启动本地节点
npx hardhat node

# 新开一个终端，部署合约
npx hardhat run scripts/deploy.js --network localhost

# 输出：
# 开始部署 MessageBoard 合约...
# ✅ MessageBoard 已部署到: 0x5FbDB2315678afecb367f032d93F642f64180aa3

# 部署到Sepolia测试网
npx hardhat run scripts/deploy.js --network sepolia

# 在 Etherscan 查看：
# https://sepolia.etherscan.io/address/YOUR-CONTRACT-ADDRESS

# 创建React应用
npx create-react-app frontend
cd frontend
npm install ethers

// frontend/src/config/contract.js
export const CONTRACT_ADDRESS = "0x5FbDB2315678afecb367f032d93F642f64180aa3";

export const CONTRACT_ABI = [
  "function postMessage(string memory _content) public",
  "function tipMessage(uint256 _messageId) public payable",
  "function getMessageCount() public view returns (uint256)",
  "function getLatestMessages(uint256 count) public view returns (tuple(uint256 id, address author, string content, uint256 timestamp, uint256 tips)[])",
  "event MessagePosted(uint256 indexed id, address indexed author, string content)",
  "event MessageTipped(uint256 indexed id, address indexed tipper, uint256 amount)"
];

// frontend/src/App.js
import React, { useState, useEffect } from 'react';
import { ethers } from 'ethers';
import { CONTRACT_ADDRESS, CONTRACT_ABI } from './config/contract';
import './App.css';

function App() {
  const [account, setAccount] = useState('');
  const [contract, setContract] = useState(null);
  const [messages, setMessages] = useState([]);
  const [newMessage, setNewMessage] = useState('');
  const [loading, setLoading] = useState(false);

  // 连接钱包
  const connectWallet = async () => {
    try {
      if (!window.ethereum) {
        alert('请安装MetaMask');
        return;
      }

      const accounts = await window.ethereum.request({
        method: 'eth_requestAccounts'
      });

      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const signer = provider.getSigner();
      const contractInstance = new ethers.Contract(
        CONTRACT_ADDRESS,
        CONTRACT_ABI,
        signer
      );

      setAccount(accounts[0]);
      setContract(contractInstance);

      // 加载消息
      loadMessages(contractInstance);
    } catch (error) {
      console.error('连接失败:', error);
    }
  };

  // 加载消息列表
  const loadMessages = async (contractInstance) => {
    try {
      const messageList = await contractInstance.getLatestMessages(20);
      
      const formattedMessages = messageList.map(msg => ({
        id: msg.id.toNumber(),
        author: msg.author,
        content: msg.content,
        timestamp: new Date(msg.timestamp.toNumber() * 1000).toLocaleString(),
        tips: ethers.utils.formatEther(msg.tips)
      }));
      
      setMessages(formattedMessages);
    } catch (error) {
      console.error('加载消息失败:', error);
    }
  };

  // 发布消息
  const postMessage = async () => {
    if (!newMessage.trim()) {
      alert('请输入消息内容');
      return;
    }

    setLoading(true);
    try {
      const tx = await contract.postMessage(newMessage);
      console.log('交易已发送:', tx.hash);
      
      await tx.wait();
      console.log('消息发布成功!');
      
      setNewMessage('');
      await loadMessages(contract);
    } catch (error) {
      console.error('发布失败:', error);
      alert('发布失败: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  // 打赏消息
  const tipMessage = async (messageId) => {
    const amount = prompt('输入打赏金额 (ETH):');
    if (!amount || isNaN(amount)) return;

    try {
      const tx = await contract.tipMessage(messageId, {
        value: ethers.utils.parseEther(amount)
      });
      
      console.log('打赏交易已发送:', tx.hash);
      await tx.wait();
      console.log('打赏成功!');
      
      await loadMessages(contract);
    } catch (error) {
      console.error('打赏失败:', error);
      alert('打赏失败: ' + error.message);
    }
  };

  // 监听新消息事件
  useEffect(() => {
    if (contract) {
      contract.on('MessagePosted', (id, author, content) => {
        console.log('新消息:', content);
        loadMessages(contract);
      });

      return () => {
        contract.removeAllListeners();
      };
    }
  }, [contract]);

  return (
    <div className="App">
      <header className="App-header">
        <h1>📝 去中心化留言板</h1>
        {!account ? (
          <button onClick={connectWallet} className="connect-btn">
            连接钱包
          </button>
        ) : (
          <p className="account">
            {account.slice(0, 6)}...{account.slice(-4)}
          </p>
        )}
      </header>

      {account && (
        <div className="container">
          {/* 发布消息区域 */}
          <div className="post-section">
            <textarea
              value={newMessage}
              onChange={(e) => setNewMessage(e.target.value)}
              placeholder="分享你的想法... (最多280字符)"
              maxLength={280}
              rows={4}
            />
            <div className="post-actions">
              <span>{newMessage.length}/280</span>
              <button 
                onClick={postMessage} 
                disabled={loading}
                className="post-btn"
              >
                {loading ? '发布中...' : '发布'}
              </button>
            </div>
          </div>

          {/* 消息列表 */}
          <div className="messages-section">
            <h2>最新消息</h2>
            {messages.length === 0 ? (
              <p className="no-messages">还没有消息，发布第一条吧！</p>
            ) : (
              messages.map(msg => (
                <div key={msg.id} className="message-card">
                  <div className="message-header">
                    <span className="author">
                      {msg.author.slice(0, 6)}...{msg.author.slice(-4)}
                    </span>
                    <span className="timestamp">{msg.timestamp}</span>
                  </div>
                  <p className="content">{msg.content}</p>
                  <div className="message-footer">
                    <span className="tips">💰 {msg.tips} ETH</span>
                    <button 
                      onClick={() => tipMessage(msg.id)}
                      className="tip-btn"
                    >
                      打赏
                    </button>
                  </div>
                </div>
              ))
            )}
          </div>
        </div>
      )}
    </div>
  );
}

export default App;

/* frontend/src/App.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
}

.App {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.App-header {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
  text-align: center;
  margin-bottom: 30px;
}

.App-header h1 {
  color: #333;
  margin-bottom: 20px;
}

.connect-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 15px 40px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}

.connect-btn:hover {
  transform: scale(1.05);
}

.account {
  background: #f0f0f0;
  padding: 10px 20px;
  border-radius: 20px;
  color: #666;
  font-family: monospace;
}

.container {
  background: white;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.post-section {
  margin-bottom: 40px;
}

.post-section textarea {
  width: 100%;
  padding: 15px;
  border: 2px solid #e0e0e0;
  border-radius: 10px;
  font-size: 16px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.3s;
}

.post-section textarea:focus {
  outline: none;
  border-color: #667eea;
}

.post-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.post-btn {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 20px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  transition: transform 0.2s;
}

.post-btn:hover:not(:disabled) {
  transform: scale(1.05);
}

.post-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.messages-section h2 {
  color: #333;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 2px solid #e0e0e0;
}

.no-messages {
  text-align: center;
  color: #999;
  padding: 40px;
}

.message-card {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 15px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.message-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.message-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.author {
  font-weight: bold;
  color: #667eea;
  font-family: monospace;
}

.timestamp {
  color: #999;
  font-size: 14px;
}

.content {
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px;
}

.message-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #e0e0e0;
}

.tips {
  color: #f39c12;
  font-weight: bold;
}

.tip-btn {
  background: #f39c12;
  color: white;
  border: none;
  padding: 8px 20px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.2s;
}

.tip-btn:hover {
  background: #e67e22;
}