产品简介

官网：https://dashboard.trustivon.com/

Trustivon Validator 是一个功能强大的区块链验证者管理平台，专为 Trustivon 网络设计，提供直观、安全、高效的验证者节点管理和委托服务。该平台采用现代化的技术栈构建，支持多语言、响应式设计，适配各种设备，为用户提供最佳的使用体验。

核心功能

1. 验证者列表管理

• 实时展示网络中的所有验证者节点
• 显示验证者的关键信息：地址、佣金率、总质押量、个人质押量、状态
• 支持按不同状态筛选验证者（活跃、挖矿）
• 响应式设计，适配桌面和移动设备

2. 委托管理

• 一键委托 TC 代币给验证者
• 支持取消委托操作
• 提供重新委托功能，方便用户在不同验证者之间转移质押
• 实时显示可委托余额和可用奖励

3. 奖励领取

• 支持领取委托奖励
• 显示待处理的解除绑定记录
• 提供解除绑定周期倒计时
• 一键发起奖励领取

4. 验证者详情

• 查看验证者的详细信息
• 显示验证者的投票地址
• 支持复制验证者地址
• 提供验证者的状态变化历史

5. MetaMask 集成

• 无缝连接 MetaMask 钱包
• 支持钱包地址显示和管理
• 安全的交易签名机制
• 实时监听钱包状态变化

6. 多语言支持

• 支持英文、繁体中文、日文三种语言
• 动态语言切换
• 本地化的用户界面

使用指南

1. 连接钱包

1. 点击右上角的"连接钱包"按钮
2. 在弹出的MetaMask窗口中确认连接
3. 连接成功后，右上角会显示您的钱包地址

2. 委托操作

1. 在验证者列表中选择一个验证者
2. 点击"委托"按钮
3. 输入委托金额
4. 确认委托设置
5. 在MetaMask中确认交易

3. 领取奖励

1. 点击"领取奖励"按钮
2. 查看可领取的奖励金额
3. 确认领取操作
4. 在MetaMask中确认交易

4. 管理委托

1. 在验证者列表中找到您已委托的验证者
2. 可以选择"取消委托"或"重新委托"
3. 按照提示完成操作

优势和亮点

1. 安全性

• 基于MetaMask SDK的安全连接
• 所有交易都在用户钱包中签名
• 不存储用户的私钥或助记词
• 采用HTTPS协议传输数据

2. 用户体验

• 直观的界面设计，易于使用
• 响应式布局，适配各种设备
• 实时数据更新，提供最新信息
• 多语言支持，服务全球用户

3. 功能完整性

• 涵盖验证者管理的全生命周期
• 支持委托、取消委托、重新委托
• 提供奖励领取功能
• 详细的验证者信息展示

4. 技术先进性

• 采用现代化的技术栈
• 组件化架构，便于扩展和维护
• 类型安全的代码设计
• 优秀的性能表现

未来规划

1. 支持更多网络 ：计划支持主网和更多测试网络
2. 增强数据分析 ：提供更详细的验证者性能分析和统计
3. 移动应用开发 ：推出iOS和Android移动应用
4. 增强安全性 ：添加更多安全验证和提示
5. 社区功能 ：支持验证者和委托者之间的交流
6. 更多语言支持 ：添加更多语言选项

如何开始使用

1. 访问 Trustivon Validator 平台
2. 连接您的MetaMask钱包
3. 浏览验证者列表，选择合适的验证者
4. 开始您的委托之旅

系统要求

• 现代浏览器（Chrome、Firefox、Safari、Edge）
• 已安装MetaMask扩展
• 稳定的网络连接
• 少量TC代币用于支付交易手续费

结语

Trustivon Validator 平台为用户提供了一个安全、高效、易用的验证者管理工具，帮助用户更好地参与Trustivon网络的治理和质押。无论您是经验丰富的区块链用户还是初学者，都能轻松上手使用该平台。

加入 Trustivon Validator 生态，共同构建更安全、更高效的区块链网络！

随着 BNB Chain（包含 BNB Beacon Chain 与 BNB Smart Chain，简称 BSC）持续演进，其共识层经历了重要升级：从早期基于 ECDSA 的签名机制，过渡到采用 BLS（Boneh–Lynn–Shacham）聚合签名的高性能 PoSA 共识架构。

