Новый интерфейс моста Rainbow Bridge 2.0

Rainbow Bridge — это официальный мост для перевода токенов между блокчейнами Ethereum, NEAR и Aurora.

Первоначальная версия моста 1.0 поддерживала перевод только между Ethereum и NEAR, а когда в последствии добавилась поддержка сети Aurora, появились некоторые ограничения, которые побудили нас провести пересмотр интерфейса моста. В этой статье мы рассмотрим некоторые решения и детали, которые вошли в совершенно новую, недавно выпущенную версию моста Rainbow Bridge 2.0.

Унификация продуктов

Версия моста 1.0 размещалась на домене ethereum.bridgetonear.org. Когда добавилась поддержка сети Aurora, этот мост размещался отдельно на aurora.bridgetonear.org. Несколько продуктов на разных доменах — явно не идеальное решение с точки зрения пользовательского интерфейса и масштабируемости.

В версии 2.0 мы объединили все в один продукт, размещенный на легко запоминающемся домене rainbowbridge.app. В рамках единого интерфейса мост теперь поддерживает перевод токенов между любыми из поддерживаемых сетей.

Такой подход дает возможность легко добавлять поддержку еще большего числа сетей в будущем. Например, одна сторонняя команда недавно создала коннекторы к блокчейну Binance Smart Chain, поддержку которого мы планируем вскоре добавить в Rainbow Bridge 2.0.

Техническая архитектура

Мы создали Rainbow Bridge 2.0, интегрировав наши легкие клиенты в приложение Next.js, поддерживаемое headless CMS (системой управления контентом, которая работает только с универсальным содержимым, без фронтенда, а передача данных на любой фронтенд осуществляется через внешний API).

Использование внешней CMS позволяет людям без технических знаний управлять некоторыми частями пользовательского интерфейса продукта и позволяет использовать такие классные программные элементы, как, например, контекстно-зависимые часто задаваемые вопросы (FAQs), которые появляются в интерфейсе только в определенных местах.

Например, для всех переводов в Ethereum требуется две транзакции, которые нельзя отменить. Поскольку в 1.0 пользователи часто путались в этом вопросе, теперь мы можем внести ясность, показав соответствующий часто задаваемый вопрос на этапах одобрить (approve) и подтвердить (confirm).

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

Конечная цель, конечно же, — это продукт, который автоматически создает документацию и не требует руководства пользователя!

Автоматическое управление кошельком MetaMask

Если вы пользователь DeFi-приложениий и работаете при этом с несколькими блокчейнами, вы наверняка сталкиваетесь с постоянными неудобствами, например, приложение просит «переключиться на сеть Ethereum» или, еще хуже, приходится вручную добавлять новую сеть (конечную точку RPC) в MetaMask.

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

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

В видео ниже я не настроил сеть Aurora в MetaMask. Как видите, мост инициирует запрос в MetaMask настроить и подтвердить добавление Aurora, а затем переключиться на нее как на сеть по умолчанию.

Новый интерфейс переводов

В видео ниже мы рассмотрим создание нового перевода из сети Aurora в сеть Ethereum, в ходе которого вы увидите следующие моменты:

На первом экране мы видим контекстно-зависимый частый вопрос, информирующий пользователя о том, что в настоящее время мы поддерживаем только кошельки MetaMask и NEAR.
На втором экране, пока MetaMask считывает состояние сети и кошелька пользователя (что может занять некоторое время), вместо иконок токенов мы видим серые иконки-заглушки. Когда будут получены необходимые данные, мы увидим реальные иконки токенов. Здесь отобразятся только те токены, которые есть у пользователя на балансе.
Конечно, мы также предоставляем ссылку, по которой пользователь может увидеть все токены, поддерживаемые мостом. На этом экране токены, которых нет у пользователя на балансе, будут серыми (поскольку их невозможно выбрать).
Мы показываем пользователю его баланс токенов в сети назначения, так как это часто бывает полезно при подсчете суммы, которую нужно перевести.
Мы предоставляем пользователю помощник, который позволяет в один клик отправить все токены на балансе на перевод.
... и если пользователь выбрал ETH, в соответствующих случаях он увидит предупреждение о том, что нужно оставить немного на комиссию ETH!

