З нуля створення NFT Децентралізація торгова платформа: смартконтракти та керівництво з впровадження фронтенду

2025-07-18 22:17:56

Генерація анотацій у процесі

Створення NFT децентралізованої платформи з нуля

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

Наразі провідні платформи для торгівлі NFT в основному використовують режим ордерів для проведення угод, подібно до того, як товари викладаються на полицях супермаркету, покупець може придбати їх, якщо вважає ціну прийнятною. У цій статті буде реалізовано децентралізовану торгівлю NFT шляхом написання смарт-контракту та простого фронтенд-інтерфейсу. Слід зауважити, що зміст цієї статті призначений лише для навчання і не підходить для виробничого середовища.

! Стартова серія Web3: впровадження NFT DEX з нуля

Вступ до NFT

NFT — це нерівноцінний токен, що відповідає стандарту ERC-721. Кожен NFT є унікальним, зазвичай він відображається у гаманці у вигляді різних зображень і має унікальний ID для відмінності.

Через особливості 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.

3.1 Підключити гаманець

Використання компонентів підключення Ant Design Web3 для реалізації підключення гаманця.

3.2 Сторінка Mint

Використання методу useWriteContract від wagmi для реалізації NFT-мінінгу.

! Стартова серія Web3: впровадження NFT DEX з нуля

3.3 Сторінка Портфоліо

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

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

Показати вказані NFT, підтримує операцію купівлі.

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

! Серія Web3 для новачків: впровадження NFT DEX з нуля

Переглянути оригінал

Ця сторінка може містити контент третіх осіб, який надається виключно в інформаційних цілях (не в якості запевнень/гарантій) і не повинен розглядатися як схвалення його поглядів компанією Gate, а також як фінансова або професійна консультація. Див. Застереження для отримання детальної інформації.

12 лайків