Here for the API?Start building with us today

Learn about DeCommas API
DeCommas
Launch app
DeCommas
DeCommas
Launch app
Tutorial: Building a web3 Portfolio Tracker using Mission Control API
API
August 17, 2023

Tutorial: Building a web3 Portfolio Tracker using Mission Control API

DeCommas Mission Control API allows for fast and straightforward querying of blockchain data, and contains a multitude of endpoints for developers to work with, such as ERC-20 Tokens, Protocol Positions, NFT Transfers or Transaction Details.

DeCommas itself has used exactly this API to build the Portfolio Trackerfeature you can find in the application, and with this tutorial you’ll make strides to build a similar feature yourself! All you need is DeCommas, free to use Mission Control API, your favorite coding environment and some time to focus.

Before we dive in, let’s take a look at what a Portfolio Tracker actually is.

What is a web3 Portfolio Tracker?

With the emergence of blockchain, cryptocurrencies and other digital assets, web3 enthusiasts are looking for a convenient way to monitor and manage their digital assets. Unlike traditional portfolio tracking tools, a web3 Portfolio Tracker is capable of tracking assets within the decentralized and blockchain-based landscape.

Assets in Portfolio Tracker

Protocols in Portfolio Tracker

One of the things one might want to analyze is their allocation of tokens and exposure to certain protocols at this moment, creating an overview of where their assets are and how they are performing.

Chart in Portfolio Tracker

Or, zooming out, users might simply want to learn more about how their combined portfolio is performing over time, spotting trends and getting a sense for the yield their portfolio is bringing them.

All in all, a Portfolio Manager is a must-have feature that any web3-enthusiast sooner or later will use.

Tutorial: Building a Portfolio Tracker using Mission Control API

In today’s tutorial we’ll be exploring how the DeCommas Mission Control API can be used to develop a Portfolio Tracker feature.

In this tutorial, we’ll:

  • Show you how to obtain your Mission Control API key

  • Set up Mission Control API in your environment

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

  • Create three fundamental Portfolio Tracker features:

    • Show current ERC20 balances for a wallet
    • Determine current value for ERC20 tokens
    • Create an overview of Transactions for a wallet

Let’s get started!

Get your personal 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.

Gaining access is simple:

  1. Head to https://build.decommas.io/
  2. Click “Get Started”
  3. Enter your email address
  4. Check your email and click the link to sing in
  5. You are now redirected to https://dashboard.decommas.io/, which contains your API keys

API keys

You will need your API keys, so go ahead and copy paste these to some place where they are easy to find for you, but securely stored. For this tutorial, our documentation will also come in handy, these can be found here: https://docs.decommas.io/

Setting up Mission Control API in your environment

Depending on your preferences, you can interact with the API either via a raw HTTPS request or in JavaScript using our SDK.

In case you go with the first route, the call would look like this:

https://datalayer.decommas.net/datalayer/api/v1/tokens/{address}?api-key={YOUR-API-KEY}

For those developing in a JavaScript environment, the process is different. As we know you’re all degen coding buffs, we’ll use this scenario for this tutorial. Bundled with DeCommas Mission Control API comes an easy-to-use SDK (or Software Development Kit), which is available here: https://github.com/DeCommas/decommas-sdk

We’ll be using the Quick Start guide to get Mission Control API initiated in your environment:

  1. Install the Mission Control API application in your Javascript environment
npm install @decommas/sdk
  1. After installing the app you can import and use the SDK:
import { Decommas } from '@decommas/sdk';

// Allows to use SDK in DEV-ONLY mode
const decommas = new Decommas();

const getVitalikERC20Balances = async () => {
  const address = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'; // any address

  const tokens = await decommas.address.getTokens({ address });
  console.log(tokens);
};

You are now all set, and are ready to call the API!

Calling the API and understanding it’s response

Now that you are ready to interact with the API, let’s make a first call and try to understand what it does. Let’s take a look at the example below, where we’ll be interacting with the Tokens endpoint to fetch the balances of our dear friend Vitalik Buterin.

import { Decommas } from '@decommas/sdk';

