Here for the API?Start building with us today

Learn about DeCommas API
Tutorial: Building Activity Feed Using DeCommas Mission Control API
API
September 07, 2023

Tutorial: Building Activity Feed Using DeCommas Mission Control API

The DeCommas Mission Control API enables quick and easy querying of blockchain data. We’ve already explored its applications in querying NFT data and building a Portfolio Tracker. In order to develop an Activity Feed, DeCommas API offers a range of endpoints tailored for developers, mainly focused on Activity Feed functionalities. These endpoints include Transactions, Transaction Details, Transaction NFT Transfers, ERC-20 Transfers, and NFT Transfers.

DeCommas has used this very API to create the Activity Feed within the Portfolio Tracker feature. You can find it within the application. With the help of this tutorial, you’ll be well-equipped to build a similar feature yourself. All that’s required is DeCommas’ Mission Control API, your preferred coding environment, and some dedicated time.

Before we delve in, let’s first understand the meaning of an Activity Feed.

What is an Activity Feed?

The record of all the transactions made on a block chain address is called an Activity Feed. It also includes token transfers, NFTs purchases and interactions with some smart contracts. Activity feeds can also be used to keep track of any address history, to identify any kind of patterns or to investigate any suspicious activity.

One of the most popular block chain explorers is Etherscan which allows its users to view the activity feed for any Ethereum address. The benefit of Etherscan is that its activity feed includes the data of date and time of all transactions, the no. of tokens transferred and the address of the recipient.

Etherscan: Vitalik’s wallet

DeCommas also provides its users with an activity feed which includes the record of transactions history like deposits, withdrawals and all kinds of trades made on the user’s account.

DeCommas: Vitalik’s wallet

The most important thing for a Web3 user is transparency and accountability which is provided by activity feed through monitoring wallets, tokens, and assets of that user to avoid any kind of fraud. It helps in identifying suspicious activity.

Activity feeds are used for multiple reasons, just to name a few:

  • To stop unauthorized transactions by keeping track of the user’s wallet.
  • To identify patterns of success or failure by viewing the user’s trading history.
  • To find potential risks by tracking the user’s performance of investments.
  • To avoid vulnerabilities by tracking user’s smart contracts.

So, no doubt Activity Feeds are a useful tool for Web3 users who want to keep themselves updated with their wallets, tokens, and assets activity to avoid any kind of spam or fraud.

Tutorial: Building an Activity Feed using Mission Control API

In today’s tutorial, we’ll learn how to use the DeCommas Mission Control API to create an Activity Feed feature.

Here’s what we’ll cover:

  • How to get your Mission Control API key.

  • Setting up the Mission Control API in your system.

  • Teach you how an API calls work, and explain the response.

  • Building main parts of the Portfolio Tracker:

    • Showing transactions for specific addresses across all networks.
    • Explaining extended transactions using network name and hash.
    • Displaying NFT transfers sorted by transfer index.
    • Listing ERC-20 token transfers for an address.
    • Presenting NFT transfers for an address across networks, sorted by time.

Let’s start!

Get your personal DeCommas Mission Control API Key

For this tutorial you need DeCommas Mission Control API, which is free to use, cross-chain by default and achieves market-leading response-times of below 150ms.

Here are the three simple steps to gain access of your API key:

  1. Head to DeCommas website where you’ll have to click on “ Get Started ”.
  2. Then you’ll be directed to the sign in option. Enter your email.

  1. Check your inbox where you will receive a link that will redirect you to the Dashboard of DeCommas website which will contain your API key.

Set up the Mission Control API in your environment with DeCommas SDK

DeCommas Mission control API is known for its user-friendly experience. By following this tutorial, you can conveniently set-up an API in your environment.

  1. First, you’ll need to install the DeCommas SDK by the following command.
npm install @decommas/sdk
  1. Then, you’ll need to create a new file. You can name it index.js and add the following code:
const { Decommas } = require(‘@decommas/sdk’);
// You can pass your API key to constructor. For security purposes we recommend store API key as environment variable
const decommas = new Decommas("YOUR_API_KEY");
const getTransactions = async () => {
  // Get the transaction history for the address 0x1234567890abcdef
  const transactions = await decommas.address.getTransactions('0x1234567890abcdef');
  // Print the transaction history
  console.log(transactions);
};
getTransactions();

