[Framework Tutorial for Wanchain #5] — Transfer 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 #4 and assumes you have created new asset(s) on Wanchain with the 0xcert Framework.

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.

Transfer assets

Transferring an asset is quite simple. All you need is to know which asset you want to transfer (ID) and to whom you want to transfer it (address of the receiver). There are a few other options for transferring you can check here, but this is basically all we need. So let’s put this into code the same way we did in the other examples so that we get all the parameters as inputs:

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

The front-end will be the simplest yet:

<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/> 
<button id="submit">Transfer</button> 
<p id="console"> </p>

And the jQuery call, as well:

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

Try it with the following test data:

Asset ledger ID (contract address): Copy from step 6
ID: 1
Recipient address: Any Wanchain address (it can be your own)

Now, we can test it the same way we tested the other examples. If everything goes well, you should see the transaction on the block explorer.

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 learned about transferring your assets, we can move forward to atomic operations.

⬇️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 #4: Create new assets
Framework tutorial for Wanchain #6: Atomic operations in asset exchange on Wanchain

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