Solana DeFi：Jupiter Swap UI（2023）
简介
Jupiter 是多种 DEX 和 AMM 的聚合器，可通过这些不同的交易所找到最高效的兑换方式。Jupiter 会在其他 DEX 和 AMM 中为你寻找价格最优的兑换路由，确保你获得最佳价格。无论你只是想兑换稳定币，还是与自己喜爱的 DeFi 游戏代币交互，Jupiter 都不可或缺。
Jupiter Swap UI：概览
通过这篇简短指南，了解如何以编程方式与 Jupiter 交互！本指南将带你创建一个 dApp，使用 Jupiter 的 API 获取报价，并根据用户输入执行从 SOL 到 USDC 的兑换。该应用展示了多项实用功能，例如实时获取报价和由用户签名兑换交易。阅读本文时，你可以随时参考以下包含全部完整代码的代码仓库。
完整代码仓库：GitHub - Tidelaw/jup-ui
前置条件
请确保已安装以下工具：
- Node.js
- Next.js
- Tailwind（可能已包含在 Next.js 中）
依赖项
强烈建议按照 Connect Wallet 博客的说明操作，以正确设置 contexts 文件夹，让用户能够连接钱包并签署兑换交易。
除了初始创建项目和 Connect Wallet 博客中包含的依赖项外，唯一需要额外安装的依赖项是 @project-serum/anchor 和 axios 包。建议直接复制此 package.json，这样只需运行 npm i 即可一次性安装所有依赖项。
Swap.tsx
首先，我们将实现报价功能，根据输入的 SOL 数量返回预计可获得的 USDC 数量。通过 Jupiter 实现这一功能非常简单，只需提供输入和输出代币的 mint 地址，以及我们希望兑换的数量。
我们需要一个状态变量，用于存储用户想要兑换的 SOL 数量。首先设置输入控件：以下代码同时包含 DaisyUI 滑块和文本输入框（两者都是 <input> 标签），但实际上只需要其中一个。input 标签需要 value 和 onChange 属性，以便持续更新状态变量。
现在可以创建一个 useEffect hook。当用户输入新的 SOL 兑换数量时，我们将向 Jupiter 发出请求，获取用户所请求数量的报价。
Quote.tsx
现在进入 src/api/ 文件夹，并创建一个名为 quote.tsx 的新文件。我们将在此处向 Jupiter 请求报价金额。要在内部接收请求，需要设置 handler 函数，并且只允许 POST 请求。收到前端发送的请求及用户希望兑换的数量后，只需将 config 的 URL 更改为 req.body.amount，然后向 Jupiter 发出请求。
以下是返回 payload 的示例。我们会将此对象传回前端，再将其传递给另一个执行兑换的端点。
请注意，{ data } 解构访问的是 data.data 属性。借助这种方式，我们可以通过 res.status(200).json(data) 直接将 data 传回前端。
现在，我们将在 return 函数中更新报价状态变量，并在内部 API 返回上述数据时更新该变量。之后即可访问 USDC 的确切属性，但需要将其除以 100 万并四舍五入至小数点后 2 位，才能反映正确的 USD 金额。这与原生 SOL 以 Lamports 表示并需要除以 10 亿的方式类似。
现在，只需将其插入 HTML，即可在前端显示。
Jupiter UI：执行兑换
现在我们已经获得模拟报价对象，可以创建一个执行兑换并向 API 端点发送请求的新函数。
现在可以创建一个 API 端点来接收此请求，文件路径为 src/api/swap。此示例使用静态指定的钱包地址，但你也可以改用 useWallet hook，并将其传入端点。使用报价对象向 swap 端点发出请求后，我们会得到一笔序列化交易，接下来只需在前端对其签名。你可以将该对象输出到控制台进行测试。
从后端收到这笔序列化交易后，就可以开始准备发送。首先需要获取交易缓冲区，然后将其反序列化，以便进行签名。假设你已按照之前的连接钱包指南完成设置，只需使用 wallet.signTransaction 即可签署该交易。签名后，再次将交易序列化，并使用 sendRawTransaction 函数发送交易。
还可以添加更多功能，例如像实际的 jup.ag 网站一样显示交易签名。不过，目前交易签名只会记录在浏览器控制台中，技术用户仍然可以访问。
总结： 开始使用 Helius
本指南带你创建了一个 dApp，它使用 Jupiter 的 API 获取报价，并根据用户输入执行从 SOL 到 USDC 的兑换。希望这篇指南未来也能为你提供帮助。一如既往，如有任何问题，欢迎在 Helius Discord 中提问。此外，你还可以使用免费的 Helius RPC 建立连接。有关进一步扩展此项目的一些思路，请参阅下文。如果你已经理解了如何构建与 Jupiter API 交互以获取报价并执行兑换的 dApp，下一步就是利用 Helius 的强大能力进行监控和分析。Jupiter 本身是一个聚合器，能够在多种 DEX 和 AMM 中找到最佳兑换路由，因此流经其中的数据极其丰富，对了解市场动态也很有价值。
后续步骤
- 向 swap.ts 端点发送报价对象时，在 payload 中添加额外属性。
- 显示交易签名
- 支持其他代币，或支持在 USDC 与 SOL 之间双向兑换
- 钱包未连接时的错误处理和响应式适配
- 在后端反序列化并发送 TX，以隐藏 RPC？
使用的资源
订阅 Helius
及时了解 Solana 开发的最新动态，并在我们发布新内容时收到更新