Незавершенные и прошлые транзакции

На главном экране, где отображаются транзакции, нужно много уместить, и, соответственно, многое учесть в интерфейсе:

Мы визуально отделяем незавершенные (pending) транзакции от завершенных, чтобы пользователь сразу видел транзакции, которые требуют действий или внимания с его стороны.
Для незавершенных транзакций мы визуально указываем направление перевода (включая небольшую анимацию, которая не видна на скриншоте).
Ту часть экрана, где отображены незавершенные транзакции, можно масштабировать и прокручивать по горизонтали. На скриншоте вы можете видеть, что у меня есть одна транзакция, требующая завершения, и три, которые должны были быть завершены, но все еще остаются незавершенными.
Для завершенных переводов мы визуально выделяем иконки и суммы токенов и указываем направление перевода.
Мы строим интерфейс так, чтобы создание новой транзакции всегда было доступно в верхнем левом углу.
Мы предоставляем поддержку клиентов посредством прямой интеграции с HelpScout. Пользователь может отправить заявку в службу поддержки прямо из Rainbow Bridge с помощью значка чата в правом нижнем углу.
И, конечно же, все это прекрасно работает на мобильных устройствах!

Функции после завершения перевода

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

Просмотр исходной транзакции в проводнике.
Копирование идентификатора транзакции исходной транзакции.
Копирование адреса контракта токена в сети назначения.
Добавление токена назначения в MetaMask, чтобы он отображался в списке активов.
Наконец, скрытие перевода. Иногда, как в моем случае, есть транзакции, которые навсегда останутся незавершенными в блокчейне, и я хотел бы просто убрать их из интерфейса моста. Эта функция позволяет мне сделать именно это.

Фильтры транзакций

Rainbow Bridge 2.0 работает с несколькими блокчейнами и предоставляет до шести различных комбинаций направлений для переводов. Поэтому чтобы быстро найти нужную завершенную транзакцию, вам понадобятся фильтры. И об этом мы тоже позаботились!

Сообщения о текущем состоянии

Иногда возникают проблемы, которые нарушают работу моста — например, недавняя DDoS-атака. Чтобы пользователи были в курсе последних событий, мы сделали управляемую системой CMS страницу состояния, на которой отображается полный текст последнего обновления и краткие (но с возможностью развернуть) сводки всех прошлых обновлений.

При появлении предупреждения о состоянии — красного (сообщение о проблеме), желтого (предупреждение) или зеленого (все в порядке) — мы отображаем баннер соответствующего цвета вверху интерфейса моста.

При редизайне интерфейса у нас возник вопрос, что делать с «зелеными» обновлениями состояния, которые обычно используются для объявления о том, что проблема решена. Стоит ли отображать их так же, как другие баннеры? Ведь нам вряд ли нужно видеть их все время.

Поэтому мы решили сделать так, чтобы зеленые баннеры отображались только 24 часа, а затем исчезали из главного интерфейса (но оставались в архиве страницы состояния).

Итоги

Удобный пользовательский интерфейс — это именно то, что принесет криптовалюты в массы. Мы по-настоящему гордимся новым Rainbow Bridge 2.0 и надеемся, что в плане удобства использования нашего криптомоста мы продвинулись в отрасли на несколько шагов вперед.

Но мы не собираемся на этом останавливаться. У нас запланировано много новых функций, в том числе и некоторые новшества в отрасли! И, конечно же, мы будем прислушиваться к нашим пользователям, чтобы делать наши продукты все более удобными.

Мы надеемся, что вам понравится пользоваться мостом Rainbow Bridge 2.0, и если вы захотите поделиться вашим опытом использования моста, напишите нам в твиттер или Discord!