Welcome to our follow-up tutorial, where we delve deeper into harnessing the power of DeCommas Mission Control API. In the part one tutorial, we introduced you to the fundamentals of building a Web3 Portfolio Tracker using the versatile DeCommas Mission Control API, explained how to show current ERC20 balances for a wallet, how to determine current value for ERC20 tokens and steps to creating an overview of transactions for a wallet. Today, in this part two, we’re taking it a step further, focusing specifically on the Protocols Endpoint to empower you with the knowledge to add a crucial feature: tracking protocol exposure for your users.

DeCommas Mission Control API, as you may recall, is a robust tool that provides developers with unparalleled access to blockchain data, offering a rich array of endpoints, including ERC-20 Tokens, Protocol Positions, NFT Transfers, and Transaction Details. In this article, we’ll shift our attention to the Protocols Endpoint and explore how you can enhance your Web3 Portfolio Tracker by giving users insights into their exposure to various blockchain protocols.

By the end of this tutorial, you’ll not only have a comprehensive understanding of how to build a portfolio tracker using Mission Control API, but you’ll also be well-equipped in adding the essential feature of tracking protocol exposure to a web3 portfolio tracker. Now let’s embark on this journey to unlock new dimensions in web3 portfolio tracking together.

What is a Web3 Portfolio Tracker?

In this fast-paced, changing world of blockchain, cryptocurrencies, and digital assets, Web3 enthusiasts seek a sophisticated solution to oversee and manage their digital wealth. Traditional portfolio tracking tools fall short in this regard. Here comes the Web3 Portfolio Tracker, a dynamic tool tailored to monitor assets within the decentralized and blockchain industry.

Tutorial: An Overview of How Users can Add Protocols Endpoint Feature to a Web3 Portfolio Tracker

In this tutorial, we’ll do a recap on how to build a web3 portfolio tracker using DeCommas Mission Control API. Specifically, we’ll tackle the following pivotal topics:

• How to get your Personal Mission Control API key.
• Setting up Mission Control API in your development environment.
• Calling the API and understanding its responses.
• Creating a fundamental Portfolio Tracker feature:\
  • Build a list of protocols for wallet addresses on all networks

Let’s get started!

Get your Personal Mission Control API key

To embark on this exciting journey, you must secure access to DeCommas Mission Control API. The best part? In most cases, it’s free of charge to use and boasts remarkable response times consistently under 150 milliseconds. Here’s how you can get your API key:

Step 1. Visit https://build.decommas.io/

Step 2. Initiate your journey by clicking “Get Started

Step 3. Provide your email address to initiate the process.

4. Keep an eye on your email inbox for the verification link and promptly click it to access with URL https://dashboard.decommas.io/, your gateway to access API keys.

Ensure your API keys are securely stored, readily accessible for future use, and confidential. Additionally, you can consult our documentation here for further research.

Setting Up Mission Control API in your Development Environment

The choice is yours when it comes to setting up the API in your development environment. You can opt for raw HTTPS requests or harness the JavaScript SDK provided by DeCommas. Let’s first delve into the JavaScript realm in this tutorial. Here’s how to initiate the setup:

1. Kickstart the process by installing the Mission Control API SDK in your JavaScript sanctuary:

npm install @decommas/sdk

2. Once the SDK is seamlessly integrated, import and wield its power in your code:

import { Decommas } from '@decommas/sdk'; // Welcome to the world of 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);
};

With this setup in place, we’re primed to invoke API calls.

In case you want to go with the first route, that is, the raw HTTPS requests, the call would look like this:

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

Calling the API and Understanding its Responses

Now that you’re set up the API, let’s make a first call and explore its response. In the following example, we’ll interact with the “Tokens” endpoint to fetch the balances of the address of the father of Ethereum, Vitalik Buterin:

import { Decommas } from '@decommas/sdk';
// Secure your API key in the constructor (for added security, consider housing it as an 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 shown, we initiated an API call to retrieve ERC-20 token balances for a specific wallet address and store the results in the balances variable. This response will contain a clean array of tokens with their respective chains and balances.

Building a List of Protocols for Wallet Addresses on All Networks

In this section, we’ll demonstrate how to fetch and display a list of protocols associated with a specific wallet address across all supported networks using the DeCommas Mission Control API’s “Protocols” endpoint.

Before anything, let us quickly tell you what protocols are. Protocols are the foundational frameworks that power decentralized applications. The “Protocols” endpoint within the DeCommas Mission Control API enables developers to retrieve and display a comprehensive list of protocols associated with a user’s wallet address across various blockchain networks.

This functionality empowers developers to provide users with valuable insights into their portfolio’s exposure to different blockchain protocols, facilitating informed investment decisions.

That being said, here are practical steps to get started:

Step 1: Initialize Variables

First, initialize your API key and wallet address. Replace “YOUR_API_KEY” with your API key and update “walletAddress” with the target wallet address.

const API_KEY = "YOUR_API_KEY"; // Replace with your API key
const walletAddress = '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045'; // Replace with the desired wallet address

Step 2: Import DeCommas SDK and Initialize the API Client with Your Key

import { Decommas } from '@decommas/sdk';
const decommas = new Decommas(API_KEY);

Step 3: Fetch Protocols for the Wallet Address on All Networks

Now, let’s make the API call to retrieve protocols associated with the wallet address. This code will work for networks where Mission Control API supports protocols.

const fetchProtocolsForWallet = async () => {
  try {
    const protocolData = await decommas.address.getProtocols({ address: walletAddress });
    if (protocolData.status === 200) {
      const protocols = protocolData.result;
      // Display the list of protocols
      console.log(`Protocols for Wallet Address ${walletAddress} on All Networks:`);
      protocols.forEach(protocol => {
        console.log(`Network: ${protocol.chain_name}`);
        console.log(`Protocol: ${protocol.name}`);
        console.log(`Protocol ID: ${protocol.protocol_id}`);
        console.log(" - - -");
        });
      } else {
        console.error("Failed to fetch protocols.");
       }
    } catch (error) {
        console.error("Error fetching protocols:", error);
  }
};
// Call the function to fetch and display protocols
fetchProtocolsForWallet();

Explanation:

1. We use the decommas.address.getProtocols() method to fetch protocols associated with the wallet address.
2. We iterate through the returned protocols list and display information about each protocol, including the network name, protocol name, and protocol ID.

With this code, you can fetch and display a list of protocols for a specific wallet address on all supported networks.

That being said, here is a list of protocols that DeCommas Mission Control API currently supports:

1. AAVE (v2 & v3)
2. Uniswap (v2)
3. Lido
4. Compound (v2)

The API is constantly updated with support for new protocols, so this list may change over time. You can check the DeCommas website for the latest list of supported protocols.

Wrapping up — Your next steps to building Web3 Portfolio Tracker

Starting your journey into Web3 development may seem daunting, but with DeCommas Mission Control API, much of the groundwork has already been laid out for you. You gain access to a wealth of blockchain-stored information in milliseconds through a few straightforward API calls.

If you enjoyed this tutorial on Web3 development and DeComma Mission Control API, watch out for more content here on our Medium page.