Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

avatar
ZAN Team
1tuần trước
Bài viết có khoảng 3593từ,đọc toàn bộ bài viết mất khoảng 5 phút
Bài viết này sẽ triển khai giao dịch phi tập trung NFT bằng cách viết hợp đồng thông minh và một trang giao diện đơn giản.

Người dùng đã đọc các bài viết trước đây sẽ biết rằng đối với token giao thức ERC-20, chúng ta có thể giao dịch thông qua DEX do Uniswap đại diện để đạt được tính phi tập trung. Vậy đối với giao thức ERC-721, tức là NFT, làm thế nào để đạt được các giao dịch phi tập trung?

Một số sàn giao dịch NFT chính thống hiện nay sử dụng phương pháp đặt hàng để thực hiện giao dịch, giống như việc liệt kê các mặt hàng trên kệ siêu thị. Nếu người mua thấy mức giá đó là hợp lý, họ có thể mang sản phẩm về nhà.

Bài viết này sẽ triển khai giao dịch phi tập trung NFT bằng cách viết hợp đồng thông minh và một trang giao diện đơn giản. Xin lưu ý rằng bài viết này chỉ nhằm mục đích học tập và không thể sử dụng trong môi trường sản xuất thực tế.

NFT (Mã thông báo không thể thay thế)

NFT là một token không thể thay thế, nghĩa là mỗi token đều không thể thay thế và khác nhau, đồng thời tuân theo giao thức ERC-721. Nhìn chung, mỗi NFT sẽ hiển thị một hình ảnh khác nhau trong ví và mỗi bộ NFT sẽ có một ID duy nhất để phân biệt chúng.

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

Do đặc điểm của NFT, không thể thiết lập giá thông qua đường cong giá như ERC-20 - vì mỗi mã thông báo đều khác nhau. Do đó, phương pháp giao dịch phổ biến nhất hiện nay là thông qua sổ lệnh.

Giao dịch sổ lệnh

Nói một cách đơn giản, mô hình sổ lệnh có nghĩa là giá hàng hóa được thiết lập thủ công, khác với phương pháp tính giá thông qua đường cong giá của Uniswap. Sổ lệnh thường được chia thành hai chế độ giao dịch. Một là lệnh định giá, nghĩa là người bán tự định giá bán trong đầu. Nếu có người mua nào cho rằng mức giá đó là hợp lý thì người mua đó có thể mua. Cách còn lại là lệnh mua, nghĩa là người mua đưa ra lệnh mua dựa trên nhu cầu của chính mình và khi người bán cho rằng giá cả hợp lý thì người bán có thể bán.

Nói chung, giá của lệnh mua sẽ thấp hơn giá của lệnh báo giá. Bài viết này chỉ giới thiệu phương pháp định giá đầu tiên.

Chức năng của NFT DEX

Các chức năng cơ bản của NFT DEX phải bao gồm những điều sau:

  1. Niêm yết sản phẩm: Niêm yết NFT với mức giá cố định

  2. Mua hàng: Mua theo giá NFT

  3. Phí DEX: Phí được tính theo tỷ lệ giá giao dịch.

Liệt kê sản phẩm

Để liệt kê một sản phẩm, bạn cần thực hiện như sau:

  1. Giao diện người dùng: Người dùng chọn NFT của riêng mình, đặt giá và nhấp để niêm yết.

  2. Hợp đồng: Người dùng cần thiết lập quyền cho hợp đồng để thao tác NFT của người dùng.

Bằng cách này, sản phẩm đã hoàn thành. Trong hợp đồng, cần phải duy trì bản đồ giá của các mặt hàng được người dùng niêm yết. Dữ liệu này thường có thể được tập trung trong dịch vụ để giảm gánh nặng cho hợp đồng, nhưng trong bài viết này, phần Dữ liệu bản đồ này sẽ được duy trì trong hợp đồng.

Mua sản phẩm

Khi bạn mua một thứ gì đó, một vài điều sẽ xảy ra:

  1. Giao diện: Người dùng chọn NFT họ muốn mua và nhấp vào Mua.

  2. Hợp đồng: Gọi hợp đồng để chuyển tiền của người dùng cho người bán NFT và chuyển NFT cho người mua.

Triển khai NFT DEX

