ゼロからNFT分散化取引所を構築する

前に書かれた記事を読んだ読者は、ERC-20プロトコルトークンについて、私たちがDEXなどの分散化取引所を通じて取引できることを理解しているはずです。では、ERC-721プロトコル、つまりNFTについては、どのように分散化取引を実現するのでしょうか？

現在主流のNFT取引プラットフォームは主にリスト方式で取引を行っており、商品がスーパーの棚に陳列されているようなもので、買い手は価格が適切だと感じれば購入できます。

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

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

NFT ( NFT)

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

NFTの特性により、ERC-20のように価格曲線を通じて価格を設定することはできません。現在一般的な取引方法は、注文簿形式によるものです。

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

オーダーブック取引

オーダーブックモデルは簡単に言うと、商品価格を人為的に設定する方式であり、価格曲線を使って価格を計算するDEXとは異なります。オーダーブックには一般的に2つの取引モードがあります:

1. 定価注文: 売り手が販売価格を設定し、買い手がそれを適切と感じれば購入できます。

2. 購入注文: 買い手が購入注文を出し、売り手が価格が適切だと感じた場合に販売できます。

通常、買い注文の価格は定価よりも低くなります。この記事では、最初の価格設定方法のみを紹介します。

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

NFT DEXの基本機能

NFT DEXは以下の基本機能を含むべきです:

1. 商品を上架する: 定価でNFTを上架する
2. 商品の購入: NFTの価格に基づいて購入する
3. DEX手数料:取引手数料は取引価格に比例して請求されます

商品を上架する

上架商品には以下を完了する必要があります:

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

契約内でユーザーが出品する商品の価格Mapを維持する必要があり、中央集権型取引所のサービスに置いて契約の負担を軽減できますが、本稿では契約内に保存されます。

商品を購入する

商品を購入する際に発生する:

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

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

NFT DEXの実装

私たちはゼロからNFT DEXを実現します。

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 リスティングのキャンセル

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

2.4 手数料の引き出し

DEXは各取引で手数料を徴収し、契約に預け入れるか、指定されたアドレスに転送します。本記事では契約に預け入れる方法を採用します。

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

3. DEXフロントエンド開発

ツールを使用する:

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

フロントエンドには、Mint、Buy、Portfolioの3つのページが含まれています。

3.1 ウォレットを接続する

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

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

3.2 ミント

wagmiのuseWriteContractメソッドを使用して、NFTのミントを実現します。

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

3.3 ポートフォリオ

ユーザーのNFTを表示し、上場および下場操作をサポートします。opensea APIを使用してNFTリストを取得し、契約を通じて上場されているかどうかを判断します。

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

####3.4購入

上架されたNFTを表示し、購入操作をサポートします。purchaseNFTメソッドを呼び出して取引を完了します。

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

これで、基本機能を備えたNFT DEXのフロントエンドページが完成し、Vercelに展開できます。

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