Web-based NFT Wallet using Zilliqa Js API and ZilPay | Part-5
In the previous part of the series, we built a very simple and cool NFT wallet with a gallery and some important features like load, mint, and transfer. In this part, we will add a feature to create and deploy new NFTs and will also add a button to show the list of some NFT contracts list for quick reference of users. So Zilliqans, let’s start with our final part 🙌🏻.
Part 5— UI to create and deploy new NFT contracts.
I will be dividing this part into the following two sections:
- Building create and deploy feature
- Adding NFT contract list
So let’s start with the first section 🙌🏻
5.1 Building create and deploy feature
Let's start by adding a button to our wallet that will be used to open up our create and deploy interface. Add the following HTML code in the toolbars’ div tag in index.html
<button onclick="showCndbox()">Create New NFT</button>The above code adds a button called Create New NFT in the toolbar and will show the interface for creating and deploying a new NFT contract after clicking on it. Now let’s also add the following HTML code to our index.html file to build this interface.
<!-- Create And Deploy New NFT Box -->
<div class="HVCenter" id="cndbox-container">
<div id="cndbox">
<table style="border:solid 1px;">
<tr>
<td><label>NFT Name</label></td>
<td><input type="text" id="cndnft_name" placeholder="DragonZil"></td>
</tr>
<tr>
<td><label>NFT Symbol</label></td>
<td><input type="text" id="cndnft_symbol" placeholder="DZT"></td>
</tr>
<tr>
<td colspan="2">
<center>
<button id="cndNFTBtn" onclick="DeployNFT()">Deploy</button>
<button id="cndboxCloseBtn" onclick="hideCndbox()">Close</button>
</center>
</td>
</tr>
</table>
</div>
</div>
<!-- Create And Deploy New NFT Box -->If you observe carefully, it is a similar interface as we build for mint and it also functions the same way. The only difference is the ids, functions, and input fields that it take i.e the new NFT name and its respective symbol. Now, let's add the following CSS styling to our interface.
#cndbox-container {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(10,10,10,0.6);
}#cndbox {
border:solid 1px;
color: wheat;
padding: 1%;
}
Let's now add some Javascript functions to interact with our create and deploy UI.
function showCndbox() {
document.querySelector("#cndbox-container").style.display = "flex";
}function hideCndbox() {
document.querySelector("#cndbox-container").style.display = "none";
}
The code again is very simple and familiar to us, it shows and hides our create and deploy interface. After adding this code, you should be able to test the show/hide of the interface and would look something like the following when clicked on Create New NFT button.
Let’s now add the following Javascript code to our script.js file that will be used to create and deploy our new NFT contract on the Zilliqa blockchain.
function DeployNFT(){//geting inputs
var NFTName = document.querySelector("#cndnft_name").value;
var NFTSymbol = document.querySelector("#cndnft_symbol").value;/* NFT contract Inits */
var NftContractInits = [{
vname: 'contract_owner',
type: 'ByStr20',
value: '',
},{
vname: 'name',
type: 'String',
value: '',
},{
vname: 'symbol',
type: 'String',
value: '',
},{
vname: '_scilla_version',
type: 'Uint32',
value: '0'
}];NftContractInits[0].value = window.zilPay.wallet.defaultAccount.base16;
NftContractInits[1].value = NFTName;
NftContractInits[2].value = NFTSymbol;
/* NFT contract Inits *//* NFT contract Code */
let NftContractCode = `
<Copy And Paste Code in NonFungible.scilla>
`;
/* NFT contract Code */const msgVersion = 1;
let currentNetwork = window.zilPay.wallet.net;
let ChainId;
if(currentNetwork == "mainnet"){
ChainId = 1;
}else if(currentNetwork == "testnet"){
ChainId = 333;
}else {
ChainID = prompt("You are not on testnet or mainnet. Please enter your chain ID:");
}
VERSION = window.zilPay.utils.bytes.pack(ChainId, msgVersion);
myGasPrice = window.zilPay.utils.units.toQa('2000', window.zilPay.utils.units.Units.Li);//Create new contract object
let NewContract = window.zilPay.contracts.new(NftContractCode,NftContractInits);//call deploy method on the new contract object along with the required arguments
NewContract.deploy(
{
version: VERSION,
gasPrice: myGasPrice,
gasLimit: window.zilPay.utils.Long.fromNumber(25000),
},
33, //attempts
1000, //interval
false, //toDS or shard
).then(function(resp){
console.log("NFT Contract Deploy Transaction Sent.")
console.log(resp);
alert("Transaction Id: 0x" + resp[0].TranID);
});
}
This function NFTDeploy() will be called on the Deploy button click. I will be explaining this function in two parts, where we will first see what is happening in the new and deploy method call i.e the latter part of the code. After that, we will look at the first half part where we define variables needed in the second half.
The new and deploy method helps us create a new contract object by initializing it and deploy it to blockchain respectively. The new method takes two arguments; contract code and some initialization data. The code in our case will be the NonFungible.scilla sample contract code and the inits will be an array of objects each representing information like owner, name, and symbol along with their types.
Once our contract is initialized locally, we deploy it by calling deploy method on this new contract object. The deploy method takes 4 arguments. The first argument will be transaction information like version, gas price, and gas limit. The second and third are no. of attempts to deploy and the interval between each try respectively, both these are optional and take the default value of 33 and 1000. The last argument is a boolean representing whether to send it to DS or a Shard.
Now let's see the first half of the code. We start by getting the input values from the interface, then we initialize our new contract init variables as an array of objects where each of these objects takes information like owner, name, and symbol we fetched before.
After that, we define our NFT contract code variable as a multiline string with the sample NonFungible.scilla contracts’ code in it. Next, we define a VERSION variable that need two things, a message version and a chain Id where the message version is set to 1 and the chain ID is set to the current network's chain id i.e for the mainnet it's 1 and for testnet is 333. The utils.bytes.pack method helps us build this variable that is compatible to be read in the deploy method.
That was a lot of details 😁, let’s now try it out by deploying a contract called SuperHeros with a symbol SUP. Open the create and deploy interface page, fill in these details and hit that deploy button. It will show us the following ZilPay popup asking for confirmation of deploy transaction.
After confirming the transaction, you get an alert displaying the transaction id as shown below which we can use to check the transaction details on the ViewBlock explorer.
Now our transaction is sent onto the Zilliqa blockchain, we can now check its status by going to explorer or in ZilPay wallet itself as shown below.
As we can see the circled address is our new NFT contract address here. Clicking on it will take us to the explorer page showing the SuperHeros NFT details as shown below:
Our contract is ready, now we can load it in our web wallet and mint some new SuperHeros NFT 😃.
Zilliqans, that was it for our NFT wallet series, we have successfully built our web-based NFT wallet. Before closing, let me add a small part to display the list of pre-deployed contracts that will help users to quickly refer to the contract addresses while using the wallet.
5.2 Adding a Contract List
Let’s start by adding a button in the toolbar called Contract List and give it a function call to showCLbox() as shown below. Refer our GitHub repo as needed.
//add this in toolbar
<button onclick="showCLbox()">Contract List</button>Now, add the HTML code to display our list in your index.html
//add the following code in body
<!-- NFT contract list -->
<div class="HVCenter" id="clbox-container" style="display: none;">
<div id="clbox">
<table>
<tr><th>Testnet</th></tr>
<tr><td>StarNFTz - zil1qv05tuja7st68529m0zaq83qz5av2p00mwjmkx</td></tr>
<tr><td>MarvelCollectable - zil15qu3rqqsu6tpszp69c7eqzrps2pyccufds40uh</td></tr>
<tr><td><hr></td></tr>
<tr><th>Mainnet</th></tr>
<tr><td>DragonZil - zil1knvrhm9e2rqfdvqp50gu02a3pat34e6lst9d36</td></tr>
</table>
<button onclick="hideCLbox()">Close</button>
</div>
</div>
<!-- NFT contract list -->Add the following CSS code in a style tag
#clbox-container {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background-color: rgba(10,10,10,0.6);
}#clbox {
border:solid 1px;
background-color: black;
color: wheat;
padding: 1%;
Now add the following Javascript code in our script.js file
function showCLbox() {
document.querySelector("#clbox-container").style.display = "flex";
}function hideCLbox() {
document.querySelector("#clbox-container").style.display = "none";
}
After doing all this you should be able to see a list of pre-deployed contracts as shown below after clicking the Contract List button
That was it for our simple NFT contract list. It could be made more interesting and dynamic by maintaining a list of all deployed contracts and also adding click features to it so that users can directly load the NFT contract but we will stop here 😅.
Zilliqans, that was it for the last part of our NFT wallet series. I hereby conclude our web-based NFT wallet series 🙌🏻. I hope that you all liked it and had fun building our web-based NFT wallet 😃.
If you have any feedback, suggestions, or inputs feel free to write me on Twitter @NakamotoVikram
