Langkah demi langkah untuk membuat platform perdagangan NFT desentralisasi: dari kontrak hingga implementasi frontend

robot
Pembuatan abstrak sedang berlangsung

Mewujudkan perdagangan NFT Desentralisasi

Untuk NFT yang mengikuti protokol ERC-721, cara untuk mewujudkan perdagangan desentralisasi berbeda dari token ERC-20. Saat ini, platform perdagangan NFT utama banyak menggunakan model pemesanan untuk melakukan perdagangan, mirip dengan menampilkan barang di rak supermarket, pembeli dapat membeli barang dengan harga yang sesuai.

Artikel ini akan menciptakan fungsi perdagangan NFT desentralisasi dasar melalui penulisan kontrak pintar dan antarmuka frontend yang sederhana. Perlu dicatat bahwa konten artikel ini hanya untuk referensi belajar dan tidak cocok untuk lingkungan produksi yang sebenarnya.

Seri Pemula Web3: Mewujudkan DEX NFT dari Nol

Karakteristik Dasar NFT

NFT adalah token yang tidak dapat dipertukarkan, setiap Token adalah unik, mengikuti protokol ERC-721. Secara umum, setiap NFT akan menampilkan gambar yang berbeda di dompet, dan setiap grup NFT memiliki ID unik untuk membedakan.

Karena fitur NFT ini, harga tidak dapat ditentukan melalui kurva harga seperti token ERC-20. Oleh karena itu, cara perdagangan yang umum saat ini adalah melalui bentuk buku pesanan.

Seri Pemula Web3: Mewujudkan DEX NFT dari nol

Mode Perdagangan Order Book

Dalam mode buku pesanan, harga barang ditentukan secara manual, berbeda dengan mode pembuat pasar otomatis yang menghitung harga melalui algoritma. Buku pesanan biasanya memiliki dua jenis cara perdagangan:

  1. Daftar Harga: Penjual menetapkan harga jual, pembeli dapat membeli jika merasa harga tersebut sesuai.

  2. Permintaan pembelian: Pembeli mengeluarkan pesanan permintaan pembelian, penjual dapat menjual jika merasa harga sesuai.

Umumnya, harga permintaan akan lebih rendah daripada harga yang ditetapkan. Artikel ini akan fokus pada metode perdagangan harga yang ditetapkan.

Web3 Pemula: Mewujudkan DEX NFT dari Nol

Fungsi Dasar NFT DEX

DEX NFT yang dasar harus mencakup fungsi inti berikut:

  1. Memasang produk: Menempatkan NFT sesuai dengan harga yang ditetapkan.
  2. Membeli barang: Membeli sesuai dengan harga NFT
  3. Mengambil biaya transaksi: Biaya transaksi diambil berdasarkan proporsi dari harga transaksi

Proses Penempatan Produk

Untuk mengunggah produk, perlu menyelesaikan langkah-langkah berikut:

  1. Frontend: Pengguna memilih NFT dan menetapkan harga, kemudian mengklik untuk menampilkan.
  2. Kontrak: Pengguna memberikan izin untuk kontrak beroperasi pada NFT.

Dalam kontrak, perlu untuk memelihara tabel pemetaan harga produk yang diunggah oleh pengguna. Data ini juga dapat disimpan di layanan terpusat untuk mengurangi beban kontrak, tetapi artikel ini akan menyimpannya di dalam kontrak.

Proses Pembelian Barang

Saat membeli barang, hal-hal berikut akan terjadi:

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

Web3 pemula seri: Mewujudkan DEX NFT dari nol

Mewujudkan DEX NFT

Selanjutnya kita akan membangun sebuah DEX NFT dari nol.

1. Membuat NFT uji coba

Untuk kebutuhan pengujian, kita dapat menggunakan Remix untuk dengan cepat menerapkan kontrak NFT yang mengikuti protokol ERC-721. Kita juga dapat menggunakan NFT yang sudah disiapkan untuk pengujian.

Seri Pemula Web3: Mewujudkan DEX NFT dari nol

2. Menulis kontrak pintar

