Solana DeFi：Jupiter Swap 界面（2023）
- Helius
- 发布于 2023-09-14 20:59
- 阅读 86
本文介绍了如何使用Jupiter API创建一个去中心化应用程序（dApp），实现SOL与USDC的交易。通过提供代码示例和详细的步骤，读者可以学习到如何获取价格报价、执行交易及处理用户输入，同时还提到了未来可能的扩展和功能。整体内容较为全面，适合区块链开发者学习。
引言
Jupiter 是一个聚合各种 DEX 和 AMM 的平台，通过这些不同的交易所找到最有效的兑换。Jupiter 然后为你在其他 DEX 和 AMM 中找到最佳价格的交换路径，确保你以最优价格进行交易。无论你是想简单地兑换稳定币还是与你喜欢的 DeFi 游戏token 进行交互，与 Jupiter 的互动都是必不可少的。
Jupiter Swap 用户界面：概述
了解如何通过这个简短的指南以编程方式与 Jupiter 进行交互！本指南将引导你创建一个 dApp，该 dApp 使用 Jupiter 的 API 根据用户输入获取价格报价并执行 SOL 到 USDC 的兑换。这个应用展示了实用的功能，例如实时获取的价格报价和用户签名的交换交易。完成本博客时，请随时参考以下包含所有完整代码的代码库。
这是完成的代码库：GitHub - Tidelaw/jup-ui
先决条件
确保已安装以下内容：
- Node.js
- Next.js
- Tailwind（可能包含在 Next.js 中）
依赖项
强烈建议先阅读连接钱包的博客，以便正确设置上下文文件夹，使用户连接他们的钱包并签署交换交易。
在项目初始创建和连接钱包博客中未包含的唯一额外 依赖项 是 @project-serum/anchor 和 axios 软件包。建议简单地复制此 package.json，以便你可以简单地运行 npm i 一次性安装它们。
Swap.tsx
我们将首先实现价格报价功能，返回输入的 SOL 量所预计返回的 USDC。这在 Jupiter 中非常简单，我们只需提供输入和输出的 mint 地址以及我们希望交换的金额。
需要一个状态变量来存储用户希望兑换的 SOL 数量。我们将首先设置输入：在下面的代码中，包括了 DaisyUI 滑块和文本输入（都作为 <input> 标签），其中仅需要一个。输入标签需要一个值和 onChange 属性，以便它能够不断更新状态变量。
现在，我们可以创建一个 useEffect Hook，当用户输入新的 SOL 量时，我们将向 Jupiter 发送请求以获取用户请求的报价。
Quote.tsx
我们现在可以移动到 src/api/ 文件夹，在那里我们将创建一个新文件叫 quote.tsx，这就是我们向 Jupiter 进行报价请求的地方。为了接收请求，我们需要设置处理程序函数，只允许 POST 请求。在接收到来自前端的包含用户希望交换的金额的请求后，我们只需要将配置的 URL 修改为 req.body.amount，向 Jupiter 发送请求。
这是返回负载的一个示例。我们将把这个对象传回前端，以便我们可以再传递给另一个端点，在那里我们将进行交换。
注意 { data } 抽象，它访问 data.data 属性，有了这个，我们可以简单地通过 res.status(200).json(data) 直接将数据传回前端。
现在在返回函数中，我们将更新报价状态变量，在我们的内部 API 用上述数据响应时更新它。之后，我们可以访问 USDC 的确切属性，但这需要除以 1 百万并四舍五入到两位小数，以反映正确的 USD 金额。这类似于原生 SOL 用 Lamports 表示，必须除以 10 亿。
现在，我们可以简单地将其插入 HTML 中，并将在前端显示。
Jupiter UI：进行交换
现在我们有了模拟的报价对象，我们可以创建一个新函数来执行交换并向 API 端点发送请求。
我们现在可以创建一个 API 端点以接收该请求，文件路径为 src/api/swap 。这个示例使用了静态类型的钱包地址，但你可以使用 useWallet Hook并将其传递到端点中。发送报价对象到交换端点后，我们会得到一个序列化的交易，现在只需在前端进行签名。请随意通过将对象记录到控制台进行测试。
在收到来自后端的序列化交易后，我们可以开始准备发送它。首先，我们需要获取交易缓冲区，然后将其反序列化以便能够签名。假设你遵循了之前的 连接钱包指南，你应该可以简单地使用 wallet.signTransaction 签署此交易。签署交易后，我们将再次序列化它，并使用 sendRawTransaction 函数发送该交易。
可以添加额外功能，例如在实际的 jup.ag 网站上显示交易签名，但目前它仅记录在浏览器的控制台中，仍然可以供技术用户访问。
结论： 开始使用 Helius
本指南已引导你创建一个 dApp，该应用使用 Jupiter 的 API 根据用户输入获取价格报价并执行 SOL 到 USDC 的兑换。希望本指南能在未来提供参考。如有任何问题，请随时在 Helius Discord 中询问。此外，你可以使用免费的 Helius RPC 建立连接。关于该项目的进一步扩展，以下是一些想法。如果你理解了构建与 Jupiter 的 API 进行价格报价和交换的 dApp 的原理，那么下一步是利用 Helius 的强大功能进行监控和分析。由于 Jupiter 本身就是一个聚合器，能在各种 DEX 和 AMM 中找到最佳交换路径，因此流经它的数据非常丰富，对理解市场动态具有极大的价值。
下一步
- 在将报价对象发送到 swap.ts 端点时，在负载中添加额外属性。
- 显示交易签名
- 包含其他 token 或在 USDC 和 SOL 之间反向转换
- 当钱包未连接时的错误/响应性
- 在后端反序列化并发送交易以隐藏 RPC？
使用的资源
- 原文链接： helius.dev/blog/solana-d...
- 登链社区 AI 助手，为大家转译优秀英文文章，如有翻译不通的地方，还请包涵～
