Практическая разработка DEX для NFT: от смарт-контрактов до реализации на фронтенде

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

Создание NFT DEX с нуля

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

Введение в NFT

NFT(Невзаимозаменяемый токен)это уникальный токен, каждый Token уникален и соответствует протоколу ERC-721. Обычно каждый NFT отображает разные изображения в кошельке и имеет уникальный идентификатор для различия. Из-за особенностей NFT невозможно установить цену так, как это делается с токенами ERC-20 через ценовые кривые, поэтому распространенный способ торговли - это форма книги заказов.

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

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

Модель книги заказов делится на два типа:

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

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

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

Основные функции NFT биржи

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

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

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

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

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

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

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

Реализовать NFT биржу

1. Создание тестового NFT

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

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

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

Контракт в основном включает в себя следующие методы:

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

Процесс:

  1. Пользователь выбирает NFT
  2. Установить цену
  3. Авторизация NFT для контракта
  4. Вызов метода размещения

Способ выставления на продажу:

  1. Проверка прав собственности на NFT
  2. Добавить запись о размещении
  3. Событие начала листинга

Серия для новичков Web3: Как создать NFT DEX с нуля

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

Исполнение контракта:

  1. Чтение данных NFT
  2. Рассчитать и вычесть комиссию
  3. Перевести NFT покупателю
  4. Запуск события покупки

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

2.3 Отмена листинга

Установите поле isActive для записей на листинге в значение false

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

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

Извлечь накопленные комиссии из контракта

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

3. Разработка интерфейса

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

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

Фронтенд включает 3 страницы:

  • Mint: Создание тестового NFT
  • Купить:NFT биржа
  • Портфель: Управление пользовательскими NFT

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

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

Реализовано с использованием компонентов подключения Ant Design Web3.

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

3.2 Страница Mint

Используйте метод useWriteContract от wagmi для вызова метода mint контракта NFT.

Серия для новичков Web3: как создать NFT DEX с нуля

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

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

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

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

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

Серия для новичков Web3: как создать NFT DEX с нуля

С помощью вышеперечисленных шагов был реализован базовый NFT DEX. Можно развернуть фронтенд на Vercel для доступа и использования.

MINT-0.93%
Посмотреть Оригинал
На этой странице может содержаться сторонний контент, который предоставляется исключительно в информационных целях (не в качестве заявлений/гарантий) и не должен рассматриваться как поддержка взглядов компании Gate или как финансовый или профессиональный совет. Подробности смотрите в разделе «Отказ от ответственности» .
  • Награда
  • 6
  • Поделиться
комментарий
0/400
IntrovertMetaversevip
· 14ч назад
В супермаркете покупать овощи проще, чем это.
Посмотреть ОригиналОтветить0
DaisyUnicornvip
· 14ч назад
Айя, более удивительный, чем цветочные стенды в супермаркетах, протокол!
Посмотреть ОригиналОтветить0
GateUser-a180694bvip
· 14ч назад
Надеюсь, этот DEX сможет изменить болевые точки торговли NFT.
Посмотреть ОригиналОтветить0
DecentralizedEldervip
· 14ч назад
Открытие, брат, давай сделаем это.
Посмотреть ОригиналОтветить0
ThatsNotARugPullvip
· 14ч назад
смарт-контракты那块巨麻烦的
Посмотреть ОригиналОтветить0
CascadingDipBuyervip
· 14ч назад
открытые ордера买卖这种lowликвидирован
Посмотреть ОригиналОтветить0
  • Закрепить