如何使用Syve的API追踪DEX钱包交易表现

概述

在本指南中，我们将引导你使用 Syve 的 DEX 价格数据和钱包追踪 API 构建一个以太坊钱包性能分析应用。此应用程序允许用户输入钱包地址，并分析每个交易代币的交易表现指标，例如盈亏。该应用程序利用来自区块链的数据，提供对已实现和未实现表现指标的洞察。

你将做什么

• 从我们的 GitHub 仓库克隆一个即用型 React 应用，该应用使用了 DEX 价格数据和钱包追踪 API
• 了解该应用如何使用 Syve 的 DEX 价格数据和钱包追踪 API 来获取钱包交易表现指标

你需要的

• 一个可以访问 DEX 价格数据和钱包追踪 API 的 QuickNode 账户
• 安装的 Node.js（v20 或更高版本）
• 代码编辑器（例如 VS Code）
• TypeScript 和 ts-node - 安装说明已在指南中注明
• 熟悉 JavaScript 或 TypeScript，以及 React 的基本知识

DEX 价格数据和钱包追踪 API 如何工作

Syve 的 DEX 价格数据和钱包追踪 API 提供了全面的工具，用于分析去中心化交易所的钱包表现和代币价格数据。这些 API 使开发人员能够轻松获取钱包交易活动的详细指标和历史价格数据。

API 方法

DEX 价格数据和钱包追踪 API 中提供了以下方法：

• v1/getWalletLatestTotalPerformance：提供钱包的总体交易表现指标，例如总盈亏。
• v1/getWalletLatestPerformancePerToken：检索特定钱包交易的每个代币的关键交易表现指标。
• v1/getPriceHistoricalOHLC：以 OHLCV（开盘价-最高价-最低价-收盘价-成交量）格式获取历史 DEX 价格数据。

在本指南中，我们将主要使用 v1/getWalletLatestTotalPerformance 和 v1/getWalletLatestPerformancePerToken 方法来构建我们的钱包表现分析应用程序。

总体表现指标

v1/getWalletLatestTotalPerformance 方法返回包含以下指标的对象：

代币特定表现指标

v1/getWalletLatestPerformancePerToken 方法返回一个对象数组，每个对象包含特定代币的指标：

盈亏计算

Syve 有一套详细的方法来计算利润、损失和其他表现指标。有关这些计算的更多详细信息，请参阅 Syve 关于盈亏指标的博客。

钱包性能分析应用程序

本节将指导你完成钱包性能分析应用程序中使用的组件和逻辑。我们将介绍应用程序如何与 Syve 的 API 交互以及处理检索到的数据。

这就是应用程序的外观；现在，让我们了解详细信息。

该应用程序使用 React、TypeScript 和 Tailwind CSS 构建。下面，我们描述了主要组件背后的逻辑：

主要逻辑和工作流程

1. 用户输入：应用程序首先允许用户输入一个以太坊钱包地址。
2. 地址验证：验证输入以确保它是有效的以太坊地址。

3. API 调用：提交后，应用程序会同时向 QuickNode 的端点发出两个 API 调用：

   • 一个用于获取总体钱包表现
   • 另一个用于获取代币特定表现数据
4. 数据处理：然后处理检索到的数据并将其存储在应用程序的状态中。

5. 显示：处理后的数据分为两个主要部分显示：

   • 总体钱包表现统计数据
   • 逐个代币的详细表现细分

文件结构和描述

App.tsx

• 这是协调整个应用程序的主要组件。
• 它管理应用程序的状态，包括钱包地址总体统计数据和代币表现数据。
• 处理 API 调用和数据获取逻辑。
• 渲染主要布局和子组件。

WalletSearch.tsx：

• 渲染钱包地址的输入表单。
• 执行以太坊地址的客户端验证。
• 提交后触发父组件中的搜索功能。

OverallStatsDisplay.tsx：

• 显示总体钱包表现统计数据。
• 格式化和呈现数据，例如总盈亏、胜率和交易量。
• 使用颜色编码来高亮显示正值和负值。

TokenPerformanceTable.tsx：

• 渲染一个表格，显示每个代币的详细表现。
• 为其他代币特定信息实现可扩展的行。
• 为每个代币提供指向 Etherscan 的链接。

api.ts：

• 包含使用 Axios 的 API 调用函数。
• 根据 Syve 的要求构造 API 请求。
• 在将结果返回到主应用程序之前处理任何必要的数据转换。

interfaces/OverallStats.ts 和 interfaces/TokenPerformance.ts：

• 定义应用程序中使用的数据结构的 TypeScript 接口。

获取钱包表现数据

要获取钱包交易表现数据，你需要向 QuickNode 以太坊端点发出 RPC 调用。

以下代码 ( api.ts) 演示了如何设置一个函数来向 QuickNode 端点发出 RPC 调用，并使用可用方法来获取钱包表现数据：

我们将在下一节中构建项目。目前，无需采取任何操作；此代码段仅用于解释。

api.ts 文件

import axios from "axios";
import { OverallStats } from "../interfaces/OverallStats";
import { TokenPerformanceResult } from "../interfaces/TokenPerformance";

const QUICKNODE_ENDPOINT = import.meta.env.VITE_QUICKNODE_ENDPOINT as string;

