> ## Documentation Index
> Fetch the complete documentation index at: https://www.helius.dev/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Персонализированный интерфейс обмена
> Используйте инструментарий Helius AI, чтобы создать персонализированный интерфейс обмена в Solana.
## Введение
В этом руководстве описан процесс разработки с помощью AI для создания интерфейса обмена токенов в Solana. Его ключевая особенность — панель, которая отображает наиболее часто используемые пользователем торговые пары и позволяет выбрать любую из них одним нажатием. Благодаря этому интерфейс становится персонализированным.
В каждом разделе приведены точные использованные промпты, полученные от модели результаты и способы применения [инструментария Helius AI](/docs/ru/agents/overview).
В этом руководстве используются следующие технологии:
* интеграция кошелька [Phantom](/docs/ru/agents/skills/phantom)
* [DFlow](/docs/ru/agents/skills/dflow) для получения котировок и выполнения обменов
* [Helius Sender](/docs/ru/sending-transactions/sender) для быстрой отправки транзакций
* [Helius Enhanced Transactions](/docs/ru/enhanced-transactions/overview) для разбора транзакций
## Итоговый результат
## Настройка
Перед началом установите [плагин Helius для Claude Code](/docs/ru/agents/claude-code-plugin). В Claude Code выполните следующие две команды по отдельности:
```
/plugin marketplace add helius-labs/core-ai
```
```
/plugin install helius@helius-labs
```
В этом руководстве в качестве модели используется Opus 4.6. При необходимости переключитесь на нее.
Это руководство предназначено для демонстрации. Результаты работы большой языковой модели (LLM) по своей природе случайны, поэтому они могут отличаться, даже если вы используете в точности те же промпты, что и в этом руководстве.
## Исходный промпт
Используйте этот промпт, чтобы за один раз определить весь интерфейс и его поведение:
Создай персонализированный интерфейс обмена токенов для 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`:
## Отсутствующие недавние пары
После подключения кошелька мы заметили, что на панели недавних пар отсутствуют некоторые торговые пары, которые мы недавно обменивали. Поэтому мы попросили агента разобраться:
Пара Bonk / SOL не отображается в разделе недавних пар, хотя по ней недавно выполнялись обмены. Можешь проверить, почему?
2BnyMbNYLjYorNwbPjhUBHSQBTbCTjuqouQwZiYY6auh
Чтобы решить эту проблему, агенту требовалось узнать историю транзакций указанного кошелька. Поскольку мы предоставили только адрес кошелька, он решил напрямую использовать два инструмента [Helius MCP](/docs/ru/agents/mcp), чтобы получить эту информацию: `getTransactionHistory` и `parseTransactions`.
Это позволило ему быстро обнаружить ошибку:
> Код полагается исключительно на events.swap вместо анализа фактических переводов токенов.
> Позвольте мне исправить извлечение истории обменов, чтобы напрямую использовать tokenTransfers и
> nativeTransfers.
Агент исправил проблему, изменив способ определения торговых пар: теперь мы просто проверяем, какие токены были переведены на кошелек и с него в рамках транзакции.
Теперь в приложении отображаются все наши торговые пары:
## Доработка интерфейса
Хотя общий дизайн приложения уже выглядит хорошо, компоновка интерфейса обмена все еще требует доработки:
Исправь дизайн блока выбора токенов:
Размести элемент выбора токена справа.
Сделай ширину поля ввода суммы гибкой, чтобы оно аккуратно помещалось в блоке.
Агент оперативно внес эти изменения в интерфейс:
## Отображение котировки
Сейчас суммы токенов в интерфейсе обмена нужно задавать вручную. Это означает, что пользователь не видит, сколько токенов получит в результате.
Было бы полезно автоматически заполнять поле суммы токенов на основе актуальной котировки DFlow.
Когда пользователь вводит сумму для одного токена, получи котировку и отобрази выходную сумму для другого токена.
Чтобы реализовать это, агент использовал свой навык [DFlow](/docs/ru/agents/skills/dflow) для поиска подходящей конечной точки получения котировок.
Теперь интерфейс обмена динамически получает и отображает выходную сумму из котировки:
## Добавление информации об обмене
После включения обмена в блокчейн пользователь не может проверить его в сети. Добавим эту возможность в интерфейс:
После успешного обмена выведи полную подпись транзакции. Также добавь ссылку на нее в обозревателе блокчейна.
Для тестирования выполним пробный обмен:
Теперь эта информация отображается в интерфейсе:
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.