How to Build a Tezos dApp?

Step 1: Set Up the Environment

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:

$ 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

• 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

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

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/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:

storage

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.