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

ERC-721プロトコルのNFTに関して、どのように分散化取引を実現するのでしょうか？現在主流の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取引プラットフォームの基本機能

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

1. 商品を上架する: NFTを定価で上架する
2. 商品を購入する: NFTの価格に基づいて購入する
3. プラットフォーム手数料: 成交価格に応じて比例で手数料を徴収します

商品の上架プロセス

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

契約では、ユーザーが出品する商品の価格のマッピングテーブルを維持する必要があります。この部分のデータは、契約の負担を軽減するために集中化サービスに保存することもできますが、本記事では契約内に直接保存します。

商品購入プロセス

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

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

NFT取引プラットフォームの実現

1. テスト用NFTを作成

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

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

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

契約には以下の主要な機能が含まれるべきです:

2.1 売り手がNFTを出品する

プロセス:

1. ユーザーはNFTを選択します
2. USDT、USDC ( ) ETHで表示できる価格を設定します。
3. コントラクトにNFTを付与する
4. 上架メソッドを呼び出す

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

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

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

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

プロセス:

1. リスティングからNFTデータを読み込む
2. 手数料を計算して差し引く
3. NFTを買い手に移す
4. 購入イベントをトリガーする

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

2.3 上架をキャンセルする

listingsの対応するNFTの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つの主要なページが含まれています:

1. ミント：テストNFTを鋳造するために使用されます 2.購入:NFTを購入できるNFT取引マーケットプレイス
2. ポートフォリオ: ユーザーの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を表示し、上架および下架操作をサポートします。

上場時にlistNFTメソッドを呼び出し、キャンセル時にcancelListingメソッドを呼び出します。上場前にNFTを契約に承認する必要があります。

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

3.4 購入ページ

すべての上場しているNFTを表示し、purchaseNFTメソッドを呼び出して購入します。

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

これで、基本的なNFT分散化取引プラットフォームが完成しました。プロジェクトをVercelにデプロイしてテストおよび使用することができます。