How to Build a Tezos dApp?

decentralized finance

Ever since blockchain technology has come into the picture, more and more industries have been looking for ways to implement it seamlessly. Hence, it has led to the growth of many platforms with new ways to enable startups and enterprises to use technology easily.

Founded by Arthur Breitman, Tezos is an open-source blockchain platform for applications and assets. By providing safety and code correctness, Tezos deals with some of the significant barriers of seamless blockchain technology adoption, such as:

  • open participation
  • smart contract security
  • long-term upgradability

Tezos is a self-amending cryptographic ledger, that makes it different from other dApps and smart contracts platforms such as NEO, Ethereum, etc. It follows the Delegated Proof of Stake (DPoS) consensus protocol to validate transactions. Hence, the stakeholders can govern the protocol.

Building a Tezos dApp can be tricky, as both front-end and back-end functions need to be attended to closely. Here, we will show you steps to create a Tezos dApp with the help of an example – a point of sales system for a restaurant called “The LH Diner.” Some of the technologies and tools we will use in the process are:

  1. React JS for a front-end framework
  2. Truffle to compile and deploy smart contracts
  3. Tezos Starter Kit to run sandboxed node
  4. TezBridge to connect your wallet with the dApp and sign transactions
  5. Taquito to interact with the blockchain and smart contracts

 

The steps are:

Step 1: Set Up the Environment

Step 2: Compile and Deploy the Contract

Step 3: Set Up to Build the Front End

Step 4: Add TezBridge

Step 5: Set Up Taquito

Step 6: Add Your Wallet to TezBridge

Step 7: Initialize the Wallet

Step 8: Send a Transaction

Step 9: Withdraw the Contract Balance

Let’s start discussing these steps in detail.

Step 1: Set Up the Environment

First, install Docker and Node.js on your system. Then start the Docker Desktop.

Now, install Truffle Tezos globally. You may open a new terminal window and type:

$ npm i -g truffle@tezos

You can prepare everything you will need in a Github repo and type in the terminal window:

$ git clone https://marksmith//tezos-react-tutorial
$ cd tezos-react-tutorial
$ npm install

Now, install the React dependencies:

Y$ cd client
$ npm install

The set up is mostly done, so you can start the sandboxed node:

$ cd ..
$ npm run start-sandbox — carthage

Step 2: Compile and Deploy the Contract

