ゼロからNFT分散化取引プラットフォームを開発する: スマートコントラクトとフロントエンドの実装

robot
概要作成中

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

ERC-721プロトコルのNFTに関して、分散化取引を実現することは重要な課題です。現在の主流なNFT取引プラットフォームは多くがオーダーブック方式を採用しており、これはスーパーマーケットの棚に並んでいる商品展示に似ています。本稿では、スマートコントラクトとシンプルなフロントエンドインターフェースを通じて、基本的なNFT分散化取引システムを構築する方法を示します。

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

NFTの特徴と取引モード

NFTとは非代替性トークンのことで、各トークンは唯一無二です。この特性のため、NFTはERC-20トークンのように価格曲線で価格設定されることはなく、オーダーブック形式で取引されます。

オーダーブック取引には主に2つのモードがあります: 1.価格表:売り手が価格を設定し、買い手が直接購入します 2.デマンドオーダー:買い手がウィッシュオーダーを出し、売り手が販売を選択します

本文は価格注文モデルに焦点を当てます。

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

NFT取引プラットフォームの核心機能

基本的なNFT取引プラットフォームには以下の機能が含まれるべきです:

  1. 商品を上架する: 売り手はNFTの価格を設定します
  2. 商品の購入: バイヤーは定価でNFTを購入します
  3. 手数料:プラットフォームは一定割合の取引手数料を徴収します

上架プロセス

  1. ユーザーはNFTを選択し、価格を設定します。
  2. ユーザーはNFTの操作を契約によって承認します。
  3. 契約記録の記載情報

購入プロセス

  1. ユーザーはNFTを選択して購入します
  2. 契約により、NFTの所有権が移転されること
  3. 売り手に支払い、手数料を差し引く

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

スマートコントラクト開発

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

  1. NFTを上場する

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

    • NFTの価格情報を読む
    • 手数料を計算して差し引く
    • NFTの所有権を譲渡する
    • 購入イベントをトリガーする
  3. 上場の取り消し

    • リスティングのステータスを無効に設定する
  4. 出金手数料

    • 蓄積した手数料を転送する

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

フロントエンド開発

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

  • Ant Design Web3: ウォレット接続 & NFT ショーケース
  • Wagmi:ウォレットインタラクション
  • Next.js + Vercel:アプリケーション開発のデプロイ

主なページの特徴:

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

ウォレット接続

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

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

NFT管理

ポートフォリオページにはユーザーのNFTが表示され、上場および下場の操作をサポートします。上場する際には、NFTを契約に承認する必要があります。

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

NFT取引###

Buyページはすべての上場NFTを表示し、ユーザーは直接購入できます。購入時に契約のpurchaseNFTメソッドを呼び出し、対応するETHを支払います。

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

上記の手順を通じて、私たちは基本的なNFT分散化取引プラットフォームを実現しました。機能はまだ比較的シンプルですが、すでにコア取引プロセスが含まれており、より複雑なシステムの基盤として機能することができます。

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

! 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をゼロから実装する

原文表示
このページには第三者のコンテンツが含まれている場合があり、情報提供のみを目的としております(表明・保証をするものではありません)。Gateによる見解の支持や、金融・専門的な助言とみなされるべきものではありません。詳細については免責事項をご覧ください。
  • 報酬
  • 6
  • 共有
コメント
0/400
alpha_leakervip
· 17時間前
整挺良い ただ基本的すぎる
原文表示返信0
ZKProofEnthusiastvip
· 17時間前
そんなに簡単なの?建設現場でのレンガ運びの方がこれより難しい。
原文表示返信0
BearMarketBuyervip
· 17時間前
良くなった!ついにチュートリアルができた。
原文表示返信0
ForkMongervip
· 17時間前
ふぅ...また基本的なDEXのチュートリアルか。真の革新はエクスプロイトにある。
原文表示返信0
SchrodingerWalletvip
· 17時間前
あ、そうそう、また開発チュートリアルです。
原文表示返信0
DarkPoolWatchervip
· 17時間前
感じはオープンシーをコピーしているようです
原文表示返信0
いつでもどこでも暗号資産取引
qrCode
スキャンしてGateアプリをダウンロード
コミュニティ
日本語
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)