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
pragma solidity ^0.5.0;contract Adoption {
address[16] public adopters;  // Adopting a pet
function adopt(uint petId) public returns (uint) {
// check that petId is in range of our adopters array
require(petId >= 0 && petId <= 15);    // add the address who called this function to our adopter array
adopters[petId] = msg.sender;    // return the petId provided as a confirmation
return petId;
}  // Retrieving the adopters
function getAdopters() public view returns (address[16] memory) {
return adopters;
}
}
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
Compiling ./contracts/Migrations.sol... 
Compiling ./contracts/Adoption.sol... 
Writing artifacts to ./build/contracts
​
Migrating Dapps from Ethereum
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
var Adoption = artifacts.require("Adoption");module.exports = function(deployer) {
deployer.deploy(Adoption);
};
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
 'use strict'var HDWalletProvider = require("truffle-hdwallet-provider");var mnemonic = '<PUT YOUR WALLET 12-WORD RECOVERY PHRASE HERE>';module.exports = {
networks: {
 development: {
   provider: () => new HDWalletProvider(
      mnemonic,
      "http://127.0.0.1:8545",
    ),
    host: "127.0.0.1",
    port: "8545",
    network_id: "*", // Match any network id
  },   wethiotestnet: {
    provider: () => new HDWalletProvider(
      mnemonic,
      "https://rpc.testnet.wethio.io",
      0,
      1,
      true,
      "m/44'/77777'/0'/0/",
    ),
    network_id: "79",
    gas: 2000000,
    gasPrice: 10000000000000,
  }
}
};
2.Update the truffle.js file with your own recovery phrase, the 12-word Mnemonic
```text var mnemonic = '';
Now that we done with the migration configuration, you will now be able to be deploy the smart contracts to public blockchains like Wethio
​
   ##### Start the migration
​
    1. Have the compiled smart contract ready
    2. Start the migration to the Wethio Testnet in the terminal
    3. truffle migrate --network wethiotestnet
​
​
Once done, you will have the transaction ID and the contract address.
​
Troubleshooting
​
What to do when you see the following errors?
​
Error 1: smart contract creation cost is under allowance
​
Edit truffle.js and add more gas/gasPrice to deploy
​
Error 2: insufficient funds for gas * price + value.
​
Add more funds to your wallet to deploy, go to Faucet and get more tokens
​
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.
​
And it’s done. You’ve successfully deployed your contract to Wethio using Truffle. 
​
​
#### Testing the smart contract
​
Write tests in the **test/** directory and execute with truffle test to test your smart contracts.
​
​
#### Build a Web3 Frontend to Interact with Smart Contract
​
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
​
The **pet-shop** Truffle Box has the code for front-end included in the src/ directory
​
1. Open **/src/js/app.js** in text editor
​
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
3. Paste the below code
```text
​
App = {
  web3Provider: null,
  contracts: {},
  init: async function() {
    // Load pets.
    $.getJSON('../pets.json', function(data) {
      var petsRow = $('#petsRow');
      var petTemplate = $('#petTemplate');
      for (i = 0; i < data.length; i ++) {
        petTemplate.find('.panel-title').text(data[i].name);
        petTemplate.find('img').attr('src', data[i].picture);
        petTemplate.find('.pet-breed').text(data[i].breed);
        petTemplate.find('.pet-age').text(data[i].age);
        petTemplate.find('.pet-location').text(data[i].location);
        petTemplate.find('.btn-adopt').attr('data-id', data[i].id);
        petsRow.append(petTemplate.html());
      }
    });
    return await App.initWeb3();
  },  initWeb3: async function() {
    //----
    // Modern dapp browsers...
    if (window.ethereum) {
      App.web3Provider = window.ethereum;
      try {
        // Request account access
        await window.ethereum.enable();
      } catch (error) {
        // User denied account access...
        console.error("User denied account access")
      }
    }
    // Legacy dapp browsers...
    else if (window.web3) {
      App.web3Provider = window.web3.currentProvider;
    }
    // If no injected web3 instance is detected, fall back to Ganache
    else {
      App.web3Provider = new     Web3.providers.HttpProvider('http://localhost:7545');
    }
    web3 = new Web3(App.web3Provider);
    //----
    return App.initContract();
  },  initContract: function() {
    //----
    $.getJSON('Adoption.json', function(data) {
      // Get the necessary contract artifact file and instantiate it with truffle-contract
      var AdoptionArtifact = data;
      App.contracts.Adoption = TruffleContract(AdoptionArtifact);      // Set the provider for our contract
      App.contracts.Adoption.setProvider(App.web3Provider);      // Use our contract to retrieve and mark the adopted pets
      return App.markAdopted();
    });
    //----    return App.bindEvents();
  },  bindEvents: function() {
    $(document).on('click', '.btn-adopt', App.handleAdopt);
  },  markAdopted: function(adopters, account) {
    //----
    var adoptionInstance;
    App.contracts.Adoption.deployed().then(function(instance) {
      adoptionInstance = instance;      return adoptionInstance.getAdopters.call();
    }).then(function(adopters) {
      for (i = 0; i < adopters.length; i++) {
        if (adopters[i] !== '0x0000000000000000000000000000000000000000') {
          $('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true);
        }
      }
    }).catch(function(err) {
      console.log(err.message);
    });
    //----
  },  handleAdopt: function(event) {
    event.preventDefault();    var petId = parseInt($(event.target).data('id'));    //----
    var adoptionInstance;    web3.eth.getAccounts(function(error, accounts) {
      if (error) {
        console.log(error);
      }      var account = accounts[0];      App.contracts.Adoption.deployed().then(function(instance) {
        adoptionInstance = instance;        // Execute adopt as a transaction by sending account
        return adoptionInstance.adopt(petId, {from: account});
      }).then(function(result) {
        return App.markAdopted();
      }).catch(function(err) {
        console.log(err.message);
      });
    });
    //---
  }
};$(function() {
  $(window).load(function() {
    App.init();
  });
});
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 11d ago
Copy link
Outline
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