Token Negotiator (Brand Connect) — это новый технологический продукт, созданный Smart Token Labs на основе платформы TokenScript. Будучи пакетом NPM с полностью открытым исходным кодом, он позволяет любому веб-сайту выполнять на его основе аттестации токенов внутри и вне цепочки (доказательства проверки).
Ссылка: https://www.npmjs.com/package/@tokenscript/token-negotiator
Цель этой статьи — показать, как вы можете интегрировать Brand Connect на свой веб-сайт, чтобы создать свою первую сеть токенизированных приложений (TAPP — термин, который мы придумали внутри компании). Попутно мы будем использовать популярную библиотеку React, чтобы продемонстрировать опыт и работу подключения токенов к различным сетям.
Чтобы получить максимальную пользу от этой статьи, давайте сначала представим некоторые основные понятия и технические термины, которые будут использоваться в форме вопросов и ответов.
Что такое токены?
Все токены, упомянутые в этой статье, относятся к NFT (неоднородным токенам, выпущенным в блокчейне) или криптографически созданным неподдельным (воспроизводимым) токенам (этот актив в основном хранится в памяти устройства, электронной почте или протоколе сетевого хранения).
Эти типы токенов могут представлять что угодно в цифровом формате, например ключи от машины, билеты на концерт, произведения искусства или вашу личность (DID). Помимо этого, есть много возможностей, которые можно открыть.
Что такое токенизированная сеть?
Токенизированная сеть — это инновационная идея пользовательского опыта с токеном в качестве основной оси.
Что такое аттестация (доказательство проверки)?
Аттестация означает свидетельство или доказательство чего-либо. Например, вам нужно будет предъявить действительный паспорт и билет в аэропорту, чтобы доказать, что вы имеете право на полет. Та же концепция применяется к токенизированной сети, и право собственности на токен может быть подтверждено аттестацией (доказательством проверки).
Почему стоит рассмотреть возможность использования токенов?
-
Токены не ограничены конкретными вариантами использования или централизованными службами.
-
Токены можно аутентифицировать и использовать где угодно.
-
Токены обеспечивают децентрализованную безопасность и конфиденциальность.
-
Токены дают пользователям больше контроля, чем централизованные сервисы.
-
Приняв токены, можно создать новую форму Интернета, которая сделает интерактивную работу пользователя менее сложной, чем существующая, и упростит получение пользователями необходимых услуг.
Есть ли альтернативы?
Традиционные веб-сервисы (широко известные как Web 2.0) предоставляют различные способы реализации решений, которые можно реализовать с помощью токенов (при определенном пороге опыта создания доказательства, которое можно использовать в разных областях), однако мы обсудим это здесь. Раскрытое в этой статье, откроет ваше воображение новой парадигме с гораздо большим количеством возможностей и приложений, чем Интернет, который мы знаем и используем сегодня.
Каковы риски использования (или неиспользования) токенов?
Токенизированные сети — это довольно новая концепция, и в этой области еще предстоит многому научиться и создать, чтобы понять весь ее потенциал и риски использования этой технологии.
На данный момент мы обнаружили, что использование токенов более рискованно для пользователей, которые хотят сохранить свои учетные данные в безопасности, а также для предприятий, которым нужно подходящее решение.
Каковы преимущества?
-
Для предприятий коллекции NFT могут использоваться для охвата новой аудитории, которую раньше нельзя было найти или охватить.
-
Как пользователь, вы сможете использовать одни и те же токены во многих приложениях, что снижает трудности пользователей при получении токенов для авторизации веб-сервисов.
-
Для разработчиков, создающих новые типы приложений, владение токенами может использоваться в качестве основного строительного блока для создания новых типов опыта.
Хорошо, давайте начнем!
Сначала установите новое приложение React согласно следующей команде (обязательно):
npx create-реагировать-приложение мое приложение
После этого смените каталог (каталог)
компакт-диск моего приложения
Затем
запуск npm
Теперь вы должны увидеть следующее:
Далее давайте установим Token Negotiator (Brand Connector) с помощью следующей команды.
npm и @tokenscript/token-negotiator
«tokenContextProvider.js», как показано в каталоге приложения ниже.
После установки на страницу можно загрузить некоторые токены. Затем создайте сценарий под названием «tokenContextProvider.js» в своем каталоге, как показано в каталоге приложения ниже:
В этом файле мы настроим библиотеку (библиотеку), реализованную через API Reacts ContextProvider, которая будет предоставлять токены компонентам (компонентам) через реквизиты.
Добавьте во вновь созданный файл следующее:
Извините, пожалуйста, проверьте исходную ссылку на код .
Измените адрес контракта «0x264...» и цепочку «rinkeby», чтобы они соответствовали адресу смарт-контракта и местоположению, в котором находится принадлежащий вам NFT. Если у вас нет NFT, есть много способов протестировать монеты Mint в сети: некоторые с кодами, некоторые без кодов, например OpenSea.
эмитенты: [
{ collectionID: "demo-tokens", контракт: '0x26472AA24D795AbcB687bddb44d733ef55Ebdf09', цепочка: 'rinkeby' } ]
После того как NFT будет удержан и одновременно настроен Token Negotiator, нам нужно добавить четыре изменения, чтобы библиотека могла считывать токены пользователя.
Затем внесите следующие изменения в «App.js». Библиотека подключается, и отмеченный компонент оверлея внедряется в элемент класса «overlay-tn».
После этого создайте новый компонент под названием «StoreFront.js» для отображения списка продаваемых продуктов.
Извините, пожалуйста, проверьте исходную ссылку на код .
Наконец, создайте новый компонент под названием «StoreItem.js», который будет использоваться для отображения данных для каждого продукта магазина.
Шаги настройки: внесите изменения на основе Create-React-App/webpack 5 или перейдите на завершенную версию, которую мы делали ранее.
В версии 5 Webpack файлы конфигурации Node.js больше не предоставляются по умолчанию, и разработчикам необходимо импортировать необходимые им файлы конфигурации. Это влияет на разработку многих проектов, в том числе Create-React-App, но, к счастью, есть решение, позволяющее решить эту проблему:
https://www.alchemy.com/blog/how-to-polyfill-node-core-modules-in-webpack-5?ref=hackernoon.com
Или, если вы не хотите выполнять этот шаг, вы можете перейти к предыдущим шагам и найти полный пример кода по следующей ссылке:
https://github.com/TokenScript/token-negotiator-examples/tree/main/art-gallery-medium-article-website?ref=hackernoon.com
Отлично, теперь, когда настройка завершена, мы можем начать тестирование приложения: при обслуживании приложения вы увидите следующий экран:
В каталоге проекта в командной строке запустите
запуск npm
1. При нажатии кнопки компонента Token Negotiator отображаются все детали конфигурации, необходимой для использования токенов.
2. Далее конечным пользователям необходимо будет подключить свои кошельки, чтобы там можно было найти их токены.
3. Затем пользователь может выбрать, какую из своих коллекций токенов загрузить на веб-сайт. В этом примере используется только коллекция токенов. В реальном мире вам может потребоваться включить несколько различных целевых функций.В работе пользователя в сети токены могут напрямую реализовывать различные функции.
4. Теперь конечные пользователи могут загрузить свои токены на сайт и получить скидку. Этот метод можно использовать для любой специальной услуги, предлагаемой веб-сайтом определенному набору держателей токенов.
В заключение
В этой статье мы показали, как установить Token Negotiator (Brand Connect) в проект React JS, который позволяет владельцам определенных коллекций NFT включать скидки или другие эксклюзивные услуги.
Мы надеемся, что эта статья вдохновит вас, а использование технической структуры TokenScript расширяет возможности токенов и открывает безграничные возможности.
«TokenScript обеспечит новый стандарт возможности компоновки токенов в будущем Web3, где токены будут столь же повсеместны, как и веб-страницы, а токены являются основным объектом владения, идентификации и взаимодействия», — технический директор Вэйу.