🔗 Ссылки

📰 Опубликовано

🤓 Интро

Разработчику важно понимать различия между различными блокчейн-платформами, чтобы выбрать ту, которая соответствует вашим потребностям. Одним из ключевых отличий (как по мне) является наличие технических ресурсов и туториалов для разработчиков. У Ethereum есть много статей и руководств, демонстрирующих, как подключить кошелек к веб-сайту, тогда как о Polkadot информации меньше. Это может облегчить разработчикам, которые плохо знакомы с Ethereum, начать работу и научиться создавать приложения на платформе.

Разработчикам также важно знать Polkadot и то, как работать на его платформе, поскольку он обладает уникальными функциями и потенциальными приложениями.

Опыт разработчиков, помимо документации, очень важен в настоящее время для сообщества web3.

В этой статье я покажу пример того, как подключить SubWallet (это то, что я использовал) к сайту Next.js.

Технологии

В Ethereum у нас есть web3.js и ethers.js для подключения к веб-сайту и множество различных библиотек, построенных на их основе. Например, многие проекты, которые я видел, используют wagmi с React.js. Это просто благословение, так как включает в себя полный список функций, которые вам нужны для взаимодействия с блокчейном: Подключить кошелек отображать ENS и информацию о балансах, подписывать сообщения, взаимодействовать с контрактами и многое другое — все с кэшированием, дедупликация запросов и постоянство.

У Polkadot есть готовые библиотеки и инструменты для работы с блокчейном, и одним из них является @polkadot/extension-dapp. Это то, что мы будем использовать для «Подключения кошелька».

🧑‍💻 Кодирование

Мы будем использовать приложение Next.js по умолчанию, поэтому здесь нет ничего нового. Ознакомьтесь с разделом Начало работы, чтобы напомнить себе о Next.js.

Наиболее важным моментом с @polkadot/extension-dapp является то, что для запуска требуется браузер, поэтому с Next.js нам нужно отображать кнопку Подключиться только во время рендеринга на стороне клиента. Для этого воспользуемся динамическим импортом.

🔗 исходный код

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

🔗 исходный код

Начнем с импорта:

InjectedAccountWithMeta — это тип учетной записи, которую мы получим. Я импортировал его для TypeScript.

Наше основное внимание здесь сосредоточено на web3Enable и web3Accounts .

Я использовал цепочку промисов ниже, но если вы предпочитаете try-catch + async / await - сделайте это!

web3Enable

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

web3Accounts

То же самое с web3Accounts — он будет загружать подключенные учетные записи или предлагать вам подключиться к веб-сайту, если вы откроете его в первый раз — очень знакомый опыт для пользователей web3.

Вы можете опробовать процесс на polkadot-extension-dapp-example | Развернуто на Vercel, и выглядит это так:

Отказ от ответственности: я пробовал только при наличии 1 кошелька, но для простого примера этого должно быть достаточно.

🧑‍🏫 Следующие шаги и другие примеры

С подключенным кошельком и доступной учетной записью вы можете делать все, что хотите: проверить, как создать и подписать транзакцию, показать <Identicon/> и многое другое:

https://polkadot.js.org/docs

Более зрелый пример использования @polkadot/api , @polkadot/ui-keyring и других — PolkaVerse. Это децентрализованная социальная сеть, построенная на Subsocial — Блокчейне для социальных финансов.

Кроме того, у меня есть еще один проект, в котором я пытался использовать Subsocial API — сырой-сырой-сырой, потому что мне было удобно подключиться к Subsocial API и Polkadot, чтобы узнать, как все работает. Не стесняйтесь проверить это: https://github.com/andriishupta/subtips-app

Спасибо за прочтение! 🙇

Первоначально опубликовано на https://blog.andriishupta.dev.