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

概述

在本指南中，我们将引导你构建一个以 Syve 的 DEX 价格数据和钱包跟踪 API 为基础的以太坊钱包性能分析器应用程序。该应用允许用户输入钱包地址，并分析每种交易代币的交易性能指标，如盈亏。该应用提供了基于区块链数据的已实现和未实现的性能指标的深入洞察。

你将要做的

• 从 我们的 GitHub 仓库 克隆一个现成的 React 应用，利用 DEX 价格数据和钱包跟踪 API
• 理解该应用如何使用 Syve 的 DEX价格数据和钱包跟踪 API 来提取钱包交易性能指标

你将需要的

• 一个 QuickNode 账户，可访问 DEX 价格数据和钱包跟踪 API
• 安装 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 对盈亏及其他性能指标的计算有详细的 methodology。有关这些计算的更深入信息，请参考 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 包管理器），你将使用它来安装其他依赖项。

接下来，如果你还未全局安装 TypeScript 和 ts-node，请执行以下命令：

npm install -g typescript ts-node

设置以太坊端点

在开始之前，请注意 DEX 价格数据和钱包跟踪 API 是付费附加包。请在 这里 检查详细信息，并根据你的需求比较计划。

设置你的以太坊端点与 DEX 价格数据和钱包跟踪 API 非常简单。如果还没有注册，你可以在 这里 创建一个帐户。

登录后，导航至 端点 页面并单击 创建端点。选择 以太坊主网，然后单击 下一步。将提示你配置附加组件。激活 DEX 价格数据和钱包跟踪 API。随后，只需单击 创建端点。

如果你已经有一个没有附加组件的以太坊端点，请转到以太坊端点内的 附加组件 页面，选择 DEX 价格数据和钱包跟踪 API 并激活它。

当你的端点准备好后，复制 HTTP 提供程序 链接并保留以备后用，因为你将在下一节中需要它。

运行应用

我们在 我们的 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/qui...
• 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～