// You can pass your API key to constructor. For security purposes we recommend store API key as environment variable
const API_KEY = "YOUR_API_KEY";

const decommas = new Decommas(API_KEY);

const getVitalikERC20Balances = async () => {
  const address = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'; // any address

  const balances = await decommas.address.getTokens({ address });
  console.log(balances);
};

getVitalikERC20Balances();

As you can see, we’re setting up the API call so that it looks for the ERC-20 balances for the wallet address 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045, and returns it as const balances.

Building fundamental Portfolio Tracker features

Now you have a basic understanding of the workings of the DeCommas Mission Control API, you are familiar with the SDK that’s available and you have reviewed support documentation, it’s time to build some real-world features!

In order for a Portfolio Tracker to be of any use, it’s crucial to provide insights in ERC-20 holdings, historic values of these holdings and show the user insights about their transaction history. We’ll teach you about all 3 of these!

1. Show current ERC-20 balances for a wallet

In the example above you’ve already looked at Vitalic’s wallet, so this one will be relatively easy. In order for a user to know what ERC-20 tokens they possess in which amounts, we’ll be using the ERC-20 tokens endpoint once more.

By providing the user’s wallet address to the API call, the API returns an overview of ERC-20 tokens across all supported networks. Remember our example?

import { Decommas } from '@decommas/sdk';

// You can pass your API key to constructor. For security purposes we recommend store API key as environment variable
const API_KEY = "YOUR_API_KEY";

const decommas = new Decommas(API_KEY);

const getVitalikERC20Balances = async () => {
  const address = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'; // any address

  const balances = await decommas.address.getTokens({ address });
  console.log(balances);
};

getVitalikERC20Balances();

In this case, for wallet address 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 the API will return an array of tokens together with their corresponding balances.

If all goes according to plan, your return will look like this:

{
  "count": 2,
  "status": 200,
  "result": [
    {
      "chain_name": "mainnet",
      "chain_id": 1,
      "address": "0x228ba514309ffdf03a81a205a6d040e429d6e80c",
      "name": "Global Social Chain",
      "decimals": 18,
      "symbol": "GSC",
      "logo_url": "https://assets.coingecko.com/coins/images/4304/large/global-social-chain.png?1547742843",
      "actual_price": "0.00147295",
      "is_verified": true,
      "is_stable": false,
      "amount": "20000000000000000000"
    },
    {
      "chain_name": "mainnet",
      "chain_id": 1,
      "address": "0x38e4adb44ef08f22f5b5b76a8f0c2d0dcbe7dca1",
      "name": "Concentrated Voting Power",
      "decimals": 18,
      "symbol": "CVP",
      "logo_url": "https://assets.coingecko.com/coins/images/12266/large/Powerpool.jpg?1598621373",
      "actual_price": "0.433299",
      "is_verified": true,
      "is_stable": false,
      "amount": "42130000000000000000"
    }
  ]
}

As you can see, the return is a clean array containing tokens, their respective chains and balances. Use these arrays to create an overview in your Portfolio Tracking feature, for example by showing a list of tokens a user holds, sorted by the amount of tokens they hold of each respective token.

2. Determine value of ERC-20 tokens in USDC

While it’s great to know Vitalik is in possession of 3673.65 Ethereum at the time of writing, and that makes him quite the whale indeed, you will want to know the current and historic value of this holding expressed in USDC.

Let’s take another look at the response from the ERC-20 Tokens endpoint:

{
  "count": 2,
  "status": 200,
  "result": [
    {
      "chain_name": "mainnet",
      "chain_id": 1,
      "address": "0x228ba514309ffdf03a81a205a6d040e429d6e80c",
      "name": "Global Social Chain",
      "decimals": 18,
      "symbol": "GSC",
      "logo_url": "https://assets.coingecko.com/coins/images/4304/large/global-social-chain.png?1547742843",
      "actual_price": "0.00147295",
      "is_verified": true,
      "is_stable": false,
      "amount": "20000000000000000000"
    },
    {
      "chain_name": "mainnet",
      "chain_id": 1,
      "address": "0x38e4adb44ef08f22f5b5b76a8f0c2d0dcbe7dca1",
      "name": "Concentrated Voting Power",
      "decimals": 18,
      "symbol": "CVP",
      "logo_url": "https://assets.coingecko.com/coins/images/12266/large/Powerpool.jpg?1598621373",
      "actual_price": "0.433299",
      "is_verified": true,
      "is_stable": false,
      "amount": "42130000000000000000"
    }
  ]
}

