DEV Community
·
构建一个React应用，以使用Alchemy和RadzionKit跟踪EVM交易
💡
原文英文，约3900词，阅读约需14分钟。
📝
内容提要
本文介绍了如何构建一个React应用，以跟踪EVM链上的交易历史。通过Alchemy API获取交易数据，支持以太坊和Polygon网络，用户可以管理钱包地址，查看交易历史，并动态验证API密钥。使用RadzionKit简化开发流程，提升用户体验。
🎯
关键要点
- 本文介绍了如何构建一个React应用，以跟踪EVM链上的交易历史。
- 使用Alchemy API获取交易数据，支持以太坊和Polygon网络。
- 用户可以管理钱包地址，查看交易历史，并动态验证API密钥。
- 使用RadzionKit简化开发流程，提升用户体验。
- 应用支持ETH和WETH作为交易资产，USDC和USDT作为现金资产。
- 交易对象包含数量、资产、现金资产、价格、类型、时间戳和交易哈希等属性。
- 应用为单页面应用，用户可以查看交易历史和管理钱包地址。
- 用户需要设置Alchemy API密钥，未设置时会提示输入。
- API密钥存储在本地存储中，避免重复输入。
- 动态验证API密钥，使用输入防抖组件减少不必要的API调用。
- 交易历史需要至少一个地址，未添加地址时会提示用户添加。
- 地址管理组件包括标题、地址列表和添加新地址的输入框。
- 交易数据通过useTradesQuery钩子获取，支持部分数据展示。
- 构建交易对象时，分别请求发送和接收的转账数据。
- 使用CoinGecko API获取资产价格，提供实时交易建议。
- 通过结合Alchemy API、CoinGecko和RadzionKit，构建了一个高效的交易历史跟踪应用。
❓
延伸问答
如何使用Alchemy API获取EVM链上的交易数据？
通过Alchemy API，可以获取以太坊和Polygon网络上的交易数据，用户需要设置API密钥以进行数据请求。
这个React应用支持哪些交易资产？
该应用支持ETH和WETH作为交易资产，USDC和USDT作为现金资产。
如何管理钱包地址和查看交易历史？
用户可以在应用中管理钱包地址，并查看与这些地址相关的交易历史，应用提供了相应的组件来添加和管理地址。
如何动态验证Alchemy API密钥？
应用使用输入防抖组件动态验证API密钥，用户在输入时会实时检查密钥的有效性，避免不必要的API调用。
如何构建交易对象？
交易对象通过请求发送和接收的转账数据构建，包含数量、资产、现金资产、价格、类型、时间戳和交易哈希等属性。
应用如何处理交易数据的加载和错误状态？
应用使用useTradesQuery钩子处理交易数据的加载状态和错误，确保在数据加载时显示相应的提示信息。
🏷️
标签
➡️
