使用 DeCommas API 创建 Web3 投资组合跟踪器

区块链技术引发了一个被广泛称为“Web3”的全新行业的出现，这是数字经济的新前沿，其中去中心化、互操作性和用户授权成为首要和中心。

作为 Web3 黎明的一部分，多种新的资产类别正在向大众开放。比特币和以太坊等加密货币是众所周知的 web3 资产的主要组成部分，但自从去中心化金融和 NFT 的兴起以来，基于区块链的资产类别的种类正在迅速增加。

随着 Web3 资产复杂性的增加，用户正在寻找便捷的方法来跨区块链和 Web3 协议跟踪其资产。输入投资组合追踪器，一个方便的平台，连接到 Web3钱包并提供其余额和头寸的全面概述：

在本文中，我们将为 web3 和对 web3 感兴趣的开发人员提供逐步演练，以使用免费使用的DeCommas 的任务控制 API 。

什么是 DeCommas“任务控制 API”？

DeCommas 的 API 是一个开发人员友好的 API，提供对结构化区块链数据的快速、便捷的访问。在https://build.decommas.io/开发人员可以在几秒钟内获得免费的 API 密钥，从而可以访问最快的跨链 Web3 API 之一。

作为开发人员，您可以免费访问和查询存储在多个区块链上的数据，响应时间极快，低于 150 毫秒。也无需重复多个 API 调用，因为 API 响应默认是跨链的。

最近，DeCommas 团队在 OP 堆栈上加倍努力，增加了对 opBNB 和 Base L2 的支持。

如果您对 API 感到好奇，可以查看完整文档这里。

教程：使用 Mission Control API 构建投资组合跟踪器

在本教程中，我们将帮助您构建投资组合跟踪功能。我们将使用 Mission Control API，并利用端点来获取 ERC20 余额、NFT 持有量甚至协议头寸。

在本教程中，我们将：

• 向您展示如何获取 Mission Control API 密钥
• 在您的环境中设置 Mission Control API
• 了解 API 调用及其响应
• 为您的投资组合跟踪器创建基本功能

让我们深入了解吧！

获取您的个人任务控制 API 密钥

完成本教程需要 DeCommas Mission Control API。它免费使用，默认支持跨链查询并实现极高的响应时间。

获得访问权限很简单：

1. 前往https://build.decommas.io/
2. 点击“开始”
3. 输入你的电子邮箱地址
4. 检查您的电子邮件并单击链接来登录
5. 您现在可以访问https://dashboard.decommas.io/ ，其中包含您的 API 密钥

您将需要 API 密钥来完成本教程，因此请继续将这些密钥复制粘贴到您可以轻松找到但安全存储的某个位置。对于本教程，DeCommas 文档也会派上用场： https://docs.decommas.io/

在您的环境中设置 Mission Control API

根据您的偏好，您可以通过原始 HTTPS 请求或使用我们的 SDK 在 JavaScript 中与 API 进行交互。

如果您选择第一条路线，则调用将如下所示：

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

不过，在本教程中，我们将使用提供的 JavaScript SDK，并且将使用快速入门指南在您的环境中启动 Mission Control API。

德逗号 SDK： https://github.com/DeCommas/decommas-sdk

1. 在您的 Javascript 环境中安装 Mission Control API 应用程序

npm install @decommas/sdk

2.安装应用程序后即可导入并使用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); };

现在一切都已准备就绪，可以调用 API 了！

构建基本的投资组合跟踪器功能

现在您已经熟悉了软件开发工具包并且可以访问 API，让我们构建一些现实世界的功能！

一个好的投资组合跟踪器需要提供有关 ERC-20 持有量、这些持有量的价值以及用户交易历史记录的见解。我们将为您提供所有这 3 个方面的入门知识！

1. 获取钱包当前的 ERC-20 余额

为了让用户知道他们拥有什么以及有多少 ERC-20 代币，我们将使用ERC-20 代币端点再一次。

通过向 API 调用提供用户的钱包地址，API 将返回所有支持网络中的 ERC-20 代币的概览。在这种情况下，对于钱包地址 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045，API 将返回一组代币及其相应的余额。

API 将响应一个干净的数组，其中包含代币、它们所在的链以及各自的余额。您可以使用此数据在投资组合跟踪器中提供概览，例如显示用户持有的代币列表（按每个代币的总量排序）。

 { "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. 报告ERC-20代币在USDC中的价值

虽然知道用户拥有多少代币是有价值的信息，但许多用户希望看到其持有的以美元表示的价值。

让我们再看一下来自 ERC-20 令牌端点的响应：

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

使用变量“actual_price”，您可以向用户显示以美元表示的持有量总和。根据您对投资组合跟踪器的想法，您可以考虑按代币显示代币数量，以及用户在该代币中拥有的 USDC 总价值。为此，您可以使用“名称”、“符号”、“金额”和“实际价格”。

总结 - 构建 web3 投资组合跟踪器的第一步

当然，这只是构建您的投资组合跟踪器的开始。想了解更多关于扩展您的投资组合追踪器的信息吗？密切关注德科马斯黑客午间，因为新的 web3 教程经常发布！

开始 web3 开发可能会令人畏惧，但通过使用 DeCommas 的 Mission Control API，您可以极大地加快该过程。只需使用几个简单的 API 调用，您就可以免费访问大量区块链存储的数据。

喜欢本教程并想了解更多信息吗？关注 DeCommas黑客午间，我们定期发布 Web3 开发教程，就像这个一样！已经知道您需要并想要构建的所有内容了吗？前往构建.decommas.io并使用 Mission Control API 来发挥您的优势！