Как создавать смарт-контракты On-Chain и Off-Chain Collection NFT

Введение

В этой серии блогов я собираюсь показать, как создать смарт-контракт коллекции NFT в сети и вне сети, а также создать DApp для создания NFT.

Я также собираюсь показать, как создать собственное DApp, которое я разработал для развлечения в прошлом году, а также узнать о NFT и DApps.

Идея

Идея создания NFT DApp вдохновлена ​​проектом добычи, но я также хочу добавить к нему свои собственные творческие способности и понять работу смарт-контрактов в процессе.

Учусь

До этого я пробовал разные вещи, такие как создание моего [собственного токена в тестовой сети Ethereum] (https://www.thecryptoinsight.com/2021/07/how-to-create-your-own-cryptocurrency-on-ethereum). .html) еще в июле 2021 года, когда я был новичком в сфере криптовалют и понимал такие мелочи, как использование [дерева merkle] (https://www.pranaybathini.com/2021/05/merkle-tree.html).

Именно в этот раз я узнал о remix IDE, кошельке MetaMask, различных тестовых сетях блокчейна Ethereum, развертывании смарт-контрактов через remix IDE. Я также узнал такие мелочи, как то, что мы можем развернуть тот же контракт, который был развернут на блокчейне Ethereum, на других блокчейнах, таких как Binance Smart Chain.

Я решил, что построить, но не знаю, как. Я начал изучать некоторые ресурсы с небольшими знаниями и нашел это [руководство по солидности] (https://cryptomarketpool.com/getting-started-with-solidity/) в сообщении Reddit.

Я изучил основы Solidity, чтобы понять код проверенных смарт-контрактов и разработать новые.

Разработка смарт-контрактов

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

Я знаю, что стандарт ERC-721 используется для создания NFT и стандарт ERC-20 для создания нашего собственного токена на блокчейне Ethereum, но не знаю, какие именно функции нам нужно определить в этих стандартах.

Я обратился к документам openzeppelin, чтобы узнать больше о функциях ERC-721. Итак, без дальнейших уроков, я перейду к разработке смарт-контрактов.

Чтобы разработать собственный смарт-контракт NFT, нам требуется

• Принадлежность Смарт-контракт

• Он используется для управления правом собственности на контракт. По умолчанию владельцем смарт-контракта является адрес, с которого он развернут.

• Он имеет функции, которые позволяют передать право собственности на контракт на другой адрес, используя [transferOwnership(newOwner)](https://docs.openzeppelin.com/contracts/2.x/api/ownership#Ownable-transferOwnership-address-)метод.

• Это позволяет вам отказаться от права собственности на контракт с помощью [renounceOwnership()](https://docs.openzeppelin.com/contracts/2.x/api/ownership#Ownable-renounceOwnership--)

• Он предоставляет модификатор [onlyOwner()](https://docs.openzeppelin.com/contracts/2.x/api/ownership#Ownable-onlyOwner--), позволяющий выполнять некоторые функции единственным владельцем, например запуск продажа, приостановка действия контракта, раздача NFT из контракта.

• Enumerable721 Смарт-контракт

• Он расширяет [стандарты ERC721] (https://docs.openzeppelin.com/contracts/2.x/api/token/erc721), поэтому нам не нужен наш контракт для явного расширения контракта ERC721.

• Это обеспечивает перечисление всех идентификаторов токенов в контракте, а также всех идентификаторов токенов, принадлежащих каждой учетной записи.

• См. функции, предоставляемые [документацией] (https://docs.openzeppelin.com/contracts/4.x/api/token/erc721#ERC721Enumerable).

• [ReentrancyGuard] (https://docs.openzeppelin.com/contracts/4.x/api/security#ReentrancyGuard) Смарт-контракт

• Этот модуль помогает предотвратить повторные вызовы функции, что означает, что он делает доступным модификатор [nonReentrant](https://docs.openzeppelin.com/contracts/4.x/api/security#ReentrancyGuard-nonReentrant--), который может применяться к функциям, чтобы убедиться, что к ним нет вложенных (повторно входящих) вызовов.

• Функции, помеченные как нереентерабельные, не могут вызывать друг друга.

• Pausable Смарт-контракт

• Также рекомендуется расширить это, что позволит дочерним контрактам реализовать механизм аварийной остановки, который может быть запущен авторизованной учетной записью.

• Это используется через наследование и делает модификаторы whenNotPaused

и whenPaused, которые можно применить к функциям вашего контракта.

Мы можем сделать так, чтобы наш основной смарт-контракт расширял эти смарт-контракты напрямую, импортируя их в наш код.

Код смарт-контракта Loot Royale Onchain NFT находится здесь — https://gist.github.com/pranaybathini/52f4ff2da4c3518855264febe7d95739.

Давайте обсудим функции внутри основного смарт-контракта — BattleRoyale.sol.

Важны три функции.

• Функция, позволяющая пользователям чеканить токены NFT, заплатив необходимую сумму за чеканку NFT, которую они чеканят.

• Функция для получения URI токена NFT. Это принимает идентификатор токена и дает JSON с NFT. В нашем случае это SVG-изображение, сгенерированное из кода On Chain. Никаких внешних вызовов не требуется.

• Функция для получения суммы с адреса контракта на ваш собственный адрес или любой адрес, который вы хотите снять. Я написал функцию для вывода на адрес владельца смарт-контракта.

Дизайн NFT для смарт-контракта в сети

Вот как выглядит один из моих NFT.

Простой дизайн HTML CSS внутри тега svg с изогнутой рамкой, а также отображает идентификатор токена вверху. Мне потребовалось некоторое время, чтобы понять, что мы можем включать html CSS внутри тега svg. Первоначально я взял код HTML CSS и использовал [этот сайт] (https://www.hiqpdf.com/demo/ConvertHtmlToSvg.aspx) для преобразования в SVG, но размер выходного svg очень большой.

Еще одна проблема, с которой я столкнулся при хранении этих данных для проектирования, заключалась в том, что максимальный размер смарт-контракта не может превышать 24576 байт. Итак, я переместил код в другой смарт-контракт, а затем в библиотеку, чтобы повторно использовать его в другом контракте. Это всего лишь одна строка, но потребовалось некоторое время, так как я сначала попытался ее оптимизировать, прежде чем понял, что могу перенести ее в другой контракт. Обучение++.

Вот ссылка на [SVG-код для вышеупомянутого NFT.] (https://gist.github.com/pranaybathini/d3875355c93e726899c5104cb388cb66?short_path=a38f07c)

Также вы можете увидеть мои данные в коде, отличном от лут проекта. Вы уже должны были догадаться, откуда я взял свои данные. Теперь давайте посмотрим, что такое NFT в сети и вне сети.

Ончейн и оффчейн NFT

Разница между NFT в цепочке и вне цепочки, как следует из названия, заключается в том, что мы будем хранить все данные, связанные с NFT, в самой цепочке блоков для NFT в цепочке.

В случае вне сети мне нужно предоставить некоторые внешние URL-адреса, такие как https://somedomain.com, ipfs:// sha256hash/1.png.

В обоих случаях мне нужно вернуть выходной файл JSON в соответствии со [стандартом метаданных NFT.] (https://docs.metaplex.com/token-metadata/Versions/v1.0.0/nft-standard)

Пример URL-адреса изображения IPFS выглядит следующим образом:

ipfs://QmV3yGkzx2Uw3NHPZV9SAMLA58j7LvCFLFYtyfCMBAvstF/2.jpg

Вы можете открыть это прямо в храбром браузере — булавка, которую я нарисовал в мобильном приложении Art Flow давным-давно.

Если бы нам пришлось создавать NFT вне сети, как бы выглядел код?

Обратитесь к [этой ссылке github gist для смарт-контракта вне сети.] (https://gist.github.com/pranaybathini/dbb8c34dfbed1720f33960669342148b)

Я установлю IPFS или HTTPS BASE URI в контракте, когда начнется продажа, или в настоящее время разработчики раскрывают NFT после того, как все NFT будут отчеканены.

Просто написать функцию для установки переменной URI и вызвать ее после того, как все NFT будут отчеканены.

Есть две переменные

• Базовый URI — фактический URI для NFT

• Слепой URI — пока мы не раскроем NFT, это изображение или видео будет одинаковым для всех отчеканенных NFT.

URI, который мы должны установить, будет выглядеть так: ipfs://QmV3yGkzx2Uw3NHPZV9SAMLA58j7LvCFLFYtyfCMBAvstF/

Когда мы запрашиваем, наш идентификатор токена добавляется к нему, и Open Sea или любой другой рынок может найти и отобразить его.

Начальные шаги — активировать контракт, а затем установить слепой URI. Как только все NFT отчеканены, вы можете показать отчеканенные NFT.

Вывод метода tokenURI будет выглядеть так:

```javascript

"image": "ipfs://QmV3yGkzx2Uw3NHPZV9SAMLA58j7LvCFLFYtyfCMBAvstF/1.png",

"name": "Королевская добыча 1",

"description" : "Некоторое описание"

Компиляция и развертывание в блокчейне

Теперь у нас есть наши контракты, как нам развернуть их в сети блокчейна. Многие блокчейны разветвили Ethereum с дополнительными изменениями, чтобы добавить функции разработки DApp. Вы можете выполнить развертывание в любой сети, поддерживающей Solidity.

Давайте развернем этот сетевой смарт-контракт NFT в тестовой сети Ethereum Ropsten. Но перед этим нам нужно

• Remix IDE - Вы можете использовать его онлайн. Просто нажмите https://remix.ethereum.org/. Если вы хотите запустить его в автономном режиме, вы можете обратиться к этому блогу о том, как загрузить его в докер и запустить.

• Кошелек Metamask. Если у вас нет кошелька metamask, следуйте этому блогу, чтобы установить кошелек metamask в выбранном вами браузере. Если вы используете Brave, он встроен в браузер. Вы можете получить к нему доступ из своих настроек.

• Получите немного эфира тестовой сети Ropsten / эфира тестовой сети Rinkeby / тестовой сети Polygon Matic, чтобы развернуть контракт в сети ropsten. Смените сеть на ropsten на метамаске.

• https://faucet.ropsten.be/ — сборщик тестовой сети Ropsten

• https://faucet.polygon.technology/ — сборщик тестовой сети Polygon

• Если вы развернетесь в тестовой сети Rinkeby или полигональной тестовой сети, вы сможете увидеть свои NFT в тестовой сети OpenSea. Следующие шаги одинаковы для всех сетей.

Следующие шаги

• Скопируйте контракт в вашу IDE для ремикса. Это должно выглядеть так, как показано ниже.

• Вы можете выбрать версию компилятора на любую версию выше 8.0, но помните эту версию, которую вы использовали для компиляции. Это необходимо при проверке контракта в обозревателе блоков.

• Если вы не знаете, что такое обозреватель блоков, обратитесь к этому блогу, чтобы разобраться в деталях.

• Перейдите на вкладку компилятора и нажмите «Компилировать». Вы должны увидеть зеленую галочку, как показано ниже.

• Перейдите на вкладку развертывания. Вы должны выбрать контракт как BattleRoyale.sol

• По умолчанию среда будет Javascript VM. Все транзакции будут выполняться в блокчейне песочницы в браузере. Это означает, что при перезагрузке страницы ничего не сохранится. Виртуальная машина Javascript является собственной цепочкой блоков, и при каждой перезагрузке она запускает новую цепочку блоков, старая не сохраняется.

• Вам необходимо выбрать Injected Web3 в качестве среды, которая позволит нам внедрить метамаску и выполнить развертывание в сети, выбранной в метамаске. Вы должны увидеть свою учетную запись метамаски и баланс в разделе учетных записей.

• Когда вы нажмете «Развернуть», вам будет предложено дважды. Сначала развертывается библиотека CardDesign, а затем наш смарт-контракт.

• Вы получите два уведомления о метамасках после развертывания контрактов. Нажмите на них, и вы будете перенаправлены в обозреватель блоков Ropsten. Вы также можете просмотреть транзакции на вкладке активности в метамаске.

• Поздравляем, теперь запущен смарт-контракт On-chain NFT — loot royale.

Но как мы с ним взаимодействуем? Позже я подробно объясню, как взаимодействовать с ним из нашего пользовательского интерфейса реагирования. Давайте посмотрим, как взаимодействовать с контрактом из обозревателя блоков.

К вашему сведению, обозреватель блоков также является децентрализованным приложением.

Проверка контракта в проводнике блокчейна

Теперь давайте проверим контракт в проводнике блокчейна и взаимодействуем с ним из самого проводника.

• Откройте адреса контрактов библиотеки дизайна карт на одной вкладке (нам нужен этот адрес). Откройте адрес контракта Loot Royale на другой вкладке, как показано ниже.

• Нажмите «Подтвердить» и «Опубликовать» и заполните данные ниже. Я использовал 8.7 в качестве версии компилятора при развертывании из ремикса, поэтому я использую то же самое здесь. Нажмите «Продолжить».

• Скопируйте код из remix IDE и вставьте часть кода. Удалите строку из части конструктора, как показано ниже.

• Введите адрес библиотеки, как показано ниже, и подтвердите, что вы не робот, и нажмите «Подтвердить и опубликовать».

Теперь наш контракт проверен. Это выглядит как на изображении ниже. Вы должны увидеть функции для чтения и записи в блокчейн.

Перейдите в раздел записи контракта и нажмите «Подключиться к web3», вам будет предложено подключиться к провайдеру, как показано ниже.

Нажмите на Metamask, он предложит вам подключиться. Нажмите «Подключиться к web3» еще раз, и вы сможете подключить проводник к Metamask, как показано ниже.

Теперь нажмите на функцию mintSingle, это будет NFT. Введите 0,01 в качестве цены NFT, как показано ниже.

Поздравляем. Вы успешно выпустили NFT. Теперь давайте просмотрим URI токена.

Вы можете перейти на testnets.opensea.io, подключить свой кошелек, и вы сможете увидеть свои NFT Loot Royale.

Loot Royale NFT в тестовой сети Open sea

В следующем блоге я покажу, как спроектировать внешний интерфейс для lootroyale.xyz, чтобы чеканить NFT в рояле добычи, поскольку этот блог уже стал длинным.

Любая обратная связь приветствуется. В случае каких-либо сомнений или проблем или любых новых идей, пишите мне в Твиттере - @pranay_bathini. Давайте учиться вместе.

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

Эта статья также была опубликована [здесь] (https://medium.com/@pranaybathini/creating-an-loot-royale-nft-collection-dapp-e9b5e43452c6)