# 实现效果 1. 房主发送拍卖房屋信息，并且设置拍卖过期时间 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3939a35b439a48ff8986a6a28d308577~tplv-k3u1fbpfcp-zoom-1.image) 2. 其它非房主可以登录进行拍卖，选择自己的出价 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4776ce6e9c6c46cfab0cd833be0bf70e~tplv-k3u1fbpfcp-zoom-1.image) # 参考 https://dev.to/yongchanghe/build-a-simple-dapp-using-truffle-ganache-ethersjs-and-react1-52bl # 工具集合 1. 安装node，版本是v16.16.0 2. npm install -g truffle, truffle可以让我们在本地开发合约，同时部署合约到链上。 3. 安装ganache， ganache相当于是把以太网部署在本地，我们可以把合约发布到本地的以太网上。 4. metamask，钱包可以添加账户，查看我们的账户余额， # 初始化项目 1. mkdir web3-ticket && truffle init ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f66cc1f9363646bc96f62aa810559d34~tplv-k3u1fbpfcp-watermark.image?) 2. 项目目录如下 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0575900c72084043b67f08317cbe996d~tplv-k3u1fbpfcp-zoom-1.image) 3. 修改truffle.config.js的development ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1502a998eddd4dfa856ad6b3c673ee0e~tplv-k3u1fbpfcp-zoom-1.image) 4. 打开Ganache，新建workspace，选择项目的trffle.config.js ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ffcd42bbdc0a48c3bf24c4ca6fdd00f8~tplv-k3u1fbpfcp-zoom-1.image) 然后我们就可以看到很多账号了，而且里边还有余额 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a7e56217093c4b4280bc15eded9d10b8~tplv-k3u1fbpfcp-zoom-1.image) 这样我们就可以通过truffle，连接到链上，同时部署合约到这里了 5. 在web3-ticket/contracts下新建拍卖合约，Auction.sol，代码比较简单，关键地方都已经添加注释。 ``` // SPDX-License-Identifier: MIT pragma solidity ^0.8.17; contract Auction { // Properties // 定义owner地址 address private owner; uint256 public startTime; uint256 public endTime; // 映射 mapping(address => uint256) public bids; // 结构体 struct House { string houseType; string houseColor; string houseLocation; } // 最高出价，竞拍，最高价 struct HighestBid { uint256 bidAmount; address bidder; } House public newHouse; HighestBid public highestBid; // Insert modifiers here // Modifiers // 竞拍已经结束 modifier isOngoing() { require(block.timestamp < endTime, 'This auction is closed.'); _; } // 竞拍还在进行 modifier notOngoing() { require(block.timestamp >= endTime, 'This auction is still open.'); _; } // 是不是作者，如果不是没有权限 modifier isOwner() { require(msg.sender == owner, 'Only owner can perform task.'); _; } // 不是作者 modifier notOwner() { require(msg.sender != owner, 'Owner is not allowed to bid.'); _; } // Insert events here // Events，允许前端调用事件 event LogBid(address indexed _highestBidder, uint256 _highestBid); event LogWithdrawal(address indexed _withdrawer, uint256 amount); // Insert constructor and function here // Assign values to some properties during deployment constructor () { owner = msg.sender; startTime = block.timestamp; endTime = block.timestamp + 12 hours; newHouse.houseColor = '#FFFFFF'; newHouse.houseLocation = 'Sask, SK'; newHouse.houseType = 'Townhouse'; } // makeBid 开始竞价，房子必须是在拍卖中，并且不能房主自己出价 function makeBid() public payable isOngoing() notOwner() returns (bool) { uint256 bidAmount = bids[msg.sender] + msg.value; // 当前出价要高于前面的出价，不然报错 require(bidAmount > highestBid.bidAmount, 'Bid error: Make a higher Bid.'); highestBid.bidder = msg.sender; highestBid.bidAmount = bidAmount; bids[msg.sender] = bidAmount; emit LogBid(msg.sender, bidAmount); return true; } // 付款 function withdraw() public notOngoing() isOwner() returns (bool) { uint256 amount = highestBid.bidAmount; bids[highestBid.bidder] = 0; highestBid.bidder = address(0); highestBid.bidAmount = 0; // 向房主付款 (bool success, ) = payable(owner).call{ value: amount }(""); require(success, 'Withdrawal failed.'); emit LogWithdrawal(msg.sender, amount); return true; } // 获取最高出价 function fetchHighestBid() public view returns (HighestBid memory) { HighestBid memory _highestBid = highestBid; return _highestBid; } // 获得当前房主 function getOwner() public view returns (address) { return owner; } } ``` 6. 执行compile ```js truffle compile ``` ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4da0539dd1194388bdf28fb6d1aa70a6~tplv-k3u1fbpfcp-zoom-1.image) 7. 添加部署文件，在migrations下面添加2_initial_migrations.js ```js const Auction = artifacts.require("Auction"); module.exports = function (deployer) { deployer.deploy(Auction); }; ``` 8. 在test下新建测试文件Auctioin.test.js ```js const Auction = artifacts.require("Auction"); contract("Auction", async (accounts) => { let auction; const ownerAccount = accounts[0]; const userAccountOne = accounts[1]; const userAccountTwo = accounts[2]; const amount = 5000000000000000000; // 5 ETH const smallAmount = 3000000000000000000; // 3 ETH beforeEach(async () => { auction = await Auction.new({ from: ownerAccount }); }); it("should make bid.", async () => { await auction.makeBid({ value: amount, from: userAccountOne }); const bidAmount = await auction.bids(userAccountOne); assert.equal(bidAmount, amount); }); it("should reject owner's bid.", async () => { try { await auction.makeBid({ value: amount, from: ownerAccount }); } catch (e) { assert.include(e.message, "Owner is not allowed to bid."); } }); it("should require higher bid amount.", async () => { try { await auction.makeBid({ value: amount, from: userAccountOne }); await auction.makeBid({ value: smallAmount, from: userAccountTwo }); } catch (e) { assert.include(e.message, "Bid error: Make a higher Bid."); } }); it("should fetch highest bid.", async () => { await auction.makeBid({ value: amount, from: userAccountOne }); const highestBid = await auction.fetchHighestBid(); assert.equal(highestBid.bidAmount, amount); assert.equal(highestBid.bidder, userAccountOne); }); it("should fetch owner.", async () => { const owner = await auction.getOwner(); assert.equal(owner, ownerAccount); }); }); ``` 然后执行 ```js truffle develop test ``` 如果出现下图，说明测试成功 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/39ee15a19439440a8c1ed229e74f21e6~tplv-k3u1fbpfcp-zoom-1.image) 完成后目录文件如下 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c1b401cf099a41b9b6f8ba09c8cfe40a~tplv-k3u1fbpfcp-zoom-1.image) 9. 使用creact-react-app，在web3-ticket目录下 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/337d63559a3c4d2a9a3411add3c09d82~tplv-k3u1fbpfcp-zoom-1.image) 安装依赖 ``` cd client npm install ethers @ethersproject/units ``` 10. 修改truuffle.config.js的配置,配置合约的输出目录 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3558d698776a48efa80cf2c77c7380c5~tplv-k3u1fbpfcp-zoom-1.image) 11. 发布合约到本地的链上，也就是Ganache模式的链上，因为前面已经启动过了，这里直接发布就可以。出现下图，说明已经成功部署。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c5ea2f9c4e994a6a94e5ce896a0635ba~tplv-k3u1fbpfcp-zoom-1.image) 可以看到，部署成功，因为每次需要消耗ETH,所以这里从100ETH到99.98 ETH ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8ba7604a7e1f40fbbc8d49dd9ed1df63~tplv-k3u1fbpfcp-zoom-1.image) 同时可以发现在前端的目录client下，增加了contracts目录，如下图 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a78afe7b856a4fa29e1b38f88f96bfef~tplv-k3u1fbpfcp-zoom-1.image) 12. 修改client/src/app.js ```js import "./App.css"; import { useEffect, useState } from "react"; import { ethers } from "ethers"; import { parseEther, formatEther } from "@ethersproject/units"; import Auction from "./contracts/Auction.json"; // 这里的地址是前面合约部署成功之后的合约地址 const AuctionContractAddress = "0xD50acf2Aaa9183b2aC00cd4D27bC3145c919013d"; const emptyAddress = "0x0000000000000000000000000000000000000000"; function App() { // Use hooks to manage component state const [account, setAccount] = useState(""); const [amount, setAmount] = useState(0); const [myBid, setMyBid] = useState(0); const [isOwner, setIsOwner] = useState(false); const [highestBid, setHighestBid] = useState(0); const [highestBidder, setHighestBidder] = useState(""); // Sets up a new Ethereum provider and returns an interface for interacting with the smart contract // 使用ethers获取合约 async function initializeProvider() { const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner(); return new ethers.Contract(AuctionContractAddress, Auction.abi, signer); } // Displays a prompt for the user to select which accounts to connect // 弹出钱包，让我们选择账户 async function requestAccount() { const account = await window.ethereum.request({ method: "eth_requestAccounts", }); setAccount(account[0]); } // 获取最高出价 async function fetchHighestBid() { if (typeof window.ethereum !== "undefined") { const contract = await initializeProvider(); try { const highestBid = await contract.fetchHighestBid(); const { bidAmount, bidder } = highestBid; // Convert bidAmount from Wei to Ether and round value to 4 decimal places setHighestBid( parseFloat(formatEther(bidAmount.toString())).toPrecision(4) ); setHighestBidder(bidder.toLowerCase()); } catch (e) { console.log("error fetching highest bid: ", e); } } } async function fetchMyBid() { if (typeof window.ethereum !== "undefined") { const contract = await initializeProvider(); try { const myBid = await contract.bids(account); setMyBid(parseFloat(formatEther(myBid.toString())).toPrecision(4)); } catch (e) { console.log("error fetching my bid: ", e); } } } async function fetchOwner() { if (typeof window.ethereum !== "undefined") { const contract = await initializeProvider(); try { const owner = await contract.getOwner(); setIsOwner(owner.toLowerCase() === account); } catch (e) { console.log("error fetching owner: ", e); } } } // 提价出价 async function submitBid(event) { event.preventDefault(); if (typeof window.ethereum !== "undefined") { const contract = await initializeProvider(); try { // User inputs amount in terms of Ether, convert to Wei before sending to the contract. const wei = parseEther(amount); await contract.makeBid({ value: wei }); // Wait for the smart contract to emit the LogBid event then update component state contract.on("LogBid", (_, __) => { fetchMyBid(); fetchHighestBid(); }); } catch (e) { console.log("error making bid: ", e); } } } // 房屋主人获取转账 async function withdraw() { if (typeof window.ethereum !== "undefined") { const contract = await initializeProvider(); // Wait for the smart contract to emit the LogWithdrawal event and update component state contract.on("LogWithdrawal", (_) => { fetchMyBid(); fetchHighestBid(); }); try { await contract.withdraw(); } catch (e) { console.log("error withdrawing fund: ", e); } } } useEffect(() => { requestAccount(); }, []); useEffect(() => { if (account) { fetchOwner(); fetchMyBid(); fetchHighestBid(); } }, [account]); return (

