TwNFT — это простое веб-приложение, которое позволяет легко и бесплатно создавать NFT. Затем вы можете делать с NFT все, что хотите.

🤔 Что такое TwNFT?

TwNFT – это простое веб-приложение, которое позволяет бесплатно создавать твиты как NFT.

Это моя заявка на хакатон Thirdweb x Hashnode.

Живая демонстрация / Репозиторий GitHub

🌐 Что такое Thirdweb?

Начать работу с web3 может быть сложно, хотя сейчас это ажиотаж. Нам нужно написать нечто, называемое смарт-контрактом, которое требуется для выполнения действий в блокчейне. Чтобы писать смарт-контракты на блокчейне Ethereum, нам нужно выучить новый язык программирования под названием Solidity.

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

Теперь вернемся к TwNFT.

💡Откуда пришла идея?

Об этом хакатоне было объявлено еще 5 января 2022 года, но четкой идеи я не получил до 18 января. Так откуда оно взялось?

Я наткнулся на приложение под названием GitNFT из одной из статей Chris Bongers. GitNFT позволяет вам чеканить коммиты git как NFT, и именно тогда я подумал: Как насчет того, чтобы чеканить твиты как NFT?.

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

📚 Стек технологий

Какие технологии я использовал для TwNFT?

и конечно…

🧐 Как работает TwNFT?

Сначала нужно войти в Twitter, а затем ввести URL-адрес твита для твита, который они хотят отчеканить. Перед чеканкой изображение, которое будет чеканиться, также можно настроить. Нужно присвоить имя NFT и, при желании, добавить описание (иначе будет использоваться содержимое твита).

Перед чеканкой у нас есть 2 проверки, чтобы убедиться, что человек, чеканящий NFT, владеет этим твитом (именно поэтому его просят войти в Twitter) и был ли твит создан ранее или нет. Мы не разрешаем чеканить один и тот же твит несколько раз, и это делается для того, чтобы каждый созданный NFT был уникальным.

Теперь давайте углубимся в часть web3.

Более глубокое погружение в аутентификацию web3 с помощью Thirdweb

Настроить аутентификацию с помощью Thirdweb так же просто, как добавить ~10 строк кода. Я использую пакет @3rdweb/hooks для этого приложения, и это очень просто. Пакет @3rdweb/react проще реализовать, так как он также упаковывается в пользовательский интерфейс. Однако, если вам нужен собственный пользовательский интерфейс (что я и хотел), пакет hooks — лучший выбор.

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

Переходя к коду, во-первых, вам нужно добавить в приложение Thirdweb Provider —

Затем это так же просто, как использовать хук useWeb3(), предоставленный нам любым пакетом, для получения функции connectWallet. Теперь нам нужно просто вызвать эту функцию с типом кошелька:

Здесь injected для кошелька, внедренного в браузер. В большинстве случаев это Метамаска.

Подробное руководство по внедрению аутентификации web3 с помощью Thirdweb можно найти в их официальном руководстве.

Более глубокое погружение в создание NFT с помощью Thirdweb

Я использую Thirdweb Typescript SDK для создания NFT на стороне сервера. Минтинг должен происходить на стороне сервера из соображений безопасности.

Монтировать с помощью Thirdweb SDK чрезвычайно просто. Давайте посмотрим, как это работает -

Сначала мы инициализируем SDK с помощью нашего закрытого ключа. Держите это в секрете, так как любой, у кого есть ваш закрытый ключ, может получить доступ к вашему кошельку. Я использую его для инициализации кошелька здесь.

Затем мы инициализируем модуль NFT, который позволит нам создать NFT:

Наконец, мы вызываем функцию mintTo асинхронно:

Здесь результат дает нам NFT tokenId. tokenId — это уникальный идентификатор NFT в этой коллекции.

Вот и все. Мы выпустили NFT!

Более подробное руководство можно найти в официальном руководстве по созданию NFT от Thirdweb.

❓ Что это был за модуль NFT?

Thirdweb предоставляет нам множество модулей, и модуль NFT Collection — один из них. Это позволяет вам создавать NFT в коллекции NFT, и это то, что мы только что сделали! Официальную коллекцию этого проекта можно найти на OpenSea здесь.

🖱️ Использование TwNFT

Для начала войдите в систему через Twitter и перейдите на страницу /mint.

Затем введите URL-адрес твита, который вы хотите создать, в текстовое поле вверху и нажмите стрелку:

Теперь вы должны увидеть предварительный просмотр NFT, что-то вроде этого:

Не стесняйтесь настраивать изображение, нажимая кнопки на панели параметров:

Далее нажмите на кнопку «Подключить кошелек» и подключите свой кошелек Metamask. Поддержка Walletconnect появится в ближайшее время.

Теперь вы должны увидеть кнопку с надписью «Mint NFT» вместо «Подключить кошелек» на панели параметров. Нажав на это, вы должны открыть это модальное окно, где вы можете заполнить имя NFT и, при желании, добавить описание:

Через некоторое время вы должны получить возможность перейти на страницу твита:

Страница твита будет выглядеть примерно так (дайте изображению некоторое время для загрузки в первый раз):

Обратите внимание, что в нем говорится, что NFT все еще чеканится, и это займет 5–10 минут. Вернитесь через 5–10 минут, и вот как должна выглядеть страница:

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

🖊️ Заметка

В настоящее время TwNFT работает в тестовой сети Rinkeby. Это означает, что все выпущенные NFT будут находиться в тестовой сети, а не в основной сети.

Однако это может быть изменено в будущем.

✨ Заключение

За последние 13 дней мы проделали большой путь, создавая TwNFT, исправляя ошибки и внедряя функции. Рад видеть, как это происходит 😆

До свидания и хорошего дня 😁🤞

🔗 Важные ссылки

- [TwNFT](https://twnft.vercel.app/)
— [Репозиторий TwNFT GitHub] (https://github.com/AnishDe12020/twnft)
— [TwNFT Backend GitHub Repository](https://github.com/AnishDe12020/twnft-backend)
— [TwNFT OpenSea collection](https://testnets.opensea.io/collection/twnft)

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

Больше контента на plainenglish.io. Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Получите эксклюзивный доступ к возможностям написания и советам в нашем сообществе Discord.