Web-based NFT Wallet using Zilliqa Js API and ZilPay | Part-1

In this series of articles, we will build a web-based NFT wallet for the Zilliqa blockchain that will allow us to view, mint, transfer, create and deploy NFTs. Our wallet will look something like this and you can try it out here.

The series will be divided into multiple parts each covering important development aspects of the Zilliqa blockchain. We will incrementally build our app by adding more and more functionalities in each part. All our code will be available here on Github. The list of articles in the series are as follows:

• Part-1: Getting Started and deploying an NFT contract using Savant IDE.
• Part-2: Exploring Zilliqa JS using the ZilPay wallet.
• Part-3: Build an NFT Gallery using Zilliqa-Js.
• Part-4: Complete the portal UI and build an interface to mint, transfer NFTs.
• Part-5: UI to create and deploy new NFT contracts.

Before starting with the article series, please go through the following pre-requisites thoroughly.

Pre-Requisites

The series is mainly targeted towards the audience with beginner to intermediate levels of skill in Zilliqa development and needs to have some familiarity with blockchains and smart contracts.

For the web part, I’ll try to keep it as simple as possible and we will only work with plain HTML, CSS, and Javascript.

Some knowledge of the Scilla language will be good but not necessary as we won’t get into the Scilla code. You can check out this amazing YouTube course on Zilliqa and Scilla Programming if you are looking to learn Scilla programming.

Zilliqans, now that you are familiar with what we are going to build and all the prerequisites required, let’s get started with the Part 1 of our series 🙌

Part 1 — Getting Started & Deploying an NFT Contracts.

I have divided this part into the following three different sections:

• Getting familiar with Savant IDE
• Deploying StarNFTz contract
• Minting StarZ 😁

Before jumping into the first section, let's look at some system requirements needed in this part of the series.

System requirements for this part

For this part, you just need to have a ZilPay wallet extension installed in ZilPay supported browsers like Chrome, Brave, and Firefox. Check this guide on installing and using the ZilPay wallet.

1.1 Getting familiar with Savant IDE

Savant IDE is an online IDE tool used to code, test, and deploy Scilla smart contracts. In this section, we will mostly explore different parts of the Savant IDE tool.

Let’s first go to the Savant IDE website by following this link 👉 https://ide.zilliqa.com/ . After opening the IDE, you will see an interface as shown below. The IDE has different sections as highlighted using the boxes. Let’s see each one of these sections in detail:

Savant IDE and its Components

• 1 — This section lists all the Scilla contract files. The IDE provides some sample contracts for us to explore, and we can see some Scilla contracts like HelloWorld, BookStore, etc listed here.
• 2 — This section has network and wallet-related details like the address, account balance, and network name.
• 3 — This section is where you’ll edit your Scilla code. Don’t worry, we won’t get into any Scilla code😁 and will mostly use tools provided by IDE to interact with the blockchain.
• 4 — This section has tools like CHECK to check the syntax code for errors and warnings, DEPLOY to deploy our contract and SAVE to save the edited code.
• 5 — This section shows all the errors and warnings from the checker tool.
• 6 — This section has a list of all the deployed contracts.

There are few more IDE sections which we will see later in this part while deploying our contract and minting some NFTs.

Let’s now move onto the next section where we will learn to create and deploy new contracts. Before that, make sure you have imported the ZilPay wallet into IDE, connected it to the test network, and have some testnet ZIL in it. If you haven’t done so, check this YouTube video by our expert that explains how to set this thing up.

1.2 Deploying StarNFTz contract

We will be creating and deploying a new NFT smart contract in this section. We will refer to the NonFungible.scilla sample NFT contract and use its code to create our contract file without getting into Scilla code 😁.

Create a new file called StarNFTz.scilla in the FILES section of IDE by clicking the new file logo and copy the code from NonFungible.scilla sample contract into our StarNFTz.scilla contract file. Note, for learning purposes copy-paste is fine but while working on a real-world project make sure to refer the updated standard NFT contract code here.

Now, our StarNFTz.scilla contract file is ready to be deployed but before that make sure to CHECK the code first for any error or warnings. If everything's ok with the code, click theDEPLOY button to deploy our contract and the following interface highlighted by the box will appear.

Savant IDE Contract Deploy Interface

Here you need to fill the following fields also called Contract Inits:

• contract_owner — This will be the address of the owner of the StarNFTz contract. Copy and put your address shown in your IDE.
• name — This is the name of our smart contract StarNFTz
• symbol — This will be our token symbol, say STAR in our case.