{isOwner ? ( ) : ( "" )}

连接的账户是: {account}

我的出价: {myBid}

拍卖出价最高是: {highestBid}

拍卖出价最高账户是:{" "} {highestBidder === emptyAddress ? "null" : highestBidder === account ? "Me" : highestBidder}

{!isOwner ? ( ) : ( "" )}

); } export default App; ``` 13. chrome安装metamask 安装过程比较简单，最主要的是要把钱包的助记词记好😄 这里主要是需要把钱包连接到Ganache启动的链上，点击增加Add Network ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/caa141de57b6498088d8c05352759042~tplv-k3u1fbpfcp-zoom-1.image) 把这里的地址复制进去 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9ad0cc7a0c6a4187a3cb8600a9020f03~tplv-k3u1fbpfcp-zoom-1.image) 效果如下图 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c39f0e5be384416289368c45df4dd53f~tplv-k3u1fbpfcp-zoom-1.image) 然后选择连接上Ganache ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/7918415af6e2431a8162002102e2f4f3~tplv-k3u1fbpfcp-zoom-1.image) 在Ganache中查看账号，通过私钥导入账号，这里我们导入两个账号 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/59ada528e5b74fb082647fb79aff8c89~tplv-k3u1fbpfcp-zoom-1.image) 效果如下 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/be6ef2ee37bd434583c1d8100c202a5c~tplv-k3u1fbpfcp-zoom-1.image) 14. 启动前端 ```js npm start ``` 启动服务，会弹出metamask，首先选择Account3，因为Account2是房主自己，Account1是默认添加的。 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5b67f929a908492f846bed9d5b7cdeb6~tplv-k3u1fbpfcp-zoom-1.image) 这里因为是需要输入拍卖假，我们选择10个ETH,查看效果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9d617a48187642eebd1c9ca256244b5d~tplv-k3u1fbpfcp-zoom-1.image) 可以看到这里就弹出metamask，让我们确认我们是否转入10ETH, ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/140f28fa221348d0a09c8b2a77db7d51~tplv-k3u1fbpfcp-zoom-1.image) 我们点击confirm，可以看到我们账号已经少了10ETH ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94bc8a11756141bc9aed470ad851e767~tplv-k3u1fbpfcp-zoom-1.image) 我们再在metamask里边切换会房屋主人的查看页面，选择Account2，看看效果 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/45966d30cb764b87a9d02f3e9d5bf32c~tplv-k3u1fbpfcp-zoom-1.image) ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bfaf6628a399409683e8411b2cbc2bc1~tplv-k3u1fbpfcp-zoom-1.image) 我们就可以看到最高出价的账户是哪一个。当我们点击withDraw的时候，发现如下错误 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2240051db19e4ce39d06cbcd5113ae6e~tplv-k3u1fbpfcp-zoom-1.image) 关键的错误是指这里 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/94d3a72628b046689044c2c595f33b37~tplv-k3u1fbpfcp-zoom-1.image) 我们去合约代码Auction.sol里边查看,发现是函数装饰器抛出的错误,因为我们在endTime里边设置的拍卖时间是12个小时，所以这里还在拍卖中，所以房主不能结束拍卖。 ```js // Assign values to some properties during deployment constructor () { owner = msg.sender; startTime = block.timestamp; endTime = block.timestamp + 12 hours; newHouse.houseColor = '#FFFFFF'; newHouse.houseLocation = 'Sask, SK'; newHouse.houseType = 'Townhouse'; } // 竞拍还在进行 modifier notOngoing() { require(block.timestamp >= endTime, 'This auction is still open.'); _; } ``` 这里我们可以等待12小时之后，房主再上来点击witdhDraw或者重新编译部署合约，这里我们选择重新编译部署合约这里我们把Auction.sol里边的结束时间，设置为5 minutes ```js constructor () { owner = msg.sender; startTime = block.timestamp; endTime = block.timestamp + 5 minutes; newHouse.houseColor = '#FFFFFF'; newHouse.houseLocation = 'Sask, SK'; newHouse.houseType = 'Townhouse'; } ``` 重新测试 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/745265a7ea4846c8b2a3fb1c5e377450~tplv-k3u1fbpfcp-zoom-1.image) 重新comile ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/49d042275a6544cc84b8d35f818e46ff~tplv-k3u1fbpfcp-zoom-1.image) 重新部署 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6010fb0e55e4f14b42dcfd4715b1b07~tplv-k3u1fbpfcp-zoom-1.image) 这里我们看到部署的地址发生了改变 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1bba6d2c03fa4b26b1ac04e69e192d18~tplv-k3u1fbpfcp-zoom-1.image) 我们需要把contract address，复制到前端代码的这里替换在client/src/app.js ```js // 这里是前面部署合约的时候的contract address // 最新部署地址 const AuctionContractAddress = "0xAf0C3Db2cC621254E5394B538abdbC50bB860b04"; // 以前部署的地址 // const AuctionContractAddress = "0xe83CfD83BFcb732f207C1Ba94eD4341170667A07"; ``` 然后还是先选择Account3 出价竞拍，然后再切换回Account2，查看 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f0d224e60a7f4badbf39ae42f672c16e~tplv-k3u1fbpfcp-zoom-1.image) 等等超过5分钟再看 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bed1bffc6e604e4699dfe62882f0ff01~tplv-k3u1fbpfcp-zoom-1.image) 然后我们去我们账户中查看，可以看到 ![](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/98fc732a936b43629372c23337d05e61~tplv-k3u1fbpfcp-zoom-1.image)