介绍
本指南引导您通过 AI 辅助的开发流程在 Solana 上构建一个代币交换 UI。其突出特点是一个面板，显示用户最常交易的对，并让他们通过单击选择一个。这使得它成为个性化的体验。 每个部分展示了使用的确切提示，模型生成的输出，以及我们如何使用 Helius AI 工具包。 本指南展示了以下技术：- Phantom 钱包集成
- DFlow 用于报价和交换
- Helius Sender 用于快速交易发送
- Helius Enhanced Transactions 用于交易解析
最终结果
带有最近交易对面板的个性化交换 UI
设置
在开始之前，安装 Helius Claude Code 插件。在 Claude Code 中，将这些作为两个单独的命令运行：初始提示
使用此提示在一个步骤中定义完整的 UI 和行为：提示
构建一个为 Solana 个性化的代币交换界面。添加一个常规风格的代币交换 UI：居中的框，带有两个代币选择器和交换按钮。在其右侧，显示用户可以直接选择的代币对列表。显示每个代币的标志及其名称。要计算列表，请执行以下操作：在用户连接他们的钱包后，查看他们的交换历史记录，提取他们使用的 10 个最近交易对。按交换频率排序。
- 核心布局（交换框 + 最近交易对）
- 个性化规则（钱包历史）
- 排名策略（最近使用的频率）
让我搭建项目。我将创建一个带有 Phantom 钱包连接的 Vite + React + TypeScript 应用程序，使用 Helius Sender 进行 DFlow 交换，并从 Helius Wallet API 中获取交换历史。这是一个合理的技术栈：
- Vite + React + TypeScript 用于现代、类型安全的 UI
- Phantom 用于钱包连接和签名
- DFlow 用于最佳报价
- Helius API 用于钱包历史
- Helius Sender 用于交易发送
.env 文件。完成后，我们使用 npm run dev 启动应用程序：
应用程序的初始版本
缺少最近交易对
连接钱包后，我们发现最近交易对面板缺少一些我们最近交换过的交易对。因此，我们要求代理进行调查：提示
尽管最近有交换，但它没有显示 Bonk / SOL 作为最近交易对。能检查一下吗？2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
getTransactionHistory 和 parseTransactions。
这让它能快速识别出问题：
代码仅依赖于 events.swap，而不是分析实际的代币转移。
让我修复交换历史提取，以直接使用 tokenTransfers 和 nativeTransfers。因此，它通过更改我们检测交易对的方式来解决了问题：我们现在只需检查哪些代币在交易中转入和转出钱包。 我们现在在应用程序中可以看到我们所有的交易对：
显示所有交易对
UI 优化
虽然应用程序的整体设计已经很好，但交换 UI 的布局仍需要一些改进：提示
修复代币选择框的设计：将代币选择器放在右侧。使金额输入字段的宽度具有灵活性，以便它整齐地适应框中。
代币选择框的新布局
报价显示
目前，交换 UI 中的代币数量必须手动设置。这意味着用户无法看到他们将获得多少代币。 可以通过最近的 DFlow 报价自动填充值代币数量字段。提示
当用户输入一个代币的数量时，获取报价并显示另一个代币的输出数量。
接收字段中显示输出数量的报价预览
添加交换信息
一旦交换完成，用户无法在链上验证。让我们将其添加到 UI：提示
请在交换成功后打印完整的交易签名。同时将其链接到一个浏览器。
交换签名期间的钱包确认弹出窗口
带有完整签名和浏览器链接的成功交换输出