In this post, we will discuss how we can create Dapp and deploy Smart contracts in Parastate.
Watch this created here in the below video
*Step1: Create a Metamask account for Parastate
*Step2: Fund the account and connect
*Step3: Write a Smart contract
*Step4: Compile and deploy
*Step5: Write Dapp with Web3.js
*Step6: Connect Web3 with Smart contracts
Step 1: Create a Metamask account for Parastate
There are numerous articles on this, you can refer one here.
Few things to note is the
RPC url: https://rpc.parastate.io:8545/
chain id: 123
Currency symbol: STATE
Step 2: Fund the account and connect
To fund the account, you need to take the account created from step1 and go to the faucet here and request STATE tokens
Step3: Write a Smart contract
To write a smart contract you need 2 things
1 - IDE
2 - Language
We use Buidl a Online IDE developed by Secondstate
And for the language, we have to use Solidity.
An example smart contract can be found below
pragma solidity >=0.4.0 <0.6.0;
contract BasicContract {
int s_amount;
address s_owner;
constructor() public {
s_owner = msg.sender;
s_amount = 0;
}
modifier onlyOwner() {
require(msg.sender == s_owner);
_;
}
function deposit(int v) public {
require(v >= 0);
s_amount = s_amount + v;
}
function withdraw(int v) public onlyOwner { require(v >= 0);
require(s_amount >= v);
s_amount = s_amount - v;
}
function getBalance() constant public returns (int retVal) {
return s_amount;
}
function getAddress() constant public returns (address a) {
return s_owner;
}
}
Step4: Compile and deploy
Once the smart contract is written you have to compile it and deploy it.
To compile, click on the Compile button then you will get the ABI and the BYTECODE created, these two are important for us to connect the Smart contract code with the Dapp that we will create with Web3
Once these two are done we will tap on deploy to chain.
So to test the Smart contracts, you do not need the Dapp.
You can see clearly there are 4 tabs, currently we should on the contracts section.
After compiling and deploying, now tap on the Deployed tab.
Here you will see all the functions inside the smart contract exposed. In this example we can see a deposit, withdraw, get balance and get address sections.
You can click on get balances to see your balance and then you can enter an amount and tap on the deposit button.
Now move to the logs section, you can see something like this
This is a confirmation that your smart contract was successfully deployed.
Step5: Write Dapp with Web3.js
To write a Dapp UI, we need the usual suspects HTML, CSS and JS.
Here is the HTML and JS code for your reference
<html>
<body>
<h1> Parastate Spartan Task </h1>
<p></p>
<label id = "AccNo-lbl"></label>
<p></p>
<div>
<label>Enter the amount</label>
<input id="Enter_amount"/>
</div>
<p> </p>
<div>
<label>Select action</label>
<button id="Deposit">Deposit</button>
<button id="Withdraw">Withdraw</button>
</div>
<p> </p>
<label> Options available </label>
<p> </p>
<div>
<button id="balance">Get-balance</button>
</div>
<p></p>
<label id = "balance-lbl"></label>
</body>
</html>
Javascript. i have explained below how to get the values for the three variables abi bytecode and cAddr
var abi = ''
var bytecode = '';
var cAddr = '';
var instance = null;
window.addEventListener('web3Ready', function () {
var contract = web3.ss.contract(abi);
instance = contract.at(cAddr);
document.getElementById('AccNo-lbl').innerHTML = "Account No : "+instance.getAddress()
});
document.querySelector("#Deposit").addEventListener("click", function () {
var amount = document.getElementById('Enter_amount').value
instance.deposit(amount)
});
document.querySelector("#Withdraw").addEventListener("click", function () {
var amount = document.getElementById('Enter_amount').value
instance.withdraw(amount)
});
document.querySelector("#balance").addEventListener("click", function () {
var curr_bal=instance.getBalance()
document.getElementById('balance-lbl').innerHTML=curr_bal;
});
Step6: Connect Web3 with Smart contracts
In the JS section we need the connectivity between the Smart contract with the help of web3.
Here in this example we have 3 variables
var abi
var bytecode
var cAddr
you can get abi and bytecode by tapping on the Contracts tab and clicking on the Compiled section
cAddr can be taken from the Deployed tab as shown in figure below
Once you have the above set, the below lines code gives you the smart contract instance in the variable instance.
var instance = null;
window.addEventListener('web3Ready', function () {
var contract = web3.ss.contract(abi);
instance = contract.at(cAddr);
document.getElementById('AccNo-lbl').innerHTML = "Account No : "+instance.getAddress()
});
All you have to do is call the function from the instance as shown below.
document.querySelector("#Withdraw").addEventListener("click", function () {
var amount = document.getElementById('Enter_amount').value
instance.withdraw(amount)
});
Now you can play around with the Dapp you have created.
Happy Coding!
Top comments (0)