Build a simple dApp using truffle, ganache, Ethers,js and React(1)

mkdir action-housecd action-house

truffle init

module.exports = {  networks: {    development: {     host: "127.0.0.1",     port: 8545,     network_id: "*",    },  },  compilers: {    solc: {      version: "0.8.13"    }  }};

// SPDX-License-Identifier: MITpragma solidity 0.8.13;contract Auction { // Properties 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 // Insert events here // Insert constructor and function 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.');   _; }

// Events event LogBid(address indexed _highestBidder, uint256 _highestBid); event LogWithdrawal(address indexed _withdrawer, uint256 amount);

// Assign values to some properties during deployment constructor () {   owner = msg.sender;   startTime = block.timestamp;   endTime = block.timestamp + 1 hours;   newHouse.houseColor = '#FFFFFF';   newHouse.houseLocation = 'Sask, SK';   newHouse.houseType = 'Townhouse'; } 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; }

truffle compile

const Auction = artifacts.require("Auction");module.exports = function (deployer) { deployer.deploy(Auction);};

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) });})

truffle developtest

npx create-react-app client

cd clientyarn add ethers @ethersproject/units

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 = CONTRACT ADDRESS HERE;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 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 (   <div style={{ textAlign: 'center', width: '50%', margin: '0 auto', marginTop: '100px' }}>     {isOwner ? (       <button type="button" onClick={withdraw}>         Withdraw       </button>     ) : (       ""     )}     <div       style={{         textAlign: 'center',         marginTop: '20px',         paddingBottom: '10px',         border: '1px solid black'       }}>       <p>Connected Account: {account}</p>       <p>My Bid: {myBid}</p>       <p>Auction Highest Bid Amount: {highestBid}</p>       <p>         Auction Highest Bidder:{' '}         {highestBidder === emptyAddress           ? 'null'           : highestBidder === account           ? 'Me'           : highestBidder}       </p>       {!isOwner ? (         <form onSubmit={submitBid}>           <input             value={amount}             onChange={(event) => setAmount(event.target.value)}             name="Bid Amount"             type="number"             placeholder="Enter Bid Amount"           />           <button type="submit">Submit</button>         </form>       ) : (         ""       )}     </div>   </div> );}export default App;

module.exports = {  contracts_build_directory: './client/src/contracts',  networks: {    development: {     host: "127.0.0.1",     port: 8545,     network_id: "*",    },  },  compilers: {    solc: {      version: "0.8.13"    }  }};

truffle migrate