Интерфейс dApp: подключение кошелька, понятные транзакции и честные статусы

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

Рассчитать стоимость

от 39 900 ₽

стоимость пакетов

8–11 недель

срок типового проекта

отраслевых модуля в калькуляторе

Строим интерфейсы на React и Next.js с библиотеками wagmi и viem: они берут на себя подключение кошельков, чтение состояния контрактов и отправку транзакций с типизацией по ABI. Подключение поддерживает расширения браузера и мобильные кошельки через WalletConnect. Если пользователь в другой сети, интерфейс предлагает переключиться, а не выдаёт непонятную ошибку после подписи.

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

Для истории операций и списков читать блокчейн напрямую из браузера медленно и ненадёжно. Подключаем индексатор, который собирает события контрактов в базу и отдаёт их интерфейсу быстрым API. Работаем и с вашими существующими контрактами: достаточно адресов, ABI и описания того, что должен уметь пользователь.

Состояния транзакции, которые видит пользователь

Состояние	Что показываем	Что может сделать человек
Симуляция не прошла	Причина простыми словами: мало средств, пауза, лимит	Исправить сумму или подождать
Ждём подписи	Что подписывается и примерная комиссия	Подтвердить или отменить в кошельке
Отправлено	Ссылка на транзакцию в обозревателе	Закрыть окно: статус обновится сам
Подтверждено	Итог операции и новый баланс	Перейти к следующему действию
Отклонено сетью	Причина из ответа контракта	Повторить с исправленными данными

Калькулятор

Веб-интерфейс dApp (wagmi / viem) — расчёт стоимости

Отраслевые модули уже отмечены. Уберите лишнее или добавьте нужное — сумма в счёте будет та же, что в смете.

Выберите пакет

Добавьте нужное

необязательно

+ 29 900 ₽

+ 7 900 ₽

+ 9 900 ₽

+ 144 900 ₽

+ 29 900 ₽

+ 12 900 ₽

+ 9 900 ₽/мес

входит в пакет

от 14 900 ₽ за сеть

+ 24 900 ₽

Ваша смета

Пакет «Орбита»124 900 ₽
Индексатор событий29 900 ₽

Стоимость работ

154 800 ₽

Срок: 8–11 недель

Счёт сейчас: 77 400 ₽ — предоплата 50%, остаток после приёмки

Без регистрации. Счёт и анкета придут на почту сразу. Гарантия 3 месяца после запуска.

Чтение напрямую из сети или через индексатор

Напрямую

Не нужен свой сервер.
Подходит для текущих балансов и параметров.
Списки и история загружаются медленно и упираются в лимиты узлов.

Индексатор

История и списки отдаются мгновенно.
Нужны сервер, база и обработка реорганизаций.
Данные можно сверять с сетью по номеру блока.

Как проверяем интерфейс перед запуском

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

Сравниваем данные индексатора с прямым чтением из сети на одних и тех же блоках. Расхождение означает ошибку обработки событий, и её нужно найти до того, как пользователи увидят неверную историю операций.

Интерфейс для контрактов стейкинга с историей операций

«Орбита» 124 900 ₽ и индексатор событий 29 900 ₽. Итого 154 800 ₽, ориентир 8–11 недель. Сумма включает интерфейс, интеграцию с контрактами, симуляцию транзакций и индексатор. Дизайн-систему уровня продукта и хостинг индексатора считаем отдельно.

Собрать свой вариант

Вопросы и ответы

Вопросы об интерфейсе dApp

Сделаете интерфейс для уже развёрнутого контракта?

Да. Нужны адреса, ABI и верифицированный код или доступ к исходникам. Сначала читаем контракт, чтобы понять все состояния и ошибки, иначе интерфейс не сможет их объяснить пользователю. Если в контракте найдём проблему, скажем об этом до начала работ.

Почему не бесконечное разрешение на списание?

Бесконечное разрешение удобно, но если контракт, которому оно выдано, окажется уязвимым, под угрозой весь баланс токена у пользователя. Разрешение на точную сумму требует лишней подписи, зато ограничивает ущерб. Можно дать пользователю выбор с понятным объяснением.

Работает ли интерфейс на телефоне?

Да. Мобильные кошельки подключаются через WalletConnect или открывают dApp во встроенном браузере. Проверяем основные сценарии на нескольких устройствах, потому что поведение кошельков на телефонах заметно различается.

Где размещается интерфейс?

Как обычный сайт: на вашем сервере или хостинге. Индексатору нужен сервер и база данных. Можно разместить копию интерфейса в децентрализованном хранилище, чтобы пользователи могли работать с контрактом даже при недоступности основного домена.

Источники и проверка сведений

Смотрите также