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

ERC-721プロトコルに従ったNFT資産に対して、どのように分散化取引を実現するのでしょうか？現在の主流のNFT取引所は、多くが注文方式を採用しており、これは商品がスーパーマーケットの棚に陳列されるのに似ていて、買い手が価格が適切だと感じれば購入できます。本記事では、スマートコントラクトの作成とシンプルなフロントエンドを通じて、基本的なNFT分散化取引プラットフォームを実現します。

NFTの特徴と取引方法

NFTは非代替性トークンであり、各トークンは唯一無二のもので、通常はウォレット内に異なる画像を表示し、ユニークなIDで区別されます。このNFTの特性により、ERC-20トークンのように価格曲線で価格設定することはできないため、一般的な取引方法はオーダーブック方式です。

注文簿取引には主に二つの種類があります:

1. 価格表: 売り手が販売価格を設定し、買い手が適切だと感じれば購入することができます。
2. 購入注文: バイヤーが購入注文を出し、売り手が価格が適切だと感じた場合、販売することができます。

この記事では、価格単位取引方式について説明します。

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

2. スマートコントラクトを作成する

契約は主に以下のメソッドを含みます:

2.1 売り手がNFTを出品する

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

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

• NFTデータを読み取る
• 手数料を計算して差し引く
• 買い手にNFTを転送する
• 購入イベントをトリガーする

2.3 上架のキャンセル

• リストを無効としてマークする

2.4 手数料の引き出し

• 累積された手数料を指定されたアドレスに引き出す

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

3. フロントエンドインターフェースの開発

以下のツールを使用してください:

• Ant Design Web3:ウォレットを接続してNFTを表示する
• Wagmi:ウォレットとのインタラクション
• Nextjs + Vercel:プロジェクトをデプロイする

主要ページ:

• Mint:テストNFTを鋳造する
• 購入:NFTマーケットプレイス
• ポートフォリオ: ユーザーのNFTを管理する

3.1 ウォレットを接続する

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

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

3.2 ミントページ

コントラクトのmintメソッドを呼び出してNFTを鋳造します。

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

3.3 ポートフォリオページ

• ユーザーのNFTを表示
• 上架と下架の操作をサポート
• 上場する前に、NFTを契約に承認する必要があります

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

3.4 購入ページ

• 上架されたNFTを表示
• 購入操作をサポート

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

これで、基本機能を備えたNFT分散化取引プラットフォームが完成しました。Vercelにデプロイしてテスト使用することができます。

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

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

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

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

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