Trong phần này, chúng ta sẽ triển khai NFT DEX từ đầu. Đây là địa chỉ DEX nft-dex-frontend.vercel.app mà tác giả đã triển khai.

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

1. Tạo NFT

Để phục vụ mục đích thử nghiệm, tốt nhất là chúng ta nên có NFT của riêng mình. Chúng ta có thể nhanh chóng xây dựng giao thức NFT ERC-721 thông qua Remix, cung cấp mẫu tương ứng.

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

Chúng ta có thể dễ dàng triển khai NFT theo mẫu. Tất nhiên, bạn cũng có thể bỏ qua bước này và sử dụng trực tiếp NFT mà chúng tôi đã chuẩn bị.

2. Viết hợp đồng

Phương pháp hợp đồng của chúng tôi phải bao gồm các phương pháp sau:

2.1. Danh sách người bán NFT

Người bán cần chỉ định NFT cần bán và mức giá tương ứng. Khi niêm yết NFT, người dùng cần ký phương thức ủy quyền NFT để cho phép hợp đồng thông minh của chúng tôi có thẩm quyền vận hành NFT, để khi người mua mua, giao dịch có thể tự động hoàn tất.

Vì vậy, quá trình này sẽ diễn ra như sau: 1. Người dùng tự chọn NFT của mình; 2. Đặt giá, có thể là loại tiền tệ ổn định USDT, USDC hoặc ETH; 3. Cho phép NFT vào hợp đồng.

Sau đó, bạn có thể gọi phương thức liệt kê hợp đồng, cần thực hiện những điều sau:

  1. Xác minh quyền sở hữu NFT

  2. Thêm hồ sơ niêm yết

  3. Sự kiện kích hoạt danh sách

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

2.2. Người mua mua NFT

Khi người mua mua NFT, người dùng chỉ cần chọn NFT họ muốn và thanh toán số token tương ứng. Các bước sau đây sẽ được thực hiện ở cấp độ hợp đồng: 1. Đọc dữ liệu NFT tương ứng từ danh sách; 2. Tính phí xử lý dựa trên giá của NFT và khấu trừ vào giá giao dịch; 3. Chuyển NFT cho người mua; 4. Kích hoạt sự kiện mua hàng

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

2.3. Hủy niêm yết

Tất nhiên, người bán có thể cảm thấy mức giá không phù hợp và quyết định hủy niêm yết. Bạn có thể thấy rằng chúng tôi đã dành riêng một trường isActive để lưu thông tin niêm yết nhằm cho biết sản phẩm có hợp lệ hay không. Do đó, khi hủy niêm yết, chúng ta chỉ cần đặt trường này thành false.

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

2.4. Phí rút tiền

DEX có thể tính phí cho mỗi giao dịch. Phí này có thể được gửi vào hợp đồng hoặc chuyển đến địa chỉ khác của bạn. Điều khoản này áp dụng phương pháp gửi tiền vào hợp đồng.

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

Cho đến nay, các chức năng cơ bản của hợp đồng của chúng tôi đã hoàn tất.

3. Phát triển front-end DEX

Trước khi bắt đầu, chúng ta cần chuẩn bị một số công cụ, bao gồm:

  1. Ant Design Web3: dùng để kết nối ví và hiển thị thẻ NFT.

  2. Wagmi: Dùng để tương tác với ví.

  3. Nextjs + Vercel: Triển khai dự án của chúng tôi.

Ứng dụng front-end của chúng ta phải chứa ba trang: Mint, Buy và Portfolio. Mint dành cho người dùng đúc NFT của chúng tôi và chỉ dùng để trình diễn. Buy là trung tâm mua sắm DEX nơi người dùng có thể mua NFT của chúng tôi. Trong Portfolio, người dùng có thể niêm yết và hủy niêm yết NFT.

3.1. Kết nối với ví

Kết nối ví của người dùng và sử dụng Ant Design Web3 để triển khai

Quá trình kết nối ví của người dùng rất đơn giản, chỉ cần sử dụng thành phần kết nối do Ant Design Web3 cung cấp.

