Сочетание децентрализации с 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!

Станьте средним участником и наслаждайтесь контентом тысяч блоггеров.