Create Dapps and deploy smart contract with Parastate
Tags: parastate, state, secondstate
Published: 2021-05-01 20:38:23

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

{% youtube XqdTUAtVlSs %}

*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](http://faucet.parastate.io/) 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] (link https://buidl.secondstate.io) 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g5re7an31nwp76myb42h.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3iglyaq631m8uhu8deo9.png)
 
Now move to the logs section, you can see something like this
![Screenshot 2021-05-01 at 21.20.36](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5qt6m2cy09fx5vhacnma.png)

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

![Screenshot 2021-05-01 at 21.25.41](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p8jo854o0czudqs1y3aa.png)

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!