You can create a smart contract using Ligo, as shown here (https://www.leewayhertz.com/tezossmart-contracts/), or you can also use an existing contract. You can compile and deploy the contract with Truffle, as its “migration” features make the process very easy. The deployer file will be formed, which will:

  • collect the account’s information which will be used to deploy the contract. For example:

    const( alex ) = require(“../scripts/accounts/sandbox”)

  • set the initial storage. For example:

    const initial_storage = {
    menu: {
    coffee: 2500000,
    sandwich: 2000000,
    americano: 1600000
    },
    customers: { [alex.pkh] : 0 },
    total: 0
    owner: alex.pkh
    }

  • export the deployer function and initial storage. For example:

    artifacts.require(“Point0fSale”)

  • fetch the contract to deploy. For example:

    module.exports = async deployer => {
    await deployer.deploy(point0fsale, initial_storage);
    };
    module.exports.initial_storage = initial_storage;

Now you can compile the contract by using the following:

$ npm run compile

You will find the Michelson compiled from Ligo contract in the “build” folder.

Now, you may deploy the contract to the sandboxed node

$ npm run migrate

Sometimes, values like operation hash or contract address are a little different. It is normal, and it gives you essential information, like gas used or total cost, which you can use later.

Step 3: Set Up to Build the Front End

The application will be very simple. It will contain a “Menu” component, which will display the different items we mentioned in our storage with other interactions. There will also be a wallet component to display login buttons and the user’s balance. You can create Bulma CSS files in your Github to quickly create a friendly user interface.

It would be best if you imported your required dependencies along with the following two functions from the Taquito package to make the interface user-friendly:

  • shortenAddress

    It will shorten the address. For example, it will
    shorten tz1VSUr8wwNhLAzempoch5d6hLRiTh8Cjcjb to tz1VSU…8Cjcjb.

  • mutezToTez

    It will change the microtez values to tez.

Step 4: Add TezBridge

TezBridge is a tool that enables you to use any Tezos address to sign or approve transactions. In our example, you will sign a transaction when you buy a drink or food item. The TezBridge plugin can help you with some useful functions that you can use to sign transactions and perform other vital actions.

You cannot import TezBridge like other dependencies, hence use the following:

<script src="https://www.tezbridge.com/plugin.js">

This will enable you to keep the tezbridge object in the window object so that you can access it at any time.

Step 5: Set Up Taquito

Taquito is a library that enables you to communicate with the contract and the Tezos blockchain. You should import two functions from two packages:

@taquito/taquito

The package with all functionalities you’ll use.

@taquito/tezbridge-signer

The package you need to use TezBridge as your signer.

You can type the following command in your console to install them:

$ npm install @taquito/taquito

$ npm install @taquito/tezbridge-signer

To use Taquito, you need to set up your provider. The RPC protocol, an API exposed by a Tezos node, enables you to communicate with the node. For example, you can use the following as your RPC:

http://localhost:8732

As you will use TezBridge as your signer, you also have to instantiate and pass it to the Taquito provider.

You can call the following function of the Tezos object to set it up and then use it:

setProvider

You have to create an “instance” of the contract, which is like a copy of the contract that you can use in JavaScript, and it will contain the entrypoints and storage of the contract and other information. Type the following:

const contract = await Tezos.contract.at(contractAddress);

The contract instance has a storage method that you can use to return the storage. You can easily handle storage with Taquito as the fields you declare in Ligo will be the storage object’s properties.

Step 6: Add Your Wallet to TezBridge

TTezBridge is easy to use and gives valuable data to the users and developers. You have to import your private key to set up an account. You can copy the “secret key (sk)” property from your sandbox folder and then click on “Import Key” on the TezBridge page before pasting the key there.:

You can type your name (for example, Alex) and select a simple password as it is only linked to your account for your development environment, and you might have to use it a number of times.

After that, select “Confirm” and you can use TezBridge.

Step 7: Initialize the Wallet

As per our example, “The LH Diner” dApp will have a button to initialize the wallet when the user clicks on it. When they connect their wallet, we will:

  • display their address on the button to show they’re connected.
  • get their balance so that they can check if they have enough money to purchase an item.
  • show them a button to withdraw the contract’s balance if the owner logs in.

The following object exposes the “request” method:

tezbridge

You can pass an object with the method property set to:

get_source

This step will enable users to select the wallet they wish to connect with the dApp and return the linked address. After users are connected, you can save their address to update the button.

With Taquito, you can use the following to get the user’s balance:

Tezos.tz.getBalance (userAddress)

You can also get the storage’s state with the contract instance by using the following:

Tstorage

To get the current user’s number of points, you can use

storage.customers.get(userAddress)

If the user’s address is missing and has an undefined value in JavaScript, you can set the number of points to 0 in your front-end dapp.

Step 8: Send a Transaction

The function to send a transaction to a Tezos contract will be located under the “Menu” component in the dApp. You must ensure that before sending the transaction, you have:

  • the right information and parameters
  • verified the transaction
  • waited for it to complete

The transaction starts with the following:

const op = await contractInstance
.methods
.buy(coffee)
.send({amount: price, mutez: true})

The contract instance will give you access to the “methods” which has the different entry points of the contract.

In the smart contract, the “buy” entry point requires the item’s name the user wants to buy, so you pass it as a parameter to the “buy” method.

To finish, you can call the following method:

send

You can pass an object to it with the following two properties:

amount

(the tezzies’ amount the user is paying)

mutez

(tells Taquito the value being passed in microtez)

This step will move the user to the Tezbridge’s screen, and they would have to approve or reject the transaction. After that, the “status” property would change to “applied,” which implies that the transaction has been successfully sent. The sandboxed node will then confirm the transaction and include it in a block.

 

Step 9: Withdraw the Contract Balance

Implementing the “withdraw” function is very similar to the “buy” function. However, to make it work, you have to pass an array, including another array with the string “unit.” It shall be the first element to the method representing your entry point:

withdraw([[“unit”]])

For the “send” method, there is no need to pass any parameter.

You have to wait for the transaction’s confirmation to be included in a block and update the state of the dApp.

Conclusion

To build a dApp is very tricky, and it must be done by experts or under expert supervision to ensure that everything has been done correctly and there are no loopholes.

Contact our Tezos blockchain experts to build a Tezos dApp for your business.

Author’s Bio

Akash Takyar
Akash Takyar
CEO LeewayHertz
Akash Takyar is the founder and CEO at LeewayHertz. With the experience of building over 100+ platforms for startups and enterprise allows Akash to rapidly architect and design solutions that are scalable and beautiful.
Akash's ability to build enterprise-grade technology solutions has attracted over 30 Fortune 500 companies, including Siemens, 3M, P&G and Hershey’s. Akash is an early adopter of new technology, a passionate technology enthusiast, and an investor in AI and IoT startups.
Start a conversation by filling the form
Once you let us know your requirement, our technical expert will schedule a call and discuss your idea in detail post sign of an NDA.

All information will be kept confidential.

 Send me the signed Non-Disclosure Agreement (NDA)

Insights