W
W
Wethio
Search…
Dapp development on Wethio Blockchain
Here you will learn about the steps to build a Dapp on Wethio Blockchain.
You will learn how to:
  1. 1.
    Set up Truffle
  2. 2.
    Create a Truffle project
  3. 3.
    Create a ZYN wallet
  4. 4.
    Request free coins using Wethio faucet
  5. 5.
    Write a smart contract
  6. 6.
    Compile and migrate the smart contract to Wethio
  7. 7.
    Connect to Metamask to Wethio Testnet
  8. 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. 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. 2.
    From Settings, select Backup wallet and Continue
  3. 3.
    Note down the 12-word recovery phrase
  4. 4.
    You can also create a new Zyn wallet with MetaMask, MyEtherWallet or TrustWallet
  5. 5.
    Enter a password and create a new wallet
  6. 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. 1.
    Create a new file Adoption.sol in the contracts/ directory
  2. 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. 1.
    Open migrations/ directory
  2. 2.
    Create a new file named 2_deploy_contracts.js
  3. 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. 1.
    Install Tuffle’s HDWalletProvider - an individual npm package to find and sign transactions for addresses
  2. 2.
    Open truffle.js file and edit the migration settings
  3. 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. 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. 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
Last modified 1yr ago