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