ゼロからNFT分散化取引所を作る

ERC-721プロトコルのNFTに関して、どのように分散型取引を実現するのでしょうか？現在、主流のNFT取引所は、注文方式で取引を行うことが多く、これは商品をスーパーの棚に陳列するのに似ています。買い手が価格が適切だと感じれば購入できます。この記事では、スマートコントラクトとシンプルなフロントエンドページを作成することで、基本的なNFTの分散型取引機能を実現します。

NFTの紹介

NFT(ノンファンジブルトークン)は、非同質化代币を指し、各Tokenは独自であり、ERC-721プロトコルに従います。通常、各NFTはウォレット内で異なる画像を表示し、ユニークなIDで区別されます。NFTの特性により、ERC-20トークンのように価格曲線を通じて価格を設定することはできないため、一般的な取引方法はオーダーブック形式です。

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

オーダーブック取引モード

注文書モードは主に2つに分かれています:

1. 定価注文: 売り手が販売価格を設定し、買い手が適切だと感じたら購入できます。
2. 求購注文: 購入者が求購注文を出し、売却者が価格が適切だと感じた場合に販売します。

一般的に、購入注文の価格は定価注文よりも低くなります。本稿では、定価注文モードについて主に紹介します。

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

NFT取引所の基本機能

基本的なNFT取引所は次の機能を含むべきです:

1. 商品を上架:設定された価格でNFTを上架します
2. 商品を購入する: NFTの価格に従って購入する 3.手数料:取引価格に比例して請求されます

商品の上架プロセス

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

####購入プロセス

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

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

NFT取引所の実装

1. テスト用NFTを作成する

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

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

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

契約は主に以下の方法を含みます:

2.1 売り手がNFTを出品する

プロセス:

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

listing メソッドが実行されます。

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をゼロから実装する

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:テストNFTを作成する
• 購入:NFTトレーディングモール
• ポートフォリオ:ユーザーのNFTを管理

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

3.1 ウォレットを接続する

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

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

3.2 ミントページ

wagmiのuseWriteContractメソッドを使用してNFTコントラクトの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にデプロイしてアクセスすることができます。