React、Solidity、CometChat で収益性の高い NFT マーケットプレイスを構築する方法

構築するものについては、Rinkeby テスト ネットワークで を参照し、こちらの を参照してください… デモ git リポジトリ 序章 Web3 はインターネットの未来であり、私たちは皆、この技術を学び、受け入れる必要があります。そのユースケースは引き続き出現し、世界にプラスの影響を与えています。 web3 テクノロジーの素晴らしいアプリケーションの 1 つは、所有権を保持しながら資産をデジタル化するための実行可能なソリューションである非代替トークン (NFT) の作成です。 このチュートリアルでは、チャット機能を備えた、収益性の高い適切に設計された NFT マーケットプレイスを作成する方法を説明します。 Web3 開発をより速く学ぶのを手伝ってくれる人が必要な場合は 。 、私と一緒にプライベート クラスを予約してください そうは言っても、始めましょう... . 無料の web3 チュートリアルについては、私の Youtube チャンネルを今すぐチェックしてください。 前提条件 このビルドを正常にクラッシュするには、次のツールをインストールする必要があります。 ノード ガナッシュクリ トリュフ 反応する インフラ 追い風のCSS コメットチャット SDK メタマスク 糸 依存関係のインストール NodeJs がマシンに既にインストールされていることを確認し、インストールされていない場合は、 からインストールします。ターミナルでコードを再度実行して、インストールされていることを確認します。 NodeJs のインストール HERE ターミナルで以下のコマンドを実行して、これらの重要なパッケージをグローバルにインストールします。 Yarn、Ganache-cli、および Truffle のインストール npm i -g yarn npm i -g truffle npm i -g ganache-cli インストールを確認するには、ターミナルに次のコードを入力します。 yarn --version && ganache-cli --version && truffle version の複製 以下のコマンドを使用して、Web 3.0 スターター プロジェクトを複製します。これにより、全員が同じページにいて、同じソフトウェアを使用していることが保証されます。 Web3 スターター プロジェクト git clone https://github.com/Daltonic/timelessNFT ファイルを次のように置き換えてください。 **package.json** { "name": "TimelessNFT", "private": true, "version": "0.0.0", "scripts": { "start": "react-app-rewired start", "build": "react-app-rewired build", "test": "react-app-rewired test", "eject": "react-scripts eject" }, "dependencies": { "@cometchat-pro/chat": "^3.0.9", "ipfs-http-client": "^56.0.0", "moment": "^2.29.4", "moment-timezone": "^0.5.34", "react": "^17.0.2", "react-dom": "^17.0.2", "react-hooks-global-state": "^1.0.2", "react-icons": "^4.3.1", "react-identicons": "^1.2.5", "react-moment": "^1.1.2", "react-router-dom": "6", "react-scripts": "5.0.0", "web-vitals": "^2.1.4", "web3": "^1.7.1" }, "devDependencies": { "@faker-js/faker": "^6.0.0-alpha.5", "@openzeppelin/contracts": "^4.5.0", "@tailwindcss/forms": "0.4.0", "@truffle/hdwallet-provider": "^2.0.4", "assert": "^2.0.0", "autoprefixer": "10.4.2", "babel-polyfill": "^6.26.0", "babel-preset-env": "^1.7.0", "babel-preset-es2015": "^6.24.1", "babel-preset-stage-2": "^6.24.1", "babel-preset-stage-3": "^6.24.1", "babel-register": "^6.26.0", "buffer": "^6.0.3", "chai": "^4.3.6", "chai-as-promised": "^7.1.1", "crypto-browserify": "^3.12.0", "dotenv": "^16.0.0", "https-browserify": "^1.0.0", "mnemonics": "^1.1.3", "os-browserify": "^0.3.0", "postcss": "8.4.5", "process": "^0.11.10", "react-app-rewired": "^2.1.11", "sharp": "^0.30.1", "stream-browserify": "^3.0.0", "stream-http": "^3.2.0", "tailwindcss": "3.0.18", "url": "^0.11.0" }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] } } 指示に従ってパッケージを置き換えた後、端末で を実行して、指定されたバージョンのすべてのパッケージをロードします。 **yarn install** CometChat SDK の構成 以下の手順に従って、 を構成します。最後に、これらのキーを環境変数として保存する必要があります。 CometChat SDK ダッシュボードに移動し、アカウントを作成します。 ステップ 1: CometChat 登録後のみ、 ダッシュボードにログインします。 ステップ 2: CometChat ダッシュボードから、 ステップ 3: timelessNFT という新しいアプリを追加します。 リストから作成したばかりのアプリを選択します。 STEP 4: クイック スタートから、 、 、および を ファイルにコピーします。画像とコード スニペットを参照してください。 ステップ 5: APP_ID REGION AUTH_KEY .env プレースホルダー キーを適切な値に置き換えます。 REACT_COMET_CHAT REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** Infura アプリの構成 にアクセスし、アカウントを作成します。 STEP 1: Infura ダッシュボードから新しいプロジェクトを作成します。 STEP 2: テスト ネットワークの WebSocket エンドポイント URL を ファイルにコピーします。 ステップ 3: Rinkeby .env その後、Metamask の秘密のフレーズと優先アカウントの秘密鍵を入力します。指示に正しく従った場合、環境変数は次のようになります。 ENDPOINT_URL=*************************** DEPLOYER_KEY=********************** REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** 秘密鍵にアクセスする方法がわからない場合は、以下のセクションを参照してください。 Metamask 秘密鍵へのアクセス Metamask ブラウザー拡張機能で Rinkeby がテスト ネットワークとして選択されていることを確認します。次に、優先するアカウントで縦の点線をクリックし、アカウントの詳細を選択します。下の画像をご覧ください。 ステップ 1: 表示されたフィールドにパスワードを入力し、確認ボタンをクリックすると、アカウントの秘密鍵にアクセスできるようになります。 ステップ 2: [秘密鍵のエクスポート] をクリックして、秘密鍵を確認します。 などの公開ページでキーを公開しないようにしてください。そのため、環境変数として追加しています。 ステップ 3: Github 秘密鍵を ファイルにコピーします。以下の画像とコード スニペットを参照してください。 ステップ 4: .env ENDPOINT_URL=*************************** SECRET_KEY=****************** DEPLOYER_KEY=********************** REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** については、環境ファイルで提供されているスペースに の秘密のフレーズを貼り付ける必要があります。 SECRET_KEY Metamask タイムレスな NFT スマート コントラクト 完全なスマート コントラクト コードは次のとおりです。すべての関数と変数を 1 つずつ見ていきましょう。 // SPDX-License-Identifier: MIT pragma solidity >=0.7.0 uint8) existingURIs; mapping(uint256 => address) public holderOf; address public artist; uint256 public royalityFee; uint256 public supply = 0; uint256 public totalTx = 0; uint256 public cost = 0.01 ether; event Sale( uint256 id, address indexed owner, uint256 cost, string metadataURI, uint256 timestamp ); struct TransactionStruct { uint256 id; address owner; uint256 cost; string title; string description; string metadataURI; uint256 timestamp; } TransactionStruct[] transactions; TransactionStruct[] minted; constructor( string memory _name, string memory _symbol, uint256 _royalityFee, address _artist ) ERC721(_name, _symbol) { royalityFee = _royalityFee; artist = _artist; } function payToMint( string memory title, string memory description, string memory metadataURI, uint256 salesPrice ) external payable { require(msg.value >= cost, "Ether too low for minting!"); require(existingURIs[metadataURI] == 0, "This NFT is already minted!"); require(msg.sender != owner(), "Sales not allowed!"); uint256 royality = (msg.value * royalityFee) / 100; payTo(artist, royality); payTo(owner(), (msg.value - royality)); supply++; minted.push( TransactionStruct( supply, msg.sender, salesPrice, title, description, metadataURI, block.timestamp ) ); emit Sale( supply, msg.sender, msg.value, metadataURI, block.timestamp ); _safeMint(msg.sender, supply); existingURIs[metadataURI] = 1; holderOf[supply] = msg.sender; } function payToBuy(uint256 id) external payable { require(msg.value >= minted[id - 1].cost, "Ether too low for purchase!"); require(msg.sender != minted[id - 1].owner, "Operation Not Allowed!"); uint256 royality = (msg.value * royalityFee) / 100; payTo(artist, royality); payTo(minted[id - 1].owner, (msg.value - royality)); totalTx++; transactions.push( TransactionStruct( totalTx, msg.sender, msg.value, minted[id - 1].title, minted[id - 1].description, minted[id - 1].metadataURI, block.timestamp ) ); emit Sale( totalTx, msg.sender, msg.value, minted[id - 1].metadataURI, block.timestamp ); minted[id - 1].owner = msg.sender; } function changePrice(uint256 id, uint256 newPrice) external returns (bool) { require(newPrice > 0 ether, "Ether too low!"); require(msg.sender == minted[id - 1].owner, "Operation Not Allowed!"); minted[id - 1].cost = newPrice; return true; } function payTo(address to, uint256 amount) internal { (bool success, ) = payable(to).call{value: amount}(""); require(success); } function getAllNFTs() external view returns (TransactionStruct[] memory) { return minted; } function getNFT(uint256 id) external view returns (TransactionStruct memory) { return minted[id - 1]; } function getAllTransactions() external view returns (TransactionStruct[] memory) { return transactions; } } 以下のコードでは、このコードをコンパイルするのに適したライセンス ID とコンパイラのバージョンを solidity コンパイラに通知しています。 コードのインポートと契約情報 // SPDX-License-Identifier: MIT pragma solidity >=0.7.0 uint8) existingURIs; mapping(uint256 => address) public holderOf; address public artist; uint256 public royalityFee; uint256 public supply = 0; uint256 public totalTx = 0; uint256 public cost = 0.01 ether; から への操作を実行するために文字列ライブラリを使用していることを指定しました。次に、作成された NFT アートワークを記録し、トークンの現在の所有者を知るためのマッピングも宣言しました。 uint string 次に、アーティスト アカウント、ロイヤルティ料金、現在の供給量、プラットフォーム上で行われた合計トランザクション、および NFT のミント コストを取得するためのその他の重要な変数を指定しました。 イベントと構造の設定 event Sale( uint256 id, address indexed owner, uint256 cost, string metadataURI, uint256 timestamp ); struct TransactionStruct { uint256 id; address owner; uint256 cost; string title; string description; string metadataURI; uint256 timestamp; } TransactionStruct[] transactions; TransactionStruct[] minted; 上記のコードには、スマート コントラクトで発生するすべてのトランザクションからのデータを発行する販売イベントがあります。 発行または譲渡された NFT に関するデータを収集するためのトランザクション構造を設計しました。定義したトランザクション構造を使用して、 と という 2 つの変数を作成しました。 transactions minted コンストラクターの初期化 constructor( string memory _name, string memory _symbol, uint256 _royalityFee, address _artist ) ERC721(_name, _symbol) { royalityFee = _royalityFee; artist = _artist; } コンストラクターは、スマート コントラクトを初期化するために 4 つのパラメーターを受け取ります。トークン名、シンボル、アーティスト アカウント、トランザクションごとのロイヤルティ料金。トークン名とシンボルは、展開中に スマート コントラクトに渡されます。 ERC721 ミント関数アルゴリズム function payToMint( string memory title, string memory description, string memory metadataURI, uint256 salesPrice ) external payable { require(msg.value >= cost, "Ether too low for minting!"); require(existingURIs[metadataURI] == 0, "This NFT is already minted!"); require(msg.sender != owner(), "Sales not allowed!"); uint256 royality = (msg.value * royalityFee) / 100; payTo(artist, royality); payTo(owner(), (msg.value - royality)); supply++; minted.push( TransactionStruct( supply, msg.sender, salesPrice, title, description, metadataURI, block.timestamp ) ); emit Sale( supply, msg.sender, msg.value, metadataURI, block.timestamp ); _safeMint(msg.sender, supply); existingURIs[metadataURI] = 1; holderOf[supply] = msg.sender; } 上記の関数は、スマート コントラクトで新しいトークンを発行する役割を果たします。このメソッドの呼び出し元は、以下を含む 4 つのパラメーターを提供する必要があります。 NFT のタイトル、説明、メタデータ URI、および作成後の NFT の販売価格。 検証は、NFT が発行されていることを確認するために実行され、それに応じて発行ごとに行われる支払いで行われます。また、検証により、各アートワークがトークンに一意にリンクされ、他のトークンに同じアートワークが含まれていないことが保証されます。最後に、検証のために、このメソッドの呼び出し元がスマート コントラクトのデプロイヤーではないことを確認しました。これは、あまりにも悪い混同を避けるためです。 関数の次は、支払い共有ルールです。ロイヤリティのパーセンテージはアーティストに行き、残りのエーテルは所有者に行きます. その後、ミント配列内にその NFT を記録し、販売イベントを発行しました。最後に、発信者のアドレスをトークンの所有者として記録しながら、NFT を作成しました。 NFT 伝達関数アルゴリズム function payToBuy(uint256 id) external payable { require(msg.value >= minted[id - 1].cost, "Ether too low for purchase!"); require(msg.sender != minted[id - 1].owner, "Operation Not Allowed!"); uint256 royality = (msg.value * royalityFee) / 100; payTo(artist, royality); payTo(minted[id - 1].owner, (msg.value - royality)); totalTx++; transactions.push( TransactionStruct( totalTx, msg.sender, msg.value, minted[id - 1].title, minted[id - 1].description, minted[id - 1].metadataURI, block.timestamp ) ); emit Sale( totalTx, msg.sender, msg.value, minted[id - 1].metadataURI, block.timestamp ); minted[id - 1].owner = msg.sender; } 上記の関数は NFT id を受け取り、ミンター (所有者) が設定した価格に従って NFT を購入します。 所有者が NFT を購入したり、他の人がゼロ イーサで購入したりするのを阻止するために、必要な検証が行われます。 次に、ロイヤリティ料がアーティストのアカウントに送られ、NFT の現在の所有者が残りを保持します。 各トークン転送はトランザクション配列に記録され、プラットフォームで行われたすべてのトランザクションを追跡します。 その後、この購入に対して販売イベントが再度発行され、EVM に記録されたデータが強化されます。 その他の必須機能 // changes the price of an NFT function changePrice(uint256 id, uint256 newPrice) external returns (bool) { require(newPrice > 0 ether, "Ether too low!"); require(msg.sender == minted[id - 1].owner, "Operation Not Allowed!"); minted[id - 1].cost = newPrice; return true; } // sends ethers to a specific account function payTo(address to, uint256 amount) internal { (bool success, ) = payable(to).call{value: amount}(""); require(success); } // returns all minted NFTs function getAllNFTs() external view returns (TransactionStruct[] memory) { return minted; } // returns a specific NFT by token id function getNFT(uint256 id) external view returns (TransactionStruct memory) { return minted[id - 1]; } // returns all transactions function getAllTransactions() external view returns (TransactionStruct[] memory) { return transactions; } 以上で、スマート コントラクトの開発は完了です。次に、ReactJs を使用した UI コンポーネントの構築について説明します。 展開スクリプトの構成 スマート コントラクトで行うもう 1 つの作業は、デプロイ スクリプトを構成することです。 プロジェクトの フォルダー >> に移動し、以下のコード スニペットで更新します。 移行 2_deploy_contracts.js const TimelessNFT = artifacts.require('TimelessNFT') module.exports = async (deployer) => { const accounts = await web3.eth.getAccounts() await deployer.deploy( TimelessNFT, 'Timeless NFTs', 'TNT', 10, accounts[1] ) } アプリケーションのスマート コントラクトが完成しました。それでは、DApp インターフェースを使い始めましょう。スマート コントラクト開発の学習を支援する家庭教師が必要な場合は、私 。 と一緒にクラスを予約してください フロントエンドの開発 フロントエンドは、多数のコンポーネントとパーツで構成されています。すべてのコンポーネント、ビュー、周辺機器は当社が作成します。 ヘッダー コンポーネント このコンポーネントは tailwind CSS で作成され、ピンクの ボタンを使用して Metamask ウォレットにアクセスします。以下のコードは、プログラミングを示しています。 Connect Wallet import { useGlobalState } from '../store' import timelessLogo from '../assets/timeless.png' import { connectWallet } from '../TimelessNFT' const Header = () => { const [connectedAccount] = useGlobalState('connectedAccount') return ( Market Artist Features Community {!connectedAccount ? ( Connect Wallet ) : ( <> )} ) } export default Header ヒーロー コンポーネント このコンポーネントは、接続されたウォレットの表示と、新しい NFT の作成に使用されるモーダルの起動を担当します。さらに、NFT の売り手との 1 対 1 のチャットにユーザーをサインインまたはアップする責任があります。これらのアクションを担当するコードを次に示します。 import Identicon from 'react-identicons' import { setGlobalState, useGlobalState, truncate } from '../store' import { getConversations, loginWithCometChat, signUpWithCometChat } from '../CometChat' import ChatList from './ChatList' import { useState } from 'react' const Hero = () => { const [connectedAccount] = useGlobalState('connectedAccount') const [currentUser] = useGlobalState('currentUser') const [recentOpened] = useGlobalState('recentOpened') const [conversations, setConversations] = useState([]) const onCreatedNFT = () => { if (currentUser?.uid.toLowerCase() != connectedAccount.toLowerCase()) return alert('Please login to receive chats from buyers!') setGlobalState('modal', 'scale-100') } const onLunchRecent = () => { getConversations().then((convs) => { setConversations(convs) setGlobalState('recentOpened', true) }) } return ( Buy and Sell Digital Arts, NFTs Collections Mint and collect the hottest NFTs around.