在新的节点体系中，每个验证者除了传统的 ECDSA 私钥之外，还必须生成并配置一套 BLS 密钥。本文将系统性介绍：

• BLS 是什么
• 为什么 BNB/BSC 要使用 BLS
• BLS 密钥在共识中的具体作用
• 与 ECDSA 的对比
• 架构升级带来的性能与安全变化

一、为什么 BNB/BSC 需要 BLS？

BSC 早期使用的是 PoSA（Proof of Staked Authority）+ ECDSA 签名。
这种方式在功能上可用，但存在两个核心问题：

1. 签名无法聚合，每个区块需要存储和验证大量签名
2. 验证者数量和区块大小难以进一步扩展

随着 BNB Chain 融合 Beacon Chain 架构、提升 TPS 的需求，BNB 引入了基于 BLS 的聚合签名技术，使共识开销更低、性能更高。

二、BLS 的核心能力

BLS（Boneh–Lynn–Shacham）最重要的特点包括以下三点。

1. 支持签名聚合（Aggregate Signature）

多个验证者的签名可以数学地合并为一个签名：

• 100 个签名
  最终只需要 1 个聚合签名

区块头体积极大缩小，使出块更快、网络传输更轻。

2. 原生支持阈值签名（Threshold Signature）

可以实现多数验证者共同生成一个有效签名：

• 超过 2/3 的验证者签名
  自动生成一个可验证的单一签名

无需额外的多重签名协议。

3. 验证速度快、可扩展性强

在验证区块时：

• 节点只需验证一个聚合签名
• 而不需要验证每个验证者的单独签名

这使得共识的可扩展性显著提升。

三、BLS 私钥在 BNB/BSC 中的作用

在新的 BNB Chain 共识架构中，BLS 密钥承担的是“共识身份”和“投票签名”的职责，而不是交易签名。

它主要有以下三个作用。

1. 作为验证者的共识层身份密钥

在共识过程（prevote、precommit、aggregate）中，验证者使用 BLS 私钥对投票进行签名。
链上保存的是验证者的 BLS 公钥，用于：

• 验证投票来源
• 验证者轮换
• 共识身份验证

可以理解为验证者的“共识身份证”。

2. 生成区块的 BLS 聚合签名

每个区块高度都需要验证者投票确认。
使用 BLS 后：

• 所有验证者的投票可以聚合为一个签名
• 区块头中只写入一个 BLS 聚合签名
• 节点验证速度更快，区块体积更小

这是 BNB Chain 性能提升的关键机制。

3. 支持安全的阈值共识机制

PoSA 要求超过三分之二的验证者同意区块才能最终确认。
BLS 天生支持阈值验证，并提供：

• 更简单的投票验证逻辑
• 更强的防伪造能力
• 更安全的验证者切换

让整个共识层更安全可靠。

四、为什么不是使用 ECDSA？（对比）

结论：
交易层仍然使用 ECDSA（钱包、合约交互等）。
共识层使用 BLS 才能获得高性能和更佳的扩展性。

五、BNB/BSC 架构升级后的变化

随着 BLS 的引入，BNB Chain 获得了以下提升。

1. 共识性能显著提升

减少共识消息体积、减少签名验证次数，使：

• 区块时间更稳定
• TPS 上限提升
• 网络带宽消耗更低

2. 验证者数量可扩展

BSC 早期固定 21 个验证者，使用 BLS 后可以支持更多验证者参与，而不用担心过高的签名成本。

3. 更安全的验证者管理

BLS 将验证者的共识身份抽象为统一的公钥，使身份管理更彻底、更可控。

六、BNB/BSC 节点中的两套密钥

BNB/BSC 节点实际上使用两套密钥体系，用途完全不同。

1. ECDSA Key（交易密钥）

• 用于链上交易签名
• secp256k1 曲线
• 与以太坊、MetaMask 完全一致

2. BLS Key（共识密钥）

• 仅验证者节点使用
• 只用于共识投票
• 不用于交易
• 不出现在任何钱包中

这两套密钥互不影响，各司其职。

七、总结

BLS 密钥在 BNB/BSC 中主要用于验证者共识层的投票与聚合签名，通过支持多签名聚合、阈值验证和快速校验，显著增强了区块确认速度、网络扩展性与整体安全性。它不用于交易，只用于共识层，是 BNB Chain 迈向高性能架构的重要基础组件。

