Solana DeFi: интерфейс Jupiter Swap (2023)

Введение

Jupiter — это агрегатор различных DEX и AMM, который находит самые эффективные варианты обмена на разных биржах. Jupiter выбирает для вас маршруты обмена с лучшей ценой среди других DEX и AMM. Это помогает получить наиболее выгодный курс. Jupiter необходим как для простого обмена на стейблкоины, так и для работы с токенами любимых DeFi-игр.

Интерфейс Jupiter Swap: обзор

Из этого краткого руководства вы узнаете, как программно взаимодействовать с Jupiter. Мы создадим dApp, которое использует API Jupiter для получения котировок и обмена SOL на USDC на основе введенных пользователем данных. Приложение демонстрирует такие полезные функции, как получение котировок в реальном времени и подписание пользователем транзакций обмена. По мере изучения статьи вы можете обращаться к указанному ниже репозиторию со всем готовым кодом.

Готовый репозиторий: GitHub — Tidelaw/jup-ui

Требования

Убедитесь, что установлены следующие инструменты:

• Node.js
• Next.js
• Tailwind (может входить в состав Next.js)

Зависимости

Настоятельно рекомендуем следовать руководству Connect Wallet, чтобы правильно настроить папку contexts. Это позволит пользователю подключить кошелек и подписывать транзакции обмена.

Единственные дополнительные зависимости, которые не устанавливаются при первоначальном создании проекта и прохождении руководства по подключению кошелька, — пакеты @project-serum/anchor и axios. Рекомендуем просто скопировать этот package.json, а затем выполнить npm i, чтобы установить все пакеты одновременно.

Swap.tsx

Сначала реализуем получение котировок, которое возвращает расчетное количество USDC за введенную сумму SOL. С Jupiter это довольно просто: нужно указать адреса минтов входного и выходного токенов, а также сумму обмена.

Для хранения количества SOL, которое пользователь хочет обменять, нужна переменная состояния. Сначала настроим поля ввода. В приведенном ниже коде есть и ползунок DaisyUI, и текстовое поле — оба в виде тегов <input>, хотя достаточно одного из них. Для тега input потребуются свойства value и onChange, чтобы он мог постоянно обновлять переменную состояния.

Теперь создадим хук useEffect. Когда пользователь вводит новую сумму SOL для обмена, мы будем отправлять запрос в Jupiter, чтобы получить котировку для указанной суммы.

Quote.tsx

Теперь перейдем в папку src/api/ и создадим файл quote.tsx. В нем мы будем отправлять запросы в Jupiter для получения котировок. Чтобы принимать внутренние запросы, нужно настроить функцию handler, которая будет разрешать только запросы POST. Получив от фронтенда запрос с суммой обмена, достаточно изменить URL в config на req.body.amount и отправить запрос в Jupiter.

Ниже приведен пример возвращаемой полезной нагрузки. Мы передадим этот объект обратно во фронтенд, а затем отправим его в другую конечную точку, где выполним обмен.

Обратите внимание на деструктуризацию { data }, которая обращается к свойству data.data. Благодаря этому можно передать data напрямую обратно во фронтенд через res.status(200).json(data).

Теперь в функции return обновим переменную состояния quoted данными, полученными от внутреннего API. После этого можно обратиться к нужному свойству USDC. Его значение необходимо разделить на миллион и округлить до двух знаков после запятой, чтобы получить правильную сумму в USD. Аналогичным образом нативный SOL выражается в лампортах, поэтому его значение нужно делить на миллиард.

Теперь можно просто вставить это значение в HTML, и оно появится во фронтенде.

Интерфейс Jupiter: выполнение обмена

Теперь, когда у нас есть объект с расчетной котировкой, можно создать функцию, которая выполнит обмен и отправит запрос в конечную точку API.

Теперь создадим конечную точку API для приема этого запроса по пути src/api/swap. В примере используется статически заданный адрес кошелька, однако вместо него можно применить хук useWallet и передать результат в конечную точку. После отправки объекта котировки в конечную точку swap мы получим сериализованную транзакцию, которую останется подписать во фронтенде. Для проверки можно вывести объект в консоль.

Получив сериализованную транзакцию от бэкенда, можно подготовить ее к отправке. Сначала нужно получить буфер транзакции, а затем десериализовать ее для подписания. Если ранее вы выполнили инструкции из руководства по подключению кошелька, то сможете подписать транзакцию с помощью wallet.signTransaction. После подписания снова сериализуйте транзакцию и отправьте ее с помощью функции sendRawTransaction.

Можно добавить дополнительные функции, например отображение подписей транзакций, как на сайте jup.ag. Сейчас подпись выводится только в консоль браузера, но технически подготовленный пользователь по-прежнему может получить к ней доступ.

Заключение: начало работы с Helius

В этом руководстве мы создали dApp, которое использует API Jupiter для получения котировок и обмена SOL на USDC на основе введенных пользователем данных. Надеемся, что руководство пригодится вам в будущем. Как всегда, вы можете задать любые вопросы в Discord Helius. Кроме того, для подключения можно использовать бесплатный RPC Helius. Ниже представлены идеи для дальнейшего развития проекта. Если вы разобрались в принципах создания dApp, которое взаимодействует с API Jupiter для получения котировок и выполнения обменов, следующим шагом станет использование возможностей Helius для мониторинга и аналитики. Jupiter — это агрегатор, который находит лучшие маршруты обмена среди различных DEX и AMM. Поэтому проходящие через него данные чрезвычайно информативны и ценны для понимания динамики рынка.

Следующие шаги

• Добавить дополнительное свойство в полезную нагрузку при отправке объекта котировки в конечную точку swap.ts.
• Отображать подпись транзакции
• Добавить другие токены или обратный обмен между USDC и SOL
• Добавить обработку ошибок и соответствующую реакцию интерфейса, когда кошелек не подключен
• Десериализовать и отправлять TX в бэкенде, чтобы скрыть RPC?

Использованные ресурсы

• https://station.jup.ag/docs/apis/swap-api#using-the-api
• https://station.jup.ag/api-v6/post-swap

‍