{connectedAccount ? ( <> Create NFT <> {currentUser?.uid.toLowerCase() == connectedAccount.toLowerCase() ? ( Recent Chats ) : ( <> loginWithCometChat(connectedAccount)} > Login for Chat signUpWithCometChat(connectedAccount, connectedAccount)} > Signup for Chat )} ) : null} 1231k

User 152k

Artwork 200k

Artist {connectedAccount ? truncate(connectedAccount, 4, 4, 11) : 'Connect Your Wallet'}

@you {recentOpened ? : null} ) } export default Hero アートワーク コンポーネント このコンポーネントは、美しく作成された Tailwind CSS カードを使用して、プラットフォームで作成された NFT のリストをレンダリングする役割を果たします。各カードには、NFT 画像、タイトル、説明、価格、および所有者が含まれています。その実装については、以下のコードを参照してください。 import { useEffect, useState } from 'react' import { setGlobalState, useGlobalState, truncate } from '../store' const Artworks = () => { const [nfts] = useGlobalState('nfts') const [end, setEnd] = useState(4) const [count] = useState(4) const [collection, setCollection] = useState([]) const setNFT = (nft) => { setGlobalState('nft', nft) setGlobalState('showModal', 'scale-100') } const getCollection = () => { return nfts.slice(0, end) } useEffect(() => { setCollection(getCollection()) }, [nfts, end]) return ( {collection.length > 0 ? 'Latest Artworks' : 'No Artworks Yet'} {collection.map((nft) => ( {nft.title} {truncate(nft.description)}

Current Price {nft.cost} ETH

setNFT(nft)} className="shadow-lg shadow-black text-white text-sm bg-[#e32970] hover:bg-[#bd255f] cursor-pointer rounded-full px-1.5 py-1" > View Details ))} {collection.length > 0 && nfts.length > collection.length ? ( setEnd(end + count)} > Load More ) : null} ) } export default Artworks トランザクション コンポーネント このコンポーネントは、スマート コントラクトで行われたすべてのトランザクションのレンダリングを担当します。たとえば、アリソンがデュークから NFT を購入するトランザクションがあります。この購入は、トランザクションとしてこのコンポーネントに取り込まれます。以下のスニペットを参照してください。 import { useEffect, useState } from 'react' import { BiTransfer } from 'react-icons/bi' import { MdOpenInNew } from 'react-icons/md' import { useGlobalState, truncate } from '../store' const Transactions = () => { const [transactions] = useGlobalState('transactions') const [end, setEnd] = useState(3) const [count] = useState(3) const [collection, setCollection] = useState([]) const getCollection = () => { return transactions.slice(0, end) } useEffect(() => { setCollection(getCollection()) }, [transactions, end]) return ( {collection.length > 0 ? 'Latest Transactions' : 'No Transaction Yet'} {collection .map((tx) => ( {tx.title} Transfered Received by {truncate(tx.owner, 4, 4, 11)} {tx.cost}ETH

))} {collection.length > 0 && transactions.length > collection.length ? ( setEnd(end + count)} > Load More ) : null} ) } export default Transactions フッター コンポーネント このコンポーネントは、ページの下部にいくつかの美しいリンクを表示するだけで、機能に関してはあまり機能しませんが、ユーザー インターフェイスを補完します。そのコードは以下に書かれています。 import timelessLogo from '../assets/timeless.png' const Footer = () => ( Market

Artist

Features

Community

) export default Footer 素晴らしいです。明らかなコンポーネントはこれで終わりです。モーダル インターフェイスを介してのみ呼び出される非表示のコンポーネントを含めましょう。 CreateNFT コンポーネント このコンポーネントには、画像、タイトル、価格、および説明を提供することにより、新しい NFT を作成する義務があります。 [ ] ボタンをクリックすると、画像が IPFS (Inter Planetary File System) にアップロードされ、画像の URL が返されます。 Mint Now 返された画像の URL とフォームで提供された NFT データは、ユーザーが Metamask ウォレットでトランザクションを承認した直後に、スマート コントラクトに送られ、作成されます。 トランザクションが完了すると、NFT は作品の中にリストされ、関心のあるバイヤーはそれらを購入したり、価格を変更したりできます。詳細については、以下のコードを参照してください。 import { useGlobalState, setGlobalState, setLoadingMsg, setAlert, } from '../store' import { mintNFT } from '../TimelessNFT' import { useState } from 'react' import { FaTimes } from 'react-icons/fa' import { create } from 'ipfs-http-client' const client = create('https://ipfs.infura.io:5001/api/v0') const CreateNFT = () => { const [modal] = useGlobalState('modal') const [title, setTitle] = useState('') const [price, setPrice] = useState('') const [description, setDescription] = useState('') const [fileUrl, setFileUrl] = useState('') const [imgBase64, setImgBase64] = useState(null) const onChange = async (e) => { const reader = new FileReader() if (e.target.files[0]) reader.readAsDataURL(e.target.files[0]) reader.onload = (readerEvent) => { const file = readerEvent.target.result setImgBase64(file) setFileUrl(e.target.files[0]) } } const handleSubmit = async (e) => { e.preventDefault() if (!title || !price || !description) return setGlobalState('modal', 'scale-0') setGlobalState('loading', { show: true, msg: 'Uploading IPFS data...' }) try { const created = await client.add(fileUrl) const metadataURI = `https://ipfs.infura.io/ipfs/${created.path}` const nft = { title, price, description, metadataURI } setLoadingMsg('Intializing transaction...') mintNFT(nft).then((res) => { if (res) { setFileUrl(metadataURI) resetForm() setAlert('Minting completed...', 'green') window.location.reload() } }) } catch (error) { console.log('Error uploading file: ', error) setAlert('Minting failed...', 'red') } } const closeModal = () => { setGlobalState('modal', 'scale-0') resetForm() } const resetForm = () => { setFileUrl('') setImgBase64(null) setTitle('') setPrice('') setDescription('') } return ( Add NFT

Choose profile photo setTitle(e.target.value)} value={title} required /> setPrice(e.target.value)} value={price} required /> setDescription(e.target.value)} value={description} required > Mint Now ) } export default CreateNFT ShowNFT コンポーネント このコンポーネントは、特定の NFT に関する詳細情報を表示し、所有者には価格を変更するためのボタンを提供し、購入者には NFT を購入するか販売者とチャットするためのボタンを提供します。詳細については、以下のコードを参照してください。 import Chat from './Chat' import Identicon from 'react-identicons' import { FaTimes } from 'react-icons/fa' import { buyNFT } from '../TimelessNFT' import { useGlobalState, setGlobalState, truncate, setAlert } from '../store' import { useState } from 'react' import { getMessages } from '../CometChat' const ShowNFT = () => { const [showModal] = useGlobalState('showModal') const [chatOpened] = useGlobalState('chatOpened') const [currentUser] = useGlobalState('currentUser') const [connectedAccount] = useGlobalState('connectedAccount') const [nft] = useGlobalState('nft') const [messages, setMessages] = useState([]) const onChangePrice = () => { setGlobalState('nft', nft) setGlobalState('showModal', 'scale-0') setGlobalState('updateModal', 'scale-100') } const onChatSeller = () => { if (currentUser?.uid.toLowerCase() != connectedAccount.toLowerCase()) return alert('Please login to receive chats from buyers!') getMessages(nft.owner).then((msgs) => { setMessages( msgs.filter((msg) => { return ( !!!msg?.deletedAt && !!!msg?.action && (msg?.conversationId == `${msg?.rawMessage.receiver}_user_${msg?.rawMessage.sender}` || msg?.conversationId == `${msg?.rawMessage.sender}_user_${msg?.rawMessage.receiver}`) ) }) ) setGlobalState('nft', nft) setGlobalState('chatOpened', true) }) } const handleNFTPurchase = () => { setGlobalState('showModal', 'scale-0') setGlobalState('loading', { show: true, msg: 'Initializing NFT transfer...', }) try { buyNFT(nft).then((res) => { if (res) { setAlert('Transfer completed...', 'green') window.location.reload() } }) } catch (error) { console.log('Error transfering NFT: ', error) setAlert('Purchase failed...', 'red') } } return ( {chatOpened ? ( ) : ( Buy NFT

setGlobalState('showModal', 'scale-0')} className="border-0 bg-transparent focus:outline-none" > {nft?.title} {nft?.description}

@owner {nft?.owner ? truncate(nft.owner, 4, 4, 11) : '...'} Current Price {nft?.cost} ETH

{connectedAccount != nft?.owner ? ( Purchase Now Chat with Seller ) : ( Change Price )} )} ) } export default ShowNFT UpdateNFT コンポーネント このコンポーネントは、NFT の価格を変更する役割を担っています。このアクションは、NFT の所有者のみが実行できます。このオプションは利用できますが、これらの変更を有効にするにはガス代がかかります。 NFT が別の買い手と手を交換すると、新しい所有者が価格を上げることを決定する可能性があるため、このオプションが利用可能になりました。以下のコード スニペットを参照してください。 import { useGlobalState, setGlobalState, setLoadingMsg, setAlert, } from '../store' import { updateNFT } from '../TimelessNFT' import { useState } from 'react' import { FaTimes } from 'react-icons/fa' const UpdateNFT = () => { const [modal] = useGlobalState('updateModal') const [nft] = useGlobalState('nft') const [price, setPrice] = useState('') const handleSubmit = async (e) => { e.preventDefault() if (!price || price { if (res) { setAlert('Price updated...', 'green') window.location.reload() } }) } catch (error) { console.log('Error updating file: ', error) setAlert('Update failed...', 'red') } } return ( {nft?.title}

setGlobalState('updateModal', 'scale-0')} className="border-0 bg-transparent focus:outline-none" > setPrice(e.target.value)} required /> Update Now ) } export default UpdateNFT ChatList コンポーネント このコンポーネントは、ユーザーがプラットフォーム上で売り手または買い手と行った最近のチャットを明らかにします。このコンポーネントは、会話で送信された最後のメッセージもキャプチャします。各会話をクリックすると、チャット インターフェイスが表示されます。以下のコードを参照してください。 import Chat from './Chat' import Moment from 'react-moment' import { useState } from 'react' import { FaTimes } from 'react-icons/fa' import { setGlobalState, truncate, useGlobalState } from '../store' import { getMessages } from '../CometChat' const ChatList = ({ users }) => { const [messages, setMessages] = useState([]) const [receiver, setReceiver] = useState('') const [recentChatOpened] = useGlobalState('recentChatOpened') const [connectedAccount] = useGlobalState('connectedAccount') const onEnterChat = (receiver) => { setReceiver(receiver) getMessages(receiver).then((msgs) => { setMessages( msgs.filter((msg) => { return ( !!!msg?.deletedAt && !!!msg?.action && msg?.conversationId == `${msg?.rawMessage.receiver}_user_${msg?.rawMessage.sender}` ) }) ) setGlobalState('recentChatOpened', true) }) } return ( {recentChatOpened ? ( ) : ( Conversations

setGlobalState('recentOpened', false)} className="border-0 bg-transparent focus:outline-none" > {users.map((user, i) => ( onEnterChat(user?.lastMessage.sender.uid)} > @{truncate(user?.lastMessage.sender.uid, 4, 4, 11)} {user?.lastMessage.text}

))} )} ) } export default ChatList チャット コンポーネント このコンポーネントは、1 対 1 のチャットで 2 人のユーザーを引き付けます。上の画像は、プラットフォーム上での買い手と売り手の間の 2 つの異なるブラウザーからの会話を示しています。その実装については、以下のコードを参照してください。 import Identicon from 'react-identicons' import { useGlobalState, setGlobalState, truncate } from '../store' import { sendMessage, CometChat } from '../CometChat' import { useEffect, useState } from 'react' import { FaTimes } from 'react-icons/fa' const Chat = ({ receiver, chats }) => { const [connectedAccount] = useGlobalState('connectedAccount') const [message, setMessage] = useState('') const [messages, setMessages] = useState(chats) const handleSubmit = async (e) => { e.preventDefault() sendMessage(receiver, message).then((msg) => { setMessages((prevState) => [...prevState, msg]) setMessage('') scrollToEnd() }) } const listenForMessage = (listenerID) => { CometChat.addMessageListener( listenerID, new CometChat.MessageListener({ onTextMessageReceived: (message) => { setMessages((prevState) => [...prevState, message]) scrollToEnd() }, }) ) } const onClose = () => { setGlobalState('chatOpened', false) setGlobalState('recentChatOpened', false) } const scrollToEnd = () => { const element = document.getElementById('messages-container') element.scrollTop = element.scrollHeight } useEffect(() => { listenForMessage(receiver) }, [receiver]) return ( @{receiver ? truncate(receiver, 4, 4, 11) : '...'}

{messages.map((msg, i) => msg?.receiverId?.toLowerCase() == connectedAccount.toLowerCase() ? ( @{receiver ? truncate(receiver, 4, 4, 11) : '...'} {msg.text}

) : ( @you {msg.text}

) )} setMessage(e.target.value)} value={message} required /> ) } export default Chat これらの素晴らしいコンポーネントを含めたので、最後の 2 つで仕上げましょう。 コンポーネントのロード このコンポーネントは、トランザクションが進行中のときに現在のアクティビティとステータスを表示するだけです。以下のコードを参照してください。 import { useGlobalState } from '../store' const Loading = () => { const [loading] = useGlobalState('loading') return ( Processing...

{loading.msg} ) } export default Loading このファイルは、この記事で説明した上記のコンポーネントをまとめたものです。これが ReactJs アーキテクチャの仕組みです。以下のコードを参照してください。 アプリ コンポーネント import Alert from './components/Alert' import Artworks from './components/Artworks' import CreateNFT from './components/CreateNFT' import Footer from './components/Footer' import Header from './components/Header' import Hero from './components/Hero' import Loading from './components/Loading' import ShowNFT from './components/ShowNFT' import Transactions from './components/Transactions' import UpdateNFT from './components/UpdateNFT' import { isUserLoggedIn } from './CometChat' import { loadWeb3 } from './TimelessNFT' import { useEffect } from 'react' const App = () => { useEffect(() => { loadWeb3() isUserLoggedIn() }, []) return ( ) } export default App 素晴らしいです。さまざまなコンポーネントの統合が完了しました。このプロジェクトの他の部分と一緒に封印しましょう。 その他の重要なファイル このアプリケーションは、状態管理ストア、CometChat SDK、および契約サービス ファイルを利用します。それらを1つずつ見ていきましょう。 この状態管理ファイルは、 npm パッケージを使用します。 Redux よりもシンプル、高速、そして簡単です。このアプリで使用されるすべてのグローバル変数と関数は、このストアで作成されました。 ストア react-hooks-global-state プロジェクトのルートで ディレクトリに移動し、 という名前のフォルダーを作成します。次に、このストア フォルダー内に というファイルを作成し、その中に以下のコードを貼り付けます。 src store index.js import { createGlobalState } from 'react-hooks-global-state' const { setGlobalState, useGlobalState, getGlobalState } = createGlobalState({ modal: 'scale-0', updateModal: 'scale-0', mintModal: '', alert: { show: false, msg: '', color: '' }, loading: { show: false, msg: '' }, showModal: 'scale-0', chatOpened: false, recentChatOpened: false, recentOpened: false, chatList: 'scale-0', connectedAccount: '', currentUser: null, nft: null, nfts: [], transactions: [], contract: null, }) const setAlert = (msg, color = 'green') => { setGlobalState('loading', false) setGlobalState('alert', { show: true, msg, color }) setTimeout(() => { setGlobalState('alert', { show: false, msg: '', color }) }, 6000) } const setLoadingMsg = (msg) => { const loading = getGlobalState('loading') setGlobalState('loading', { ...loading, msg }) } const truncate = (text, startChars, endChars, maxLength) => { if (text.length > maxLength) { var start = text.substring(0, startChars) var end = text.substring(text.length - endChars, text.length) while (start.length + end.length < maxLength) { start = start + '.' } return start + end } return text } export { useGlobalState, setGlobalState, getGlobalState, setAlert, setLoadingMsg, truncate, } このファイルには、CometChat SDK と通信するために必要なすべての機能が含まれています。以下のコードを参照してください。 CometChat サービス import { CometChat } from '@cometchat-pro/chat' import { setGlobalState } from './store' const CONSTANTS = { APP_ID: process.env.REACT_APP_COMET_CHAT_APP_ID, REGION: process.env.REACT_APP_COMET_CHAT_REGION, Auth_Key: process.env.REACT_APP_COMET_CHAT_AUTH_KEY, } const initCometChat = async () => { const appID = CONSTANTS.APP_ID const region = CONSTANTS.REGION const appSetting = new CometChat.AppSettingsBuilder() .subscribePresenceForAllUsers() .setRegion(region) .build() await CometChat.init(appID, appSetting) .then(() => console.log('Initialization completed successfully')) .catch((error) => error) } const loginWithCometChat = async (UID) => { const authKey = CONSTANTS.Auth_Key await CometChat.login(UID, authKey) .then((user) => setGlobalState('currentUser', user)) .catch((error) => { alert(error.message) console.log(error) }) return true } const signUpWithCometChat = async (UID, name) => { let authKey = CONSTANTS.Auth_Key const user = new CometChat.User(UID) user.setName(name) await CometChat.createUser(user, authKey) .then((user) => { alert('Signed up successfully, click login now!') console.log('Logged In: ', user) }) .catch((error) => { alert(error.message) console.log(error) }) return true } const logOutWithCometChat = async () => { return await CometChat.logout() .then(() => console.log('Logged Out Successfully')) .catch((error) => error) } const isUserLoggedIn = async () => { await CometChat.getLoggedinUser() .then((user) => setGlobalState('currentUser', user)) .catch((error) => console.log('error:', error)) } const getMessages = async (UID) => { const limit = 30 const messagesRequest = new CometChat.MessagesRequestBuilder() .setUID(UID) .setLimit(limit) .build() return await messagesRequest .fetchPrevious() .then((messages) => messages) .catch((error) => error) } const sendMessage = async (receiverID, messageText) => { const receiverType = CometChat.RECEIVER_TYPE.USER const textMessage = new CometChat.TextMessage( receiverID, messageText, receiverType ) return await CometChat.sendMessage(textMessage) .then((message) => message) .catch((error) => error) } const getConversations = async () => { const limit = 30 const conversationsRequest = new CometChat.ConversationsRequestBuilder() .setLimit(limit) .build() return await conversationsRequest .fetchNext() .then((conversationList) => conversationList) } export { initCometChat, loginWithCometChat, signUpWithCometChat, logOutWithCometChat, getMessages, sendMessage, getConversations, isUserLoggedIn, CometChat, } このファイルには、Web3 ライブラリを使用してブロックチェーン上のスマート コントラクトと対話するための機能と手順がすべて含まれています。以下のコードを参照してください。 コントラクト サービス ファイル import Web3 from 'web3' import { setGlobalState, getGlobalState, setAlert } from './store' import TimelessNFT from './abis/TimelessNFT.json' const { ethereum } = window const connectWallet = async () => { try { if (!ethereum) return alert('Please install Metamask') const accounts = await ethereum.request({ method: 'eth_requestAccounts' }) setGlobalState('connectedAccount', accounts[0]) } catch (error) { setAlert(JSON.stringify(error), 'red') } } const structuredNfts = (nfts) => { return nfts .map((nft) => ({ id: Number(nft.id), owner: nft.owner, cost: window.web3.utils.fromWei(nft.cost), title: nft.title, description: nft.description, metadataURI: nft.metadataURI, timestamp: nft.timestamp, })) .reverse() } const loadWeb3 = async () => { try { if (!ethereum) return alert('Please install Metamask') window.web3 = new Web3(ethereum) window.web3 = new Web3(window.web3.currentProvider) const web3 = window.web3 const accounts = await web3.eth.getAccounts() setGlobalState('connectedAccount', accounts[0]) const networkId = await web3.eth.net.getId() const networkData = TimelessNFT.networks[networkId] if (networkData) { const contract = new web3.eth.Contract( TimelessNFT.abi, networkData.address ) const nfts = await contract.methods.getAllNFTs().call() const transactions = await contract.methods.getAllTransactions().call() setGlobalState('nfts', structuredNfts(nfts)) setGlobalState('transactions', structuredNfts(transactions)) setGlobalState('contract', contract) } else { window.alert('TimelessNFT contract not deployed to detected network.') } } catch (error) { alert('Please connect your metamask wallet!') } } const mintNFT = async ({ title, description, metadataURI, price }) => { try { price = window.web3.utils.toWei(price.toString(), 'ether') const contract = getGlobalState('contract') const account = getGlobalState('connectedAccount') const mintPrice = window.web3.utils.toWei('0.01', 'ether') await contract.methods .payToMint(title, description, metadataURI, price) .send({ from: account, value: mintPrice }) return true } catch (error) { setAlert(error.message, 'red') } } const buyNFT = async ({ id, cost }) => { try { cost = window.web3.utils.toWei(cost.toString(), 'ether') const contract = getGlobalState('contract') const buyer = getGlobalState('connectedAccount') await contract.methods.payToBuy(Number(id)).send({ from: buyer, value: cost }) return true } catch (error) { setAlert(error.message, 'red') } } const updateNFT = async ({ id, cost }) => { try { cost = window.web3.utils.toWei(cost.toString(), 'ether') const contract = getGlobalState('contract') const buyer = getGlobalState('connectedAccount') await contract.methods.changePrice(Number(id), cost).send({ from: buyer }) return true } catch (error) { setAlert(error.message, 'red') } } export { loadWeb3, connectWallet, mintNFT, buyNFT, updateNFT } して、ルート ディレクトリの assets フォルダー内に含めます。これで、このアプリケーションを実行するために必要なものがすべて含まれました。 Project Assets このロゴをダウンロード サーバーの起動 この手順を進めるには、スマート コントラクトを Web に移行して操作できるようにします。端末で次のコードを実行します。 truffle migrate --network rinkeby 上記のコードは、Infura RPC を使用してスマート コントラクトをサーバーに送信します。 このチュートリアルの最初にセットアップした ganache-cli サーバーを使用して、ローカル ブロックチェーンをセットアップすることもできます。以下のコードを実行するだけで、ローカルのブロックチェーン サーバーに送信できます。 1 つのターミナルを開いて を実行し、別のターミナルで または を実行します。 **ganache-cli -d** **truffle migrate** **truffle deploy** ganache を EVM として使用している場合は、localhost サーバーも Metamask に追加し、ganache によって生成された秘密鍵をインポートする必要があることに注意してください。 。 ganache-cli ガイダンスについては、開発環境の起動を参照してください プロジェクトの問題を解決するために私の助けが必要な場合は 。 、このページで私に相談してください 次に、 を実行して、react アプリケーションを起動します。そして、NFTマーケットプレイスのこのビルドでそれを手に入れました. yarn start . Youtube で無料の web3 チュートリアルを今すぐ見る 結論 私たちはこの NFT ビルドのゴールに到達しました。あなたが私と一緒にたくさんの価値のあるビルドを手に入れたことを知っています. あなたがどのレベルであっても、Web3 開発スキルをより速く伸ばしたい場合は、 ください。 私のプライベート クラスに参加して 次回まで、潰し続けてください！ 著者について Gospel Darlington は、ソフトウェア開発業界で 年以上の経験を持つフルスタックのブロックチェーン開発者です。 6+ ソフトウェア開発、執筆、教育を組み合わせることで、EVM 互換のブロックチェーン ネットワーク上で分散型アプリケーションを構築する方法を示しています。 彼のスタックには、 、 、 、 、 、 、 、 などが含まれます。 JavaScript React Vue Angular Node React Native NextJs Solidity 彼の詳細については、 、 、 、または彼の で彼のページにアクセスしてフォローしてください。 Twitter GitHub LinkedIn Web サイト