Пользователи, ознакомившиеся с предыдущими статьями, должны знать, что для токенов протокола ERC-20 мы можем осуществлять торговлю через DEX, представленный Uniswap, обеспечивая децентрализацию. Так как же обеспечить децентрализованную торговлю для протокола ERC-721, то есть NFT?
В настоящее время некоторые из основных NFT бирж используют способ торговых ордеров, как если бы товары выставлялись на полках супермаркета; покупатель, считая цену подходящей, может забрать товар домой.
В этой статье будет описано, как реализовать децентрализованную торговлю NFT путем написания смарт-контракта и простой фронтенд-страницы. Обратите внимание, что эта статья предназначена только для учебных целей и не может быть использована в производственной среде.
NFT (Невзаимозаменяемый токен)
NFT — это не взаимозаменяемый токен, то есть каждый токен уникален и отличается от других, он следует протоколу ERC-721. Обычно каждый NFT отображает разные изображения в кошельке, и каждая группа NFT имеет уникальный ID для различения.
Из-за особенностей NFT его невозможно оценить так же, как ERC-20, через кривую цен — потому что каждый токен уникален. Поэтому в настоящее время наиболее распространённый способ торговли происходит через книгу заказов.
Торговля на ордерной книге
Режим книги заказов, простыми словами, означает, что цена товара устанавливается человеком, в отличие от Uniswap, который вычисляет цену на основе кривой цен. Обычно книга заказов делится на два типа торговых режимов: один — это ордер на продажу, то есть продавец устанавливает желаемую цену продажи, и если покупатель считает цену приемлемой, он может ее купить. Другой — это ордер на покупку, то есть покупатель отправляет ордер на покупку в соответствии со своими потребностями, и когда продавец считает цену приемлемой, он может продать.
Как правило, цена ордера на покупку будет ниже цены ордера на продажу. В этой статье рассматривается только первый способ ценообразования.
Функции NFT DEX
Основные функции NFT DEX должны включать в себя следующие базовые функции:
Выставление товара: выставить NFT по установленной цене
Покупка товара: покупка по цене NFT
Комиссия DEX: взимается комиссия пропорционально цене сделки.
Выставление товара
Для выставления товара на продажу необходимо выполнить следующие действия:
Фронтенд: Пользователь выбирает свой NFT, устанавливает цену и нажимает "Выставить на продажу".
Контракт: пользователю необходимо установить разрешения для контракта, который может управлять его NFT.
Таким образом, товар считается выставленным на продажу. В контракте необходимо поддерживать карту цен на товары, выставленные пользователями. Эти данные, как правило, можно хранить в централизованном сервисе, чтобы уменьшить нагрузку на контракт, однако в данной статье эта карта данных будет храниться внутри контракта.
Покупка товара
При покупке товаров происходит несколько вещей:
Фронтэнд: Пользователь выбирает NFT, который он хочет купить, и нажимает на кнопку покупки.
Контракт: Вызов контракта, перевод денег пользователя продавцу NFT и передача NFT покупателю.
Реализация NFT DEX
В этой главе мы начнем с нуля реализовывать DEX для NFT, это адрес DEX, который уже развернут автором nft-dex-frontend.vercel.app.
Для тестирования нам лучше иметь свой собственный NFT. Мы можем быстро создать NFT на основе протокола ERC-721 с помощью Remix, который предлагает соответствующий шаблон.
Мы можем удобно развернуть NFT по шаблону. Конечно, вы также можете пропустить этот шаг и сразу использовать наш готовый NFT.
2. Написание контракта
Наши методы контракта должны включать следующие методы:
2.1. Продавец выставляет NFT
Продавец должен указать NFT, который он хочет продать, а также соответствующую цену. При размещении товара пользователю необходимо подписать метод авторизации NFT, чтобы наш смарт-контракт имел право управлять этим NFT, так что когда покупатель приобретает его, эта сделка может быть автоматически завершена.
Итак, процесс должен быть следующим: 1. Пользователь выбирает свой NFT; 2. Устанавливает цену, здесь ценность может быть в стабильном токене USDT, USDC или в ETH; 3. Авторизует NFT для контракта.
После этого можно вызвать метод размещения контракта, который должен выполнить следующие действия:
Покупатель, приобретая NFT, пользователю нужно только выбрать желаемый NFT и оплатить соответствующий токен. На уровне контракта будут выполнены следующие шаги: 1. Считать соответствующие данные NFT из «listings»; 2. Рассчитать комиссию в зависимости от цены NFT и вычесть эту часть из цены сделки; 3. Перевести NFT покупателю; 4. Запустить событие покупки.
2.3. Удаление из листинга
Конечно, продавец может считать цену неподходящей и выбрать отмену выставления на продажу. Мы можем видеть, что в месте сохранения информации о выставлении на продажу мы сохранили поле isActive, которое указывает, является ли этот товар действительным, поэтому при отмене выставления на продажу нам нужно просто установить это поле в false.
DEX может взимать комиссию за каждую сделку, эта комиссия может быть сохранена в контракте или переведена на другой ваш адрес, в данной статье используется способ сохранения в контракте.
На этом этапе основные функции нашего контракта считаются завершенными.
3. Разработка фронтенда DEX
Перед началом нам нужно подготовить несколько инструментов, включая следующие инструменты:
Ant Design Web3: для подключения кошелька и отображения NFT карточек.
Wagmi: Используется для взаимодействия с кошельком.
Nextjs + Vercel: Развертывание нашего проекта.
Наше фронтальное приложение должно включать три страницы: Mint, Buy и Portfolio. Mint предназначен для того, чтобы пользователи могли Mint наши NFT, это только для демонстрации. Что касается Buy, это наш DEX магазин, где пользователи могут покупать наши NFT. В Portfolio пользователи могут размещать и снимать свои NFT.
3.1. Подключение кошелька
Подключите кошелек пользователя, используя Ant Design Web3
Процесс подключения кошелька пользователя очень прост, достаточно использовать компоненты подключения, предоставленные Ant Design Web3.
Сначала мы оборачиваем проект в Provider, чтобы в дальнейшем в коде мы могли использовать возможности Ant Design Web3. Кроме того, поскольку нам нужно подключиться к тестовой сети sepolia, для повышения скорости рекомендуется использовать некоторые сервисы узлов, чтобы ускорить запрос данных. Я использую endpoint ZAN, который очень хорошо подходит для использования в Азиатско-Тихоокеанском регионе, он быстрый и очень экономичный, поддерживающий множество цепочек.
Затем разместите кнопку подключения в местах, где необходимо подключить кошелек:
Таким образом, все готово, очень просто.
3.2. Чеканка
Создайте NFT, чтобы получить тестовые токены, можете перейти к
На странице Mint мы можем создать тестовый NFT. Mint – это операция записи контракта, для этого мы будем использовать метод useWriteContract из wagmi. Нам нужно правильно указать адрес контракта, ABI контракта и параметры контракта.
После этого в кошельке нужно подтвердить, и Mint будет успешным.
3.3. Портфель
Управление пользовательскими NFT
Здесь необходимо показать все NFT пользователя. Мы можем использовать некоторые NFT API для получения, здесь используется API opensea, так как поддерживающих тестовую сеть sepolia NFT API не так много.
После получения списка NFT пользователя необходимо определить, были ли они уже выставлены на продажу. Не выставленные токены поддерживают выставление, а выставленные - снятие с продажи. Для определения этого используется метод «getSellerListings» внутри контракта DEX, который получает уже выставленные NFT пользователя, а затем по полю «isAlive» этих NFT определяется, находятся ли они в продаже.
При размещении необходимо вызвать метод контракта «listNFT», а при отмене - метод «cancelListing». Перед размещением необходимо дополнительно вызвать метод авторизации NFT, чтобы разрешить контракту управлять NFT, так после завершения сделки данный NFT может быть автоматически передан покупателю.
Сначала нам нужно продемонстрировать уже размещенные NFT. В отличие от отображения имеющихся у пользователя NFT в Портфолио, здесь отличие заключается в том, что это глобальное отображение, а не конкретного пользователя, и нужно отображать только NFT, которые имеют статус isAlive.
При покупке используйте метод «purchaseNFT», при вызове этого метода необходимо оплатить цену в ETH.
Содержание носит исключительно справочный характер и не является предложением или офертой. Консультации по инвестициям, налогообложению или юридическим вопросам не предоставляются. Более подробную информацию о рисках см. в разделе «Дисклеймер».
Серия для новичков Web3: как создать NFT DEX с нуля
Пользователи, ознакомившиеся с предыдущими статьями, должны знать, что для токенов протокола ERC-20 мы можем осуществлять торговлю через DEX, представленный Uniswap, обеспечивая децентрализацию. Так как же обеспечить децентрализованную торговлю для протокола ERC-721, то есть NFT?
В настоящее время некоторые из основных NFT бирж используют способ торговых ордеров, как если бы товары выставлялись на полках супермаркета; покупатель, считая цену подходящей, может забрать товар домой.
В этой статье будет описано, как реализовать децентрализованную торговлю NFT путем написания смарт-контракта и простой фронтенд-страницы. Обратите внимание, что эта статья предназначена только для учебных целей и не может быть использована в производственной среде.
NFT (Невзаимозаменяемый токен)
NFT — это не взаимозаменяемый токен, то есть каждый токен уникален и отличается от других, он следует протоколу ERC-721. Обычно каждый NFT отображает разные изображения в кошельке, и каждая группа NFT имеет уникальный ID для различения.
Из-за особенностей NFT его невозможно оценить так же, как ERC-20, через кривую цен — потому что каждый токен уникален. Поэтому в настоящее время наиболее распространённый способ торговли происходит через книгу заказов.
Торговля на ордерной книге
Режим книги заказов, простыми словами, означает, что цена товара устанавливается человеком, в отличие от Uniswap, который вычисляет цену на основе кривой цен. Обычно книга заказов делится на два типа торговых режимов: один — это ордер на продажу, то есть продавец устанавливает желаемую цену продажи, и если покупатель считает цену приемлемой, он может ее купить. Другой — это ордер на покупку, то есть покупатель отправляет ордер на покупку в соответствии со своими потребностями, и когда продавец считает цену приемлемой, он может продать.
Как правило, цена ордера на покупку будет ниже цены ордера на продажу. В этой статье рассматривается только первый способ ценообразования.
Функции NFT DEX
Основные функции NFT DEX должны включать в себя следующие базовые функции:
Выставление товара
Для выставления товара на продажу необходимо выполнить следующие действия:
Таким образом, товар считается выставленным на продажу. В контракте необходимо поддерживать карту цен на товары, выставленные пользователями. Эти данные, как правило, можно хранить в централизованном сервисе, чтобы уменьшить нагрузку на контракт, однако в данной статье эта карта данных будет храниться внутри контракта.
Покупка товара
При покупке товаров происходит несколько вещей:
Реализация NFT DEX
В этой главе мы начнем с нуля реализовывать DEX для NFT, это адрес DEX, который уже развернут автором nft-dex-frontend.vercel.app.
! Начальная серия Web3: реализация NFT DEX с нуля
1. Создать NFT
Для тестирования нам лучше иметь свой собственный NFT. Мы можем быстро создать NFT на основе протокола ERC-721 с помощью Remix, который предлагает соответствующий шаблон.
Мы можем удобно развернуть NFT по шаблону. Конечно, вы также можете пропустить этот шаг и сразу использовать наш готовый NFT.
2. Написание контракта
Наши методы контракта должны включать следующие методы:
2.1. Продавец выставляет NFT
Продавец должен указать NFT, который он хочет продать, а также соответствующую цену. При размещении товара пользователю необходимо подписать метод авторизации NFT, чтобы наш смарт-контракт имел право управлять этим NFT, так что когда покупатель приобретает его, эта сделка может быть автоматически завершена.
Итак, процесс должен быть следующим: 1. Пользователь выбирает свой NFT; 2. Устанавливает цену, здесь ценность может быть в стабильном токене USDT, USDC или в ETH; 3. Авторизует NFT для контракта.
После этого можно вызвать метод размещения контракта, который должен выполнить следующие действия:
! Начальная серия Web3: реализация NFT DEX с нуля
2.2. Покупка NFT покупателем
Покупатель, приобретая NFT, пользователю нужно только выбрать желаемый NFT и оплатить соответствующий токен. На уровне контракта будут выполнены следующие шаги: 1. Считать соответствующие данные NFT из «listings»; 2. Рассчитать комиссию в зависимости от цены NFT и вычесть эту часть из цены сделки; 3. Перевести NFT покупателю; 4. Запустить событие покупки.
2.3. Удаление из листинга
Конечно, продавец может считать цену неподходящей и выбрать отмену выставления на продажу. Мы можем видеть, что в месте сохранения информации о выставлении на продажу мы сохранили поле isActive, которое указывает, является ли этот товар действительным, поэтому при отмене выставления на продажу нам нужно просто установить это поле в false.
! Начальная серия Web3: реализация NFT DEX с нуля
2.4. Извлечение комиссии
DEX может взимать комиссию за каждую сделку, эта комиссия может быть сохранена в контракте или переведена на другой ваш адрес, в данной статье используется способ сохранения в контракте.
! Начальная серия Web3: Реализация NFT DEX с нуля
На этом этапе основные функции нашего контракта считаются завершенными.
3. Разработка фронтенда DEX
Перед началом нам нужно подготовить несколько инструментов, включая следующие инструменты:
Наше фронтальное приложение должно включать три страницы: Mint, Buy и Portfolio. Mint предназначен для того, чтобы пользователи могли Mint наши NFT, это только для демонстрации. Что касается Buy, это наш DEX магазин, где пользователи могут покупать наши NFT. В Portfolio пользователи могут размещать и снимать свои NFT.
3.1. Подключение кошелька
Процесс подключения кошелька пользователя очень прост, достаточно использовать компоненты подключения, предоставленные Ant Design Web3.
Сначала мы оборачиваем проект в Provider, чтобы в дальнейшем в коде мы могли использовать возможности Ant Design Web3. Кроме того, поскольку нам нужно подключиться к тестовой сети sepolia, для повышения скорости рекомендуется использовать некоторые сервисы узлов, чтобы ускорить запрос данных. Я использую endpoint ZAN, который очень хорошо подходит для использования в Азиатско-Тихоокеанском регионе, он быстрый и очень экономичный, поддерживающий множество цепочек.
Затем разместите кнопку подключения в местах, где необходимо подключить кошелек:
3.2. Чеканка
На странице Mint мы можем создать тестовый NFT. Mint – это операция записи контракта, для этого мы будем использовать метод useWriteContract из wagmi. Нам нужно правильно указать адрес контракта, ABI контракта и параметры контракта.
После этого в кошельке нужно подтвердить, и Mint будет успешным.
3.3. Портфель
Здесь необходимо показать все NFT пользователя. Мы можем использовать некоторые NFT API для получения, здесь используется API opensea, так как поддерживающих тестовую сеть sepolia NFT API не так много.
После получения списка NFT пользователя необходимо определить, были ли они уже выставлены на продажу. Не выставленные токены поддерживают выставление, а выставленные - снятие с продажи. Для определения этого используется метод «getSellerListings» внутри контракта DEX, который получает уже выставленные NFT пользователя, а затем по полю «isAlive» этих NFT определяется, находятся ли они в продаже.
При размещении необходимо вызвать метод контракта «listNFT», а при отмене - метод «cancelListing». Перед размещением необходимо дополнительно вызвать метод авторизации NFT, чтобы разрешить контракту управлять NFT, так после завершения сделки данный NFT может быть автоматически передан покупателю.
! Стартовая серия Web3: реализация NFT DEX с нуля
3.4. Купить
Сначала нам нужно продемонстрировать уже размещенные NFT. В отличие от отображения имеющихся у пользователя NFT в Портфолио, здесь отличие заключается в том, что это глобальное отображение, а не конкретного пользователя, и нужно отображать только NFT, которые имеют статус isAlive.
При покупке используйте метод «purchaseNFT», при вызове этого метода необходимо оплатить цену в ETH.
! Серия для новичков Web3: внедрение NFT DEX с нуля
Здесь это «value» — это ETH, который покупатель должен заплатить.
Такой фронтенд-страницы DEX, содержащей все основные функции, завершен, мы можем развернуть его в vercel.
Статья написана командой ZAN (X аккаунт @zan_team) и Yeezo (X аккаунт @GaoYeezo 75065).