Seri Pemula Web3: Mewujudkan NFT DEX dari nol

Pengguna yang telah membaca beberapa artikel sebelumnya seharusnya tahu bahwa untuk token pada protokol ERC-20, kita dapat melakukan perdagangan melalui DEX yang diwakili oleh Uniswap, sehingga menjadi desentralisasi. Lalu untuk protokol ERC-721, yang merupakan NFT, bagaimana kita bisa melakukan perdagangan secara desentralisasi?

Saat ini, beberapa bursa NFT yang utama menggunakan cara pemesanan untuk melakukan transaksi, seperti menempatkan barang-barang di rak supermarket; pembeli yang merasa harga sesuai, dapat membawa barang tersebut pulang.

Artikel ini akan menciptakan perdagangan NFT yang Desentralisasi melalui penulisan kontrak pintar dan halaman depan yang sederhana. Harap dicatat bahwa artikel ini hanya untuk tujuan pembelajaran dan tidak dapat digunakan secara nyata di lingkungan produksi.

NFT (Token Non-Fungible)

NFT adalah Non-Fungible Token, yang berarti setiap Token adalah unik dan berbeda. NFT mengikuti protokol ERC-721. Secara umum, setiap NFT akan menampilkan gambar yang berbeda di dompet, dan setiap kelompok NFT akan memiliki ID yang unik untuk membedakannya.

Web3 pemula seri: Mewujudkan NFT DEX dari nol

Karena karakteristik NFT, ia tidak dapat menetapkan harga dengan cara yang sama seperti ERC-20 melalui kurva harga—karena setiap Token itu berbeda. Jadi, metode perdagangan yang cukup umum saat ini adalah dalam bentuk buku pesanan.

Perdagangan Buku Pesanan

Mode buku pesanan secara sederhana adalah bahwa harga barang ditentukan oleh manusia, berbeda dengan Uniswap yang menghitung harga melalui kurva harga. Buku pesanan umumnya dibagi menjadi dua mode perdagangan, satu adalah pesanan harga, yaitu penjual menetapkan harga jual yang diinginkan, jika ada pembeli yang merasa harga sesuai, pembeli dapat melakukan pembelian. Yang lainnya adalah pesanan pembelian, yaitu pembeli mengeluarkan pesanan pembelian berdasarkan kebutuhannya, ketika penjual merasa harga sesuai, penjual dapat melakukan penjualan.

Umumnya, harga permintaan akan lebih rendah daripada harga penawaran. Artikel ini hanya memperkenalkan satu metode penetapan harga.

Fitur DEX NFT

Fungsi dasar dari sebuah NFT DEX seharusnya mencakup fungsi-fungsi dasar berikut:

  1. Daftar Produk: Menempatkan sebuah NFT untuk dijual sesuai dengan harga yang ditentukan
  2. Membeli barang: Melakukan pembelian sesuai dengan harga NFT
  3. Biaya DEX: Biaya akan dikenakan berdasarkan persentase dari harga transaksi.

Menyediakan produk

Untuk menambahkan produk, Anda perlu melakukan beberapa hal berikut:

  1. Frontend: Pengguna memilih NFT mereka sendiri, menetapkan harga, dan mengklik untuk menampilkan.
  2. Kontrak: Pengguna perlu memberikan izin kepada kontrak, yang dapat mengendalikan NFT pengguna.

Dengan demikian, produk sudah selesai diunggah. Dalam kontrak, perlu memelihara peta harga produk pengguna yang diunggah, bagian data ini umumnya dapat dilakukan dalam layanan terpusat untuk mengurangi beban kontrak, tetapi dalam artikel ini, data peta tersebut akan dipelihara di dalam kontrak.

membeli barang

Saat membeli barang, beberapa hal berikut akan terjadi:

  1. Frontend: Pengguna memilih NFT yang ingin dibeli, lalu mengklik beli.
  2. Kontrak: Memanggil kontrak, mentransfer uang pengguna ke penjual NFT, dan mentransfer NFT ke pembeli.

Mewujudkan sebuah DEX NFT

Pada bab ini, kita akan membangun DEX NFT dari nol, ini adalah alamat DEX yang telah saya deploy nft-dex-frontend.vercel.app.

Web3 pemula seri: Membangun DEX NFT dari nol

