June 18, 2022

Своя NFT коллекция без строки кода: полный гайд

Сегодня поведаю вам самое сокровенное — как сделать свою деген коллекцию с нуля, при том условии, что ты фулл ёбик в коде. Однако в статье учитывается, что вы уже имеете некоторое количество слоев для своих будущих NFT

ПО СЕКРЕТУ: рандомная школьница с графическим планшетом и ярым желанием купить энергетик за 150 рублей сможет вам наклепать дохуя элементов для будущей коллекции. Не важно какого качества. Ваще пахую

😁 Что понадобится

  • Отличная идея и желание заработать 10 ETH
  • Установленный VS Code
  • Установленный NodeJS
  • Прямые руки
  • Слои

Еще раз, слои — это папка, которая содержит элементы вашей будущей деген хуйни. Это могут быть: фон, формы тела, партиклы, глаза, рты и тд, что угодно

В моем примере я рассмотрю генерацию различных пирожных и тортиков для ETH коллекции

😮 Настраиваем проект

1) Для начала откроем терминал и впишем следующий код:

npm install -g yarn

Данный код загружает менеджер пакетов yarn, который будет нам очень нужен в дальнейшем.

2) Зайдем на супер-вкусный репозиторий и возьмем его URL ссылку. Этот репо будет нужен для работы с PNG слоями.

Далее пишем данный код:

git clone <URL> my_degen_nft

Код создаст папку репозитория с именем, которое вы задали в конце. Здесь это "my_degen_nft"

🧐 Изучаем код

Сейчас возникнет вопрос — а название статьи не кликбейт? Нет, я же не знаю что такое кликбейт, поэтому не смогу ответить вам на это. Пон

Открыв папку с кодом вы возможно ахуеете. Но не стоит пугаться, нам понадобится лишь файл src->config.js

Нас интересует функция layerConfigurations, благодаря которой мы сами сможем настроить свою коллекцию. Даже визуально уже понятно, как все просто будет дальше (😐 хуй тебе)

Если вы умничка, то можете еще больше узнать из документации в репозитории. Дерзайте, а пока пойдем дальше по тутору

Для теста у меня есть данная такая папка со PNG слоями:

В каждой папочке изображения компонентов для коллекции. Важно, чтобы они были именно в PNG. Также очень важны названия папок — именно это будущие названия атрибутов на OC или ME, а имя файла — признак

Кроме того, вы, возможно, заметили “#” в конце имен файлов. Это позволит настраивать редкости для NFT. Способ определения редкости заключается в суммировании весов для определенной папки, а затем делении значения одного из них на это число.

Ничего не понятно, но так надо. Чем ниже число, тем реже попадаться будет элемент.

Например, общее значение всех весов внутри папки “Background” равно 21000. Если бы я хотел рассчитать редкость для “Bakery Blue”, я бы взял 4200 и разделил его на 21000. Это делает его редким на 20%.

!! ИДЕМ ДАЛЬШЕ !!

Как только у вас будут готовы все изображения и слои + имена, пришло время перейти к коду. Возьмите свои папки и замените ими папки, которые находятся внутри каталога “layers”.

Это должно выглядеть примерно так:

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

Возвращаемся в src->config.js к layerConfigurations и меняем все. Надеюсь не тупые, все поймете.

ВНИМАНИЕ: вы должны располагать слои в правильном порядке. Например фон должен быть сзади всех, а те же очки — спереди, ниже пример как должно быть

Обратите внимание, что я установил значение growEditionSizeTo равным 10. Этот блок кода сгенерирует 10 NFT, извлекая изображения из указанных мной папок.

Начиная с фона (Background), он выберет случайное изображение внутри папки, затем переместится на тарелку (Plate) и так далее.

🥵 Запускаем код

Итак, время для генерации нашей коллекции. Открываем снова терминал через папку с нашим кодом и пишем:

Yarn

Это позволит установить зависимости и настроить проект. После пишем:

Yarn build

Если все сделано верно, то создастся папка Build со всеми сгенерированными изображениями. Это наши готовые деген NFT, ура!

Если результат вас устраивает, то можно настраивать мета-данные.

Заходите в терминал и пишите:

Node utils/rarity.js

После этого отобразятся проценты редкости для ваших картинок. Вы можете руками настроить их на свой вкус:

Теперь можно заняться облагораживанием коллекции. Пролистайте в самый верх в файле config.js и под "Metadata for Ethereum" поменяйте название коллекции и сделайте её описание.

baseUri мы будем изменять далее

Эти данные буду отображаться на различных торговых площадках:

1️⃣ Деплой — шаг 1

Начинаем самое веселое — загрузку нашего деген гема на площадки.

Для начала идем на Pinata и регистрируемся там (Try for free). Именно на этом сайте мы будем загружать наши жипеги и их метаданные.

После регистрации ищите синюю кнопку загрузки и указывайте путь до вашего билда (Build). После вам будет выдан CID код, состоящий из рандомных цифер. Его копируем и возвращаемся обратно в VS Code

