[Framework Tutorial for Wanchain #4] — Create new assets

The goal of this Wanchain tutorial series is to show how the 0xcert Framework can be used with the Wanchain blockchain for building a dapp, as well as creating and managing non-fungible tokens.

⚠️ Prefer building on Ethereum? This tutorial should help.

Before we begin

This episode follows Tutorial #3 and assumes you have deployed an asset ledger on Wanchain.

In this tutorial series, you will learn:

1. How to set up a Wanchain test node (gwan)
2. How to create a Wanchain wallet and obtain test WAN tokens
3. How to set up Express server with TypeScript
4. How to connect Wanchain with the 0xcert Framework
5. How to use the 0xcert Framework for back-end
6. How to set up a simple front-end for testing

At the end of the tutorial, you will be able to deploy, create, transfer, and query for information about non-fungible tokens on the Wanchain network.

To achieve this, we are using the following technologies:

• Wanchain testnet
• TypeScript
• Node.js
• Express.js
• 0xcert Framework
• jQuery

It is assumed that you know and understand the basics of JavaScript, Node.js, jQuery, HTML, and usage of the terminal.

All the code used for examples can be found on GitHub with additional functions and explanations.

Issue new assets

Now that we have created an asset ledger, we can start creating new assets. If we look at the documentation for creating assets, we see that we need the ID of the asset ledger (the contract address we just copied in the previous step), and asset data which consists of a unique ID, an imprint (asset proof), and the address of the asset receiver. Just like before, we will create a POST call with all the data available as input parameters:

app.post('/mint', async (req, res) => {
 const ledger = AssetLedger.getInstance(provider, req.body.assetLedgerId); 
 const mutation = await ledger.createAsset({ 
  receiverId: req.body.receiverId, 
  id: req.body.id, 
  imprint: req.body.imprint 
 }); 
 res.send(mutation.id); 
});

To test if this works, we will create a simple HTML page to test it:

<input id="address" type="text" placeholder="Asset ledger ID" /><br/> 
<input id="id" type="text" placeholder="Id" /><br/> 
<input id="recipient" type="text" placeholder="Recipient address" /><br/> 
<input id="imprint" type="text" placeholder="Imprint" /><br/>
<button id="submit">Create</button> 
<p id="console"></p>

And to call the API:

$.ajax({ 
  contentType: 'application/json' 
}); 
$(function(){
 $('#submit').click(function(){
  $.post( 
   "http://localhost:3000/mint", 
   { 
     assetLedgerId: $('#address').val(), 
     receiverId: $('#recipient').val(), 
     id: $('#id').val(), 
     imprint: $('#imprint').val() 
   },
   function (response) {
     $('#console').html('<a href="http://testnet.wanscan.org/tx/' + response + '" target="_blank">Check transaction on block explorer</a>.'); 
   } 
  ); 
 }); 
});

Let’s reset our server and try if everything works. Let’s try it with the following test data:

Asset ledger ID (contract address): Copy from step 5
ID: 1
Recipient address: Let’s send the asset to ourselves so copy your address here
Imprint: 0000000000000000000000000000000000000000000000000000000000000000

Imprint represents the proof of our asset. For this example, we didn’t create a proof since we’re just using mock data everywhere. If you would like to know how to generate real proof, please read more here.

If we did everything well, we should see the transaction appear on the block explorer. Since we are now the owner of the asset with ID 1, we can transfer it to a new receiver.

If you have questions about the code or you experience trouble developing your dapp, you can ask our developers for help in our Gitter channel.

What comes next?

Now that we have created a new asset in our dapp on Wanchain, we can start managing and transferring our assets.

⬇️Check other tutorial episodes, too⬇️

Framework tutorial for Wanchain #1: Run and prepare Wanchain test node for back-end integration
Framework tutorial for Wanchain #2: Set up Express server with TypeScript for dapp back-end
Framework tutorial for Wanchain #3: Deploy asset ledger
Framework tutorial for Wanchain #5: Transfer assets
Framework tutorial for Wanchain #6: Atomic operations in asset exchange on Wanchain

Originally published at https://0xcert.org.