1. Membuat sebuah NFT

Untuk keperluan pengujian, sebaiknya kita memiliki NFT kita sendiri. Kita dapat dengan cepat membangun NFT protokol ERC-721 menggunakan Remix, yang menyediakan template yang sesuai.

Web3 pemula seri: Mewujudkan NFT DEX dari nol

Kita dapat dengan mudah menerapkan sebuah NFT sesuai dengan template. Tentu saja, Anda juga bisa melewati langkah ini dan langsung menggunakan NFT yang sudah kami siapkan.

2. Penulisan kontrak

Metode kontrak kami harus mencakup beberapa metode berikut:

2.1. Penjual Menyusun NFT

Penjual perlu menentukan NFT yang akan dijual serta harga yang sesuai. Saat mendaftar, pengguna perlu menandatangani metode otorisasi NFT, agar kontrak pintar kami memiliki hak untuk mengoperasikan NFT ini, sehingga ketika ada pembeli yang membeli, transaksi ini dapat diselesaikan secara otomatis.

Jadi prosesnya seharusnya seperti ini: 1. Pengguna memilih NFT mereka; 2. Menetapkan harga, di sini penilaian bisa dalam koin stabil USDT, USDC, atau bisa juga dalam ETH; 3. Mengizinkan NFT kepada kontrak.

Setelah itu, Anda dapat memanggil metode penyajian kontrak, metode ini perlu melakukan beberapa hal berikut:

  1. Memverifikasi kepemilikan NFT
  2. Tambahkan catatan peluncuran
  3. Memicu peristiwa peluncuran

Web3 pemula seri: Mewujudkan NFT DEX dari nol

2.2. Pembeli membeli NFT

Pembeli saat membeli NFT, pengguna hanya perlu memilih NFT yang diinginkan dan membayar Token yang sesuai. Di tingkat kontrak, beberapa langkah berikut akan dieksekusi: 1. Membaca data NFT yang sesuai dari "listings"; 2. Menghitung biaya layanan berdasarkan harga NFT, dan mengurangi bagian ini dari harga transaksi; 3. Mentransfer NFT ke tangan pembeli; 4. Memicu peristiwa pembelian.

Web3 pemula seri: Mengimplementasikan DEX NFT dari nol

2.3. Batalkan Penempatan

Tentu saja, penjual mungkin merasa harga tidak sesuai dan memilih untuk membatalkan penjualan. Kita dapat melihat bahwa di tempat kita menyimpan informasi penjualan, kita menyimpan sebuah field isActive, yang digunakan untuk menunjukkan apakah barang tersebut valid, sehingga ketika membatalkan penjualan, kita hanya perlu mengatur field ini menjadi false.

Web3 pemula seri: Mewujudkan sebuah DEX NFT dari nol

2.4. Biaya Penarikan

DEX dapat mengenakan biaya transaksi pada setiap perdagangan, biaya ini dapat disimpan di kontrak atau dipindahkan ke alamat lain milik Anda, artikel ini mengambil cara menyimpan di kontrak.

Seri Pemula Web3: Mewujudkan DEX NFT dari Nol

Sampai di sini, fungsi dasar kontrak kami sudah lengkap.

3. Pengembangan frontend DEX

Sebelum memulai, kita perlu menyiapkan beberapa alat, termasuk beberapa alat berikut:

  1. Ant Design Web3: untuk menghubungkan dompet dan menampilkan kartu NFT.
  2. Wagmi: Digunakan untuk berinteraksi dengan dompet.
  3. Nextjs + Vercel: Menerapkan proyek kami.

Aplikasi frontend kami harus mencakup tiga halaman, Mint, Buy, dan Portfolio. Mint digunakan agar pengguna dapat Mint NFT kami, hanya untuk demonstrasi. Buy adalah DEX mall kami, di mana pengguna dapat membeli NFT kami. Di Portfolio, pengguna dapat melakukan operasi daftar dan hapus daftar untuk NFT.

3.1. Hubungkan Dompet

Hubungkan dompet pengguna, gunakan Ant Design Web3 untuk mengimplementasikan

Proses menghubungkan dompet pengguna sangat sederhana, cukup gunakan komponen koneksi yang disediakan oleh Ant Design Web3.

