ゼロからNFT分散化取引プラットフォームを構築する

前の数記事では、DEXを通じてERC-20トークンの分散化取引を実現する方法について探討しました。それでは、ERC-721プロトコルに従うNFTの場合、どのように分散化取引を実現するのでしょうか?

現在の主流NFT取引プラットフォームは多くが注文方式で取引を行っており、これは商品の陳列がスーパーの棚に並ぶのに似ています。買い手は価格が適切だと感じれば購入できます。本記事では、スマートコントラクトを作成し、シンプルなフロントエンドページを通じて、NFTの分散化取引を実現します。注意が必要なのは、本記事の内容は学習参考用であり、生産環境には適用できないということです。

! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-5d391cb28a9a6eafd3ef56f39b0dc5bc.webp)

NFTの紹介

NFTとは非代替性トークンであり、ERC-721プロトコルに従います。各NFTはユニークであり、通常はウォレット内で異なる画像形式で表示され、区別するためのユニークIDを持っています。

NFTの特性により、ERC-20トークンのように価格曲線を使用して価格を設定することはできません。したがって、現在一般的な取引方法はオーダーブック形式を採用しています。

! Web3初心者シリーズ:NFT DEXをゼロから実装する

オーダーブック取引モデル

注文帳モードでは、商品価格は人為的に設定され、アルゴリズムによって計算される価格設定とは異なります。注文帳には通常、2種類の取引モードがあります:

1. 価格設定: 売り手が販売価格を設定し、買い手が適切だと感じたら購入できます。

2. 求購注文:買い手が求購注文を出し、売り手が価格が適切だと感じたら売却することができます。

一般的に、購入注文の価格は定価注文よりも低くなります。本稿では、定価取引モデルに焦点を当てます。

! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-f6f730a4e82de02e49d30d9089e8716e.webp)

NFT DEXの基本機能

基本的なNFT DEXには以下の機能が含まれるべきです:

1. 商品を上架する:設定した価格でNFTを上架する
2. 商品を購入する: NFTの価格で購入する
3. 手数料の徴収: 成交価格に応じて割合で徴収します。

商品を上架するプロセス

1. フロントエンド: ユーザーがNFTを選択し、価格を設定して、上場をクリックします。
2. 契約:ユーザーは契約にNFTの操作を許可します

契約では、ユーザーが出品する商品の価格マッピング表を維持する必要があります。契約の負担を軽減するために、このデータは分散化サービスに保存することもできます。

購入プロセス

1. フロントエンド: ユーザーは購入したいNFTを選択し、購入をクリックします
2. 契約:買い手の資金を売り手に移転し、NFTを買い手に移転する

! Web3スターターシリーズ:NFT DEXをゼロから実装する

NFT DEXの実装

以下では、ゼロからNFT DEXを実現します。

1. NFTを作成する

テストのために、Remixを使用して迅速にERC-721プロトコルのNFTを作成できます。また、用意されたNFTを直接使用することもできます。

! Web3スターターシリーズ:NFT DEXをゼロから実装する

2. 契約書作成

契約には以下の主要なメソッドが含まれるべきです:

2.1 売り手がNFTを出品する

プロセス:

1. ユーザーはNFTを選択します
2. 価格を設定する(利用可能なステーブルコインまたはETHで評価)
3. コントラクトにNFTを付与する
4. 上架メソッドを呼び出す

上場方法は実行する必要があります:

1. NFTの所有権を確認する
2. リスティングレコードを追加する
3. 上架イベントをトリガーする

! Web3初心者シリーズ:NFT DEXをゼロから実装する

2.2 バイヤーがNFTを購入する

バイヤーがNFTを選んで支払った後、契約が実行される:

1. NFTデータを読み取る
2. 手数料を計算し、差し引く
3. NFTを買い手に転送する
4. 購入イベントをトリガーする

! Web3スターターシリーズ:NFT DEXをゼロから実装する

2.3 上架の取り消し

商品isActiveフィールドをfalseに設定すればよいです。

2.4 手数料を引き出す

手数料を契約に預けるか、指定されたアドレスに転送できます。

! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-4dc46af090a3d3987626b915c0d5f1ac.webp)

3. DEXフロントエンド開発

使用される主なツール:

• Ant Design Web3:ウォレットをつないでNFTカードをディスプレイ
• Wagmi:ウォレットとインタラクト
• Nextjs + Vercel:プロジェクトをデプロイする

フロントエンドは、Mint、Buy、Portfolioの3つのページを含む必要があります。

! Web3スターターシリーズ:NFT DEXをゼロから実装する

3.1 ウォレットを接続する

Ant Design Web3の接続コンポーネントを使用して、ウォレット接続を実現します。

! Web3スターターシリーズ:NFT DEXをゼロから実装する

####3.2ミントページ

wagmiのuseWriteContractメソッドを使用してNFTをミントします。

! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-a11e2cb9eb62433a03adcf2abd7b56b5.webp)

3.3 ポートフォリオページ

ユーザーのNFTを表示し、上架と下架の操作をサポートします。

! Web3スターターシリーズ:NFT DEXをゼロから実装する

3.4 購入ページ

上架されたNFTを表示し、購入操作をサポートします。

これで、基本的なNFT DEXのフロントエンドが完成しました。それをVercelにデプロイしてアクセスできます。

! Web3初心者シリーズ:NFT DEXをゼロから実装する