Build matrix like Steem Stream with SteemJs

Gokul N K

Posted on April 3, 2018 - 11:56 am

This is going to be the first tutorial in the tutorial series I will be starting. I am working on a couple of Steem projects and I will share my learnings from the project as Tutorial Series. This tutorial intends to be the "Hello World" program of coding on Steem Blockchain. In this tutorial we will create a simple activity stream which shows the latest activity on the blockchain. To make things a little interesting I will format it in the Matrix style. You will know what I mean once you look at the demo. If you just want to take sneak peak at what we will be achieving before starting the tutorial take a look at https://nkgokul.github.io/steem-tutorials/SteemStream.html

What will you learn?

In this tutorial you will learn

How to use SteemJS
How to use steem.api.streamTransaction function to check for transactions from the latest blocks.
Create a basic HTML that will display the steem stream in a matrix like fashion.

Requirements

These are good to have requirements. Even if you don't know these you can still read the tutorial and make sense out of it.

Basics of HTML
Basics of Javascript

Difficulty

Basic. You can take a look at the code even if you are not from a development background. I will be happy to answer any queries you have in the comments section.

Create a HTML skeleton

<body>
  <div id="gokul-details">
    <h3>This example was created by <a href="https://www.steemit.com/@gokulnk" target="_blank">@gokulnk</a></h3>
  </div>
  <div id="steem-data-wrapper">
    <h2>Please wait while fetching the data from Steem Blockchian.</h2>
  </div>
</body>

Within the body tag create a div which we will use to populate the contents of our data stream from Steem blockchain.

Add relevant javascript files

In your head tag add the following scripts

  <script src="https://cdn.steemjs.com/lib/latest/steem.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

The first script is the minified version of SteemJS library which will help us interact with the steem blockchain direction from the javascript/browser.

The second script is the jQuery library file which simplifies DOM manipulations and saves time in performing the frequently used actions in javascript. We will use these two files in all the browser based tutorials going forward.

Understanding `steem.api.streamTransactions` function

The takeaway from this tutorial will be how to use steem.api.streamTransactions function

  console.log('hello, is this working')
  var counter = 1;
  const BASEURL = 'https://steemit.com/'
  const ACCOUNT_NAME = 'gokulnk'
  steem.api.setOptions({ url: 'https://api.steemit.com' });
  steem.api.streamTransactions('head', function(err, result) {
    let txType = result.operations[0][0]
    let txData = result.operations[0][1]
    jQuery('#steem-data-wrapper').prepend('<div class="stream-activity' + counter + '">' + counter++ + ' ' + getMessagefromTransaction(txType, txData) + '</div>');
  });

In this code we are doing a couple of things.

setup some variables like counter and BASEURL variables which we will be using erstwhile.
steem.api.setOptions({ url: 'https://api.steemit.com' }); sets the url of the endpoint to https://api.steemit.com. Recently there were some changes made to the endpoints and a couple of witness servers were not working. In case you are getting any errors google for other endpoints and update them accordingly.
Minitor the blockchain with steem.api.streamTransactions function, decorate/process them using the function getMessagefromTransaction(txType, txData)
Using jQuery prepend the output to the div we created earlier in HTML with id "steem-data-wrapper". We will be using jQuery for prepending this value.

The processing function

The processing function uses a switch case to identify the different types of transactions and returns a relevant activity message.

  function getMessagefromTransaction(txType, txData) {
    //console.log(txType, txData) ;
    //console.log(txType, JSON.stringify(txData)) ;
    var custom_json;
    switch (txType) {
      case 'vote':
        return steemAuthorLink(txData.voter) + ' upvoted ' + steemAuthorLink(txData.author) + "'s post " + getLink(txData.title, steemBlogFullurl(txData.author, txData.permlink));
        // statements_1
        break;
      case 'comment':
         if (txData.parent_author == ''){
           return steemAuthorLink(txData.author) + ' created a post ' + getLink(txData.title, steemBlogFullurl(txData.author, txData.permlink));
         }else {
            return steemAuthorLink(txData.author) + ' posted a comment' + ' on '+ getLink(txData.permlink, steemBlogFullurl(txData.author, txData.permlink));
         }
        break;
      case 'transfer':
        return steemAuthorLink(txData.from) + ' transferred ' + txData.amount + ' to '+ steemAuthorLink(txData.to) + ' with the memo "' + txData.memo + '"';
        break;
      case 'claim_reward_balance':
        return steemAuthorLink(txData.account) + ' claimed his remaining rewards balance of ' + txData.reward_steem + ", "+  txData.reward_sbd + " and " + txData.reward_vests;
        console.log(txType, txData) ;
      break;
      case 'custom_json':
          if (txData.id == 'follow') {
            custom_json = JSON.parse(txData.json);
            return steemAuthorLink(custom_json[1].follower) + ' followed ' + steemAuthorLink(custom_json[1].following);
          }
      default:
        return txType + ' ' + JSON.stringify(txData).substring(0,300) + ((txData.length > 300) ? "....." : "");
        break;
    }
  }

Following Helper functions are used to generate links to the authors and blogs.

  function steemBlogFullurl(author, permlink) {
      return BASEURL + '@' + author + '/' + permlink;
  }
  function steemBlogFullurl(author, permlink) {
      return BASEURL + '@' + author + '/' + permlink;
  }
  function steemAuthorFullurl(author) {
      return BASEURL + '@' + author;
  }
  function steemAuthorLink(author) {
    return getLink('@' + author, steemAuthorFullurl(author));
  }
  function getLink(linkText, targetLink) {
    if (typeof linkText == "undefined" || linkText == ''){
      linkText = targetLink;
    }else if (typeof targetLink === "undefined") {
      targetLink = linkText;
    }
    return `<a href = ${targetLink} target="_blank">${linkText}</a>`;
  }