Creating a Web3 Portfolio Tracker with DeCommas API

Blockchain technology has sparked the emergence of a whole new industry widely known as “Web3”, a new frontier in the digital economy where decentralization, interoperability and user empowerment are put front and center.

As part of the Web3 dawning, multiple new asset classes are becoming available to the masses. Cryptocurrencies such as Bitcoin and Ethereum are a well-known staple of web3 assets, but since the rise of Decentralized Finance and NFT’s the variety of blockchain-based asset classes is rapidly increasing.

With this increased complexity in Web3-assets users are looking for convenient ways to keep track of their assets across blockchains and Web3 protocols. Enter the Portfolio Tracker, a convenient platform that connects to a Web3-wallet and provides a comprehensive overview of its balances and positions:

In this article we will provide a step-by-step walkthrough for web3 and web3-curious developers to build their own portfolio tracking feature, using the free-to-use DeCommas’ Mission Control API.

What is DeCommas “Mission Control API”?

DeCommas’ API is a developer-friendly API providing fast and convenient access to structured blockchain data. On https://build.decommas.io/ developers can get access to free API-keys in a matter of seconds, providing access to one of the fastest cross-chain Web3 API’s out there.

As a developer you can access and query the data stored on multiple blockchains with blazing fast response times of below 150ms, free of charge. There’s no need to duplicate multiple API-calls either, as the API response is cross-chain by default.

Recently the DeCommas team has doubled down on the OP Stack, adding support for opBNB and Base L2’s as well.

In case you are curious about the API, full documentation is available here.

Tutorial: Building a Portfolio Tracker using Mission Control API

For this tutorial we’ll help you on your way building a Portfolio Tracking feature. We’ll use Mission Control API, and make use of endpoints to fetch ERC20-balances, NFT holdings and even Protocol Positions.

In this tutorial, we’ll:

• Show you how to get your Mission Control API key
• Set up Mission Control API in your environment
• Learn about the API call and it’s response
• Create fundamental features for your portfolio tracker

Let’s dive in!

Get your personal Mission Control API key

DeCommas Mission Control API is required for completing this tutorial. It’s free to use, supports cross-chain queries by default and achieves extremely high response times.

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 will now be able to access https://dashboard.decommas.io/, which contains your API keys

You will need your API keys for completing this tutorial, so go ahead and copy paste these to some place where they are easy to find for you, but securely stored. For this tutorial, DeCommas documentation will also come in handy: 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 this tutorial however, we’ll be using the JavaScript SDK that’s provided, and we’ll be using the Quick Start guide to get Mission Control API initiated in your environment.

DeCommas SDK:  https://github.com/DeCommas/decommas-sdk

1. Install the Mission Control API application in your Javascript environment

npm install @decommas/sdk

2.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!

Building fundamental Portfolio Tracker features

Now you are familiar with the SDK and can access the API, let’s build some real world features!

A good Portfolio Tracker needs to provide insights in ERC-20 holdings, the value of these holdings and a user's transaction history. We’ll give you a primer on all 3 of these!

1. Fetch current ERC-20 balances for a wallet

In order for a user to know what and how many  ERC-20 tokens they possess, 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. In this case, for wallet address 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045 the API will return an array of tokens together with their corresponding balances.

The API will respond with a clean array containing tokens, the chains they’re on and their respective balances. You can use this data to provide an overview in your Portfolio Tracker, for example by showing a list of tokens a user holds, sorted by the total amount of each token.

{
  "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"
    }
  ]
}

2. Report value of ERC-20 tokens in USDC

While knowing how much of a token a user possesses is valuable information, many users would like to see the value of their holdings expressed in USD.

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"
    }
  ]
}

Using the variable “actual_price”, you can show the user the sum of their holdings expressed in USD.  Depending on what you have in mind for your Portfolio Tracker, you could consider 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”.

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

This is of course just a start for building your Portfolio Tracker. Want to learn more about expanding your Portfolio Tracker? Keep an eye out on DeCommas’ HackerNoon, as new web3 tutorials are posted frequently!

Getting started in web3 development might feel daunting, but by using DeCommas’ Mission Control API you can speed up the process tremendously. Utilizing just a few straightforward API calls already gets you access to heaps of blockchain-stored data, free of charge.

Enjoyed this Tutorial and want to learn more? Give DeCommas a follow on HackerNoon, where we regularly post Web3 Development tutorials just like this one! Already know all that you need and want to build on? Head out to build.decommas.io and use Mission Control API to your advantage!