Developing an NFT Decentralization platform from scratch

For NFTs based on the ERC-721 protocol, achieving Decentralization in trading is an important topic. Currently, mainstream NFT trading platforms mostly use an order-book model, similar to the display of goods on supermarket shelves. This article will demonstrate how to build a basic NFT Decentralization trading system through smart contracts and a simple front-end interface.

NFT Characteristics and Trading Models

NFT stands for Non-Fungible Token, and each Token is unique. Due to this characteristic, NFTs cannot be priced through price curves like ERC-20 tokens; instead, they are traded in an order book format.

There are mainly two modes of order book trading:

1. Pricing Order: Seller sets the price, buyer purchases directly.
2. Purchase Order: The buyer publishes a purchase order, and the seller chooses to sell.

This article will focus on the pricing order model.

Core Functions of the NFT Trading Platform

A basic NFT trading platform should include the following functions:

1. List Product: Seller sets the price to list the NFT
2. Purchase goods: The buyer purchases the NFT at the set price.
3. Transaction Fee: The platform charges a certain percentage of the transaction fee.

Listing Process

1. The user selects the NFT and sets the price.
2. User authorizes contract to operate NFT
3. Contract record listing information

Purchase Process

1. Users select and purchase NFT
2. Transfer NFT ownership
3. Pay the seller, deduct the handling fee

Smart Contract Development

The contract mainly includes the following methods:

1. List NFT

   • Verify NFT ownership
   • Add listing record
   • Trigger listing event

2. Purchase NFT

   • Read NFT price information
   • Calculate and deduct the handling fee
   • Transfer NFT ownership
   • Trigger purchase event

3. Remove from listing

   • Set the listing status to invalid

4. Withdrawal fee

   • Withdraw the accumulated fees

Front-end Development

The front end uses the following tools:

• Ant Design Web3: Wallet connection and NFT display
• Wagmi: Wallet Interaction
• Next.js + Vercel: Application Development and Deployment

Main page functions:

1. Mint: Mint test NFT
2. Buy:NFT trading platform
3. Portfolio: Manage User NFT

Wallet Connection

Implement wallet connection functionality using Ant Design Web3 components.

NFT management

The Portfolio page displays the user's NFTs and supports listing and delisting operations. When listing, it is necessary to authorize the NFT to the contract.

NFT transaction

The Buy page displays all listed NFTs, and users can purchase directly. During the purchase, the contract method purchaseNFT is called, and the corresponding ETH is paid.

By following the steps above, we have achieved a basic NFT Decentralization trading platform. Although the functionality is still relatively simple, it already includes the core trading processes and can serve as the foundation for more complex systems.