С нуля построить NFT платформу децентрализации: руководство по реализации смарт-контрактов и фронтенда

2025-07-18 22:17:56

Генерация тезисов в процессе

Создание NFT Децентрализация платформа с нуля

В нескольких предыдущих статьях мы обсудили, как реализовать децентрализованную торговлю токенами ERC-20 через DEX. А как насчет децентрализованной торговли NFT, которые следуют протоколу ERC-721?

В настоящее время основные платформы для торговли NFT в основном используют модель размещения заказов, аналогично тому, как товары выставлены на полках супермаркета; покупатель может купить и забрать товар, если считает цену подходящей. В данной статье будет реализована децентрализованная торговля NFT с помощью написания смарт-контракта и простой фронтэнд-страницы. Следует отметить, что содержимое данной статьи предназначено исключительно для учебных целей и не подходит для производственной среды.

! Начальная серия Web3: реализация NFT DEX с нуля

Введение в NFT

NFT — это невзаимозаменяемый токен, который соответствует протоколу ERC-721. Каждый NFT уникален и обычно отображается в кошельке в виде различных изображений и имеет уникальный идентификатор для различия.

Из-за особенностей NFT, их нельзя оценивать по ценовым кривым, как токены ERC-20. Поэтому в настоящее время наиболее распространенный способ торговли - это использование книги заказов.

Режим торговли на ордерной книге

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

Ценовое предложение: продавец устанавливает цену на продажу, покупатель может купить, если считает цену приемлемой.
Заказ на покупку: Покупатель отправляет заказ на покупку, продавец может продать, если считает цену подходящей.

Как правило, цена на заявку на покупку будет ниже цены на заявку на продажу. В этой статье будет подробно рассмотрен режим торгов по фиксированной цене.

Основные функции NFT DEX

Базовый NFT DEX должен включать в себя следующие функции:

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

Процесс размещения товара

Фронтенд: Пользователь выбирает NFT и устанавливает цену, нажимает на размещение
Контракт: пользователь уполномочивает контракт управлять его NFT

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

Процесс покупки товаров

Фронтенд: Пользователь выбирает желаемый NFT и нажимает на покупку
Контракт: передать средства покупателя продавцу, NFT передать покупателю

NFT DEX реализация

В следующем мы начнем с нуля создавать NFT DEX.

1. Создание NFT

Для тестирования мы можем быстро создать NFT по протоколу ERC-721 с помощью Remix. Также можно использовать уже подготовленный NFT.

2. Написание контракта

Контракт должен содержать следующие основные методы:

2.1 Продавец выставляет NFT

Процесс:

Пользователь выбирает NFT
Установите цену ( в доступных стабильных монетах или ETH )
Авторизация NFT для контракта
Вызов метода размещения

Метод размещения необходимо выполнить:

Проверка прав собственности на NFT
Добавить запись о размещении
Запуск события размещения

2.2 Покупатель покупает NFT

Покупатель выбирает NFT и после оплаты контракт выполняется:

Чтение данных NFT
Рассчитайте и вычтите комиссию
Перевести NFT покупателю
Событие покупки

2.3 Отмена размещения

Установите поле isActive товара в значение false.

2.4 Извлечение комиссии

Можно внести комиссию в контракт или перевести на указанный адрес.

! Начальная серия Web3: реализация NFT DEX с нуля

3. Разработка фронтенда DEX

Основные инструменты:

Ant Design Web3: подключение кошелька, отображение NFT-карт.
Wagmi: взаимодействие с кошельком
Nextjs + Vercel: развертывание проекта

Фронтэнд должен включать три страницы: Mint, Buy и Portfolio.

! Начальная серия Web3: реализация NFT DEX с нуля

3.1 Подключение кошелька

Используйте компонент подключения Ant Design Web3 для подключения кошелька.

! Начальная серия Web3: реализация NFT DEX с нуля

3.2 Страница Mint

Используйте метод useWriteContract от wagmi для реализации создания NFT.

3.3 Страница портфолио

Демонстрация пользовательских NFT, поддержка операций по размещению и снятию.

3.4 Страница покупки

Показать выставленные на продажу NFT, поддержка операций покупки.

Таким образом, фронтенд базового NFT DEX завершен. Его можно развернуть на платформе Vercel для доступа.

! Серия для новичков Web3: внедрение NFT DEX с нуля

Посмотреть Оригинал

На этой странице может содержаться сторонний контент, который предоставляется исключительно в информационных целях (не в качестве заявлений/гарантий) и не должен рассматриваться как поддержка взглядов компании Gate или как финансовый или профессиональный совет. Подробности смотрите в разделе «Отказ от ответственности» .

12 Лайков