const makeRpcCall = async (method: string, params: any) => {
  const response = await axios.post(
    QUICKNODE_ENDPOINT,
    {
      method,
      params,
      id: 1,
      jsonrpc: "2.0",
    },
    {
      headers: {
        "Content-Type": "application/json",
      },
    }
  );

  if (response.data.error) {
    throw new Error(response.data.error.message);
  }

  return response.data.result;
};

export const getWalletLatestTotalPerformance = async (
  walletAddress: string
): Promise<OverallStats> => {
  const result = await makeRpcCall("v1/getWalletLatestTotalPerformance", {
    wallet_address: walletAddress,
    max_size_ok: "true",
  });
  return result as OverallStats;
};

export const getWalletLatestPerformancePerToken = async (
  walletAddress: string
): Promise<TokenPerformanceResult> => {
  const result = await makeRpcCall("v1/getWalletLatestPerformancePerToken", {
    wallet_address: walletAddress,
    max_size_ok: "true",
  });
  return result as TokenPerformanceResult;
};

1. Axios 设置：代码使用 axios 库向 QuickNode 端点发出 HTTP POST 请求。

2. 环境变量：QUICKNODE_ENDPOINT 常量存储你的 QuickNode 端点的 URL，该 URL 从环境变量中获取。

3. RPC 调用函数：makeRpcCall 函数是一个可重用的函数，用于执行到端点的实际 RPC 调用。它将方法名称和参数作为参数，并发送包含这些详细信息的 POST 请求。

4. 导出的函数：

   • getWalletLatestTotalPerformance：此函数调用 v1/getWalletLatestTotalPerformance 方法，以获取给定钱包地址的总体交易表现指标。
   • getWalletLatestPerformancePerToken：此函数调用 v1/getWalletLatestPerformancePerToken 方法，以检索钱包交易的每个代币的表现指标。

现在我们了解了应用程序的工作逻辑，让我们继续开发！

设置你的开发环境

要构建钱包性能分析应用程序，你需要设置你的开发环境。这包括安装必要的工具和依赖项，以及配置你的 QuickNode 访问。

安装必要的工具和依赖项

在开始之前，请确保你的系统上安装了 Node.js。如果还没有安装，请从官方网站下载并安装。Node.js 附带 npm (Node Package Manager)，你将使用它来安装其他依赖项。

接下来，如果你还没有全局安装 TypeScript 和 ts-node，请全局安装它们：

npm install -g typescript ts-node

设置以太坊端点

在你开始之前，请注意，DEX 价格数据和钱包追踪 API 是付费插件。请在此处查看详细信息，并根据你的需求比较计划。

使用 DEX 价格数据和钱包追踪 API 设置你的以太坊端点非常简单。如果你尚未注册，可以在此处创建一个帐户。

登录后，导航到 Endpoints 页面，然后单击 Create an endpoint。选择 Ethereum mainnet，然后单击 Next。系统将提示你配置插件。激活 DEX Price Data & Wallet Tracking API。之后，只需单击 Create Endpoint。

如果你已经有一个没有插件的以太坊端点，请转到你的以太坊端点内的 Add-ons 页面，选择 DEX Price Data & Wallet Tracking API，然后激活它。

准备好端点后，复制 HTTP Provider 链接并妥善保管，因为你将在下一节中需要它。

运行应用程序

我们在 我们的 GitHub 仓库 上提供了一个即用型解决方案，可以快速上手。请按照以下步骤克隆和设置示例应用程序：

1. 从 GitHub 克隆仓库

git clone https://github.com/quiknode-labs/qn-guide-examples.git

2. 导航到项目目录

cd sample-dapps/ethereum-dex-trade-performance-analyzer

3. 安装依赖项

npm install

4. 将 .env.example 重命名为 .env，并将占位符替换为你的 QuickNode 以太坊端点 URL

VITE_QUICKNODE_ENDPOINT="YOUR_QUICKNODE_ENDPOINT_URL"

5. 启动开发服务器

npm run dev

6. 在浏览器中打开 http://localhost:5173/ 以查看应用程序

7. 输入你要分析的以太坊地址（即 Vitalik 的地址 0xd8da6bf26964af9d7eed9e03e53415d37aa96045），并浏览显示的总体统计数据和代币特定表现指标

之后，你将看到一个类似于下图的屏幕。

总体表现	代币特定表现

结论

恭喜！你已成功设置并浏览了钱包性能分析应用程序。使用 Syve 的 DEX 价格数据和钱包追踪 API 构建钱包性能分析应用程序，展示了开发人员可以多么容易地创建有价值的工具。这些 API 提供的灵活性和全面数据使开发人员能够探索各种应用程序，这些应用程序可以为用户提供有关其交易活动的可行见解。

此项目可能的改进

以下是一些增强钱包性能分析应用程序的功能和用户体验的想法：

• 增强的可视化：整合交互式图表，以可视化钱包性能随时间变化的趋势。
• 多钱包支持：允许用户同时分析和比较多个钱包的表现。
• 历史数据分析：使用 v1/getPriceHistoricalOHLC 方法提供更详细的历史数据分析，以显示价格趋势和波动性。

如果你有任何问题，请随时使用我们在 Discord 上的专用频道，或使用下面的表格提供反馈。请关注我们的 Twitter 和我们的 Telegram 公告频道，以随时了解最新信息。

我们 ❤️ 反馈！

如果你有任何反馈或对新主题的请求，请 告诉我们。我们很乐意听取你的意见。

• 原文链接： quicknode.com/guides/mar...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～