In this section, we prepare the TypeScript for connecting the frontend with the Scilla contract. As discussed, we use ZilPay to access the Zilliqa JS utilities, which in turn allows us to interface with the deployed contract.
We create a bunch of helper functions to facilitate the contract connection. We will define them in the
unstated-next to create a Context Provider for the application. We use this to make some objects available across all the components of the application. We will see how this is used in the coming sections.
This function returns an object with the parameters required for calling transitions.
amountValue argument can be used when sending messages with a non-zero amount.
The values are converted to the appropriate units using
This function fetches the wallet address of the active ZilPay user. It gets the
role of the user from the contract state.
This function fetches the current mini epoch suing ZilPay.
This function takes the multiple Map objects in the contract state and returns a handy user object.
It checks if the current ZilPay user's wallet address matches that of the host of the listing.
It also checks the rented status of the listing. Prices and rent are converted from
Qa. Amenities are converted to
This function creates a toast using
zilPay.wallet to subscribe to transactions.
It updates toast with the status of the transaction and shows a message as per the Messages Codes we defined earlier.
Note that in this function, we use another helper function,
decodeMessage, to get a human-readable message from the message code. This function is quite basic and hence not included here. You can take a look at
/src/functions/decodeMessage.ts. It also includes a
decodeZilPayError function that we will use in the coming sections.
The following functions are created at
/src/functions/ for calling their respective transitions.