1. 合约架构概述

核心合约

• System.sol / SystemV2.sol：基础合约，定义系统常量、地址和修饰符
• BSCValidatorSet.sol：验证者集合管理
• StakeHub.sol：验证者质押管理
• GovHub.sol：治理参数更新
• SlashIndicator.sol：验证者行为监控与惩罚
• SystemReward.sol：系统奖励管理

合约关系图

2. 各合约主要功能与方法

2.1 System.sol / SystemV2.sol

• 功能：定义系统常量、地址和修饰符
• 核心常量：各系统合约地址（VALIDATOR_CONTRACT_ADDR、SLASH_CONTRACT_ADDR等）
• 修饰符：onlyCoinbase、onlyZeroGasPrice、onlyGov等

2.2 BSCValidatorSet.sol

• 功能：管理验证者集合，处理惩罚和维护
• 对外方法：
  • initializeFromGenesis：从创世块初始化验证者集合
  • updateValidatorSetV2：更新验证者集合
  • deposit：收集交易费用并分配
  • distributeFinalityReward：分配最终性奖励
  • getLivingValidators：获取活跃验证者
  • getMiningValidators：获取挖矿验证者
  • enterMaintenance：进入维护模式
  • exitMaintenance：退出维护模式
• 被链代码调用的方法：
  • updateValidatorSetV2：由共识引擎调用
  • deposit：由区块生产者调用
  • distributeFinalityReward：由区块生产者调用

2.3 StakeHub.sol

• 功能：验证者质押管理，包括创建验证者、委托等
• 对外方法：
  • createValidator：创建验证者
  • editConsensusAddress：编辑共识地址
  • editCommissionRate：编辑佣金率
  • editDescription：编辑描述
  • editVoteAddress：编辑投票地址
  • unjail：解锁验证者
  • delegate：委托
  • undelegate：取消委托
  • redelegate：重新委托
  • claim：领取取消委托的BNB
• 被链代码调用的方法：
  • distributeReward：由验证者合约调用
  • downtimeSlash：由惩罚合约调用
  • maliciousVoteSlash：由惩罚合约调用
  • doubleSignSlash：由惩罚合约调用

2.4 GovHub.sol

• 功能：治理参数更新
• 对外方法：
  • updateParam：更新参数，只能由治理时间锁合约调用

2.5 SlashIndicator.sol

• 功能：监控验证者行为，处理惩罚
• 对外方法：
  • slash：惩罚未出块的验证者
  • clean：清理惩罚记录
  • submitFinalityViolationEvidence：提交最终性违规证据
  • submitDoubleSignEvidence：提交双重签名证据
• 被链代码调用的方法：
  • slash：由区块生产者调用
  • clean：由验证者合约调用

2.6 SystemReward.sol

• 功能：系统奖励管理
• 对外方法：
  • claimRewards：领取奖励，只能由操作员调用
• 被链代码调用的方法：
  • claimRewards：由轻客户端、激励合约等调用

3. 合约调用关系

3.1 链代码调用合约

• 共识引擎 → BSCValidatorSet.updateValidatorSetV2
• 区块生产者 → BSCValidatorSet.deposit
• 区块生产者 → BSCValidatorSet.distributeFinalityReward
• 区块生产者 → SlashIndicator.slash

3.2 合约间调用

• BSCValidatorSet → StakeHub.distributeReward
• BSCValidatorSet → SlashIndicator.clean
• SlashIndicator → BSCValidatorSet.felony
• SlashIndicator → BSCValidatorSet.misdemeanor
• SlashIndicator → StakeHub.downtimeSlash
• SlashIndicator → StakeHub.maliciousVoteSlash
• SlashIndicator → StakeHub.doubleSignSlash
• GovHub → BSCValidatorSet.updateParam
• GovHub → StakeHub.updateParam
• GovHub → SlashIndicator.updateParam
• GovHub → SystemReward.updateParam

4. 接口定义

4.1 0.6.x 接口

• IBSCValidatorSet：验证者集合接口
• ISlashIndicator：惩罚接口
• IStakeHub：质押管理接口
• IParamSubscriber：参数订阅接口
• ISystemReward：系统奖励接口

4.2 0.8.x 接口

