Build a decentralized NFT trading platform from scratch

For NFTs under the ERC-721 protocol, how can decentralized trading be achieved? 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 acceptable.

This article will implement decentralized trading of NFTs by writing smart contracts and simple front-end pages. It is important to note that the content of this article is for learning reference only and is not suitable for direct use in a production environment.

NFT(Non-Fungible Token) Introduction

NFT stands for Non-Fungible Token, following the ERC-721 protocol, and each Token is unique. NFTs usually display different images in wallets, and each group of NFTs has a unique ID for differentiation.

Due to the characteristics of NFTs, prices cannot be set through price curves like ERC-20 tokens. Therefore, the currently common trading method is to use an order book format.

Order Book Trading Model

In the order book model, the product prices are set by humans, unlike some DEXs that calculate prices through price curves. The order book generally has two types of trading modes:

1. Pricing Order: The seller sets the selling price, and the buyer can purchase if they find it acceptable.

2. Purchase Order: The buyer issues a purchase order, and the seller can sell if they find the price acceptable.

The price of a typical buy order is usually lower than that of a sell order. This article mainly introduces the sell order trading method.

Basic Functions of the NFT Decentralization Platform

A basic NFT Decentralization trading platform should include the following features:

1. List Product: List the NFT at the set price
2. Purchase goods: Buy according to NFT pricing
3. Charge fees: charged as a percentage of the transaction price

Product Listing Process

1. Frontend: Users select NFTs and set prices, then click to list.
2. Contract: User authorizes contract to operate NFT

The contract needs to maintain a mapping table of user-listed product prices. This part of the data can also be stored in a centralized service to lighten the burden on the contract, but this article will maintain it within the contract.

Purchase process for goods

1. Front-end: Users select the NFT they want to purchase and click buy.
2. Contract: Transfer user funds to the seller, NFT to the buyer

Realizing a Decentralization NFT platform

This section will build an NFT Decentralization trading platform from scratch.

1. Create NFT contract

For testing purposes, we can quickly deploy an ERC-721 protocol NFT contract using Remix. Of course, we can also directly use the prepared NFT contract.

2. Write the trading platform contract

The trading platform contract should include the following main methods:

2.1 Seller lists NFT

Listing process:

1. Users select NFT
2. Set the price in available stablecoins or ETH (.
3. Authorize NFT to the contract

The listing method requires:

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

![Web3 Beginner Series: Build an NFT DEX from Scratch])https://img-cdn.gateio.im/webp-social/moments-8dc32f1a83e46e857340f9841df2c7f5.webp(

)# 2.2 Buyer purchases NFT

Purchase Process:

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

![Web3 Beginner Series: Building an NFT DEX from Scratch]###https://img-cdn.gateio.im/webp-social/moments-64251e5648f68085d608a40fe42097c4.webp(

)# 2.3 Cancel Listing

Set the isActive field of the corresponding NFT in listings to false.

![Web3 Beginner Series: Building an NFT DEX from Scratch]###https://img-cdn.gateio.im/webp-social/moments-b47304559c5b8978028d581df19049c8.webp(

)# 2.4 Withdrawal Fee

Withdraw the accumulated fees from the contract to the specified address.

![Web3 Beginner Series: Building an NFT DEX from Scratch]###https://img-cdn.gateio.im/webp-social/moments-4dc46af090a3d3987626b915c0d5f1ac.webp(

) 3. Develop the trading platform frontend

Main tools used:

• Ant Design Web3: Connect wallet, display NFT cards
• Wagmi: Interact with Wallet
• Next.js + Vercel: Deploying Projects

The frontend should include three pages: Mint, Buy, and Portfolio.

3.1 Connect Wallet

Use the connection component of Ant Design Web3 to implement wallet connection functionality.

![Web3 Beginner Series: Build an NFT DEX from Scratch]###https://img-cdn.gateio.im/webp-social/moments-4e5e1ba70137403b4ea0e0503378e14a.webp(

)# 3.2 Mint Page

Used to mint test NFTs, interacting with the contract by calling the useWriteContract method from wagmi.

![Web3 Beginner Series: Implementing an NFT DEX from Scratch]###https://img-cdn.gateio.im/webp-social/moments-56f66de1a4bb30af91363bd5cc567e40.webp(

)# 3.3 Portfolio page

Manage user NFTs, implement listing and delisting functions. Use the opensea API to obtain the user's NFT list and call the contract to determine the NFT listing status.

![Web3 Beginner Series: Build an NFT DEX from Scratch]###https://img-cdn.gateio.im/webp-social/moments-a11e2cb9eb62433a03adcf2abd7b56b5.webp(

)# 3.4 Buy Page

Display all listed NFTs and enable the purchase function. Call the contract's purchaseNFT method to complete the transaction.

![Web3 Beginner Series: Realizing an NFT DEX from Scratch]###https://img-cdn.gateio.im/webp-social/moments-0a338541b5f8b2aa130fb03a46027c47.webp(

After completing the above steps, a basic NFT Decentralization trading platform has been implemented. It can be deployed to platforms like Vercel for access and use.

![Web3 Beginner Series: Building an NFT DEX from Scratch])https://img-cdn.gateio.im/webp-social/moments-6d344484abad011d83b96ff377ffae1f.webp(