Now after submitting all these details, click on Deploy Contract button and you will see a ZilPay popup asking you to confirm the deploy transaction.

Confirm Transaction To Deploy

Hit that Confirm button after which our transaction will be sent to the Zilliqa blockchain and wait for the transaction to be added to the blockchain. After the successful deployment of the NFT contract, you will see a box like this showing the details.

Successful Contract Deployment Receipt

As you can see, we received a receipt for a successful transaction and a Contract Address 0x031f45f25df417a3d145dbc5d01e20153ac505ef for the newly deployed contract. Also in the contracts section, we can see our newly deployed contract is listed. You can check the above-deployed contract on ViewBlock explorer by clicking here or by going on this link 👉 https://viewblock.io/zilliqa?network=testnet and searching for this new contract address.

Congratulations🎉 Zilliqans we have successfully deployed our StarNFTz contract 😃, now its time to mint some NFTs 🙌🏻

1.3 Minting StarZ 😁

So far we just have an NFT contract deployed on the testnet. Also, we don’t have any fancy interface to interact with our contract but will be building one in the latter part of this series.

For time being, we will use the contract interface provided by IDE to interact and mint some NFTs. Also, we will use ViewBlock explorer to see all the results.

To open up the contract interface, just click on our StarNFTz contract in the CONTRACTS section. An interface like the following would open up.

Savant IDE’s Interface To Interact With Contract

As we can see, the interface has 3 major sections;
Transitions Contract State and Contract Init

Transitions — This section displays all the transitions that the contract has. Transitions are like a piece of callable code that does some operations on the Zilliqa blockchain that may or may not be changing the contract state. We will use Mint transition highlighted in green to mint a new star NFT.

Contract State — This section displays all the state variables of the contract. Think of state variables as data or information stored on the Zilliqa blockchain. State variables are mutable i.e they can be modified.

Contract Init — This section also stores data or information but is of immutable type i.e it cannot be modified. It contains all the details like owner, name, address, block number, etc. Few of these are explicitly created by blockchain and some are defined by developers while deploying the contracts.

Now, we are familiar with the contract interface. Let’s mint our first NFT by clicking on Mint button in the transitions section which will show us the Transaction parameters section as highlighted below:

Transaction Parameters Interface For Mint Transition

It has input fields like Amount, Gas Price, and Gas Limit which we will not get into, and leave it as default. Let’s see to and token_uri fields in detail

• to (ByStr20) — This field is of the type ByStr20 which is an account address type in Zilliqa. The to field is the address to which the NFT will be minted for or the receiver's address. The address has to be of type base16 which looks something like this 👉 0x546……904
• token_uri (Sting) — This field is of type String, it will be the locations of the NFT asset in our case star pic associated with our NFT.

(Note: Zilliqa has two ways of representing the same address, base16 type which looks like 0x123…ab89 and bech32 type which looks like zil123..ab23)

Here I will mint an NFT for the address 0x54962c592c329A6b58952315b4D67cD66eC39904 which is the same as my owner's address. It could be any address, you can try minting one for some account in your wallet or may send one to me at the above address 😀. For token_uri I have provided this pic from StarPictures folder in GitHub Repo which we will be using throughout this series.

Now, let’s hit that Call transition button, then confirm the transaction on the ZilPay pop-up and wait for it to confirm on the blockchain. Once done, it will show the following response with a receipt for the transaction which shows that our NFT minting transaction was successful.

Mint Transaction Receipt

So far we don’t have any fancy UI gallery to see NFTs so let’s head to ViewBlock and check the status of both our StarNFTz contract and the receiver's address.

Inspecting for the receiver’s address, we can see in the TOKENS section TokenId #1 of STAR NFT is minted and is currently owned by address 0x54962c592c329A6b58952315b4D67cD66eC39904 or zil12jtzckfvx2dxkky4yv2mf4nu6ehv8xgyf058yv.

Receiver’s Address Page On ViewBlock Explorer

Inspecting the StarNFTz contract, we can see that there is a new transaction that has minted a STAR [TokenID #1], also the Total Supply is now increased to 1.

StarNFTz Contract Page On ViewBlock Explorer

You can go into the STATE section and inspect it further, and you can play more with mint transition and get better insights on how things are working.

That was it for Part1 of this series, hope you all liked it. In the next part, we will explore some important aspects of the Zilliqa Js library and learn how to use it to interact with the wallet and the Zilliqa blockchain. Till then, stay tuned and stay safe 😃

If you have any feedback, suggestions, or inputs, feel free to write me on Twitter @NakamotoVikram