• IBSCValidatorSet：验证者集合接口
• IGovToken：治理代币接口
• IStakeCredit：质押信用接口
• IStakeHub：质押管理接口

5. 系统流程

5.1 验证者创建流程

1. 用户调用 StakeHub.createValidator 创建验证者
2. StakeHub 部署 StakeCredit 代理合约
3. StakeHub 记录验证者信息
4. 用户可以调用 delegate 进行委托

5.2 验证者惩罚流程

1. 区块生产者调用 SlashIndicator.slash 惩罚未出块的验证者
2. SlashIndicator 检查惩罚阈值
3. 如果达到 misdemeanor 阈值，调用 BSCValidatorSet.misdemeanor
4. 如果达到 felony 阈值，调用 BSCValidatorSet.felony 和 StakeHub.downtimeSlash

5.3 参数更新流程

1. 治理提案通过后，GovernorTimelock 调用 GovHub.updateParam
2. GovHub 调用目标合约的 updateParam 方法
3. 目标合约更新参数并触发事件

6. 总结

该合约系统是一个完整的区块链验证者管理和治理系统，主要包括：

• 验证者管理：BSCValidatorSet 负责验证者集合的更新和维护
• 质押管理：StakeHub 负责验证者的质押、委托等操作
• 惩罚机制：SlashIndicator 负责监控验证者行为并处理惩罚
• 治理系统：GovHub 负责参数更新
• 奖励管理：SystemReward 负责系统奖励的分配

合约之间通过明确的接口进行交互，形成了一个完整的生态系统，确保区块链网络的安全和稳定运行。

1. 什么是dApp？

dApp（去中心化应用）是基于区块链技术构建的应用程序，与传统应用的主要区别在于：

• 去中心化：数据存储在区块链上，不依赖单一服务器
• 透明公开：智能合约代码和数据对所有人可见
• 用户控制：用户完全控制自己的数据和资产
• 无需信任：通过智能合约自动执行，无需第三方中介

本教程将指导你从零开始构建一个完整的dApp——链上留言板，让你掌握dApp开发的核心流程。

2. 开发环境搭建

2.1 安装Node.js

dApp开发需要Node.js环境，推荐使用LTS版本：

1. 访问 Node.js官网
2. 下载并安装适合你操作系统的LTS版本
3. 验证安装：

   node -v
   npm -v

2.2 安装MetaMask

MetaMask是连接dApp和区块链的桥梁：

1. 访问 MetaMask官网
2. 下载并安装浏览器插件
3. 创建钱包并保存助记词
4. 添加Trustivon测试网络（参考MetaMask网络设置）

2.3 获取测试代币

在Trustivon测试网上开发需要测试代币：

1. 访问 Trustivon水龙头
2. 输入你的MetaMask地址
3. 领取测试代币

3. 智能合约开发

3.1 初始化Hardhat项目

Hardhat是以太坊智能合约开发的流行框架：

1. 创建项目目录：

   mkdir doomsday-dapp
   cd doomsday-dapp

2. 初始化npm项目：

   npm init -y

3. 安装Hardhat：

   npm install --save-dev hardhat

4. 初始化Hardhat项目：

   npx hardhat init

   • 选择"Create a TypeScript project"
   • 按默认选项完成初始化

5. 安装依赖：

   npm install --save-dev @nomicfoundation/hardhat-toolbox
   npm install dotenv

3.2 编写智能合约

创建一个简单的链上留言板合约：

1. 创建合约文件：

   mkdir -p contracts
   touch contracts/MessageBoard.sol

