Create Dapps and deploy smart contract with Parastate

By May 2, 2021DApps
Click here to view original web page at dev.to

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.

Screenshot 2021-05-01 at 21.10.38

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.

Screenshot 2021-05-01 at 21.16.31

Now move to the logs section, you can see something like this

Screenshot 2021-05-01 at 21.20.36

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.

All you have to do is call the function from the instance as shown below.

Now you can play around with the Dapp you have created.
Happy Coding!

Leave a Reply