In January 2022, I did a 30-day project on “Why Your Business Needs to Adapt to Blockchain”. This post is a part of it. To know what I covered, learned, and executed in the project, visit this page.
If you’ve been following so far, you would know that I am just one step away from having my Greeter dApp running on my local network.
Deploying the Hello World Greeter dApp on the Node
Hardhat provides a deployment script: vi scripts/sample-script.js that I renamed to scripts/deploy/js using the following command: mv scripts/sample-script.js scripts/deploy.js
To look into the deploy.js script, I used the command vi scripts/deploy.js. The deploy.js script looks like this:
The code inside the main function is in JavaScript. It is called whenever the script is run. It uses the “ethers” library to get a contract named “Greeter”. It will deploy it by passing the string “Hello, Hardhat!”. The string will go into the _greeting variable of the constructor of the contract that I previously discussed.
To see that happening, I went to the Greeter.sol contract in a new tab using vi contracts/Greeter.sol
The “Hello, Hardhat!” goes into the _greeting of the constructor in Greeter.sol and will be written into the blockchain. Once written, we await until it is deployed. Once deployed, the deployment is logged in the console and given a public address similar to the public key. This address would be unique to this contract.
To deploy the contract, I had to run the script deploy.js using the command npx hardhat run scripts/deploy.js –network localhost
The last part of the command “– network” localhost tells the script that it has to be deployed on the localhost network.
This is what the console looks like:
The first account 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 that we created in Hardhat was used to write the Greeter dApp on this address: 0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0
This address will be used to identify this contract.
Next, I modified the source of the React app. I wrote the code required for communication with this blockchain on the React app and called the set and get greet functions using the application.
Now, the contract is deployed on the node. Next, I edited the src/App.js file: vi src/App.js
I typed i to enter Insert mode. Insert mode allows you to edit the code. To go back to the normal mode, you need to press esc.
I replaced the standard React that was provided with the following code while on Insert mode:
import ‘./App.css’;
import { useState } from ‘react’;
import { ethers } from ‘ethers’ // acts like a backend for our Web3/DApp
import Greeter from ‘./artifacts/contracts/Greeter.sol/Greeter.json’
// Update with the contract address logged out to the CLI when it was deployed
// !!!!!!!! Change this …..
const greeterAddress = “0x5FbDB2315678afecb367f032d93F642f64180aa3”
function App() {
// store greeting in local state of react. Has nothing to do with the smart contract at the moment
const [greeting, setGreetingValue] = useState()
// request access to the user’s account. This works regardless of the wallet you’re using.
async function requestAccount() {
await window.ethereum.request({ method: ‘eth_requestAccounts’ });
}
// call the smart contract, read the current greeting value
async function fetchGreeting() {
if (typeof window.ethereum !== ‘undefined’) {
const provider = new ethers.providers.Web3Provider(window.ethereum)
const contract = new ethers.Contract(greeterAddress, Greeter.abi, provider)
try {
const data = await contract.greet()
console.log(‘data: ‘, data)
} catch (err) {
console.log(“Error: “, err)
}
}
}
// call the smart contract, send an update
async function setGreeting() {
if (!greeting) return
if (typeof window.ethereum !== ‘undefined’) {
await requestAccount()
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner()
const contract = new ethers.Contract(greeterAddress, Greeter.abi, signer)
const transaction = await contract.setGreeting(greeting)
await transaction.wait()
fetchGreeting()
}
}
return (
<div className=”App”>
<header className=”App-header”>
<button onClick={fetchGreeting}>Fetch Greeting</button>
<button onClick={setGreeting}>Set Greeting</button>
<input onChange={e => setGreetingValue(e.target.value)} placeholder=”Set greeting” />
</header>
</div>
);
}
export default App;
The requestAccount function connects with Metamask. Then we have the fetchGreeting function followed by the setGreeting function.
To run the React app, I had to start a React server: npm start
It started a React app on my localhost 3000.
So, the app has a button “Fetch Greeting”, a button “Set Greeting” and a text box where the greeting can be set.
Next, I went to Developer Tools in Chrome.
If I click on Fetch Greeting, it shows the initial greeting “Hello, Hardhat!” from the blockchain.
Next, I wrote a new greeting on the text box and clicked on Set Greeting. Metamask popped up as soon as I clicked on it. It asked me to select the account that I wanted to use to perform the transaction.
The recly-test02 account was selected by default. It had a 10 ETH balance, so I went ahead with it and clicked on next.
The transaction had some gas fees. I clicked on Confirm. The output on the Console changed.
Next, I wanted to make sure that the greeting had been written to the actual blockchain.
As can be seen, Greeter#greet function and Greeter#setGreeting functions had been called. Some gas had been used to perform the transaction and a new block ‘Block #4’ had been created and the greeting changed from ‘Hello, Hardhat!’ to ‘dApps are cool!’.
Thus, the contract was complete.
Lastly, I needed to deploy it on the Global testnet, i.e., Ropsten Testnet for a truly decentralized application. But, before deploying the dApp, I wanted to add one more feature to it. I want to create my own token. I created the token on the same application and deployed both the Greeter app and the Token app together on the Ropsten Testnet. In the next three blog posts, starting from this one, I explain how I created my own token. You can skip to this post if you are interested to know how to deploy the dApp on the Ropsten Testnet.
Korak Bhaduri 