2. 编写合约代码：

   // SPDX-License-Identifier: MIT
   pragma solidity ^0.8.19;
   
   contract MessageBoard {
       struct Message {
           string content;
           address sender;
           uint256 bidAmount;
           uint256 timestamp;
           bytes32 messageId;
       }
   
       Message[] public messages;
       uint256 public constant MAX_MESSAGES = 100;
       uint256 public constant DECAY_INTERVAL = 24 hours; // 衰减间隔：24小时
       uint256 public constant DECAY_RATE = 50; // 衰减率：50%
   
       uint256 public lastMessageTimestamp; // 最后一条留言的时间戳
   
       event MessageAdded(
           bytes32 messageId,
           string content,
           address sender,
           uint256 bidAmount,
           uint256 timestamp
       );
   
       /**
        * @dev 获取当前能进入前100名的最低竞价
        * @return 最低竞价金额，如果留言数量不足100，则返回0
        */
       function getMinimumBidForTop100() public view returns (uint256) {
           if (messages.length < MAX_MESSAGES) {
               // 如果留言数量不足100，任何大于0的竞价都能进入前100
               return 0;
           }
   
           // 获取第100条留言的原始竞价
           uint256 originalBid = messages[MAX_MESSAGES - 1].bidAmount;
   
           // 如果最后一条留言时间为0，说明还没有留言，返回0
           if (lastMessageTimestamp == 0) {
               return originalBid;
           }
   
           // 计算自最后一条留言以来经过的时间
           uint256 timeElapsed = block.timestamp - lastMessageTimestamp;
   
           // 如果经过的时间小于衰减间隔，返回原始竞价
           if (timeElapsed < DECAY_INTERVAL) {
               return originalBid;
           }
   
           // 计算经过了多少个衰减周期
           uint256 decayPeriods = timeElapsed / DECAY_INTERVAL;
   
           // 计算衰减后的竞价
           uint256 decayedBid = originalBid;
           for (uint256 i = 0; i < decayPeriods; i++) {
               // 每次衰减50%
               decayedBid = decayedBid * (100 - DECAY_RATE) / 100;
   
               // 防止衰减到0以下
               if (decayedBid == 0) {
                   break;
               }
           }
   
           return decayedBid;
       }
   
       function addMessage(string calldata _content, bytes32 _messageId) external payable {
           require(msg.value > 0, "Bid amount must be greater than 0");
   
           // 检查当前竞价是否大于等于进入前100名的最低竞价
           uint256 minimumBid = getMinimumBidForTop100();
           require(msg.value > minimumBid, "Bid amount must be greater than the current minimum bid for top 100");
   
           Message memory newMessage = Message({
               content: _content,
               sender: msg.sender,
               bidAmount: msg.value,
               timestamp: block.timestamp,
               messageId: _messageId
           });
   
           // 插入排序，按竞价金额降序
           uint256 i = messages.length;
           messages.push(newMessage);
   
           while (i > 0 && messages[i - 1].bidAmount < newMessage.bidAmount) {
               messages[i] = messages[i - 1];
               i--;
           }
   
           if (i != messages.length - 1) {
               messages[i] = newMessage;
           }
   
           // 只保留前100条留言
           if (messages.length > MAX_MESSAGES) {
               messages.pop();
           }
   
           // 更新最后一条留言的时间戳
           lastMessageTimestamp = block.timestamp;
   
           emit MessageAdded(
               _messageId,
               _content,
               msg.sender,
               msg.value,
               block.timestamp
           );
       }
   
       function getMessages() external view returns (Message[] memory) {
           return messages;
       }
   
       /**
        * @dev 分页获取留言
        * @param _page 页码，从1开始
        * @param _pageSize 每页数量
        * @return 分页后的留言数组
        */
       function getMessagesPaginated(uint256 _page, uint256 _pageSize) external view returns (Message[] memory) {
           require(_page > 0, "Page must be greater than 0");
           require(_pageSize > 0, "Page size must be greater than 0");
   
           uint256 totalMessages = messages.length;
           uint256 startIndex = (_page - 1) * _pageSize;
   
           // 如果起始索引大于等于总留言数，返回空数组
           if (startIndex >= totalMessages) {
               return new Message[](0);
           }
   
           // 计算结束索引
           uint256 endIndex = startIndex + _pageSize;
           if (endIndex > totalMessages) {
               endIndex = totalMessages;
           }
   
           // 创建结果数组
           uint256 resultSize = endIndex - startIndex;
           Message[] memory result = new Message[](resultSize);
   
           // 填充结果数组
           for (uint256 i = 0; i < resultSize; i++) {
               result[i] = messages[startIndex + i];
           }
   
           return result;
       }
   
       function getMessageCount() external view returns (uint256) {
           return messages.length;
       }
   
       // 允许合约接收ETH
       receive() external payable {}
   
       // 允许合约接收ETH（当调用不存在的函数时）
       fallback() external payable {}
   }

3.3 编译和测试合约

1. 编译合约：

   npx hardhat compile

2. 编写测试文件：

   mkdir -p test
   touch test/MessageBoard.test.js

