How to build a dapp on Tezos?

Published in

Predict

4 min readJul 26, 2021

With the emergence of blockchain technology, various industries have been striving to implement it in their working mechanisms. This wish to indulge in blockchain technologies has accelerated new enterprises and enables start-ups with a technological storm. Tezos was founded by Arthur Breitman and can be defined as an open-sourced platform for blockchain that supports assets and applications. Tezos is a platform that solves some of the obstacles faced while utilizing blockchain technology by ensuring the correctness of code and safety. The obstacles come when people try to openly engage in the blockchain processes, with the security of smart contracts; and the upgradeability on a long-term basis.

Tezos is a blockchain platform that is a self-amending and cryptographic system of the ledger. This self-amending attribute of Tezos makes it different from all the other platforms and dApps like Ethereum, Cardano, etc. The consensus protocol of Delegated Proof of Stake (DPoS) is followed by Tezos, which helps validate the transactions. Therefore, the protocol can be governed by the stakeholders.

The creation of Tezos dApp is quite a trick depending upon the attention it demands to examine the front-end and the back-end functions closely. Let us now learn about the steps involved in the creation of Tezos dApp.

Pre-requisites:

To run a sandboxed node, you will need a Tezos starter kit.
Truffle is required for the compilation and deployment of the smart contract.
Tezbridge for the connection of the wallet with the dApp and the sign transactions.
Front-end framework’s requirement of React JS.
Blockchain and smart contracts requirement of Taquito for interaction.

Let us now begin with the steps.

Step 1

Setting up an environment

You will start with installing Docker and Node.js on your system. Start Docker Desktop. After that, install the truffle Tezos globally. Open a new terminal window and start typing,

$ npm i -g truffle@tezos

Use a Github repo for preparing everything that you need and start typing in the new terminal window,

$ git clone https://marksmith//tezos-react-tutorial

$ cd tezos-react-tutorial

$ npm install

React dependencies installation,

Y$ cd client

$ npm install

Start sandboxed node,

$ cd..

$ npm run start-sandbox — Carthage

Step 2

Contract Deployment and compilation

Create a smart contract with the help of Ligo or with an existing contract. Then you can proceed with the compilation and deployment using truffle as it makes the process convenient following the migration features.

Step 3

Requirement of Setup to Build Front End

This application will contain a component named Menu, displaying items of storage. It also contains the wallet component, displaying the login buttons and the balance of the user. Create Bulma CSS files in Github to generate an amicable interface.

Step 4

Adding a TezBridge

TezBridge helps in the usage of any address of Tezos required for approval and signing the transactions. TezBridge can’t be imported as other dependencies; therefore, insert the below-mentioned code,

This code will help you to keep the TezBridge object in Window Object for easy access.

Step 5

Setting Up Taquito

Taquito can be defined as a library that will help you to connect with contract and Tezos blockchain. You will import two important functions as mentioned,

@taquito/taquito

@taquito/tezbridge-signer

Type the below-mentioned command in the console for their installation.

$ npm install @taquito/taquito

$ npm install @taquito/tezbridge-signer

Set up your provider to communicate with the node.

Step 6

Adding Wallet to TezBridge

TezBridge helps in giving important data to users and developers. For setting up an account, import the private key. Then copy the secret key SK property from the sandbox folder. Click on the Import Key before pasting the key. In the end, select confirm.

Step 7

Wallet Initialization

LH Diner dApp contains a button of initialization when you click on it. After connecting to the wallet, you will see your address on the button showing that you are connected. TezBridge exposes the method of request. With the help of the method property that is set to get_source, you can pass an object.

Step 8

Sending a transaction

The function of sending transactions is located under the Menu component in dApp. Make sure that you have done the below-mentioned things before sending transactions,

Parameters and correct information.
The transaction is verified.
Waiting for completion.

Start the transaction. Contract instance gives you access to methods. In a smart contract, pass the item’s name as a parameter to the buy method. You can finish by following send method. Pass the object with two properties, namely amount and mutez.

After this, you will move to TezBridge’s screen for their approval/rejection of the transaction. Then the changes will go from status property to applied, implying the successful sending of transaction. The transaction will then be confirmed by the sandbox node, including it in the block.

Step 9

Withdrawing Contract Balance

Start with a passing array, followed by the inclusion of another array with a string named Unit. It has to be the first element to method representing the entry point,

withdraw([[“unit”]])

Lastly, wait for the confirmation of the transaction as it has to be included in the block for updating the state of dApp.

Building a dApp is a technical game that demands skills and guidance. To better understand it, you can get in touch with the skilled developers of LeewayHertz, one of the renowned blockchain development companies.