There are many good articles about how to use x or y framework. The libraries have amazing documentation, but when it comes the time to put the stack together, it gets a little confusing.
In this article, we are going to go through every step of the creation of a decentralized application. Keep in mind that this example is for demonstration purposes and the frontend will be horrible, this is just to see how each step works.
NOTE: Here is the boilerplate code in case you want to play with it: https://github.com/rodrigoherrerai/hardhat-boilerplate
frontend → React
Developer Environment → Hardhat (I love Harhdat)
Smart Contract Language → Solidity
Library to interact with Ethereum → Ethers.js
Node hosting → Alchemy (we don’t want to run our own node for this example)
Code editor → I am using Sublime, but who cares?
Great! Our strategy is the following:
- Create the developer environment with Hardhat
- Create the smart contract
- Compile the smart contract
- Test / Debug the Smart Contract
- Deploy the Smart Contract
- Create the Front End and Interact with the contract
I will not go into detail as to how the frameworks work, most of them have very good documentation.
Let’s create our developer environment with hardhat, make sure you are located in your desktop and create an empty directory “we are going to name it hardhat-tutorial”:
Then cd into the directory and create a new npm project:
Then run the following command to install Hardhat:
npm install --save-dev hardhat
You are going to get prompt with 3 options. Choose “Create an empty hardhat.config.js”
hardhat.config.js file is where all the configuration is, that file is extremely important.
Open your code editor, in your hardhat.config.js file change solidity to version “0.8.3”:
Step 1 is complete.
Be sure to be located in the root directory, in my case is hardhat-tutorial. Once you are there, create a “contracts” directory. Note: if you name the directory something else, hardhat will not know that is there unless you change their configs.
Then, cd into your contracts directory, we are going to name our contract “Lottery”. → It is good practice to name the file the same as the contract.
Open your code editor, inside Lottery.sol add the following code:
NOTE: Do not use this random number generator for production, it is not safe.
As I mentioned previously, this is not a solidity or a framework tutorial, it is an article to demonstrate step by step to interact with your contract. But basically, this contract has a player with 100 initial chips, an initial supply of 900 (1000–100) and a mapping of the balance of the player. Then a bet function, the player needs to guess the number (it is to almost 1000, pretty hard), if the player gets it right, he wins the whole thing, if he doesn’t, he just looses 1 chip. Finally, we have a return balance function, it just returns the balance of the player.
NOTE: In this lottery game, only the player (the one who deployed the contract) will have access to play. No one else will be able to play except the deployer → the player.
Step 2 is finnished.
To compile the contract, make sure to be in your root directory and fire up the command:
npx hardhat compile
You should see two new directories. 1. cache: ignore it, it is hardhat internal stuff. 2. artifcats: inside artifcacts you have all the relevant information of your contract. artifacts/contracts/Lottery.sol/Lottery.json.
Just a quick note, remember that “compiling a contract” means to convert, in this case, solidity code, into bytecode. We need to convert the code into bytecode so the Ethereum Virtual Machine can understand it.
Step 3 finnished
Hardhat provides a beautiful testing configuration. You can console.log() in your solidity code, How amazing is that ?
We are just going to do a small sample test for demonstration purposes, nothing complex. But remember that testing is extremely important when developing smart contracts, a single mistake and bye bye funds.
In order to test, we need to create a test directory. If you name the directory something else, hardhat will not know it is there, unless you modify it. That is the beauty of Hardhat, you can add or eliminate whatever you want.
We are going to create a test directory and then a Lottery.js file inside for testing. Be sure to be in the root directory and fire up:
Before we can start testing, we need to install one plugin. Be sure to be in the root directory and fire up:
npm install --save-dev @nomiclabs/hardhat-ethers ethers @nomiclabs/hardhat-waffle ethereum-waffle chai
This basically installs testing frameworks like waffle and chai. It also comes with ethers so we don’t need to install it again. Add this line in your hardhat.config.js file:
Copy the following code in your Lottery.js file:
In order to run the tests, be sure to be in the root directory and fire up:
npx hardhat test
You should see the following output:
Now we are going to use my favourite tool for debugging.
Change the code in your smart contract as follows:
As you see, we just imported “hardhat/console.sol” at the top, and we console.logged() some things inside the constructor. As I said before, this testing is primitive just to show the example.
It is important to note, that every time you run the test, your contract will re-compile. This means that if you did any changes, Hardhat will know.
Run in your terminal:
npx hardhat test
You should see the following output:
You can see there the output that we logged. This feature is amazing.
Step 4 done!
For this step we are going to use Alchemy. Alchemy is a platform that helps you to interact with Ethereum without the need to run a node yourself.
Create an account, here is the link: https://www.alchemy.com .
Once you created the account, we need to do some configurations to our hardhat.config.js file. Remember that there are different live networks in Ethereum. There is the mainnet, this is where the real stuff happens, with real money. Then, we have different testnets to test. For this example, we are going to deploy our smart contract in a testnet called Ropsten. Make sure you have a Metamask wallet. Also, be sure to have some test ether, you can get some here: https://faucet.ropsten.be .
Once you are ready, create a .env file in your root directory
Inside of the variable PRIVATE_KEY, you need to put your private key from the metamask wallet. You can do that by going to Account details → Export Private Key.
For the API_URL variable, you need to create a new app in Alchemy. Once you are logged in, click “Create App”, then add the following:
You can name it whatever you want.
Once you have the app, click in “view details” and “view key”. Copy the http key and paste it in the API_URL variable in your .env file.
Then we need to install the dotenv dependency. Run in your root directory:
npm install dotenv --save
Once you have that, we need to create a deploy file. Be sure to be located in your root directory and create a scripts directory, and inside, create a deploy.js file.
Before deploying the contract to Ropsten, we want to be sure that the contract is being deployed correctly. In order to do that, we are going to use the Hardhat network. You should definitely dive deeper into the Hardhat network, but basically it is a built in blockchain network that you can interact with. It comes with 20 deterministic accounts with 10000 eth each. It is similar to Ganache but in my opinion, has better testing features.
Be sure to be located in your root directory and fire up:
npx hardhat run scripts/deploy.js
Everything went well. Not it’s time to do deploy the contract to the Ropsten network. Make this modifications to your hardhat.config file:
Once you have that ready, make sure to have written your private key and Alchemy’s API key correctly in the.env file. Make sure you are located in your root directory and run the following command:
npx hardhat run scripts/deploy.js --network ropsten
You should see the following output:
NOTE: You may get a provider header error. I believe this is an issue with Alchemy, if you do get it, wait some time and try again.
As we can see, our contract got deployed succesfuly. Let’s check it out in etherscan-ropsten:
We just deployed our smart contract to Ropsten! Keep in mind, that deploying a contract to the mainnet is basically the same.
Step 5 complete.
For this last step, we are going to create a frontend to interact with our smart contract. For the sake of simplicity, we are going to create our frontend inside of our main directory. Again, the frontend will not be beautiful, it is just to demonstrate.
Be sure to be located in your root directory and run:
npx create-react-app frontend
You should see a new frontend directory created with react’s boilerplate code.
The first step is to install ethers. cd into your frontend directory and install ethers:
npm install --save ethers
Once you have it installed, add this to your frontend/src/App.js:
Of course, you need to add your Private key and api key. Do not put your private key there, you can do it if it is test eth and you are not going to use that account for real eth.
When you run the file, you should see the following output:
It should start with 100, I clicked it many times that is why is in 37.
There it is! The code is on Github : https://github.com/rodrigoherrerai/hardhat-boilerplate
Join Coinmonks Telegram Channel and Youtube Channel learn about crypto trading and investing
- YouHodler vs CoinLoan vs Hodlnaut | Cryptohopper vs HaasBot
- Binance vs Kraken | Dollar-Cost Averaging Trading Bot
- 10 Best Crypto Exchange in Singapore | Buy AXS
- Best Crypto to Invest in India | HitBTC Review
- Best Crypto Trading bots in Canada | Staking Crypto
- How to buy Bitcoin in India? | WazirX Review
- Bitcoin Taproot | Bitso Review | Top 6 Bitcoin Credit Card
- Best Free Crypto Signals | YoBit Review | Bitbns Review
- OKEx Review | Kucoin Trading Bot| Futures Trading Bots
- AscendEx Staking | Bot Ocean Review | Best Bitcoin Wallets
- Huobi Review | OKEx Margin Trading | Futures Trading
- Godex.io Review | Invity Review | BitForex Review
Create, Test, Deploy and Interact with a Smart Contract from A to Z was originally published in Coinmonks on Medium, where people are continuing the conversation by highlighting and responding to this story.