3. 编写测试代码：

   const { expect } = require("chai");
   const { ethers } = require("hardhat");
   
   describe("MessageBoard", function () {
     let MessageBoard;
     let messageBoard;
     let owner;
     let addr1;
   
     beforeEach(async function () {
       [owner, addr1] = await ethers.getSigners();
       MessageBoard = await ethers.getContractFactory("MessageBoard");
       messageBoard = await MessageBoard.deploy();
       await messageBoard.deployed();
     });
   
     it("Should add a message", async function () {
       const content = "Hello, Trustivon!";
       const messageId = ethers.utils.formatBytes32String("test-1");
       const bidAmount = ethers.utils.parseEther("0.1");
   
       await expect(
         messageBoard.addMessage(content, messageId, { value: bidAmount })
       )
         .to.emit(messageBoard, "MessageAdded")
         .withArgs(messageId, content, owner.address, bidAmount, expect.any(BigInt));
   
       const messages = await messageBoard.getMessages();
       expect(messages.length).to.equal(1);
       expect(messages[0].content).to.equal(content);
       expect(messages[0].sender).to.equal(owner.address);
     });
   });

4. 运行测试：

   npx hardhat test

3.4 部署合约

1. 创建部署脚本：

   mkdir -p scripts
   touch scripts/deploy.js

2. 编写部署代码：

   const { ethers } = require("hardhat");
   
   async function main() {
     const [deployer] = await ethers.getSigners();
   
     console.log("Deploying contracts with the account:", deployer.address);
     console.log("Account balance:", (await deployer.getBalance()).toString());
   
     const MessageBoard = await ethers.getContractFactory("MessageBoard");
     const messageBoard = await MessageBoard.deploy();
   
     await messageBoard.deployed();
   
     console.log("MessageBoard contract deployed to:", messageBoard.address);
   }
   
   main()
     .then(() => process.exit(0))
     .catch((error) => {
       console.error(error);
       process.exit(1);
     });

3. 配置Trustivon网络：

   • 创建.env文件：

     touch .env

   • 添加配置：

     PRIVATE_KEY=your-private-key
     TRUSTIVON_RPC_URL=https://rpc.trustivon.com

   • 修改hardhat.config.js，添加Trustivon网络配置

4. 部署合约到Trustivon测试网：

   npx hardhat run scripts/deploy.js --network trustivon

4. 前端开发

4.1 初始化React项目

1. 创建前端目录：

   npx create-react-app frontend
   cd frontend
   npm install web3 @web3-react/core @web3-react/injected-connector

2. 创建合约ABI目录：

   mkdir -p src/contracts

3. 复制合约ABI：

   cp ../artifacts/contracts/MessageBoard.sol/MessageBoard.json src/contracts/

4.2 编写前端代码

1. 创建Web3连接组件：

   mkdir -p src/components
   touch src/components/Web3Provider.js

2. 编写Web3连接代码：

   import React, { createContext, useContext, useEffect, useState } from 'react';
   import { InjectedConnector } from '@web3-react/injected-connector';
   import Web3 from 'web3';
   
   const Web3Context = createContext();
   
   export const useWeb3 = () => useContext(Web3Context);
   
   export const Web3Provider = ({ children }) => {
     const [web3, setWeb3] = useState(null);
     const [account, setAccount] = useState(null);
     const [networkId, setNetworkId] = useState(null);
     const [loading, setLoading] = useState(true);
   
     const connector = new InjectedConnector({
       supportedChainIds: [19478], // Trustivon测试网链ID
     });
   
     const connectWallet = async () => {
       try {
         const accounts = await connector.activate();
         setAccount(accounts[0]);
       } catch (error) {
         console.error('Failed to connect wallet:', error);
       }
     };
   
     useEffect(() => {
       const initWeb3 = async () => {
         try {
           if (window.ethereum) {
             const web3Instance = new Web3(window.ethereum);
             setWeb3(web3Instance);
   
             const network = await web3Instance.eth.net.getId();
             setNetworkId(network);
   
             const accounts = await web3Instance.eth.getAccounts();
             if (accounts.length > 0) {
               setAccount(accounts[0]);
             }
           }
         } catch (error) {
           console.error('Failed to initialize Web3:', error);
         } finally {
           setLoading(false);
         }
       };
   
       initWeb3();
   
       // 监听账户变化
       window.ethereum?.on('accountsChanged', (accounts) => {
         setAccount(accounts[0]);
       });
   
       // 监听网络变化
       window.ethereum?.on('chainChanged', (chainId) => {
         setNetworkId(parseInt(chainId, 16));
       });
     }, []);
   
     const value = {
       web3,
       account,
       networkId,
       loading,
       connectWallet,
     };
   
     return <Web3Context.Provider value={value}>{children}</Web3Context.Provider>;
   };