The variable “actual_price” will report the current price of the token in USDC, enabling you to show the user the sum of all their holdings expressed in USDC. Depending on what you have in mind for your Portfolio Tracker, you might want to think about showing the amount of tokens by token, combined with a total USDC value the user has in that token. For this you can use “Name”, “Symbol”, “Amount” and “Actual Price”.

3. Create an overview of Transactions for a wallet

Now this is where things get really exciting. We’re taking a look at the ERC-20 transaction history of a wallet, giving your users a convenient overview of their previous transactions. We’ll be using the endpoint Transactions and Transaction ERC-20 transfers to get this done.

Since you are already quite familiar about the workings of the Mission Control API by now, we’ll give you a very brief summary of the two most obvious places to start for building your Transaction history functionality:

  • Transactions — This will give you an overall transaction history, showing the source and destination addresses, smart contract details and gas information.
{
  "status": 200,
  "result": [
    {
      "chain_name": "mainnet",
      "chain_id": 1,
      "hash": "0xde77a477dc37bc7c42cdda06e7872316ca6904a90b309d72999b395605e02474",
      "block_number": 17089722,
      "block_timestamp": 1682018519,
      "from_address": "0x1bd9582f085b2f4575ffd53dd5c9ea328a677191",
      "to_address": "0xdac17f958d2ee523a2206206994597c13d831ec7",
      "value": "0",
      "fee": "3972928780700513",
      "method": "transfer",
      "method_hash": "0xa9059cbb",
      "status": true,
      "transaction_tags": "[usdt,stablecoin]",
      "deployed_contract": "0xce74a760b754f7717e7a62e389d4b153aa753e0e",
      "gas_price":"30032808611",
      "gas_used":"24102",
      "block_base_fee_per_gas":"29932808611"
    }
]
  • Transaction ERC-20 transfers — This will give you transaction history specifically for ERC-20 tokens, including additional details related to the ERC-20 transfer.
{
  "status": 200,
  "result": [
    {
      "block_number": 16984007,
      "block_timestamp": 1680715211,
      "from_address": "0xffd19ec205948171c076efa54d3cb093d977a0aa",
      "to_address": "0x1bd9582f085b2f4575ffd53dd5c9ea328a677191",
      "token_address": "0x823e1b82ce1dc147bbdb25a203f046afab1ce918",
      "amount": "633360000000000000000",
      "log_index": 501
    },
    {
      "block_number": 16984007,
      "block_timestamp": 1680715211,
      "from_address": "0xffd19ec205948171c076efa54d3cb093d977a0aa",
      "to_address": "0x1bd9582f085b2f4575ffd53dd5c9ea328a677191",
      "token_address": "0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48",
      "amount": "1278350504",
      "log_index": 502
    }
  ]
}

This is just a first primer on creating a Transaction overview. Want to learn more? Keep an eye out for our “Portfolio Tracker Advanced” tutorial, in which we’ll be looking at the transaction history feature in more detail.

If this tutorial is too much for you, then develop a Portfolio Tracker or other Blockchain app developments with experienced professionals. In that case, you can consider Artjoker, a software engineering and IT consulting company specializing in web3 development. Some of their notable cases include projects like Gooddollar, Cryptoplatform, Ten, and more. Feel free to contact them here.

Wrapping up — Your first steps to building your web3 Portfolio Tracker

Starting your web3 development might feel daunting, but by using the DeCommas Mission Control API a lot of the groundwork has already been done for you. Utilizing a few relatively straightforward API calls you’ll get access to a tremendous amount of blockchain-stored information in milliseconds.

Enjoyed learning more about web3 development and DeCommas’ Mission Control API? Keep an eye out for more, right here on our Medium.