Introduction
Welcome to this comprehensive guide on Hardhat development! In this tutorial, we'll walk through building a complete hardhat application using Foundry and modern Web3 technologies.
What You'll Learn
ā¢Setting up your development environment
ā¢Core Hardhat concepts and architecture
ā¢Writing and deploying smart contracts
ā¢Building a user-friendly frontend interface
ā¢Testing and security best practices
Prerequisites
Before we dive in, make sure you have:
bash
# Required tools
node --version # v18+
foundry --version
git --version
Step 1: Environment Setup
Let's start by setting up our development environment:
bash
# Create project directory
mkdir hardhat-app
cd hardhat-app
# Initialize project
npm init -y
npm install foundry
Step 2: Project Structure
Here's our recommended project structure:
hardhat-app/
āāā contracts/ # Smart contracts
āāā frontend/ # React application
āāā tests/ # Test files
āāā scripts/ # Deployment scripts
āāā docs/ # Documentation
Step 3: Smart Contract Development
Let's create our main smart contract:
solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.19;
contract Hardhat {
address public owner;
mapping(address => uint256) public balances;
event Transfer(address indexed from, address indexed to, uint256 amount);
constructor() {
owner = msg.sender;
}
function deposit() external payable {
balances[msg.sender] += msg.value;
emit Transfer(address(0), msg.sender, msg.value);
}
function withdraw(uint256 amount) external {
require(balances[msg.sender] >= amount, "Insufficient balance");
balances[msg.sender] -= amount;
payable(msg.sender).transfer(amount);
emit Transfer(msg.sender, address(0), amount);
}
}
Step 4: Frontend Integration
Now let's build our React frontend:
jsx
import { useState, useEffect } from 'react';
import { ethers } from 'ethers';
const HardhatApp = () => {
const [account, setAccount] = useState('');
const [balance, setBalance] = useState('0');
const [contract, setContract] = useState(null);
useEffect(() => {
connectWallet();
}, []);
const connectWallet = async () => {
if (window.ethereum) {
try {
const accounts = await window.ethereum.request({
method: 'eth_requestAccounts'
});
setAccount(accounts[0]);
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();
// Initialize contract here
} catch (error) {
console.error('Error connecting wallet:', error);
}
}
};
return (
<div className="app">
<h1>Hardhat dApp</h1>
{account ? (
<div>
<p>Connected: {account}</p>
<p>Balance: {balance} ETH</p>
</div>
) : (
<button onClick={connectWallet}>Connect Wallet</button>
)}
</div>
);
};
export default HardhatApp;
Step 5: Testing
Write comprehensive tests for your smart contract:
javascript
const { expect } = require("chai");
const { ethers } = require("hardhat");
describe("Hardhat", function () {
let hardhat;
let owner;
let addr1;
beforeEach(async function () {
[owner, addr1] = await ethers.getSigners();
const Hardhat = await ethers.getContractFactory("Hardhat");
hardhat = await Hardhat.deploy();
});
it("Should allow deposits", async function () {
const depositAmount = ethers.utils.parseEther("1.0");
await hardhat.connect(addr1).deposit({ value: depositAmount });
const balance = await hardhat.balances(addr1.address);
expect(balance).to.equal(depositAmount);
});
});
Step 6: Deployment
Deploy your contract to testnet:
bash
# Deploy to testnet
npx hardhat run scripts/deploy.js --network sepolia
# Verify contract
npx hardhat verify --network sepolia DEPLOYED_CONTRACT_ADDRESS
Best Practices
1.Security First: Always audit your smart contracts
2.Gas Optimization: Use efficient patterns to minimize gas costs
3.Error Handling: Implement proper error handling in both contracts and frontend
4.Testing: Write comprehensive unit and integration tests
5.Documentation: Keep your code well-documented
Conclusion
Congratulations! You've successfully built a hardhat application. This tutorial covered the essential components needed to create a production-ready dApp.
Next Steps
ā¢Implement additional features
ā¢Deploy to mainnet
ā¢Add more sophisticated UI/UX
ā¢Implement advanced security measures
Resources
Happy coding! š