Đầu tiên, chúng tôi gói Provider vào lớp ngoài của dự án để có thể sử dụng các khả năng của Ant Design Web3 trong các mã tiếp theo. Ngoài ra, vì chúng ta cần kết nối với chuỗi thử nghiệm Sepolia nên để tăng tốc độ, chúng tôi khuyên bạn nên sử dụng một số dịch vụ nút để tăng tốc độ truy vấn dữ liệu. Tôi sử dụng điểm cuối ZAN ở đây, rất phù hợp để sử dụng trong môi trường Châu Á - Thái Bình Dương. Nó có tốc độ nhanh và rất tiết kiệm chi phí, đồng thời hỗ trợ nhiều loại chuỗi khác nhau.

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

Sau đó đặt nút kết nối tại nơi bạn cần kết nối với ví:

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầuVậy thôi, rất đơn giản.

3.2. bạc hà

Đúc một NFT và nhận token thử nghiệm tại https://zan.top/faucet/ethereum

Trên trang Mint, chúng ta có thể đúc NFT để thử nghiệm. Mint là một hoạt động dùng để viết hợp đồng. Ở đây chúng ta cần sử dụng phương thức useWriteContract trong wagmi. Chúng ta chỉ cần xác định địa chỉ hợp đồng, ABI hợp đồng và các tham số hợp đồng.

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

Sau đó, xác nhận trong ví và việc đúc tiền sẽ thành công.

3.3. Danh mục đầu tư

Quản lý NFT của người dùng

Tất cả NFT của người dùng cần được hiển thị ở đây. Chúng ta có thể sử dụng một số API NFT để có được nó. Ở đây chúng tôi sử dụng API opensea vì không có nhiều API NFT hỗ trợ chuỗi thử nghiệm sepolia.

Sau khi có được danh sách NFT của người dùng, bạn cần xác định xem nó đã được đưa lên kệ hay chưa. Nếu sản phẩm chưa được đưa lên kệ, bạn có thể hỗ trợ niêm yết sản phẩm đó, và nếu sản phẩm đã được đưa lên kệ, bạn có thể hỗ trợ hủy niêm yết sản phẩm đó. Cách đánh giá là lấy các NFT mà người dùng đã liệt kê thông qua phương thức getSellerListings trong hợp đồng DEX, sau đó xác định xem chúng có được liệt kê hay không dựa trên trường isAlive của các NFT này.

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

Khi niêm yết, bạn cần gọi phương thức hợp đồng listNFT và khi hủy, bạn cần gọi phương thức cancelListing. Trước khi niêm yết, bạn cần gọi phương thức ủy quyền NFT để ủy quyền NFT cho hợp đồng, để sau khi giao dịch tiếp theo hoàn tất, NFT có thể tự động được chuyển cho người mua.

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

3.4. Mua

Bạn có thể mua NFT trong Mua

Đầu tiên chúng ta cần hiển thị các NFT đã được liệt kê. Tương tự như việc hiển thị NFT hiện có của người dùng trong Portfolio, điểm khác biệt ở đây là một cái là toàn cầu và không còn dành cho một người dùng cụ thể nữa, còn cái kia chỉ cần hiển thị NFT isAlive.

Khi mua hàng, hãy sử dụng phương thức purchaseNFT. Khi gọi phương thức này, bạn cần sử dụng ETH để thanh toán giá bán.

Chuỗi bài dành cho người mới bắt đầu về Web3: Triển khai NFT DEX từ đầu

Giá trị ở đây là ETH mà người mua cần phải trả.

Trang giao diện DEX với đầy đủ các chức năng cơ bản hiện đã hoàn thiện và chúng ta có thể triển khai nó trong Vercel.

Bài viết này được viết bởi Yeezo (tài khoản X @GaoYeezo 75065 ) của Nhóm ZAN (tài khoản X @zan_team ).

Bài viết gốc, tác giả:ZAN Team。Tuyển dụng: Nhân viên kinh doanh phần mềm theo dự án report@odaily.email;Vi phạm quy định của pháp luật.

Odaily nhắc nhở, mời đông đảo độc giả xây dựng quan niệm đúng đắn về tiền tệ và khái niệm đầu tư, nhìn nhận hợp lý về blockchain, nâng cao nhận thức về rủi ro; Đối với manh mối phạm tội phát hiện, có thể tích cực tố cáo phản ánh với cơ quan hữu quan.

Đọc nhiều nhất
Lựa chọn của người biên tập