In this code, we’ll first import the DeCommas SDK. Then, we’ll create a new Mission Control Class with API key in the next line. Secondly, we’ll get the transaction history for the address 0x1234567890abcdef. Lastly, we’ll enter the command to print the transaction history to the console.

  1. To run our code, we’ll have to enter the following command:
node index.js

DeCommas SDK can also be used to get info about other blockchain events for instance, token and NFT transfers etc.

Building fundamental Activity Feed features

In today’s tutorial, we’ll learn how to build an actual activity feed by using DeCommas Mission Control API but before we start you need to have an API key, Node.js and DeCommas SDK installed. Here are the three simple steps to build an activity feed:

  1. First, create a new directory, initialize a new node, and name it
Node.js for your project.
  1. Then, you’ll need to install DeCommas SDK.
  2. Lastly, create a new file, name it index.js and add this code:
const { Decommas } = require('@decommas/sdk');
const decommas = new Decommas("YOUR_API_KEY");
const getActivityFeed = async (address) => {
  try {
    // get ERC20 transfers
    const transfersERC20 = await decommas.address.getErc20Transfers({ address });
    // get NFTs transfers
    const transfersNFT = await decommas.address.getNftTransfers({ address });
    // merge all actions into single array
    let activityFeed = […transfersERC20.result, …transfersNFT.result];
    //sort feed by timestamp:
    activityFeed = activityFeed.sort((a, b) => {
      return a.block_timestamp - b.block_timestamp;
    });
console.log(activityFeed);
    return activityFeed;
  } catch(e) {
    console.log(e);
  }
};
getActivityFeed("YOUR_ADDRESS");

This code bit is an essential for building Activity Feed feature enabling such functions as:

  • Showing transactions for specific addresses across all networks.
  • Explaining extended transactions using network name and hash.
  • Displaying NFT transfers sorted by transfer index

As it was set up, we can dive deeper into endpoints which make these Activity Feed features work.

➢ Transaction NFT Transfers: This time we’re going to focus on more specific features, such as Transaction NFT transfers. This endpoint retrieves all Transaction NFT transfers and is referred to as ‘Transaction NFT Transfers.’ Thanks to this feature, users can sort these transfers by transfer index in ascending order. This endpoint also uses the network name and transaction hash.

Here is an example code of Transaction NFT Transfers to get info of a NFT transfer in a transaction.

const transfersNFT = await decommas.address.getNftTransfers({ address });

To represent each NFT Transfer, the variable of Transaction NFT Transfer has an array of objects. Each object has following properties:

▪ `id`

▪ `network`

▪ `transactionHash`

▪ `tokenId`

▪ `from`

▪ `to`

▪ `value`

▪ `token`

➢ ERC-20 Transfers: Another example of a specific endpoint is ERC-20 Transfers, which returns a list of transfers of ERC-20 tokens for an address. It allows users to check ERC-20 transfers across all networks and sort them with respect to time in descending order.

Here is an example code of ERC-20 Transfers to get info about the ERC-20 tokens transfer in a transaction:

const transfersERC20 = await decommas.address.getErc20Transfers({ address });

To represent an ERC-20 token transfer, the variable of ERC-20 transfer has an array of objects. Each object then has following properties:

▪ `id`

▪ `network`

▪ `transactionHash`

▪ `token`

▪ `from`

▪ `to`

▪ `value`

Wrapping up — Your first steps to building your web3 Activity Feed

We’ve provided a comprehensive overview of the DeCommas API for building the Activity Feed feature. Now, you can get all the essential information about this feature type. If you want to create more web3 features like this, visit our docs. For further details about the JavaScript SDK, please visit its GitHub repo. To develop Portfolio Tracker features, take a look at this tutorial. To explore a tutorial about NFT querying, check this one.

Did you enjoy learning more about web3 development and DeCommas’ Mission Control API? Keep an eye out for more right here on our Mediumplatform.