ゼロからNFT分散化取引所を構築する

ERC-721プロトコルに従ったNFTにとって、分散化取引を実現することは検討すべきトピックです。現在主流のNFT取引プラットフォームは多くが掛け注文方式で取引を行っており、これは商品を棚に陳列して買い手が選ぶのに似ています。本記事では、スマートコントラクトとシンプルなフロントエンドページを作成することで、NFTの分散化取引を実現する方法を示します。注意すべき点は、本記事の内容は学習参考用であり、実際の生産環境には適していないことです。

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

NFTの概要

NFTとは非代替性トークンのことで、各トークンは唯一無二であり、ERC-721プロトコルに従います。通常、NFTはウォレット内で異なる画像が表示され、各グループの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の実装

1. テストNFTを作成する

Remixを使用して、ERC-721プロトコルのNFTコントラクトを迅速にデプロイしてテストできます。

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

2. スマートコントラクトの作成

主に以下の方法を含む:

2.1 売り手がNFTを出品する

プロセス:

1. ユーザーはNFTを選択します
2. 価格を設定する
3. コントラクトにNFTを権限付与する
4. 上場メソッドを呼び出す

上架方法は次の通りです:

• NFTの所有権を確認する
• リスティングレコードを追加する
• 上場イベントをトリガーする

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

2.2 バイヤーがNFTを購入

契約実行ステップ:

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

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

2.3 上場を取り消す

上場記録のisActiveフィールドをfalseに設定するだけです。

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

2.4 手数料の引き出し

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

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

3. フロントエンド開発

使用する主なツール：

• アリのデザインWeb3 -WAGMI
• Next.js + バーセル

主要ページ:

• ミント:ミントテストNFT
• 購入:NFTトレーディングモール
• ポートフォリオ:NFTの上下架管理

3.1 ウォレットを接続

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

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

3.2 ミントページ

wagmi の useWriteContract メソッドを使用して、contract mint を呼び出します。

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

3.3 ポートフォリオページ

ユーザーのNFTを表示し、上場および下場操作をサポートします。

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

3.4 購入ページ

上場しているNFTを表示し、購入操作をサポートします。

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

上記の手順を通じて、基本的なNFT DEXが実現しました。Vercelにデプロイしてアクセスして使用できます。