Build an NFT Decentralization trading platform from scratch

For NFTs that follow the ERC-721 protocol, the method of achieving decentralized trading is different from ERC-20 tokens. Currently, the mainstream NFT trading model is similar to the product display on supermarket shelves, where buyers can directly select their desired NFTs.

This article will introduce how to implement a basic NFT Decentralization trading platform through smart contracts and a simple front-end interface. It is important to note that this is just a demonstration project for learning purposes and is not suitable for direct use in a production environment.

Characteristics and Trading Methods of NFT

NFT, or Non-Fungible Token, is unique; each token is one of a kind. Typically, NFTs display different images in a wallet and have a unique ID for identification. Due to this characteristic of NFTs, prices cannot be determined by price curves like ERC-20 tokens. The most common way to trade NFTs currently is through an order book format.

There are two main types of order book trading models:

1. Pricing Order: The seller sets the price, and the buyer can purchase if they find it acceptable.
2. Purchase Order: Buyers publish their purchasing requirements and prices, and sellers can sell if they find it suitable.

This article will focus on the pricing order trading method.

Core Features of NFT Trading Platform

A basic NFT trading platform should include the following core functions:

1. List NFT: Seller sets the price and lists the NFT
2. Purchase NFT: Buyers purchase NFT at the set price
3. Charge a fee: A certain percentage of the transaction price will be charged as a fee.

Listing NFT process

1. Frontend: Users select NFTs and set prices
2. Contract: User authorizes contract operation NFT permissions
3. Contract: Record listing information

Purchase NFT Process

1. Frontend: Users select the NFT they wish to purchase.
2. Contract: Transfer NFT to the buyer, transfer to the seller

Implement NFT trading platform

Next, we will build a simple NFT trading platform from scratch.

1. Create a test NFT

We can quickly deploy an NFT contract that follows the ERC-721 protocol using Remix for testing.

2. Write smart contracts

The contract needs to implement the following main methods:

2.1 Seller Lists NFT

Process:

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

2.2 Buyer purchases NFT

Process:

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

2.3 Remove from shelves

Mark the listing record as invalid.

2.4 Withdrawal Fee

Withdraw the accumulated fees.

3. Develop front-end interface

We will use the following tools:

• Ant Design Web3: Connect Wallet, Display NFT
• Wagmi: Interact with Wallet
• Next.js + Vercel: Deploying the project

The front end needs to implement three main pages:

• Mint: Create test NFT
• Buy:NFT trading platform
• Portfolio: Manage users' NFT

3.1 Connect Wallet

Use Ant Design Web3 components to implement wallet connection functionality.

3.2 Mint page

Used to create test NFT, call the contract's mint method.

3.3 Portfolio Page

Display the NFTs held by the user, supporting listing and delisting operations.

3.4 Buy Page

Display all listed NFTs, supporting purchase functionality.

By following the above steps, we have implemented a basic NFT Decentralization trading platform. Although the functionality is relatively simple, it already includes the core logic of NFT trading. Based on this, it can be further improved and optimized to meet the needs of more practical application scenarios.