[Framework Tutorial 5] - Transfer assets

[Framework Tutorial 5] - Transfer assets

The goal of this tutorial series is to showcase how the 0xcert Framework can be used with the Ethereum blockchain for managing non-fungible tokens. This episode follows the previous tutorial and assumes you have Ethereum Ropsten node up and running.

In this tutorial series we will:

  • Connect Ethereum with the 0xcert Framework
  • Use the 0xcert Framework for back-end development
  • Build a simple front-end to test the API

At the end of the tutorial series, you will be able to deploy, create, transfer assets on the Ethereum network.

To achieve this, we will use the following technologies:

  • Ethereum Ropsten testnet
  • TypeScript
  • Node.js
  • Express
  • 0xcert Framework
  • jQuery

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

All the code used for the examples can be found on GitHub.

Build your own dapp

Transfer assets

Transferring an asset is really simple. All you need to know is what asset do 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 that are available here, but this is basically all we need.

So let's include this into our code the same way we did in the previous 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 code will be the simplest yet:

<input id="address" type="text" placeholder="Asset ledger Id" /><br/>
<input id="assetId" type="text" placeholder="Id" /><br/>
<input id="recipientAddress" type="text" placeholder="Recipient address" /><br/><br/>
<button id="transfer">Transfer</button>
<p id="transferConsole"></p>


The jQuery call is very straightforward, as well:

$.ajax({
  contentType: 'application/json'
});
$(function(){
  $('#transfer').click(function(){
    $.post(
      "http://localhost:3000/transfer",
      {
        assetLedgerId: $('#address').val(),
        receiverId: $('#recipientAddress').val(),
        id: $('#assetId').val(),
      },
      function (response) {
        $('#transferConsole').html('<a href="https://ropsten.etherscan.io/tx/' + response + '" target="_blank">Check transaction on etherscan</a>.');
      }
    );
  });
});

Test data:
Asset ledger ID (contract address): copy from step 3
ID: 1
Recipient address: Any Ethereum address (it can be your own)

Let's test it out the same way we did in the previous examples. If everything went well, you should see the transaction on Etherscan.

Congrats, you're done for now!

If you followed the tutorial, you hopefully learned how to set up an Express server with TypeScript and how to manage assets with the 0xcert Framework. In order to keep the tutorial comprehensive, we only went through core asset management functionalities that 0xcert Framework provides.

To learn more, please visit our GitHub and check the documentation. The whole code example is available on GitHub here.

Multiple parts of the 0xcert Framework tutorial series are coming up to showcase more of its functionalities.

Build your own dapp

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.

Framework tutorial #1: Run and prepare Geth node for back-end integration
Framework tutorial #2: Set up Express server with Typescript for dapp backend
Framework tutorial #3: Deploy asset ledger
Framework tutorial #4: Create new assets

Newsletter