Build an NFT DEX from scratch

How can decentralization be achieved in trading NFTs based on the ERC-721 protocol? Currently, mainstream NFT exchanges mostly use a listing method for trading, similar to displaying products on supermarket shelves, where buyers can purchase if they find the price suitable. This article will implement a basic NFT decentralization trading function by writing smart contracts and a simple front-end page.

NFT Introduction

NFT(Non-Fungible Token) refers to non-fungible tokens, where each Token is unique and follows the ERC-721 protocol. Typically, each NFT displays different images in the wallet and has a unique ID for differentiation. Due to the characteristics of NFTs, prices cannot be set through price curves like ERC-20 tokens, so the common trading method is in the form of an order book.

Order Book Trading Model

The order book model is mainly divided into two types:

1. Pricing Order: The seller sets the selling price, and the buyer can purchase if they find it suitable.
2. Purchase Order: The buyer issues a purchase order, and the seller can sell if they find the price acceptable.

Generally, the purchase order price will be lower than the pricing order. This article mainly introduces the pricing order model.

NFT exchange basic functions

A basic NFT exchange should include the following functions:

1. List Product: Put the NFT on sale at the set price.
2. Purchase Goods: Buy at NFT Pricing
3. Collecting fees: Charged as a percentage of the transaction price

Product Listing Process

1. Frontend: Users select NFT and set the price, then click to list.
2. Contract: Users authorize contract operations for NFTs

Purchase Process

1. Frontend: The user selects the NFT and clicks to purchase.
2. Contract: Transfer buyer's funds to seller, NFT to buyer

Implement NFT exchange

1. Create test NFT

You can quickly deploy an ERC-721 protocol NFT contract for testing using Remix.

2. Write Smart Contracts

The contract mainly includes the following methods:

2.1 Seller Lists NFT

Process:

1. The user selects NFT
2. Set Price
3. Authorize NFT to the contract
4. Call the listing method

Listing method execution:

1. Verify NFT ownership
2. Add listing record
3. Trigger listing event

2.2 Buyer purchases NFT

Contract execution:

1. Read NFT data
2. Calculate and deduct the handling fee
3. Transfer NFT to the buyer
4. Trigger purchase event

2.3 Cancel Listing

Set the isActive field of the listed records to false.

2.4 Withdrawal Fee

Withdraw the accumulated fees from the contract.

3. Develop Frontend Interface

Main tools used:

• Ant Design Web3: Connect wallet and display NFT
• Wagmi: Interact with wallet
• Next.js + Vercel: Deploy the project

The front end consists of 3 pages:

• Mint: Create test NFT
• Buy:NFT exchange
• Portfolio: Manage User NFT

3.1 Connect Wallet

Implemented using Ant Design Web3 connection components.

3.2 Mint Page

Use the useWriteContract method of wagmi to call the mint method of the NFT contract.

3.3 Portfolio Page

Display the NFTs owned by users, supporting the listing and delisting operations.

3.4 Buy Page

Display listed NFTs, support purchase operations.

Through the above steps, a basic NFT DEX has been established. The front end can be deployed to Vercel for access and use.