🥺 Создание приложения NFT Instagram с помощью React и Thirdweb

Подготовьтесь к будущему Интернета или получите свою порцию шумихи NFT 😜

вступление

Большая социальная сеть, которая обещала привести мир к метавселенной, уже работает над поддержкой NFT в Instagram. Но вместо того, чтобы ждать интеграции NFT, мы можем создать свой собственный Instagram с блэкджеком и…, конечно же, с NFT. Звучит как что-то сложное: нам нужна интеграция криптокошелька, загрузка файла изображения в децентрализованную сеть, создание и развертывание смарт-контракта с нашим NFT и метаданными в какой-то блокчейн. Есть много вещей, но в этом уроке мы рассмотрим их вместе, чтобы создать полностью функционирующую копию NFT Instagram.

Доказательство концепции

Чтобы не создавать всю необходимую инфраструктуру web3, мы будем использовать Thirdweb SDK, который предоставляет API для быстрого создания и развертывания смарт-контрактов. Мы будем использовать React в качестве основы и Chakra UI для создания макета и компонентов пользовательского интерфейса. NFT Instagram будет иметь следующие функции:

• Подключить криптокошелек Metamask;
• Загрузить изображение NFT в IPFS
• Монетный двор протестирует блокчейн Polygon Mumbai
• Получить данные NFT из сети блокчейн
• Отображение потока изображений NFT

Конечный продукт будет таким

Окончательную реализацию вы можете найти на Github

Развернуть контракт на сбор NFT

Если вы еще не настроили Метамаску, сделайте это сейчас, а затем вернитесь к статье. Мы упоминали, что будем использовать Thirdweb SDK, поэтому сначала перейдите туда и подключитесь к Test Polygon Mumbai.

Перейдите к Polygon Faucet, чтобы получить бесплатный тест MATIC:

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

Выберите Мумбаи:

На следующем шаге выберите, что мы собираемся реализовать контракт, который создаст NFT:

И тип коллекции NFT:

Назовите свой контракт красиво:

И, наконец, заплатите немного газа за развертывание:

На вкладке «Код» найдите свой идентификатор контракта и сохраните его где-нибудь, нам нужно будет использовать его позже в коде:

Создание Web3 NFT Instagram

Подготовка завершена, у нас есть все, чтобы начать, давайте продолжим и создадим наше приложение NFT Instagram;

yarn create react-app react-nft-insta --template typescript

Далее устанавливаем все необходимые зависимости

Зависимости Thirdweb:

yarn add @thirdweb-dev/react @thirdweb-dev/sdk ethers

Затем зависимости Chakra UI и react-icons

yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 react-icons

Создайте файл конфигурации с нашим идентификатором контракта (тот, который мы скопировали из предыдущего шага) react-nft-insta/src/config/contracts.tsx

Затем давайте создадим папку react-nft-insta/src/components и соберем кучу компонентов

react-nft-insta/src/components/ConnectMetamaskButton.tsx

react-nft-insta/src/components/UploadNFTButton.tsx

react-nft-insta/src/components/NFTSlideshow.tsx

react-nft-insta/src/components/Home.tsx

react-nft-insta/src/components/MainLayout.tsx

И, наконец, обновим наш App.tsx

react-nft-insta/src/App.tsx

💡Примечание. Если вы столкнулись с ошибкой во время загрузки NFT «Буфер не найден», вам необходимо дополнительно добавить буфер yarn add buffer, а затем добавить его глобально. window.Buffer = Buffer будет отслеживаться до тех пор, пока эта проблема с зависимостью не будет устранена.

Вот и все, наслаждайтесь своим приложением:

Заключение

Вы действительно можете творить чудеса с Thirdweb SDK и проявлять творческий подход. Найдите множество руководств здесь. Разработка Web3 еще никогда не была такой легкой. С помощью такого мощного инструмента вы можете легко создать свой собственный рынок NFT, аукцион и многое другое. Надеюсь, вам понравился урок и вы узнали что-то новое.Если вы хотите увидеть реализацию большего количества идей web 3, давайте соберем 1000 👏 не забудьте подписаться и подписаться:

Узнать больше