シンプルなNFT分散化取引プラットフォームを実現する

ERC-721プロトコルに準拠したNFTにとって、分散化取引をどのように実現するのでしょうか？現在、主流の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)

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

オーダーブックモードでは、商品の価格は人為的に設定され、価格曲線に基づいて価格を計算する自動マーケットメーカーとは異なります。オーダーブックには通常、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コントラクトを迅速にデプロイできます。

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

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

契約には以下の主要なメソッドが含まれる必要があります:

2.1 売り手がNFTを出品する

プロセス:

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

リスティング方法には、次のものが必要です。

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

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

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

契約締結手順:

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

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

2.3 上架の取り消し

リストされたレコードの isActive フィールドを false に設定します。

2.4 手数料の引き出し

契約で蓄積された手数料を指定されたアドレスに引き出す。

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

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

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

• Ant Design Web3:ウォレットを接続してNFTを展示
• Wagmi:ウォレットとインタラクション
• Next.js + Vercel:プロジェクトをデプロイ

フロントエンドには3つのページがあります: Mint、Buy、およびPortfolio。

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

3.1 ウォレットを接続する

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

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

3.2 ミントページ

テストNFTを鋳造するために、wagmiのuseWriteContractメソッドを使用してコントラクトを呼び出します。

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

3.3 ポートフォリオページ

ユーザーのNFTを表示し、上場と上場解除の操作をサポートします。

上場プロセス:

1. コントラクトにNFTを授権する
2. listNFTメソッドを呼び出す

上場廃止: cancelListing メソッドを呼び出します

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

3.4 購入ページ

上架されているすべてのNFTを表示し、購入操作をサポートします。

購入時にpurchaseNFTメソッドを呼び出し、ETHで支払います。

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

上記の手順を完了すると、基本機能を備えたNFT取引プラットフォームが実現され、テスト用にVercelにデプロイできます。

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