Skip to main content

​
Введение

В этом руководстве описан процесс разработки с помощью AI для создания интерфейса обмена токенов в Solana. Его ключевая особенность — панель, которая отображает наиболее часто используемые пользователем торговые пары и позволяет выбрать любую из них одним нажатием. Благодаря этому интерфейс становится персонализированным. В каждом разделе приведены точные использованные промпты, полученные от модели результаты и способы применения инструментария Helius AI. В этом руководстве используются следующие технологии:
  • интеграция кошелька Phantom
  • DFlow для получения котировок и выполнения обменов
  • Helius Sender для быстрой отправки транзакций
  • Helius Enhanced Transactions для разбора транзакций

​
Итоговый результат

Персонализированный интерфейс обмена с панелью недавних пар

Personalized swap UI with recent pairs panel

​
Настройка

Перед началом установите плагин Helius для Claude Code. В Claude Code выполните следующие две команды по отдельности:
В этом руководстве в качестве модели используется Opus 4.6. При необходимости переключитесь на нее.
Это руководство предназначено для демонстрации. Результаты работы большой языковой модели (LLM) по своей природе случайны, поэтому они могут отличаться, даже если вы используете в точности те же промпты, что и в этом руководстве.

​
Исходный промпт

Используйте этот промпт, чтобы за один раз определить весь интерфейс и его поведение:

Prompt

Создай персонализированный интерфейс обмена токенов для Solana.Добавь интерфейс обмена токенов в привычном стиле: расположенный по центру блок с двумя элементами выбора токенов и кнопкой обмена.Справа от него отобрази список пар токенов, которые пользователь может выбирать напрямую. Рядом с названием каждого токена показывай его логотип.Чтобы сформировать список, сделай следующее: после подключения кошелька пользователем просмотри историю обменов и извлеки 10 последних торговых пар, которые он использовал. Отсортируй их по частоте обменов.
Этот промпт определяет:
  • основную структуру (блок обмена + боковая панель недавних пар)
  • правило персонализации (история кошелька)
  • стратегию ранжирования (частота недавнего использования)
В нашем случае модель предложила следующее:
Позвольте мне создать базовую структуру проекта. Я создам приложение на Vite + React + TypeScript с подключением кошелька Phantom, обменами через DFlow с использованием Helius Sender и историей обменов из Helius Wallet API.
Это разумный стек:
  • Vite + React + TypeScript для современного типобезопасного интерфейса
  • Phantom для подключения кошелька и подписания
  • DFlow для получения лучших котировок
  • API Helius для истории кошелька
  • Helius Sender для отправки транзакций
Модель указала нам добавить файл .env с нашим ключом API Helius. После этого мы запустили приложение с помощью npm run dev:
Исходная версия приложения

Initial version of the app

​
Отсутствующие недавние пары

После подключения кошелька мы заметили, что на панели недавних пар отсутствуют некоторые торговые пары, которые мы недавно обменивали. Поэтому мы попросили агента разобраться:

Prompt

Пара Bonk / SOL не отображается в разделе недавних пар, хотя по ней недавно выполнялись обмены. Можешь проверить, почему?2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
Чтобы решить эту проблему, агенту требовалось узнать историю транзакций указанного кошелька. Поскольку мы предоставили только адрес кошелька, он решил напрямую использовать два инструмента Helius MCP, чтобы получить эту информацию: getTransactionHistory и parseTransactions. Это позволило ему быстро обнаружить ошибку:
Код полагается исключительно на events.swap вместо анализа фактических переводов токенов.
Позвольте мне исправить извлечение истории обменов, чтобы напрямую использовать tokenTransfers и nativeTransfers.
Агент исправил проблему, изменив способ определения торговых пар: теперь мы просто проверяем, какие токены были переведены на кошелек и с него в рамках транзакции. Теперь в приложении отображаются все наши торговые пары:
Отображаются все торговые пары

All trading pairs shown

​
Доработка интерфейса

Хотя общий дизайн приложения уже выглядит хорошо, компоновка интерфейса обмена все еще требует доработки:

Prompt

Исправь дизайн блока выбора токенов:Размести элемент выбора токена справа.Сделай ширину поля ввода суммы гибкой, чтобы оно аккуратно помещалось в блоке.
Агент оперативно внес эти изменения в интерфейс:
Новая компоновка блока выбора токенов

New layout for the token selector box

​
Отображение котировки

Сейчас суммы токенов в интерфейсе обмена нужно задавать вручную. Это означает, что пользователь не видит, сколько токенов получит в результате. Было бы полезно автоматически заполнять поле суммы токенов на основе актуальной котировки DFlow.

Prompt

Когда пользователь вводит сумму для одного токена, получи котировку и отобрази выходную сумму для другого токена.
Чтобы реализовать это, агент использовал свой навык DFlow для поиска подходящей конечной точки получения котировок. Теперь интерфейс обмена динамически получает и отображает выходную сумму из котировки:
Предварительный просмотр котировки с выходной суммой в поле получения

Quote preview showing the output amount in the receive field

​
Добавление информации об обмене

После включения обмена в блокчейн пользователь не может проверить его в сети. Добавим эту возможность в интерфейс:

Prompt

После успешного обмена выведи полную подпись транзакции. Также добавь ссылку на нее в обозревателе блокчейна.
Для тестирования выполним пробный обмен:
Всплывающее окно подтверждения кошелька при подписании обмена

Wallet confirmation popup during swap signing

Теперь эта информация отображается в интерфейсе:
Результат успешного обмена с полной подписью и ссылкой на обозреватель

Successful swap output with full signature and explorer link