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

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

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

NFT取引プラットフォームの基本機能

基本的なNFT取引プラットフォームは、以下の機能を備えているべきです:

1. NFTを上場: 売り手は価格を設定してNFTを上場できます
2. NFTの購入: 購入者は定価で上架されているNFTを購入できます
3. 手数料の徴収: プラットフォームは取引価格から一定の割合の手数料を抽出することができます。

にNFTを上場します

NFTの上架のプロセスは次のとおりです:

1. 売り手は上場するNFTを選択し、価格を設定します。
2. 売り手は取引契約を通じてそのNFTを操作することができます。
3. コントラクトの上場メソッドを呼び出し、上場情報を記録する

NFTを購入する

NFTを購入するプロセスは以下の通りです:

1. バイヤーは購入したいNFTを選択します。
2. コントラクトの購入メソッドを呼び出す
3. 契約は買い手の資金を売り手に移し、同時にNFTを買い手に移します。

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

取引プラットフォーム

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

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

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

2. 取引契約を書く

取引契約は以下の主要なメソッドを実装する必要があります:

2.1 NFTを上場する

ソリディティ 関数 listNFT(address nftAddress, uint256 tokenId, uint256 price) public { NFTの所有権を確認する レコード リスト情報
// 上架イベントをトリガーする }

2.2 NFTを購入する

ソリディティ 関数 purchaseNFT(address nftAddress, uint256 tokenId) public payable { NFTのリスティング情報を取得する // 手数料を計算して差し引く // NFTを買い手に移転する // 購入イベントをトリガーする
}

2.3 上架をキャンセル

ソリディティ 関数 cancelListing(address nftAddress, uint256 tokenId) public { 操作のアクセス許可を確認する // 上場ステータスを無効に設定 // キャンセルイベントをトリガーする }

2.4 手数料の引き出し

ソリディティ 関数 withdrawFees() public onlyOwner { // コントラクト内の手数料を移転する }

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

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

以下のツールを使用してフロントエンドを開発します:

• Ant Design Web3:ウォレット接続とNFTディスプレイ用
• Wagmi:ウォレットと対話するために使用される
• Next.js + Vercel:プロジェクトをデプロイする

フロントエンドには以下の主要なページが含まれています:

• Mint:テストNFTを作成するために使用されます
• 購入:NFT取引市場では、上場しているNFTを購入できます
• ポートフォリオ: ユーザーのNFTを管理し、上架と下架ができます

3.1 ウォレットを接続する

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

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

3.2 ミントページ

NFTコントラクトのmintメソッドを呼び出してテスト用NFTを作成します。

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

3.3 ポートフォリオページ

• ユーザーが所有しているNFTを取得する
• 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をゼロから実装する