3. 创建留言板组件：

   touch src/components/MessageBoard.js

4. 编写留言板代码：

   import React, { useState, useEffect } from 'react';
   import { useWeb3 } from './Web3Provider';
   import contractABI from '../contracts/MessageBoard.json';
   
   const CONTRACT_ADDRESS = 'your-contract-address'; // 替换为你的合约地址
   
   const MessageBoard = () => {
     const { web3, account, connectWallet } = useWeb3();
     const [messages, setMessages] = useState([]);
     const [content, setContent] = useState('');
     const [bidAmount, setBidAmount] = useState('0.1');
     const [loading, setLoading] = useState(false);
   
     const contract = web3 && new web3.eth.Contract(contractABI.abi, CONTRACT_ADDRESS);
   
     const fetchMessages = async () => {
       if (!contract) return;
       try {
         const result = await contract.methods.getMessages().call();
         setMessages(result);
       } catch (error) {
         console.error('Failed to fetch messages:', error);
       }
     };
   
     useEffect(() => {
       fetchMessages();
     }, [contract]);
   
     const addMessage = async (e) => {
       e.preventDefault();
       if (!contract || !account) return;
   
       setLoading(true);
       try {
         const messageId = web3.utils.sha3(Date.now().toString());
         const value = web3.utils.toWei(bidAmount, 'ether');
   
         await contract.methods
           .addMessage(content, messageId)
           .send({ from: account, value });
   
         setContent('');
         setBidAmount('0.1');
         fetchMessages();
       } catch (error) {
         console.error('Failed to add message:', error);
       } finally {
         setLoading(false);
       }
     };
   
     if (!account) {
       return (
         <div className="flex justify-center items-center h-screen">
           <button
             onClick={connectWallet}
             className="px-6 py-3 bg-blue-500 text-white rounded-lg hover:bg-blue-600"
           >
             Connect Wallet
           </button>
         </div>
       );
     }
   
     return (
       <div className="container mx-auto p-4">
         <h1 className="text-3xl font-bold mb-6 text-center">链上留言板</h1>
   
         <form onSubmit={addMessage} className="mb-8">
           <div className="mb-4">
             <label className="block text-sm font-medium mb-2">留言内容</label>
             <textarea
               value={content}
               onChange={(e) => setContent(e.target.value)}
               className="w-full p-2 border border-gray-300 rounded"
               rows="3"
               required
             />
           </div>
           <div className="mb-4">
             <label className="block text-sm font-medium mb-2">竞价金额 (TC)</label>
             <input
               type="number"
               value={bidAmount}
               onChange={(e) => setBidAmount(e.target.value)}
               className="w-full p-2 border border-gray-300 rounded"
               step="0.1"
               min="0.1"
               required
             />
           </div>
           <button
             type="submit"
             className="w-full py-2 bg-green-500 text-white rounded hover:bg-green-600"
             disabled={loading}
           >
             {loading ? '提交中...' : '提交留言'}
           </button>
         </form>
   
         <div className="space-y-4">
           <h2 className="text-2xl font-bold mb-4">留言列表</h2>
           {messages.length === 0 ? (
             <p className="text-center text-gray-500">暂无留言</p>
           ) : (
             messages.map((msg, index) => (
               <div key={index} className="border border-gray-300 rounded p-4">
                 <div className="flex justify-between items-center mb-2">
                   <span className="font-bold">{msg.sender}</span>
                   <span className="text-sm text-gray-500">
                     {new Date(msg.timestamp * 1000).toLocaleString()}
                   </span>
                 </div>
                 <p className="mb-2">{msg.content}</p>
                 <div className="text-right text-sm text-blue-600">
                   竞价: {web3.utils.fromWei(msg.bidAmount, 'ether')} TC
                 </div>
               </div>
             ))
           )}
         </div>
       </div>
     );
   };
   
   export default MessageBoard;

