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.
Ensure you have higher than 20 node.js
version, we used v20.13.1
, npm v10.5.2
, yarn v1.22.22
.
smart_contract
in the root of your projectmkdir smart_contract
package.json
npm init -y
npm install --save-dev @nomicfoundation/hardhat-toolbox @nomiclabs/hardhat-ether @nomiclabs/hardhat-waffle chai ethereum-waffle ethers hardhat
npx hardhat
*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.
npx hardhat test
*Don't forget to install Solidity extension on your IDE or editor for having properly hgihglighted Solidity syntax.
*Please notice that we did a bit differently rather than the documentation says. You can check in smart_contract README.md file.
scripts
directory in your smart_contract
directory and deploy.js
file in itmkdir scripts
touch deploy.js
smart_contract/scripts/deploy.js
and paste into your file.Http
and API
keys whcih you need to use in your hardhat.config.js
file instead of process.env
placeholders. In this file you need to set configs for your network where you are going to deploy. Check hardhat.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 :)
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.
0x4ef34....4a3f
. This address will be used in our React app in future, means on client side.artifacts
directory with a few files (which are under .gitignore). So we will need Transaction.json
file from smart_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 into client/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
constants.js
.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
Transactions.json
file in our new genereted artifacts
folder which is under .gitignore
. As I mentioned after generating that we bring it into our client
folder and start using it in our React app.abi
property from that file. If the file was generated successfully there shouldn't be any problems with importing that property.constants.example.js
file.ethereum
object in window
ethereum
via window.ethereum
.TransactionContext.jsx
file.*I will leave referrences to all functions and coe pieces that you can check it right in Github.
getEthereumContract
functionaddress
and abi
which we in constants.js
and import in this way.address
and abi
we use ethereum
here for getting some providers.etheres
library for getting our contract with its Contract
library using address
, abi
and signer
from ethereum
BrowserProvider
instance (for this we also use ethers
). We fetch our contract in this way.transactionContract
is available any method that we declared in our Smart Contract file which Transactions.sol
.getAllTransactions
functiongetAllTransactions
is method decalred in our Smart Contract, you can check here.checkIfWalltedConnected
functioncheckIfWalltedConnected
function simply checks if we connected our MetaMask wallet to the app or not.ethereum
object in window
.checkIfTransactionsExist
functioncheckIfTransactionsExist
function simply checks if there are any transactions by checking their count through getTransactionCount
method declared in our SMart Contract.+
in front of it because the returned value is type of bigInt
.connectWallet
functionconnectWallet
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
functionsendTransaction
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, also ethers
library for parcing the amount into hex value.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 :)
Google Cloud
is totally free).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.
🧑💻 Happy hacking to everyone!