Scaffold-ETH comes with a demo contract and a front-end. Let us try to run that and understand what it does under the hood.
Type the following in your terminal/cmd window:
working with scaffold eth
What this will do is start the Hardhat network, which is a local Ethereum network for development. Once the process is completed, you will see a message similar to this.
Now, let us try to deploy the contract, you can find a demo available at /packages/hardhat/contracts/YourContract.sol. Open a new terminal/cmd window, go to the scaffold-eth directory and type the following:
working with scaffold eth
Here, we are telling Hardhat to deploy the smart contract to the Hardhat local network, which we started in the last step. The deployment script can be found under /packages/hardhat/deploy/ 00_deploy_your_contract.js
You will see a message similar to this when the contract deploys.
Now that we have deployed the contract, it's time to fire up the application. To do so, open a third terminal window and type the following:
working with scaffold eth
This will launch the React app, which uses the local network and deployed contract. Once the server starts, the app runs on
https://localhost:3000.
And it should look something like this.
We can now walk through the demo contract YourContract.sol which is working behind this frontend app.
working with scaffold eth
pragma solidity >=0.8.0 <0.9.0;
//SPDX-License-Identifier: MIT
import "hardhat/console.sol";
//import "@openzeppelin/contracts/access/Ownable.sol"; //https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol
contract YourContract {
//event SetPurpose(address sender, string purpose);
string public purpose = "Building Unstoppable Apps!!!";
constructor() {
// what should we do on deploy?
}
function setPurpose(string memory newPurpose) public {
purpose = newPurpose;
console.log(msg.sender,"set purpose to",purpose);
//emit SetPurpose(msg.sender, purpose);
}
}
pragma solidity >=0.8.0 <0.9.0;
//SPDX-License-Identifier: MIT
import "hardhat/console.sol";
//import "@openzeppelin/contracts/access/Ownable.sol"; //https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol
contract YourContract {
//event SetPurpose(address sender, string purpose);
string public purpose = "Building Unstoppable Apps!!!";
constructor() {
// what should we do on deploy?
}
function setPurpose(string memory newPurpose) public {
purpose = newPurpose;
console.log(msg.sender,"set purpose to",purpose);
//emit SetPurpose(msg.sender, purpose);
}
}
pragma solidity >=0.8.0 <0.9.0;
//SPDX-License-Identifier: MIT
import "hardhat/console.sol";
//import "@openzeppelin/contracts/access/Ownable.sol"; //https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/access/Ownable.sol
contract YourContract {
//event SetPurpose(address sender, string purpose);
string public purpose = "Building Unstoppable Apps!!!";
constructor() {
// what should we do on deploy?
}
function setPurpose(string memory newPurpose) public {
purpose = newPurpose;
console.log(msg.sender,"set purpose to",purpose);
//emit SetPurpose(msg.sender, purpose);
}
}
Line 1: Declaring Solidity version.
Line 2: Specifying
SPDX license type, which is an addition after Solidity ^0.6.8.
Whenever the source code of a smart contract is made available to the public, these licenses can help resolve/avoid copyright issues. If you do not wish to specify any license type, you can use a special license UNLICENSED or simply skip the whole comment (it won’t result in an error, just a warning).
Line 4: Importing the Hardhat console contract (there is no contract; this is just to demo on how to import local contracts).
Line 7-11: Starting the contract YourContract and storing a string in the purpose variable.
Line 13-15: Example of contract constructor, which gets activated as soon as the contract is deployed.
Line 17-22: A function to take a new string as input and store it in newPurpose variable, then giving the value of newPurpose variable to the purpose variable, finally printing the string stored in the purpose variable.
Lets see this in action. On the homepage, you must see a message/string which we hard-coded in our contract.
We will change that by typing a new message in the setPurpose box and submit the transaction by clicking on send. This will store the new string in the newPurpose variable, which will be transferred to the purpose variable, ultimately displaying the new message on the page.
For example, here, we have set a new message as '>>>>>And keep building'
You can also connect this app with wallets like MetaMask by clicking the connect button on the top right. This shows an excellent example of connecting web apps with web3 wallets. Now, see how quickly we can set up QuickNode in the Scaffold-ETH setup.