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

ERC-721プロトコルのNFTに対して、分散化取引をどのように実現するのでしょうか？現在、主流のNFT取引所は多くが注文方式で取引を行っており、これは商品がスーパーマーケットの棚に陳列されているようなもので、買い手が価格が適切だと感じれば購入できます。

本記事では、スマートコントラクトの作成とシンプルなフロントエンドページを通じて、NFTの分散化取引を実現します。注意が必要なのは、本記事の内容は学習参考用であり、直接生産環境での使用には適さないということです。

NFT(ノンファンジブルトークン)概要

NFTとは非代替トークンのことで、ERC-721プロトコルに従い、各トークンは唯一無二のものです。NFTはウォレット内で通常異なる画像を表示し、各NFTのグループには識別のためのユニークなIDがあります。

NFTの特性により、ERC-20トークンのように価格曲線を用いて価格を設定することはできません。そのため、現在一般的な取引方法はオーダーブック形式を採用しています。

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

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

注文簿モードでは、商品価格は人為的に設定され、特定のDEXが価格曲線を通じて価格を計算する方法とは異なります。注文簿は一般に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分散化取引プラットフォームの実現

本節ではゼロからNFT分散化取引プラットフォームを実現します。

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

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

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

2. 取引プラットフォーム契約を作成する

取引プラットフォームの契約には以下の主要なメソッドを含める必要があります:

2.1 売り手がNFTを出品する

上架プロセス:

1. ユーザーはNFTを選択します
2. 価格を設定(可能なステーブルコインまたはETHで評価)
3. コントラクトにNFTを授権する

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

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に設定すればよいです。

! 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:プロジェクトをデプロイする

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

3.1 ウォレットを接続する

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

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

####3.2ミントページ

テスト用NFTを鋳造するために、wagmiのuseWriteContractメソッドを呼び出して契約と相互作用します。

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

3.3 ポートフォリオページ

ユーザーのNFTを管理し、上架と下架の機能を実現します。opensea APIを使用してユーザーのNFTリストを取得し、契約を呼び出してNFTの上架状態を判断します。

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

3.4 購入ページ

すべての上場NFTを表示し、購入機能を実現します。コントラクトのpurchaseNFTメソッドを呼び出して取引を完了させます。

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

上記のステップを完了すると、基本的なNFT分散化取引プラットフォームが実現します。Vercelなどのプラットフォームにデプロイしてアクセスすることができます。

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