Користувачі, які читали кілька попередніх статей, повинні знати, що для токенів протоколу ERC-20 ми можемо здійснювати торгівлю через DEX, представлений Uniswap, досягаючи децентралізації. Так як щодо протоколу ERC-721, тобто NFT, як можна досягти децентралізованої торгівлі?
В даний час деякі з провідних NFT бірж використовують метод розміщення ордерів для проведення угод, як якщо б товари були виставлені на полицях супермаркету; покупець, вважаючи ціну прийнятною, може забрати товар додому.
Ця стаття буде реалізувати децентралізовану торгівлю NFT шляхом написання смарт-контракту та простого фронтенд-сторінки. Зверніть увагу, що ця стаття призначена лише для навчання і не може бути використана в реальному виробничому середовищі.
NFT (Невзаємозамінний токен)
NFT також є нестандартним токеном, тобто кожен Токен є нестандартним, унікальним, він дотримується протоколу ERC-721. Як правило, кожен NFT у гаманці буде відображати різні зображення, і кожна група NFT матиме унікальний ID для розрізнення.
Через характеристики NFT неможливо встановити ціну так, як це робиться з ERC-20 через криву ціни — оскільки кожен Токен є унікальним. Тому наразі найбільш поширеним способом торгівлі є використання книги замовлень.
Торгівля на order book
Модель книги замовлень, простіше кажучи, означає, що ціна товару визначається вручну, на відміну від Uniswap, де ціна розраховується за допомогою цінової кривої. Зазвичай книга замовлень поділяється на два види торгових режимів: перший - це ціноутворююче замовлення, коли продавець встановлює ціну, яку бажає отримати; якщо покупець вважає цю ціну прийнятною, він може купити товар. Другий - це закупівельне замовлення, коли покупець, виходячи зі своїх потреб, видає замовлення на купівлю, а коли продавець вважає ціну прийнятною, він може продати товар.
Зазвичай ціна на замовлення на покупку буде нижчою за ціну на замовлення на продаж. У цій статті розглядається тільки перший спосіб встановлення ціни.
Функції NFT DEX
Основні функції NFT DEX повинні включати такі базові функції:
Виведення товару на продаж: виставити NFT за визначеною ціною
Купівля товарів: здійснення покупки відповідно до ціни NFT
Комісія DEX: комісія стягується пропорційно до ціни угоди.
виставлені товари
Щоб виставити товар на продаж, потрібно зробити кілька речей:
Фронтед: Користувач обирає свій NFT та встановлює ціну, натискає на виставлення.
Контракт: користувачеві потрібно налаштувати дозволи для контракту, щоб мати можливість керувати NFT користувача.
Таким чином, товар вважається розміщеним. У контракті необхідно підтримувати карту цін на товари користувачів, ці дані зазвичай можуть бути розміщені в централізованому сервісі, щоб зменшити навантаження на контракт, але в цій статті ці дані карти будуть підтримуватись у контракті.
купівля товарів
При купівлі товару відбувається кілька речей:
Фронт-енд: користувач вибирає NFT, який хоче придбати, і натискає на покупку.
Протокол: виклик протоколу, перенесення грошей користувача до продавця NFT та перенесення NFT до покупця.
Реалізація NFT DEX
У цьому розділі ми почнемо з нуля реалізацію DEX для NFT, це адреса DEX, яку вже розгорнув автор nft-dex-frontend.vercel.app.
1. Створити NFT
Для тестування нам краще мати власний 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.
Перш за все, ми запакуємо провайдера на зовнішньому рівні проекту, щоб ми могли використовувати можливості Ant Design Web3 у наступному коді. Крім того, оскільки нам потрібно підключитися до тестового ланцюга sepolia, заради швидкості рекомендується використовувати деякі вузлові сервіси для покращення швидкості запиту даних, я тут використовую кінцеву точку ZAN, яка дуже підходить для використання в Азіатсько-Тихоокеанському середовищі, швидка швидкість і дуже економічно вигідна, а підтримувані ланцюги також дуже багаті.
Потім розмістіть кнопку підключення в місцях, де потрібно підключити гаманець:
Таким чином, це вже готово, дуже просто.
3.2. Чеканка
Створіть NFT, щоб отримати тестові Токени, можна перейти до
На сторінці Mint ми можемо Mint тестовий NFT. Mint – це операція написання контракту, тут ми будемо використовувати метод useWriteContract з wagmi. Нам потрібно вказати адресу контракту, ABI контракту та параметри контракту.
Після цього в гаманці потрібно підтвердити, і Mint буде успішно завершено.
3.3. Портфоліо
Управління користувацьким NFT
Тут потрібно показати всі NFT користувача. Ми можемо використовувати деякі API NFT, щоб отримати їх, тут використовується API opensea, оскільки підтримка API NFT для тестової мережі sepolia не так багато.
Після отримання списку NFT користувача, потрібно визначити, чи вже поставлені вони на продаж, невиставлені можна виставити, а виставлені можна зняти з продажу. Спосіб оцінки – через метод «getSellerListings» у контракті DEX, який отримує NFT, вже виставлені користувачем, а потім на основі поля «isAlive» цих NFT визначити, чи вони наразі виставлені на продаж.
Під час виставлення на продаж необхідно викликати метод контракту «listNFT», а при скасуванні – метод «cancelListing». Перед виставленням на продаж потрібно додатково викликати метод авторизації NFT, щоб надати NFT контракту, так що після завершення угоди цей NFT може автоматично передаватися покупцеві.
По-перше, нам потрібно продемонструвати вже представлені NFT. Подібно до демонстрації вже наявних NFT у Portfolio, тут є різниця в тому, що один є глобальним, а не для конкретного користувача, а інший - це лише демонстрація NFT, які є isAlive.
Коли ви купуєте, використовуйте метод «purchaseNFT», при виклику цього методу потрібно використовувати ETH для оплати ціни.
Тут це «value» — це ETH, який потрібно сплатити покупцеві.
Таким чином, фронтальний інтерфейс DEX, що містить усі основні можливості, завершено, ми можемо розгорнути його в vercel.
Цю статтю написала команда ZAN (X акаунт @zan_team) та Yeezo (X акаунт @GaoYeezo 75065).
Контент має виключно довідковий характер і не є запрошенням до участі або пропозицією. Інвестиційні, податкові чи юридичні консультації не надаються. Перегляньте Відмову від відповідальності , щоб дізнатися більше про ризики.
Серія для новачків у Web3: створення NFT DEX з нуля
Користувачі, які читали кілька попередніх статей, повинні знати, що для токенів протоколу ERC-20 ми можемо здійснювати торгівлю через DEX, представлений Uniswap, досягаючи децентралізації. Так як щодо протоколу ERC-721, тобто NFT, як можна досягти децентралізованої торгівлі?
В даний час деякі з провідних NFT бірж використовують метод розміщення ордерів для проведення угод, як якщо б товари були виставлені на полицях супермаркету; покупець, вважаючи ціну прийнятною, може забрати товар додому.
Ця стаття буде реалізувати децентралізовану торгівлю NFT шляхом написання смарт-контракту та простого фронтенд-сторінки. Зверніть увагу, що ця стаття призначена лише для навчання і не може бути використана в реальному виробничому середовищі.
NFT (Невзаємозамінний токен)
NFT також є нестандартним токеном, тобто кожен Токен є нестандартним, унікальним, він дотримується протоколу ERC-721. Як правило, кожен NFT у гаманці буде відображати різні зображення, і кожна група NFT матиме унікальний ID для розрізнення.
Через характеристики NFT неможливо встановити ціну так, як це робиться з ERC-20 через криву ціни — оскільки кожен Токен є унікальним. Тому наразі найбільш поширеним способом торгівлі є використання книги замовлень.
Торгівля на order book
Модель книги замовлень, простіше кажучи, означає, що ціна товару визначається вручну, на відміну від Uniswap, де ціна розраховується за допомогою цінової кривої. Зазвичай книга замовлень поділяється на два види торгових режимів: перший - це ціноутворююче замовлення, коли продавець встановлює ціну, яку бажає отримати; якщо покупець вважає цю ціну прийнятною, він може купити товар. Другий - це закупівельне замовлення, коли покупець, виходячи зі своїх потреб, видає замовлення на купівлю, а коли продавець вважає ціну прийнятною, він може продати товар.
Зазвичай ціна на замовлення на покупку буде нижчою за ціну на замовлення на продаж. У цій статті розглядається тільки перший спосіб встановлення ціни.
Функції NFT DEX
Основні функції NFT DEX повинні включати такі базові функції:
виставлені товари
Щоб виставити товар на продаж, потрібно зробити кілька речей:
Таким чином, товар вважається розміщеним. У контракті необхідно підтримувати карту цін на товари користувачів, ці дані зазвичай можуть бути розміщені в централізованому сервісі, щоб зменшити навантаження на контракт, але в цій статті ці дані карти будуть підтримуватись у контракті.
купівля товарів
При купівлі товару відбувається кілька речей:
Реалізація NFT DEX
У цьому розділі ми почнемо з нуля реалізацію DEX для NFT, це адреса DEX, яку вже розгорнув автор nft-dex-frontend.vercel.app.
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 може стягувати комісію з кожної транзакції, ця комісія може бути збережена в контракті або переказана на іншу вашу адресу, в цій статті використовується спосіб збереження в контракті.
На цьому етапі основні функції нашого контракту вважаються завершеними.
3. Розробка фронтенду DEX
Перед початком нам потрібно підготувати кілька інструментів, які містять такі інструменти:
Наші фронтенд-додатки повинні містити три сторінки: Mint, Buy та Portfolio. Mint призначений для того, щоб користувачі могли mint наші NFT, лише для демонстрації. Buy – це наш DEX магазин, де користувачі можуть купувати наші NFT. У Portfolio користувачі можуть виконувати операції з виставлення та зняття NFT.
3.1. Підключити гаманець
Процес підключення гаманця користувача дуже простий, досить використовувати компонент підключення, наданий Ant Design Web3.
Перш за все, ми запакуємо провайдера на зовнішньому рівні проекту, щоб ми могли використовувати можливості Ant Design Web3 у наступному коді. Крім того, оскільки нам потрібно підключитися до тестового ланцюга sepolia, заради швидкості рекомендується використовувати деякі вузлові сервіси для покращення швидкості запиту даних, я тут використовую кінцеву точку ZAN, яка дуже підходить для використання в Азіатсько-Тихоокеанському середовищі, швидка швидкість і дуже економічно вигідна, а підтримувані ланцюги також дуже багаті.
Потім розмістіть кнопку підключення в місцях, де потрібно підключити гаманець:
3.2. Чеканка
На сторінці Mint ми можемо Mint тестовий NFT. Mint – це операція написання контракту, тут ми будемо використовувати метод useWriteContract з wagmi. Нам потрібно вказати адресу контракту, ABI контракту та параметри контракту.
Після цього в гаманці потрібно підтвердити, і Mint буде успішно завершено.
3.3. Портфоліо
Тут потрібно показати всі NFT користувача. Ми можемо використовувати деякі API NFT, щоб отримати їх, тут використовується API opensea, оскільки підтримка API NFT для тестової мережі sepolia не так багато.
Після отримання списку NFT користувача, потрібно визначити, чи вже поставлені вони на продаж, невиставлені можна виставити, а виставлені можна зняти з продажу. Спосіб оцінки – через метод «getSellerListings» у контракті DEX, який отримує NFT, вже виставлені користувачем, а потім на основі поля «isAlive» цих NFT визначити, чи вони наразі виставлені на продаж.
Під час виставлення на продаж необхідно викликати метод контракту «listNFT», а при скасуванні – метод «cancelListing». Перед виставленням на продаж потрібно додатково викликати метод авторизації NFT, щоб надати NFT контракту, так що після завершення угоди цей NFT може автоматично передаватися покупцеві.
! Стартова серія Web3: впровадження NFT DEX з нуля
3.4. Купити
По-перше, нам потрібно продемонструвати вже представлені NFT. Подібно до демонстрації вже наявних NFT у Portfolio, тут є різниця в тому, що один є глобальним, а не для конкретного користувача, а інший - це лише демонстрація NFT, які є isAlive.
Коли ви купуєте, використовуйте метод «purchaseNFT», при виклику цього методу потрібно використовувати ETH для оплати ціни.
Тут це «value» — це ETH, який потрібно сплатити покупцеві.
Таким чином, фронтальний інтерфейс DEX, що містить усі основні можливості, завершено, ми можемо розгорнути його в vercel.
Цю статтю написала команда ZAN (X акаунт @zan_team) та Yeezo (X акаунт @GaoYeezo 75065).