5. 更新App.js：

   import React from 'react';
   import './App.css';
   import { Web3Provider } from './components/Web3Provider';
   import MessageBoard from './components/MessageBoard';
   
   function App() {
     return (
       <Web3Provider>
         <div className="App">
           <MessageBoard />
         </div>
       </Web3Provider>
     );
   }
   
   export default App;

4.3 运行前端应用

1. 启动前端开发服务器：

   npm start

2. 在浏览器中访问 http://localhost:3000

3. 连接MetaMask钱包

4. 测试留言功能：

   • 输入留言内容
   • 设置竞价金额
   • 提交留言
   • 查看留言列表

5. 部署和上线

5.1 构建前端应用

1. 构建生产版本：

   npm run build

2. 部署到静态网站托管服务（如Vercel、Netlify等）

5.2 验证和测试

1. 在浏览器中访问部署后的网站
2. 测试所有功能
3. 确保与MetaMask正常交互
4. 检查交易是否正确上链

6. 总结和扩展

6.1 开发总结

通过本教程，你已经学会了：

• 搭建dApp开发环境
• 编写和部署智能合约
• 开发React前端应用
• 连接Web3和MetaMask
• 与智能合约交互

6.2 扩展建议

你可以进一步扩展这个dApp：

• 添加用户认证和个人中心
• 实现留言编辑和删除功能
• 添加留言点赞和评论功能
• 实现留言搜索和筛选
• 添加链上身份验证
• 优化前端UI/UX设计

6.3 学习资源

• Solidity官方文档
• Hardhat文档
• Web3.js文档
• React官方文档
• MetaMask文档

7. 常见问题

7.1 无法连接MetaMask

• 确保MetaMask已安装并解锁
• 确保已添加Trustivon测试网络
• 刷新页面后重试

7.2 交易失败

• 确保钱包中有足够的测试代币
• 检查Gas费用设置
• 查看MetaMask交易记录中的错误信息

7.3 留言不显示

• 检查合约地址是否正确
• 确保网络连接正常
• 刷新页面后重试

8. 社区支持

• Trustivon GitHub
• Trustivon官方网站
• Trustivon开发者文档
• Telegram技术支持

恭喜你完成了第一个dApp的开发！继续学习和探索，你将能够构建更复杂和强大的去中心化应用。

线上预览：https://eternal.trustivon.com/
GitHub开源：https://github.com/Trustivon/eternal-message-dapp

概述

本教程将指导您如何使用 Trustivon 数字钱包（Vault）管理您的数字资产，包括创建钱包、存储资产和发起交易。

先决条件

• 可访问 Trustivon 数字钱包：https://vault.trustivon.com
• 完成MetaMask 网络设置（可选）

操作步骤

1. 打开 Trustivon 数字钱包

浏览器访问地址：https://vault.trustivon.com

2. 登录和注册

选项一：电子邮件注册和登录

• 点击“登录”按钮
• 输入邮箱和密码
• 点击“登录”按钮
• 登录您填写的邮箱，查看激活邮件中的链接，然后点击激活。
• 返回登录界面，输入邮箱和密码完成登录。

选项二：使用 MetaMask 钱包登录

• 点击“使用以太坊登录”按钮
• 在弹出的 MetaMask 对话框中，单击确认按钮
• 自动注册和登录完成

3. 管理资产

查看仪表盘

1. 存款地址

登录后，您将自动获得一个分配的 MPC 钱包存款地址，用于接收链上资产。

当此存款地址收到支持的链上资产时，资产将自动记入您的登录账户余额。

Trustivon 测试网目前支持的存款代币如下：

2. 账户余额

功能介绍：将支持的资产存入指定充值地址后，您的链下账户余额将会更新。您无需任何区块链相关经验，即可通过 Web2 方式使用中心化资产。其充值和提现功能与传统交易所的功能相同。

提现：支持将余额提现到区块链。点击“提现”按钮，打开提现对话框，选择提现资产，输入提现金额和链上接收地址，即可完成链上提现。

3. 内部调拨

请输入相关参数以完成内部交易转账。

查看交易记录

• 存款记录：链上存款记录
• 转账记录：内部交易记录
• 提现记录：链上提现记录

相关链接

• Trustivon 数字钱包
• MetaMask 网络设置