Dapp development on Wethio Blockchain

You will learn how to:
1.Set up Truffle
2.Create a Truffle project
3.Create a ZYN wallet
4.Request free coins using Wethio faucet
5.Write a smart contract
6.Compile and migrate the smart contract to Wethio
7.Connect to Metamask to Wethio Testnet
8.Create a user interface to interact with the smart contract
Advantages of developing Dapp on Wethio
We recommend developers to build Dapps on Wethio because it is 100 times faster than the Ethereum Blockchain, and also cheaper than it. The Wethio Testnet can process 2,000 TPS, that makes it a great choice for developers to build Dapps.
Let’s get started with the Dapp development.
Setup Requirements
Install the following programs to start building your Dapp
Node.js & npm (“Node.js Package Manager”)
Git
Set up Truffle
As Truffle Framework is a great tool for developing Dapps, you can install Truffle and deploy your smart contracts to Wethio.
To do so: npm install -g truffle
Create a Truffle project
At first you need to set up a directory in your choice of development folder and then move inside it
mkdir pet-shop-tutorialcd pet-shop-tutorial
Then you can begin creating the Truffle project in any of the following two ways:
Create a new project from the ground up with no smart contracts included
Use Truffle Boxes that consists of applications and project templates
We will proceed further with a Truffle Box called pet-shop which includes the basic project structure as well as code for the user interface
You can unpack this Truffle Box using the following command:
truffle unbox pet-shop
Create a ZYN Wallet and save your Mnemonic
1.Create a new ZYN wallet using ZynWallet mobile app for Android or iOS, or from link
a. Select Wethio Testnet from Advanced Settings under Settings
2.From Settings, select Backup wallet and Continue
3.Note down the 12-word recovery phrase
4.You can also create a new Zyn wallet with MetaMask, MyEtherWallet or TrustWallet
5.Enter a password and create a new wallet
6.Note down the recovery phrase
For this tutorial, my wallet address is:
0xc9b694877acd4e2e100e095788a591249c38b9c5
My recovery phrase (12-word Mnemonic)
myth ahead spin horn minute tag spirit please gospel infant clog camera
Get ZYN funds
To be used for smart contract deployment or in Dapps
Free ZYN coins are available through Wethio’s testnet Faucet.
The Block Explorer
At WeSight, you can check the balance of a wallet address
Programming the Smart Contract
Let’s begin with writing a smart contract
1.Create a new file Adoption.sol in the contracts/ directory
2.Copy the code below
1
pragma solidity ^0.5.0;contract Adoption {
2
address[16] public adopters;  // Adopting a pet
3
function adopt(uint petId) public returns (uint) {
4
// check that petId is in range of our adopters array
5
require(petId >= 0 && petId <= 15);    // add the address who called this function to our adopter array
6
adopters[petId] = msg.sender;    // return the petId provided as a confirmation
7
return petId;
8
}  // Retrieving the adopters
9
function getAdopters() public view returns (address[16] memory) {
10
return adopters;
11
}
12
}
Copied!
Compiling
To make the EVM understand and execute the code, we need to compile it into bytecode. Also as Wethio is EVM-compatible, any contract written in Ethereum can be effortlessly ported to Wethio Ensure that in the terminal you are in the root of the directory that contains the Dapp, so when you type:
truffle compile
You’ll see the below outputs
1
Compiling ./contracts/Migrations.sol... 
2
Compiling ./contracts/Adoption.sol... 
3
Writing artifacts to ./build/contracts
4
​
5
Migrating Dapps from Ethereum
Copied!
A migration is basically altering the state of your application’s contracts through a deployment script, i.e. moving from state to another.
After you have compiled the smart contracts, you can now migrate them to Wethio’s blockchain. To do so follow these steps:
Create the migration scripts
1.Open migrations/ directory
2.Create a new file named 2_deploy_contracts.js
3.Add the below code to the file 
1
var Adoption = artifacts.require("Adoption");module.exports = function(deployer) {
2
deployer.deploy(Adoption);
3
};
Copied!
After creating the migration script, you will need to configure the migration network in truffle.js
Before beginning, specify the blockchain where you want to deploy your smart contracts, the address to deploy, the wallet you just created, and gas, gas price etc.
Now follow the steps:
1.Install Tuffle’s HDWalletProvider - an individual npm package to find and sign transactions for addresses
2.Open truffle.js file and edit the migration settings
3.Define networks to migrate Dapp, We’ll proceed with two networks, development and wethio testnet
You can learn more about testnet configuration in the Wethio network section of this documentation.
Before proceeding, we need to have: RPC endpoint, the Chain id and the HD derivation path.
1.Now replace the truffle.js with the new code
1
 'use strict'var HDWalletProvider = require("truffle-hdwallet-provider");var mnemonic = '<PUT YOUR WALLET 12-WORD RECOVERY PHRASE HERE>';module.exports = {
2
networks: {
3
 development: {
4
   provider: () => new HDWalletProvider(
5
      mnemonic,
6
      "http://127.0.0.1:8545",
7
    ),
8
    host: "127.0.0.1",
9
    port: "8545",
10
    network_id: "*", // Match any network id
11
  },   wethiotestnet: {
12
    provider: () => new HDWalletProvider(
13
      mnemonic,
14
      "https://rpc.testnet.wethio.io",
15
      0,
16
      1,
17
      true,
18
      "m/44'/77777'/0'/0/",
19
    ),
20
    network_id: "79",
21
    gas: 2000000,
22
    gasPrice: 10000000000000,
23
  }
24
}
25
};
Copied!
2.Update the truffle.js file with your own recovery phrase, the 12-word Mnemonic
```text var mnemonic = '';
1
Now that we done with the migration configuration, you will now be able to be deploy the smart contracts to public blockchains like Wethio
2
​
3
   ##### Start the migration
4
​
5
    1. Have the compiled smart contract ready
6
    2. Start the migration to the Wethio Testnet in the terminal
7
    3. truffle migrate --network wethiotestnet
8
​
9
​
10
Once done, you will have the transaction ID and the contract address.
11
​
12
Troubleshooting
13
​
14
What to do when you see the following errors?
15
​
16
Error 1: smart contract creation cost is under allowance
17
​
18
Edit truffle.js and add more gas/gasPrice to deploy
19
​
20
Error 2: insufficient funds for gas * price + value.
21
​
22
Add more funds to your wallet to deploy, go to Faucet and get more tokens
23
​
24
You can check the transaction status of the deployment on WeSight. You can check details of the transaction by searching for the Transaction ID for your new contract.
25
​
26
And it’s done. You’ve successfully deployed your contract to Wethio using Truffle. 
27
​
28
​
29
#### Testing the smart contract
30
​
31
Write tests in the **test/** directory and execute with truffle test to test your smart contracts.
32
​
33
​
34
#### Build a Web3 Frontend to Interact with Smart Contract
35
​
36
Take the smart contract you created and deployed on Wethio blockchain to the public by creating a UI. Through this UI people will be able to use the shop
37
​
38
The **pet-shop** Truffle Box has the code for front-end included in the src/ directory
39
​
40
1. Open **/src/js/app.js** in text editor
41
​
42
2. Analyze the file. The object, load, and the function all are in there. The **global** App object to manage our application, load the data in **init()**, call the function **initWeb3()**. The web3 JavaScript library interacts with the Ethereum blockchain and can retrieve user accounts, send transactions, interact with smart contracts, and do much more
43
3. Paste the below code
44
```text
45
​
46
App = {
47
  web3Provider: null,
48
  contracts: {},
49
  init: async function() {
50
    // Load pets.
51
    $.getJSON('../pets.json', function(data) {
52
      var petsRow = $('#petsRow');
53
      var petTemplate = $('#petTemplate');
54
      for (i = 0; i < data.length; i ++) {
55
        petTemplate.find('.panel-title').text(data[i].name);
56
        petTemplate.find('img').attr('src', data[i].picture);
57
        petTemplate.find('.pet-breed').text(data[i].breed);
58
        petTemplate.find('.pet-age').text(data[i].age);
59
        petTemplate.find('.pet-location').text(data[i].location);
60
        petTemplate.find('.btn-adopt').attr('data-id', data[i].id);
61
        petsRow.append(petTemplate.html());
62
      }
63
    });
64
    return await App.initWeb3();
65
  },  initWeb3: async function() {
66
    //----
67
    // Modern dapp browsers...
68
    if (window.ethereum) {
69
      App.web3Provider = window.ethereum;
70
      try {
71
        // Request account access
72
        await window.ethereum.enable();
73
      } catch (error) {
74
        // User denied account access...
75
        console.error("User denied account access")
76
      }
77
    }
78
    // Legacy dapp browsers...
79
    else if (window.web3) {
80
      App.web3Provider = window.web3.currentProvider;
81
    }
82
    // If no injected web3 instance is detected, fall back to Ganache
83
    else {
84
      App.web3Provider = new     Web3.providers.HttpProvider('http://localhost:7545');
85
    }
86
    web3 = new Web3(App.web3Provider);
87
    //----
88
    return App.initContract();
89
  },  initContract: function() {
90
    //----
91
    $.getJSON('Adoption.json', function(data) {
92
      // Get the necessary contract artifact file and instantiate it with truffle-contract
93
      var AdoptionArtifact = data;
94
      App.contracts.Adoption = TruffleContract(AdoptionArtifact);      // Set the provider for our contract
95
      App.contracts.Adoption.setProvider(App.web3Provider);      // Use our contract to retrieve and mark the adopted pets
96
      return App.markAdopted();
97
    });
98
    //----    return App.bindEvents();
99
  },  bindEvents: function() {
100
    $(document).on('click', '.btn-adopt', App.handleAdopt);
101
  },  markAdopted: function(adopters, account) {
102
    //----
103
    var adoptionInstance;
104
    App.contracts.Adoption.deployed().then(function(instance) {
105
      adoptionInstance = instance;      return adoptionInstance.getAdopters.call();
106
    }).then(function(adopters) {
107
      for (i = 0; i < adopters.length; i++) {
108
        if (adopters[i] !== '0x0000000000000000000000000000000000000000') {
109
          $('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true);
110
        }
111
      }
112
    }).catch(function(err) {
113
      console.log(err.message);
114
    });
115
    //----
116
  },  handleAdopt: function(event) {
117
    event.preventDefault();    var petId = parseInt($(event.target).data('id'));    //----
118
    var adoptionInstance;    web3.eth.getAccounts(function(error, accounts) {
119
      if (error) {
120
        console.log(error);
121
      }      var account = accounts[0];      App.contracts.Adoption.deployed().then(function(instance) {
122
        adoptionInstance = instance;        // Execute adopt as a transaction by sending account
123
        return adoptionInstance.adopt(petId, {from: account});
124
      }).then(function(result) {
125
        return App.markAdopted();
126
      }).catch(function(err) {
127
        console.log(err.message);
128
      });
129
    });
130
    //---
131
  }
132
};$(function() {
133
  $(window).load(function() {
134
    App.init();
135
  });
136
});
Copied!
Here is what the various functions mentioned in the above code do:
initWeb3() - Checks the version of Dapp browsers or MetaMask
initContract() - Retrieves the artifact file for our smart contract. Now, artifacts are the basic information about our contracts such as deployed address and ABI (application binary interface).
markAdopted() - To check if any pets are already adopted from a previous visit
handleAdopt() - To obtain the deployed contract and store the instance in adoptionInstance. When we execute the adopt() function with both the pet’s ID and an object with the account address, we send a transaction instead of a call. Then, we proceed to call our markAdopted() function to sync the UI with our newly stored data
Truffle
Wethio Network
Last modified 1yr ago
Copy link
Contents
Advantages of developing Dapp on Wethio
Setup Requirements
Set up Truffle
Create a ZYN Wallet and save your Mnemonic
The Block Explorer
Programming the Smart Contract
Compiling