Вводим это значение под заголовком и описанием в формате:

ipfs://<Твой CID>

После сохраните файл и в новом окне терминала запишите:

Node utils/update_info.js

Это свяжет ваши жипеги с верным CID местом.

Сохраните файл, затем повторите тот же процесс, что и при загрузке папки images в pinata, но теперь с папкой json.

ВНИМАНИЕ: убедитесь, что файлы, которые вы загружаете, имеют названия “1”, “2” и т.д., А не “1.json”, “2.json” и так далее

2️⃣ Деплой — шаг 2

Время для настройки смартконтракта 😨

Чтобы не особо заморачиваться — будем юзать готовые решения, а именно OpenZeppelin ERC721PresetMinterPauserAutoId контракт. Олды оценят.

Копируем ссылку на гитхаб и пишем в поиске remix.ethereum.org. Это среда для разработки (в нашем случае редактирования) кода контрактов.

После того как перейдете, то жмите на синюю странную кнопочку сверху слева, после жмите на иконку GitHub'a в нижней части страницы. Тут мы вставляем скопированную выше ссылку на контракт OpenZeppelin.

Слева будут отображены файлы для нового импорта. Нам нужен именно ERC721PresetMinterPauserAutoId.sol

Открыв этот файл, нажмите на значок “S”, отображаемый слева, на картинке ниже в общем. Затем скомпилируйте файл, это позволит нам менять его и дополнять

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

Все они могут быть найдены на OpenZeppelins GitHub и импортируются также, как описано выше. Все просто 😲

!! ДАЛЬШЕ !!

Нажмите на белый значок под тем, на котором вы находитесь, и вверху переключите среду на “Iniected Web3”.

Вам предложат подключить кошелек, после подключения нажмите на стрелку раскрывающегося списка в разделе ”Contract".

После выберите ERC721PresetMinterPauserAutoId.

После выбора ERC721PresetMinterPauserAutoId мы можем развернуть контракт

  • В поле NAME введите название вашей коллекции;
  • Для SYMBOL создайте тикер для коллекции;
  • Для BASETOKENURI введите “ipfs://(Ваш CID)/“;
ВНИМАНИЕ: обратная косая черта в конце очень важна

Как только вы введете их, нажмите “transact” и следуйте инструкциям. Когда контракт развернется, вернитесь к ремиксу.

Нажмите на значок плагина, отображаемый в левом нижнем углу, и найдите “Etherscan - Contract Verification”. Это создаст для него новый значок слева, если проверка пройдет успешно.

После вас попросят ввести свой API-ключ, который можно найти, войдя в свою учетную запись на Etherscan. Наведите курсор на свой профиль, затем нажмите "API keys" внизу.

Теперь скопируйте всю строку для “Token”. и в ремиксе введите это значение в строку для API ключа

Если вы сделали все верно, то увидите окно как на фото. Там надо выбрать "ERC721PresetMinterPauserAutoId"

Но и тут аргументы конструктора потребуют небольшой работы с вашей стороны, а хули хотели 🤣🤣🤣🤣🤣🤣 😐

Чтобы найти аргументы конструктора, перейдите на страницу Etherscan для вашего свежесозданного контракта.

Нажмите “contract” посередине, затем нажмите “verify and publish”.

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

Как только вы перейдете на следующую страницу, найдите второй столбец с надписью “Constructor arguments”.

Скопируйте все в это поле, затем вернитесь к Ремиксу и вставьте его в аргументы конструктора. Далее введите адрес контракта и нажмите “Verify Contract”.

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

Это можно сделать, щелкнув стрелку раскрывающегося списка для развернутого контракта в Ремиксе, там еще кнопки будут оранжевые/синие.

Найдите “Mint”, затем вставьте свой адрес в поле и совершите транзакцию.

Поздравляю, вы заскамлены 😴

Если минт пройдет успешно, то ваши NFT отобразятся на OS:

Также все атрибуты и элементы будут иметь имя папок из самого начала:

😪 Итоги гайда

Как видите — сделать свою коллекцию достаточно просто даже без знания программирования. За весь гайд мы меняли только код в VS Code, не более.

Далее мы работали буквально только с интерфейсом Ремикса и делали API ключик в Etherscan, все элементарно.

Самое трудное — сделать красивые элементы и набрать свою аудиторию, которую после монетизировать.

👉 Следующие статьи:

  • Набор аудитории для своей NFT коллекции
  • Деплой NFT на блокчейне Соланы

Какую писать первой - решайте сами в комменатриях.

🔗 Ссылки

🙄 Донатики, чтобы админ вас не заскамил:

  • 0xD47e4ae4C1f29ED6A888DdF1AFA52390066Fd46B (ERC)
  • Hx2RwmBnpo77yoWCck1tUvURusnDKMn7qdKmqK2punx3 (SOL)
  • TLnDvyPTmLasdWt2EptySBjPgZLoihgJPA (TRC)

🥵 Каналы:

👁‍🗨 Из статьи: