Web3 Newbie Series: Building an NFT DEX from Scratch

Users who have read the previous articles should know that for ERC-20 protocol tokens, we can trade through DEX represented by Uniswap, achieving Decentralization. So for ERC-721 protocol, which is NFT, how can we achieve decentralized trading?

Currently, some mainstream NFT exchanges use a listing method for transactions, just like putting items on a supermarket shelf; when buyers find the price suitable, they can take the items home.

This article will implement decentralized trading of NFTs by writing smart contracts and a simple front-end page. Note that this article is for learning purposes only and cannot be used in a production environment.

NFT (Non-Fungible Token)

NFT, also known as Non-Fungible Token, means that each Token is non-fungible and unique. It follows the ERC-721 protocol. Generally, each NFT will display a different image in the wallet, and each group of NFTs will have a unique ID to distinguish them.

Due to the characteristics of NFT, it cannot set prices like ERC-20 through price curves—because each Token is different. Therefore, the more common trading method currently is in the form of an order book.

Order Book Trading

The order book model, simply put, is where the price of the product is set by humans, unlike Uniswap, which calculates prices through price curves. Generally, the order book is divided into two trading modes: one is the limit order, where the seller sets a selling price in their mind, and if a buyer thinks the price is appropriate, they can make the purchase. The other is the buy order, where the buyer issues a buy order based on their needs, and when the seller thinks the price is appropriate, they can make the sale.

Generally speaking, the price of a buy order will be lower than the price of a sell order. This article only introduces the first pricing method.

Functions of NFT DEX

The basic functions of an NFT DEX should include the following basic features:

1. List Product: List an NFT at a set price
2. Purchase Goods: Purchase according to the pricing of the NFT.
3. DEX Transaction Fee: A fee is charged as a percentage based on the transaction price.

Listed Products

To list a product, you need to do the following things:

1. Frontend: The user selects their own NFT, sets a price, and clicks to list.
2. Contract: Users need to set permissions for the contract, which can manipulate the user's NFT.

This way, the product is considered listed. In the contract, it is necessary to maintain a Map of user-listed product prices. Generally, this part of the data can be handled by centralized services to reduce the burden on the contract, but in this article, this part of the Map data will be maintained within the contract.

Purchase goods

When purchasing goods, the following things will happen:

1. Frontend: The user selects an NFT they want to purchase and clicks buy.
2. Contract: Call the contract to transfer the user's money to the seller of the NFT and transfer the NFT to the buyer.

Implementing an NFT DEX

In this chapter, we will implement an NFT DEX from scratch, and this is the DEX address that the author has already deployed: nft-dex-frontend.vercel.app.

1. Create an NFT

To meet the testing requirements, it would be best for us to have our own NFT. We can quickly build an ERC-721 protocol NFT through Remix, which provides the corresponding template.

We can easily deploy an NFT according to the template. Of course, you can also skip this step and directly use the NFT we have prepared.

2. Contract Writing

Our contract methods should include the following methods:

2.1. Seller Lists NFT

Sellers need to specify the NFT they want to sell and the corresponding price. When listing, users need to sign the authorization method for the NFT, allowing our smart contract to have the authority to operate this NFT, so that when a buyer purchases it, the transaction can be completed automatically.

So the process should be as follows: 1. The user selects their own NFT; 2. Set the price, which can be quoted in stablecoins USDT, USDC, or ETH; 3. Authorize the NFT to the contract.

Then you can call the contract's listing method, which needs to do the following things:

1. Verify the ownership of the NFT
2. Add listing record
3. Triggering the listing event

2.2. Buyer Purchases NFT

When buyers purchase an NFT, they only need to select the NFT they want and pay the corresponding Token. The following steps will be executed at the contract level: 1. Read the corresponding NFT data from the "listings"; 2. Calculate the transaction fee based on the price of the NFT and deduct this amount from the sale price; 3. Transfer the NFT to the buyer; 4. Trigger the purchase event.

2.3. Delisting

Of course, sellers may feel that the price is not appropriate and choose to cancel the listing. We can see that we have retained an isActive field in the place where we save the listing information to indicate whether the product is valid. Therefore, when canceling the listing, we just need to set this field to false.

2.4. Withdrawal Fees

DEX can charge a fee for each transaction, which can be stored in the contract or transferred to another address of your own. This article adopts the method of storing it in the contract.

So far, our contract's basic functionality is complete.

3. DEX Front-end Development

Before we begin, we need to prepare some tools, including the following several tools:

1. Ant Design Web3: for wallet connection and NFT card display.
2. Wagmi: Used for interacting with wallets.
3. Nextjs + Vercel: Deploy our project.

Our front-end application should include three pages: Mint, Buy, and Portfolio. Mint is for users to mint our NFT, and is only for demonstration purposes. Buy is our DEX marketplace where users can purchase our NFT, and in the Portfolio, users can list and delist their NFTs.

3.1. Connect Wallet

Connect the user's wallet, implement using Ant Design Web3.

The process of connecting the user's wallet is very simple, just use the connection component provided by Ant Design Web3.

First, we wrap the project with a Provider, so that we can utilize the capabilities of Ant Design Web3 in the following code. Additionally, since we need to connect to the sepolia test chain, it is recommended to use some node services to improve data query speed for efficiency. Here, I am using the endpoint from ZAN, which is very suitable for use in the Asia-Pacific environment, with fast speed and very cost-effective, and it supports a wide range of chains.

Then place a connect button where a wallet connection is needed:

This is done, it’s very simple.

3.2. Mint

Mint an NFT, to obtain test Tokens you can go to

On the Mint page, we can Mint test NFTs. Mint is an operation that involves writing a contract, and here we will use the useWriteContract method from wagmi. We need to specify the contract address, the contract's ABI, and the contract parameters.

After that, you can confirm in the wallet to successfully Mint.

3.3. Portfolio

Manage users' NFT

Here, we need to display all of the user's NFTs. We can use some NFT APIs to retrieve them, and here we use the OpenSea API because there are not many NFT APIs that support the Sepolia testnet.

After obtaining the user's NFT list, it is necessary to determine whether they are already listed. Unlisted NFTs can be listed, while listed NFTs can be delisted. The method of judgment is to retrieve the user's listed NFTs through the "getSellerListings" method in the DEX contract, and then determine whether they are being listed based on the "isAlive" field of these NFTs.

When listing, you need to call the "listNFT" contract method, and when canceling, you need to call the "cancelListing" method. Before listing, you need to additionally call the authorization method for the NFT, authorizing the NFT to the contract, so that after the subsequent transaction is completed, this NFT can be automatically transferred to the buyer.

3.4. Buy

You can purchase NFT in Buy.

First, we need to showcase the already listed NFTs. Similar to the display of existing NFTs in the Portfolio, the difference here is that one is global, no longer for a specific user, and the other is that only NFTs with isAlive need to be displayed.

Use the "purchaseNFT" method when making a purchase, and you need to pay the price in ETH when calling this method.

The "value" here is the ETH that the buyer needs to pay.

The DEX front-end page that includes all the basic capabilities is now complete, and we can deploy it on Vercel.

This article is written by the ZAN Team (X account @zan_team) and Yeezo (X account @GaoYeezo 75065).