Kontrak perlu mencakup metode utama berikut:

2.1 Penjual mengunggah NFT

Proses:

  1. Pengguna memilih NFT
  2. Atur Harga
  3. Memberikan wewenang NFT kepada kontrak
  4. Memanggil metode penempatan

Metode penempatan yang diperlukan:

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

Web3 pemula seri: Mewujudkan NFT DEX dari nol

2.2 Pembeli membeli NFT

Proses pembelian:

  1. Membaca data NFT
  2. Hitung dan potong biaya transaksi
  3. Transfer NFT kepada pembeli
  4. Memicu peristiwa pembelian

Web3 Pemula Seri: Mewujudkan NFT DEX dari nol

2.3 Batalkan Penjualan

Cukup atur field isActive dalam catatan peluncuran menjadi false.

Web3 Pemula Series: Mewujudkan NFT DEX dari Nol

2.4 Tarik biaya transaksi

Tarik biaya yang terkumpul dalam kontrak ke alamat yang ditentukan.

Web3 Pemula Seri: Mewujudkan DEX NFT dari Nol

3. Mengembangkan frontend DEX

Alat utama yang diperlukan untuk pengembangan front-end:

  • Ant Design Web3: untuk koneksi dompet dan NFT tampilan
  • Wagmi: digunakan untuk berinteraksi dengan dompet
  • Next.js + Vercel: menerapkan proyek

Frontend harus mencakup tiga halaman utama: Mint, Buy, dan Portfolio.

Web3 Pemula Seri: Membangun DEX NFT dari nol

3.1 Hubungkan Dompet

Menggunakan komponen Ant Design Web3 untuk mengimplementasikan fungsi koneksi dompet.

Web3 pemula seri: Membangun DEX NFT dari nol

3.2 Halaman Mint

Digunakan untuk mencetak NFT uji coba, menggunakan metode useWriteContract dari wagmi untuk memanggil kontrak.

Web3 pemula seri: Mewujudkan DEX NFT dari nol

3.3 Halaman Portofolio

Menampilkan NFT yang dimiliki pengguna, mendukung operasi penjualan dan penghapusan.

Saat mendaftar, perlu memanggil metode listNFT, dan saat membatalkan pendaftaran, panggil metode cancelListing. Sebelum mendaftar, perlu memberikan otorisasi NFT ke kontrak.

3.4 Halaman Beli

Tampilkan semua NFT yang telah terdaftar, mendukung operasi pembelian.

Panggil metode purchaseNFT saat membeli, dan bayar ETH yang sesuai.

Setelah menyelesaikan langkah-langkah di atas, sebuah DEX NFT dasar telah diimplementasikan. Dapat diterapkan di platform seperti Vercel untuk pengujian dan penggunaan.

Web3 pemula seri: Mewujudkan NFT DEX dari nol

Lihat Asli
This page may contain third-party content, which is provided for information purposes only (not representations/warranties) and should not be considered as an endorsement of its views by Gate, nor as financial or professional advice. See Disclaimer for details.
  • Hadiah
  • 7
  • Bagikan
Komentar
0/400
RugPullProphetvip
· 07-08 04:56
Tidak perlu begitu repot di front-end, kan?
Lihat AsliBalas0
0xInsomniavip
· 07-07 17:14
Para pengembang akhir-akhir ini suka bermain dex, ya?
Lihat AsliBalas0
GasFeeSobbervip
· 07-06 19:00
Menantikan pembukaan kunci Solidity oleh bull.
Lihat AsliBalas0
OPsychologyvip
· 07-06 18:58
Pelatih, saya juga ingin menulis kontrak dex.
Lihat AsliBalas0
just_here_for_vibesvip
· 07-06 18:55
Kode ini agak hardcore ya
Lihat AsliBalas0
BearMarketSurvivorvip
· 07-06 18:55
Satu lagi pasar NFT, membuatku sangat tergoda.
Lihat AsliBalas0
NFTBlackHolevip
· 07-06 18:55
Akhirnya ada tutorial dex yang dapat diandalkan
Lihat AsliBalas0
  • 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)