Pertama, kita membungkus proyek dengan Provider, sehingga kita dapat menggunakan kemampuan Ant Design Web3 dalam kode selanjutnya. Selain itu, karena kita perlu terhubung ke jaringan pengujian sepolia, untuk mempertimbangkan kecepatan, disarankan untuk menggunakan beberapa layanan node untuk meningkatkan kecepatan query data. Di sini saya menggunakan endpoint ZAN, yang sangat cocok digunakan di lingkungan Asia-Pasifik, cepat dan harganya sangat terjangkau, serta mendukung banyak jaringan.

Web3 pemula seri: Mewujudkan NFT DEX dari nol

Setelah itu, tempatkan tombol koneksi di tempat yang membutuhkan koneksi dompet:

Web3 Pemula Series: Mewujudkan NFT DEX dari NolJadi ini sudah selesai, sangat mudah.

3.2. Mint

Mint sebuah NFT, untuk mendapatkan Token uji coba silakan pergi ke

Di halaman Mint kita bisa Mint NFT yang digunakan untuk pengujian. Mint adalah operasi penulisan kontrak, di sini kita akan menggunakan metode useWriteContract dari wagmi. Kita perlu menentukan alamat kontrak, ABI kontrak, dan parameter kontrak dengan benar.

Web3 pemula seri: Mewujudkan DEX NFT dari nol

Setelah itu, konfirmasi di dompet dan Anda dapat berhasil Mint.

3.3. Portofolio

Mengelola NFT pengguna

Di sini perlu menampilkan semua NFT pengguna. Kami dapat menggunakan beberapa API NFT untuk mendapatkannya, di sini menggunakan API opensea, karena tidak banyak API NFT yang mendukung rantai uji sepolia.

Setelah mendapatkan daftar NFT pengguna, perlu untuk menentukan apakah NFT tersebut sudah terdaftar. NFT yang belum terdaftar dapat didaftarkan, sementara yang sudah terdaftar dapat dicabut. Cara untuk menentukannya adalah dengan menggunakan metode "getSellerListings" di dalam kontrak DEX untuk mendapatkan NFT yang sudah terdaftar oleh pengguna, kemudian berdasarkan field "isAlive" dari NFT tersebut untuk menentukan apakah sedang terdaftar.

Web3 pemula seri: Mewujudkan NFT DEX dari nol

Saat listing, perlu memanggil metode kontrak "listNFT", dan saat membatalkan, perlu memanggil metode "cancelListing". Sebelum listing, perlu memanggil metode otorisasi NFT tambahan, memberikan otorisasi NFT kepada kontrak, sehingga setelah transaksi selesai, NFT ini dapat secara otomatis ditransfer kepada pembeli.

Seri Pemula Web3: Membangun DEX NFT dari Nol

3.4. Beli

Di Buy, Anda dapat membeli NFT

Pertama, kita perlu menampilkan NFT yang sudah terdaftar. Mirip dengan tampilan NFT yang sudah dimiliki pengguna di Portfolio, perbedaannya di sini adalah satu bersifat global, bukan milik pengguna tertentu, dan yang lainnya hanya perlu menampilkan NFT yang isAlive.

Gunakan metode 「 purchaseNFT 」 saat membeli, dan saat memanggil metode ini, perlu menggunakan ETH untuk membayar harga.

Web3 Pemula Seri: Mewujudkan DEX NFT dari Nol

Di sini, "value" ini adalah ETH yang perlu dibayarkan oleh pembeli.

Sebuah halaman depan DEX yang mencakup semua kemampuan dasar telah selesai, kita dapat mendeploy-nya di vercel.

Artikel ini ditulis oleh Tim ZAN (Akun X @zan_team) oleh Yeezo (Akun X @GaoYeezo 75065).

Lihat Asli
Konten ini hanya untuk referensi, bukan ajakan atau tawaran. Tidak ada nasihat investasi, pajak, atau hukum yang diberikan. Lihat Penafian untuk pengungkapan risiko lebih lanjut.
  • Hadiah
  • Komentar
  • Bagikan
Komentar
0/400
Tidak ada komentar
  • Sematkan
Perdagangkan Kripto Di Mana Saja Kapan Saja
qrCode
Pindai untuk mengunduh aplikasi Gate
Komunitas
Bahasa Indonesia
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)