First Blockchain app where I wrote a smart contract on Solidty and deployed to Alchemy and did some transaction with Ethereum by sending not only a currency, but also a warm message and GIF with it. And used Hardhat for deploying Smart Contract.
Ensure you have higher than 20 node.js
version, we used v20.13.1
, npm v10.5.2
, yarn v1.22.22
.
1. Hardhat set up (this step is already done)
- Create a new directory called
smart_contract
in the root of your project
mkdir smart_contract
- Initialize an empty
package.json
npm init -y
- Intsall following package as dev dependencies
npm install --save-dev @nomicfoundation/hardhat-toolbox @nomiclabs/hardhat-ether @nomiclabs/hardhat-waffle chai ethereum-waffle ethers hardhat
- Run init command for initialzing Hardhat project
npx hardhat
- Answer sample questions by Hardhat for setting up the project.
- Start writing your smart contract on Solidity.
*Note that the initialized project structure and future deployment commands might differ.
For example for deployments iginition/modules
directory is used, but we created scripts/deploy.js
directory and file for deployment, also we run other commands for deploying.
For more information check Hardhat documentation.
- For testing the contract and scripts run
npx hardhat test
*Don't forget to install Solidity extension on your IDE or editor for having properly hgihglighted Solidity syntax.
2. Hardhat deployement (these steps are already done)
*Please notice that we did a bit differently rather than the documentation says. You can check in smart_contract README.md file.
- Create a new
scripts
directory in yoursmart_contract
directory anddeploy.js
file in it
mkdir scripts
touch deploy.js
- Copy the code from
smart_contract/scripts/deploy.js
and paste into your file. - After havong a Smart Cintract and depoyment script we are ready to deploy. But for this there are some criteria.
- Have a MetaMask wallet (which can be installed in chrome webstore).
- And have some ethereum balnce on it (test ethereum will aslo work). How to gain test ethereum you can check here.
- Also account on Alchemy, whikch is platform for deploying Smart Contracts.
- After doing all mentioned above need to create an application in Alchemy, which you can do easyly in you dashbaord page right after registration. Notice you need to select a test ethereum network for your application if you are developing it. At this moment most popular test network is Seploia.
- After creatiaon you will receive
Http
andAPI
keys whcih you need to use in yourhardhat.config.js
file instead ofprocess.env
placeholders. In this file you need to set configs for your network where you are going to deploy. Checkhardhat.config.js
file.
*Please notice that @nomiclabs/hardhat-waffle
module is abit old for deplyoing Smart Contract tests, @nomicfoundation/hardhat-toolbox
can be used instead. Just I am not sure how exactly, you can try and write in discussions if you are feeling lucky with that :)
- And finally you need you MetaMask private key which you can find in you MetaMask account details.
- So now we are ready to run our deploy script
npx hardhat run scripts/deploy.js --network sepolia
*Notice instead of --network seploia
can be any another network, but it this moment Sepolia is most actual one.
- As an output we receive the address of our contract in Alchemy, which is a some hex number like
0x4ef34....4a3f
. This address will be used in our React app in future, means on client side. - And also et will generate a new
artifacts
directory with a few files (which are under .gitignore). So we will needTransaction.json
file fromsmart_contract/artifacts/contracts/Transactions.sol/
directory. In future we will use an information from this file in our client. So we will simply need to copy it intoclient/src/utils
directory.
Instead of React instalaltion and running process we will deep dive into the functions that were used for Web 3.0, as it is a simple React app set up with Vite through
npm init vite@latest
All our main Web 3.0 logic is written in TransactionContext.jsx
file.
Let's go over each function and understand what they do for making our ethereum transactions.
Just one important detail, ethers
library plays the biggest role for making transactions and connecting MetaMask to our app.
npm install ethers
- As you can see this file is missing in our files, because it contains a sensetive data and I put it under
.gitignore
. However it should look like somthing like this.
import abi from './Transactions.json'; // File genereated after deploying the contract
export const contractABI = abi.abi;
export const contractAddress = '0xa49b....5679e'; // Output after deploying the smart contract
- As you remember after deploying the Smart Contract we receive the Smart Contract address in our console and get a
Transactions.json
file in our new generetedartifacts
folder which is under.gitignore
. As I mentioned after generating that we bring it into ourclient
folder and start using it in our React app. - As you see we need some
abi
property from that file. If the file was generated successfully there shouldn't be any problems with importing that property. - Meanwhile explore
constants.example.js
file.
- After installing Metamask we always have access to
ethereum
viawindow.ethereum
. - We used it in this way in our
TransactionContext.jsx
file.
*I will leave referrences to all functions and coe pieces that you can check it right in Github.
- getEthereumContract is the first function that we declared. Which is basically for getting deployed smart contract that we created through its
address
andabi
which we inconstants.js
and import in this way. - Excpet for
address
andabi
we useethereum
here for getting some providers. - And also
etheres
library for getting our contract with itsContract
library usingaddress
,abi
andsigner
fromethereum
BrowserProvider
instance (for this we also useethers
). We fetch our contract in this way. - In
transactionContract
is available any method that we declared in our Smart Contract file whichTransactions.sol
.
getAllTransactions
is method decalred in our Smart Contract, you can check here.- This function gets simply all transactions transforms it a little and pushes into our state for transactions.
- Note: All transactions are kept in the appropriate field declared in Smart Contract and typed as TransferStruct struct.
checkIfWalltedConnected
function simply checks if we connected our MetaMask wallet to the app or not.- Firstly it checks if MetaMask is installed or not by checking if there is
ethereum
object inwindow
. - After that with an appropriate request it checks if there is a connected account or not. If the account doesn't exist it simply alerts to connect it.
- Note: if the website has functionality related to MetaMask it should provide a proper Connect button.
checkIfTransactionsExist
function simply checks if there are any transactions by checking their count throughgetTransactionCount
method declared in our SMart Contract.- On this line we convert it into a string and put a
+
in front of it because the returned value is type ofbigInt
.
connectWallet
function simply does a request for connecting our app to MetaMask. Which returns an array of wallet addresses. As we have only one account the first is ours and we simply set it to our state.
sendTransaction
is the last function which transfer the amount of ethereum to another account, where we use both ethereum object for making a request to another wallet, alsoethers
library for parcing the amount into hex value.- Also we use addToBlockChain method for storing the transfer in our transfers array in our Smart Contract, also we emit a Transfer event which calls the transfer and tores it on internet, in the network's website which we use in our case Sepolia.
- Notice that with
ethereum.request
we only ask user if he agrees to transfer such amount to another wallet by its address, the rest does Smart Contract by emitting the Transfer event.
How to gain some test Ethereum after connecting to Sepolia test ethereum network? There are two main providers Google Cloud
and Alchemy
. I think we are already familiar with both :)
- Alchemy Faucet: https://www.alchemy.com/faucets/ethereum-sepolia (for using this you must have some real ethereum on your balance, while
Google Cloud
is totally free). - Google Cloud Faucets: https://cloud.google.com/application/web3/faucet/ethereum/sepolia (make sure you chose Seploia, because there is another network called Holesky).
This is basically how the web 3.0 app is set up, how the Smart Contract has been written and deployed. Also how we used it on frontend by explaining each function with all possible referrences.
- If you find something incorrect or lacking feel free to fork the repo correct it and open a pull request I will be happy for that ^^
- And also if you have more expertise in Web 3.0 world than feel free to share it with us in our discussions, we will highly appreciate it ^^
π§βπ» Happy hacking to everyone!