Introduction
In this tutorial, I will walk you through the process of building a decentralized auction platform using Ethereum and QuickNode. Decentralized applications (dApps) are gaining popularity, and auctions are a great use case for blockchain technology. By the end of this guide, you will have a solid understanding of how to create your own decentralized auction platform and deploy it on the Ethereum network.
Prerequisites:
Before we begin, make sure you have the following prerequisites in place:
- Basic knowledge of Solidity programming language.
- Familiarity with web development (HTML, CSS, JavaScript).
- Node.js installed on your local machine.
Step 1: Setting Up the Project
Let's start by setting up our project directory and installing the necessary dependencies.
mkdir decentralized-auction-platform
cd decentralized-auction-platform
npm init -y
npm install ethers hardhat dotenv
Understanding ERC-4337 and ERC-4804 Standards: Account Abstraction and Unblockable URLs
Step 2: Writing the Smart Contract
Next, we'll create the Solidity smart contract for our auction platform. The contract will handle bids and manage the auction process.
// contracts/Auction.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract Auction {
address public auctioneer;
string public item;
uint256 public highestBid;
address public highestBidder;
bool public auctionEnded;
constructor(string memory _item) {
auctioneer = msg.sender;
item = _item;
}
modifier onlyAuctioneer() {
require(msg.sender == auctioneer, "Only the auctioneer can call this function");
_;
}
modifier onlyNotEnded() {
require(!auctionEnded, "Auction has already ended");
_;
}
function placeBid() public payable onlyNotEnded {
require(msg.value > highestBid, "Bid amount must be higher than the current highest bid");
if (highestBidder != address(0)) {
// Refund the previous highest bidder
payable(highestBidder).transfer(highestBid);
}
highestBid = msg.value;
highestBidder = msg.sender;
}
function endAuction() public onlyAuctioneer onlyNotEnded {
auctionEnded = true;
payable(auctioneer).transfer(address(this).balance);
}
}
Step 3: Configuring Hardhat
Now, let's set up the Hardhat development environment and configure it to use QuickNode as our Ethereum provider.
Create a hardhat.config.js file in the root directory and add the following code:
// hardhat.config.js
require('dotenv').config();
require('@nomiclabs/hardhat-ethers');
module.exports = {
networks: {
hardhat: {},
quicknode: {
url: process.env.QUICKNODE_URL,
accounts: [process.env.PRIVATE_KEY],
},
},
solidity: '0.8.0',
};
Step 4: Deploying the Smart Contract
With the smart contract and configuration in place, we can now deploy our auction contract to the Ethereum network using Hardhat.
npx hardhat run scripts/deploy.js --network quicknode
Step 5: Building the Frontend
To interact with our decentralized auction platform, we'll build a simple front-end using HTML, CSS, and JavaScript. You can use your preferred frontend framework, but for this tutorial, we'll keep it basic.
Create an index.html file and add the following code:
<!DOCTYPE html>
<html>
<head>
<title>Decentralized Auction Platform</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Decentralized Auction Platform</h1>
<div id="auction-info">
<h2>Item: <span id="item"></span></h2>
<h2>Highest Bid: <span id="highest-bid"></span> ETH</h2>
<h2>Highest Bidder: <span id="highest-bidder"></span></h2>
<h2>Auction Ended: <span id="auction-ended"></span></h2>
</div>
<div id="place-bid">
<h2>Place a Bid</h2>
<input type="number" id="bid-amount" step="0.01" placeholder="Bid Amount (ETH)">
<button id="place-bid-btn">Place Bid</button>
</div>
<script src="script.js"></script>
</body>
</html>
Step 6: Interacting with the Smart Contract
We will use the ethers.js library to interact with the deployed smart contract from our front end. Create a script.js file and add the following code:
// script.js
const { ethers } = require('ethers');
const contractAddress = '<YOUR_CONTRACT_ADDRESS>';
// Connect to the Ethereum network using QuickNode
const provider = new ethers.providers.JsonRpcProvider('<YOUR_QUICKNODE_URL>');
// Load the auction contract
const auctionContract = new ethers.Contract(contractAddress, Auction.abi, provider);
// Access the contract variables and functions
const itemElement = document.getElementById('item');
const highestBidElement = document.getElementById('highest-bid');
const highestBidderElement = document.getElementById('highest-bidder');
const auctionEndedElement = document.getElementById('auction-ended');
const bidAmountInput = document.getElementById('bid-amount');
const placeBidButton = document.getElementById('place-bid-btn');
async function updateAuctionInfo() {
const item = await auctionContract.item();
const highestBid = await auctionContract.highestBid();
const highestBidder = await auctionContract.highestBidder();
const auctionEnded = await auctionContract.auctionEnded();
itemElement.textContent = item;
highestBidElement.textContent = ethers.utils.formatEther(highestBid);
highestBidderElement.textContent = highestBidder;
auctionEndedElement.textContent = auctionEnded ? 'Yes' : 'No';
}
async function placeBid() {
const bidAmount = ethers.utils.parseEther(bidAmountInput.value);
try {
const tx = await auctionContract.placeBid({ value: bidAmount });
await tx.wait();
updateAuctionInfo();
} catch (error) {
console.error(error);
}
}
placeBidButton.addEventListener('click', placeBid);
// Update auction info on page load
updateAuctionInfo();
Step 7: Testing the Application
To see our decentralized auction platform in action, open the index.html file in a web browser. You should be able to view the auction details, place bids, and see the updated information reflected on the page.
Conclusion:
Congratulations! You have successfully built a decentralized auction platform using Ethereum and QuickNode. By leveraging the power of blockchain technology, you have created a transparent and tamper-proof auction system. Feel free to enhance the functionality, add additional features, and explore more possibilities with Ethereum and QuickNode.
Remember to secure your contracts, handle edge cases, and thoroughly test your code before deploying it to the Ethereum mainnet. Happy coding!
I'd love to connect with you on Twitter | LinkedIn | GitHub.
Top comments (0)