Сочетание децентрализации с JAMstack для быстрого создания децентрализованного приложения.
Децентрализованные приложения бывают самых разных форм и размеров. У нас есть децентрализованные маркет-мейкеры, флэш-кредиты, крипто-игры и простые сайты NFT. Угадайте, что мы собираемся сделать? Правильно, простой NFT.
В этой статье быстро рассказывается о настройке NextJS, загрузке Web3 и MetaMask, а также мы рассмотрим основы получения данных из цепочки блоков и отправки простых транзакций для чеканки или покупки NFT.
Настройка
Давайте подготовим все для нашего dApp. Нам нужен простой контракт на блокчейн и кошелек MetaMask.
Метамаска
Мы будем использовать MetaMask для подключения к нашему dApp. Я написал статью о создании нового кошелька здесь. И если вы, как и я, используете Polygon, я написал еще одну статью о настройке вашего кошелька для разработки на Polygon здесь.
Смарт-контракт
Я буду использовать смарт-контракт, развернутый в тестовой сети Polygon Mumbai. Контракт будет соответствовать стандарту ERC721. Поскольку эта статья не касается Solidity и смарт-контрактов, я не буду вдаваться в подробности. Я назову стандартные функции ERC721. Если вы хотите узнать об этом больше, прочтите эту статью здесь.
Web3 и NextJS
Нам нужно установить Web3 и Next с помощью NPM. Вы делаете это, выполнив следующую команду:
npm i web3 next react react-dom
Web3 - это инструмент для подключения к кошелькам и некоторым другим полезным функциям, таким как вычисление Wei из ETH, а NextJS - это фреймворк для создания сайтов.
Создайте папку с именем pages
и создайте в ней index.js
. Это наша домашняя страница NextJS.
Мы импортируем React вместе с useState
и useEffect
, которые мы будем использовать позже. Мы также импортируем Web3 и создаем простую страницу. Вы можете запустить свой код, используя следующую команду:
next dev
Ищу Web3
MetaMask вставляет объект window.ethereum
в наш браузер всякий раз, когда расширение установлено и активно. Мы делаем это, когда наша страница завершает загрузку в ловушке useEffect
, и переводим ее в наше состояние для дальнейшего использования.
Этот код должен быть в функции Index()
перед оператором return
. Когда наша страница загружается, она вызывает нашу useEffect
функцию, в которой мы проверяем наличие объекта window.ethereum
, используя тернарный оператор.
Если объект был найден, мы устанавливаем объект Web3 в состояние React, а также адрес для входа в систему из MetaMask, который нам нужно использовать позже. Вы должны увидеть всплывающее окно MetaMask, если вы запустите этот код, с просьбой подключиться.
Попробуйте добавить console.log
функции для регистрации адреса и объекта Web3 в консоли, чтобы вы могли проверить, на что они настроены.
ABI и вызывающие контрактные функции
Чтобы иметь возможность вызывать функции с нашим недавно созданным объектом web3
, нам нужно добавить в код ABI нашего смарт-контракта. Нам нужен ABI, чтобы добавить объект контракта в наше состояние, из которого мы можем вызывать функции.
Получение ABI
Я понял, что мой ABI использует Remix, онлайн-среду разработки Solidity и компилятор. Добавьте новый файл и вставьте код смарт-контракта в редактор. Щелкните правой кнопкой мыши новый файл в Remix и выберите Скомпилировать. Перейдите на вкладку компиляции слева и нажмите крошечную кнопку ABI
, чтобы скопировать свой ABI. вставьте его в новую переменную нашего кода под состояниями.
Теперь мы можем добавить его в наш код между существующим кодом.
ABI - это представление нашего кода Solidity в JSON, чтобы Web3 знал, что он может вызывать и чего ожидать от кода.
Вызов функции просмотра контракта
Есть два способа вызова контрактных функций из Web3. Выбор функции зависит от типа функции. Для view
функций и функций, не требующих платы за газ, мы можем использовать новое состояние contract
для вызова
contract.methods.your_contract_function().call()
Это вернет JavaScript Promise
, который мы можем разрешить с помощью then()
.
Теперь вы можете добавить переменную в оператор return
, чтобы показать общее количество нашего токена.
Изначально у меня возникла проблема: вызов из contract
вместо c
в useEffect
ничего не вернул. Имейте в виду, что обновление состояния может занять очень короткое время, и, если это возможно, вызывайте его из источника, а не из состояния.
Вызов функции контракта, которая требует затрат на газ
Контракт может иметь payable
функцию. Отсюда мы можем получать платежи, если захотим. Другие функции, такие как mint
, также будут стоить пользователю платы за газ. Эти функции необходимо вызывать по-другому, чтобы наши пользователи могли принимать комиссионные и платежи.
Нам нужно request
транзакцию. У пользователя появится всплывающее окно MetaMask с просьбой принять оплату и плату за газ. В этом случае платеж будет составлять 1 ETH или 1 MATIC, если вы используете Polygon. Цену нужно отправлять в Wei вместо ETH.
Для стандартного контракта ERC721 не нужна цена и payable
в его функции монетного двора. Я считаю, что важно понять, как это сделать, поэтому включил это так, как если бы это было в контракте.
Мы запрашиваем транзакцию, и, если она была принята, мы сообщим пользователю хэш транзакции, который он или она может проверить на Etherscan или Polygonscan.
Вывод
Может показаться, что в руководстве отсутствует какая-то информация, но это не так. В моем первом проекте NFT почти не было кода, кроме HTML и CSS. Я получаю общее количество, я получаю адрес пользователя, и, если пользователь хочет его создать, ему будет предложено, как указано выше.
Полный (грубый и непроверенный) код можно найти здесь, чтобы помочь собрать фрагменты вместе.
Большое спасибо за чтение, удачного дня и удачи в ваших собственных проектах.
Заходите на меня в Twitter и просмотрите мою коллекцию NFT в сети Polygon!
Станьте средним участником и наслаждайтесь контентом тысяч блоггеров.