Рабочую демонстрацию приложения на основе Waves Signer можно увидеть по адресу https://vlzhr.github.io/waves-signer-example/src/. В этой технической статье я опишу процесс его создания шаг за шагом после краткого введения.
Официальная документация Waves Signer доступна здесь .
В чем проблема?
Пользовательский опыт - одна из самых сложных частей разработки децентрализованных приложений. На мой взгляд, одна из основных причин отсутствия внедрения технологий - довольно высокий начальный уровень. Начать использовать блокчейн сложно! Отчасти из-за неудобного подхода к авторизации пользователей.
Долгое время единственным надежным способом для разработчика реализовать авторизацию в своем веб-приложении на основе Waves было расширение браузера - Waves Keeper.
Waves Keeper - это технология, которая помогает пользователю хранить данные учетных записей и использовать их для создания транзакций и авторизации в сторонних приложениях. Это безопасно, но у него есть важный недостаток: необходимо установить расширение перед его использованием.
Это означает, что полная функциональность dApp не может быть предоставлена посетителю веб-сайта, если у него не установлен Waves Keeper. Хорошая причина сказать, что начальный уровень блокчейна слишком высок для массового внедрения, не так ли? 🙂
Что такое Waves Signer?
Новый продукт под названием Waves Signer создан для частичного решения проблемы и устранения препятствий для пользователей в экосистеме Waves. 🎉
С этого момента разработчики могут использовать функцию Waves Signer, чтобы позволить пользователям авторизоваться любым предпочтительным способом - с использованием любого поставщика сигнатур.
В качестве поставщика могут быть использованы следующие продукты:
- Клиент Waves.Exchange
- Настольный клиент Waves
- Хранитель волн
- Ledger… или любое другое хранилище закрытых ключей
На данный момент провайдер Waves.Exchange готов. Это означает, что 🔷 пользователи могут авторизоваться в сторонних приложениях с помощью учетной записи Waves.Exchange в любом браузере 🔷 без загрузки каких-либо расширений.
Сразу после следующего изображения я опишу шаги, которые нужно сделать разработчикам для реализации этой функции в своих dApps.
Как использовать Waves Signer?
Давайте узнаем, какие функции разработчики могут реализовать в своих децентрализованных приложениях с помощью Waves Signer. Мы шаг за шагом создадим простое JS-приложение. Пример также опубликован на github.
Наш план будет:
- Настройте нашу среду
- Создание простого UI (пользовательского интерфейса)
- Подготовка Waves Signer к беспроблемной интеграции
- Используя всю мощь Waves Signer 💥
Давайте код !!!
Среда
Мы будем использовать простой JavaScript с сборщиком Webpack. Чтобы настроить среду, пожалуйста:
- Подготовьте файл webpack.config
- Установите библиотеки подписавшего и поставщика с помощью npm
npm i @waves/signer @waves.exchange/provider-web
Пользовательский интерфейс
Давайте начнем кодирование с создания пользовательского интерфейса. Ничего особенного, просто простая HTML-страница с четырьмя кнопками: index.html
Позже мы добавим обработчики к этим 4 кнопкам.
Подготовка подписчика Waves
Теперь давайте воспользуемся библиотеками Waves Signer и Waves.Exchange Provider для создания объекта waves в новом файле JS: index.js.
Поставщик SEED - еще один вариант поставщика. Вот как вы можете использовать его в своих проектах:
Теперь у нас есть объект waves, который можно использовать для создания и подписания транзакций с использованием профиля Waves.Exchange. Давайте добавим базовые функции обработчикам кнопок! 😃
Авторизация пользователя
Waves Signer можно использовать для получения общедоступных данных активной учетной записи пользователя из клиента Waves.Exchange.
В результате этой функции адрес учетной записи отображается в кнопке. Waves.Exchange предоставляет эту информацию, не раскрывая закрытый ключ или начальное значение владельца учетной записи.
Провайдер также может использовать начальную фразу для подписи транзакций, поэтому мы можем заставить Waves Signer отправлять транзакции! 👍
Вызов транзакции скрипта
Транзакции Invoke Script используются для вызова смарт-контрактов, созданных с помощью Ride. Добавим функцию, вызывающую скрипт крана, который пополнит баланс активного аккаунта.
Вы можете видеть, что объект waves имеет метод invoke (), который создает транзакцию вызова, которая отправляется в цепочку блоков с помощью метода broadcast (). broadcast () возвращает обещание, которое можно обработать как обычно.
Кстати, большим преимуществом новой библиотеки Waves Signer является то, что разработчикам не нужно добавлять значение комиссии в объект транзакции: по умолчанию подсчитывается минимальная сумма комиссии.
Если скрипт вызван пользователем успешно, его счет будет иметь ненулевой баланс. Это означает, что теперь пользователь может платить комиссию и транслировать больше транзакций!
Транзакция данных
Первоначально одной из целей Blockchain было хранение данных пользователей. Waves Signer упрощает этот процесс. Разработчики могут очень просто добавить функцию отправки данных в блокчейн:
В результате этого обработчика текущее время будет отправлено в блокчейн.
Единственное, что было изменено в коде по сравнению с предыдущей функцией, - это имя метода. Вы можете использовать waves.data () для создания объекта транзакции данных.
Трансферная транзакция
Последняя кнопка будет использоваться для отправки минимального количества токенов на жестко заданный адрес с помощью транзакции передачи:
Чрезвычайно простой и предсказуемый код, правда? 🙂
Пожалуйста, посмотрите полный JS-файл в репозитории: https://github.com/vlzhr/waves-signer-example/blob/master/src/index.js
Заключение
Waves Signer - это новый продукт, созданный для устранения входного барьера для пользователей экосистемы Waves, что значительно упрощает авторизацию через провайдеров. Прямо сейчас есть 2 поставщика - поставщик семян (в основном для тестов) и поставщик из клиента Waves Exchange, но многие другие будут добавлены в будущем.
Реализовать функциональность Waves Signer довольно просто для сторонних разработчиков. Надеюсь, эта статья помогла вам получить базовое представление о процессе реализации! 👏
Ссылки
Документация по Waves Signer
docs.wavesplatform.com
Исходный код Waves Signer
https://github.com/wavesplatform/signer
Исходный код поставщика Waves.Exchange
https://github.com/waves-exchange/provider-web
Пример Waves Signer Hello World
https://github.com/vlzhr/waves-signer-example
Поделитесь своими отзывами и задайте любые технические вопросы!
Чат разработчиков 🎁
https://t.me/waves_ride_dapps_dev
Спасибо Даниилу Цигельницкому и Иналу Карданову за помощь в подготовке этого урока.
