NFTの分散型取引を実現

ERC-721プロトコルに従ったNFTに関しては、分散化取引の方法はERC-20トークンとは異なります。現在主流のNFT取引プラットフォームは、多くが注文を出す方式で取引を行っており、これは商品の陳列がスーパーマーケットの棚に似ていて、買い手は適切な価格の商品を見つけて購入することができます。

本稿では、スマートコントラクトとシンプルなフロントエンドインターフェースを作成することで、基本的なNFT分散化取引機能を実現します。注意が必要なのは、本稿の内容は学習参考用のみであり、実際の生産環境には適用できません。

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

NFTの基本機能

NFTは非同質化トークンを意味し、各Tokenは唯一無二で、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の実装

次に、ゼロからNFT DEXを実現します。

1. テスト用NFTを作成

テストのために、Remixを使用してERC-721プロトコルに準拠したNFTコントラクトを迅速にデプロイすることができます。また、準備されたNFTを直接使用してテストすることも可能です。

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

2. スマートコントラクトを書く

契約には以下の主要なメソッドを含める必要があります:

2.1 売り手がNFTを出品する

プロセス:

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

上架方法には次のものが必要です:

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

! 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. DEXフロントエンドの開発

フロントエンド開発に必要な主なツール:

• Ant Design Web3:ウォレット接続とNFTディスプレイ用
• Wagmi:ウォレットとのインタラクションに使用
• Next.js + Vercel:プロジェクトをデプロイする

フロントエンドには、主に3つのページが含まれる必要があります: Mint、Buy、Portfolio。

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

3.1 ウォレットを接続する

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

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

3.2 ミントページ

テスト用NFTの鋳造に使用し、wagmiのuseWriteContractメソッドを使って契約を呼び出します。

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

3.3 ポートフォリオページ

ユーザーが保有するNFTを表示し、上場および上場解除の操作をサポートします。

上場時にはlistNFTメソッドを呼び出す必要があり、上場解除時にはcancelListingメソッドを呼び出す必要があります。上場前にNFTをコントラクトに承認する必要があります。

3.4 購入ページ

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

購入時にpurchaseNFTメソッドを呼び出し、対応するETHを支払います。

以上のステップを完了すると、基本的なNFT DEXが実現しました。これをVercelなどのプラットフォームにデプロイしてテストや使用することができます。

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