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

ERC-721プロトコルに準拠したNFTに関しては、分散化取引を実現する方法はERC-20トークンとは異なります。現在主流のNFT取引プラットフォームは多くがオーダー方式を採用しており、これはスーパーマーケットの棚に商品が並べられているようなもので、バイヤーは自由に選んで購入することができます。

この記事では、スマートコントラクトとシンプルなフロントエンドインターフェイスを通じて、基本的なNFT分散化取引プラットフォームを実現する方法を紹介します。注意すべき点は、これは学習のための例であり、実際の生産環境には適していないということです。

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

NFTの特徴と取引方法

NFTは非同質化トークンの略称であり、各トークンは唯一無二です。通常、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取引プラットフォームの基本機能

基本的なNFT取引プラットフォームには、以下の機能が含まれるべきです:

1. 商品を上架する: 指定された価格でNFTを上架する
2. 商品の購入: NFTの価格に従って購入する
3. プラットフォーム手数料: 成交価格に基づいて一定割合の手数料を徴収します

上場プロセス

1. フロントエンド: ユーザーはNFTを選択し、価格を設定して、出品をクリックします。
2. コントラクト:ユーザーはコントラクトに自分のNFTを操作する権限を与えます

同時に契約の中で、上架商品に対する価格マッピング表を維持する必要があります。

購入フロー

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

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

NFT取引プラットフォームの開発

次に、ゼロからシンプルなNFT取引プラットフォームを実装します。

1. NFTコントラクトを作成する

テストのために、Remixを使用してERC-721プロトコルのNFTコントラクトを迅速にデプロイすることができます。もちろん、既存のNFTコントラクトを直接使用することもできます。

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

2. 取引プラットフォーム契約

取引プラットフォームの契約には以下のコア機能が含まれる必要があります:

2.1 売り手がNFTを出品する

プロセスは以下の通りです:

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

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

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

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

2.2 バイヤーが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. フロントエンド開発

フロントエンド開発には以下のツールが必要です:

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

フロントエンドは主に3つのページで構成されています: Mint、Buy、Portfolio。

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

3.1 ウォレットを接続する

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

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

3.2 ミントページ

テスト用NFTを鋳造するために、wagmiのuseWriteContractメソッドを使用してコントラクトを呼び出します。

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

3.3 ポートフォリオページ

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

コントラクトのlistNFTとcancelListingメソッドを呼び出す必要があり、出品前にNFTをコントラクトに承認する必要があります。

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

3.4 購入ページ

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

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

これで、基本的なNFT分散化取引プラットフォームが開発されました。それをVercelなどのプラットフォームにデプロイしてテスト利用することができます。

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