Como construir um mercado NFT lucrativo com React, Solidity e CometChat

O que você vai construir, veja uma na rede de teste Rinkeby e aqui… demonstração git repo Introdução A Web3 é o futuro da internet e todos devemos aprender e adotar essa tecnologia. Seus casos de uso continuam a surgir e têm um impacto positivo no mundo. Uma aplicação magnífica da tecnologia web3 é a criação de tokens não fungíveis (NFTs), que são uma solução viável para digitalizar ativos, mantendo os direitos de propriedade. Este tutorial ensinará como criar um mercado NFT lucrativo e bem projetado com funcionalidade de bate-papo. se precisar de alguém para ajudá-lo a aprender o desenvolvimento web3 mais rapidamente. Reserve suas aulas particulares comigo Dito isso, vamos começar... . Confira meu canal do Youtube para tutoriais GRATUITOS da web3 agora Pré-requisito Você precisará das seguintes ferramentas instaladas para esmagar com sucesso esta compilação: Nó Ganache-Cli Brigadeiro Reagir Infura CSS do Tailwind SDK do CometChat Metamáscara Fio Instalando Dependências Verifique se o NodeJs já está instalado em sua máquina, caso contrário, instale-o . Execute o código novamente no terminal para garantir que ele esteja instalado. Instalação do NodeJs AQUI Execute os comandos abaixo em seu terminal para instalar esses pacotes críticos globalmente. Instalação de Yarn, Ganache-cli e Truffle npm i -g yarn npm i -g truffle npm i -g ganache-cli Para confirmar a instalação, digite o seguinte código no terminal. yarn --version && ganache-cli --version && truffle version Clone o projeto inicial do web 3.0 usando os comandos abaixo. Isso garante que estamos todos na mesma página e usando o mesmo software. Clonagem do projeto inicial do Web3 git clone https://github.com/Daltonic/timelessNFT Excelente, substitua o arquivo pelo seguinte: **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" ] } } Depois de substituir os pacotes conforme indicado, execute em seu terminal para carregar todos os pacotes com as versões especificadas. **yarn install** Configurando CometChat SDK Siga os passos abaixo para configurar o ; no final, você deve salvar essas chaves como uma variável de ambiente. CometChat SDK Vá para o painel do e crie uma conta. PASSO 1: CometChat Faça login no painel do , somente após o registro. PASSO 2: CometChat No painel, adicione um novo aplicativo chamado PASSO 3: timelessNFT. Selecione o aplicativo que você acabou de criar na lista. PASSO 4: No Início rápido, copie , e , para seu arquivo . Veja a imagem e o trecho de código. ETAPA 5: APP_ID REGION AUTH_KEY .env Substitua as chaves de espaços reservados por seus valores apropriados. REACT_COMET_CHAT REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** Configurando o aplicativo Infura Vá para e crie uma conta. PASSO 1: Infura No painel, crie um novo projeto. PASSO 2: Copie a URL do ponto de extremidade do WebSocket da rede de teste para seu arquivo . ETAPA 3: Rinkeby .env Depois disso, insira sua frase secreta Metamask e a chave privada da conta preferida. Se você seguiu as instruções corretamente, suas variáveis de ambiente devem ficar assim. ENDPOINT_URL=*************************** DEPLOYER_KEY=********************** REACT_APP_COMET_CHAT_REGION=** REACT_APP_COMET_CHAT_APP_ID=************** REACT_APP_COMET_CHAT_AUTH_KEY=****************************** Consulte a seção abaixo se não souber como acessar sua chave privada. Acessando sua chave privada de metamask Certifique-se de que Rinkeby esteja selecionado como a rede de teste em sua extensão de navegador Metamask. Em seguida, na conta preferida, clique na linha pontilhada vertical e escolha os detalhes da conta. Por favor, veja a imagem abaixo. PASSO 1: Digite sua senha no campo fornecido e clique no botão confirmar, isso permitirá que você acesse a chave privada de sua conta. PASSO 2: Clique em "exportar chave privada" para ver sua chave privada. Certifique-se de nunca expor suas chaves em uma página pública como o . É por isso que estamos anexando-o como uma variável de ambiente. PASSO 3: Github Copie sua chave privada para seu arquivo . Veja a imagem e o trecho de código abaixo. PASSO 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=****************************** Quanto ao seu , você é obrigado a colar sua frase secreta no espaço fornecido no arquivo de ambiente. SECRET_KEY Metamask O contrato inteligente NFT atemporal Aqui está o código completo do contrato inteligente; Vamos examinar todas as funções e variáveis uma a uma. // 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; } } No código abaixo, informamos ao compilador solidity o identificador de licença e as versões do compilador qualificadas para compilar este código. Importações de código e informações contratuais // SPDX-License-Identifier: MIT pragma solidity >=0.7.0 <0.9.0; import "./ERC721.sol"; import "./ERC721Enumerable.sol"; import "@openzeppelin/contracts/access/Ownable.sol"; contract TimelessNFT is ERC721Enumerable, Ownable { // codes goes in here... } Além disso, este contrato inteligente faz uso de alguns contratos inteligentes openzepplin. Você deve certificar-se de colocá-los no mesmo diretório visto na imagem abaixo. openzepplin's esses contratos inteligentes conforme a imagem acima. Acesse este link e baixe Declarações de variáveis de estado using Strings for uint256; mapping(string => 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; Especificamos que estamos usando a biblioteca de strings para realizar operações de para . Em seguida, também declaramos mapeamentos para gravar artes NFT cunhadas e também para conhecer o proprietário atual de um token. uint string Em seguida, especificamos as outras variáveis essenciais para capturar a conta do artista, as taxas de royalties, a oferta atual, o total de transações realizadas na plataforma e o custo de cunhagem de uma NFT. Criação de eventos e estruturas 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; No código anterior, temos um evento de vendas que emite dados de qualquer transação que ocorra no contrato inteligente, seja na cunhagem ou transferência NFT. Projetamos uma estrutura de transação para coletar dados sobre NFTs cunhadas ou transferidas. Usando a estrutura de transação que definimos, criamos duas variáveis chamadas e . transactions minted Inicializando o construtor constructor( string memory _name, string memory _symbol, uint256 _royalityFee, address _artist ) ERC721(_name, _symbol) { royalityFee = _royalityFee; artist = _artist; } O construtor aceita quatro parâmetros para inicializar o contrato inteligente. Um nome de token, símbolo, uma conta de artista e uma taxa de royalties por transação. O nome e o símbolo do token são passados para o contrato inteligente durante a implantação. ERC721 O algoritmo da função mint 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; } A função acima é responsável por cunhar novos tokens no contrato inteligente. O chamador desse método deve fornecer quatro parâmetros que incluem; um título NFT, descrição, URI de metadados e o preço de venda do NFT após a cunhagem. As validações são realizadas para garantir que a NFT é cunhada e são feitas de acordo com os pagamentos feitos para cada cunhagem. Além disso, a validação garante que cada obra de arte seja vinculada exclusivamente a um token e nenhum outro token tenha a mesma arte. Por fim, para a validação, garantimos que o chamador desse método não seja o implantador do contrato inteligente, isso é para garantir que não misturemos muito as coisas. A seguir na função está a regra de compartilhamento de pagamento. A porcentagem de royalties vai para o artista e o restante dos éteres vai para o proprietário. Posteriormente, registramos esse NFT dentro do array cunhado e emitimos um evento de vendas. Por fim, criamos o NFT enquanto registramos o endereço do chamador como o proprietário do token. O algoritmo da função de transferência 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; } A função acima pega um ID NFT e faz uma compra do NFT de acordo com o preço definido pelo minter (proprietário). As validações necessárias são feitas para impedir os proprietários de comprar seus NFTs e outros de comprar com zero ethers. Em seguida, uma taxa de royalties é enviada para a conta do artista e o atual proprietário do NFT fica com o restante. Cada transferência de token é registrada em um array de transações para acompanhar todas as transações feitas na plataforma. Em seguida, um evento de venda é novamente emitido para esta compra para enriquecer os dados registrados no EVM. Outras funções essenciais // 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; } E aí está, para desenvolver o contrato inteligente, vamos nos aprofundar na construção dos componentes da interface do usuário com ReactJs. Configurando o script de implantação Mais uma coisa a fazer com o contrato inteligente é configurar o script de implantação. No projeto, vá para a pasta >> e atualize-a com o trecho de código abaixo. migrations 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] ) } Excelente, acabamos de finalizar o contrato inteligente para nosso aplicativo; agora é hora de começar a usar a interface do DApp. Se você precisa de um professor particular para ajudá-lo a aprender o desenvolvimento de contratos inteligentes, . agende suas aulas comigo Desenvolvendo o Front-end O front-end é composto de vários componentes e peças. Todos os componentes, visualizações e periféricos serão criados por nós. Componente de cabeçalho Este componente foi criado com CSS tailwind e usa o botão rosa para acessar a carteira Metamask. Os códigos abaixo demonstram a programação. 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 Componente do Herói Este componente é responsável por exibir a carteira conectada e também por lançar o modal utilizado para criar uma nova NFT. Além disso, ele é responsável por fazer login ou cadastrar usuários para bate-papos individuais com um vendedor de NFT. Aqui está o código responsável por essas ações. 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 Componente de obras de arte Este componente é responsável por renderizar a lista de NFTs cunhadas na plataforma usando os belos cartões CSS de vento de cauda. Cada cartão tem uma imagem NFT, título, descrição, preço e proprietário. Veja os códigos abaixo para sua implementação. 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 Componente de Transações Este componente é responsável por renderizar todas as transações que ocorreram em nosso contrato inteligente. Uma transação, por exemplo, seria Alison comprando um NFT da Duke. Esta compra será capturada neste componente como uma transação. Veja o trecho abaixo. 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 Componente de Rodapé Este componente simplesmente exibe alguns links bonitos na parte inferior da página, não faz muito quando se trata de funcionalidades, mas complementa a interface do usuário. Seus códigos estão escritos abaixo. import timelessLogo from '../assets/timeless.png' const Footer = () => ( Market

Artist

Features

Community

) export default Footer Fantástico, é isso para os componentes óbvios, vamos incluir os componentes ocultos que são invocados apenas por meio de uma interface modal. CriarComponenteNFT Este componente tem o dever de cunhar novos NFTs, fornecendo uma imagem, título, preço e descrição. Depois que o botão é clicado, a imagem é carregada no IPFS (Inter Planetary File System) e uma URL de imagem é retornada. Mint Now O URL da imagem retornada junto com os dados NFT fornecidos no formulário são enviados para nosso contrato inteligente para cunhagem, imediatamente após o usuário autorizar a transação com sua carteira Metamask. Após a conclusão da transação, o NFT é listado entre as obras de arte e os compradores interessados podem comprá-las e até alterar seus preços. Veja o código abaixo para detalhes. 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 Mostrar Componente NFT Este componente exibe mais informações sobre um NFT específico, oferecendo ao proprietário um botão para alterar o preço e ao comprador um botão para comprar o NFT ou conversar com o vendedor. Veja o código abaixo para mais detalhes. 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 Atualizar Componente NFT Este componente tem a função de alterar o preço da NFT. Esta ação só pode ser executada pelo proprietário do NFT. Embora esta opção esteja disponível, será cobrada uma taxa de gás para efetuar essas alterações. Uma vez que um NFT troca uma mão com outro comprador, o novo dono pode decidir aumentar o preço, e é por isso que esta opção foi disponibilizada. Veja o trecho de código abaixo. 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 Componente ChatList Este componente revela as conversas recentes que um usuário fez com um vendedor ou comprador na plataforma. O componente também captura a última mensagem enviada na conversa. Um clique em cada conversa levará à interface de bate-papo. Veja o código abaixo. 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 Componente de bate-papo Este componente é responsável por envolver dois usuários em um bate-papo individual. A imagem acima mostra uma conversa entre um comprador e um vendedor na plataforma, a partir de dois navegadores diferentes. Veja o código abaixo para sua implementação. 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 Legal, agora que incluímos esses componentes fantásticos, vamos terminar com esses dois últimos. Componente de carregamento Este componente simplesmente exibe a atividade atual e o status quando uma transação está em andamento. Veja o código abaixo. import { useGlobalState } from '../store' const Loading = () => { const [loading] = useGlobalState('loading') return ( Processing...

{loading.msg} ) } export default Loading Este arquivo agrupa o componente acima discutido neste trabalho. É assim que uma arquitetura ReactJs funciona. Veja os códigos abaixo. O componente App 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 Fantástico, acabamos de concluir a integração dos vários componentes, vamos selar com as outras partes deste projeto. Outros arquivos essenciais Este aplicativo utiliza um armazenamento de gerenciamento de estado, um CometChat SDK e um arquivo de serviço de contrato. Vamos dar uma olhada neles um após o outro. Este arquivo de gerenciamento de estado usa o pacote npm react . É simples, rápido e mais fácil que o Redux. Todas as variáveis globais e funções usadas neste aplicativo foram criadas nesta loja. A loja react-hooks-global-state Na raiz do projeto, vá até o diretório e crie uma pasta chamada . Agora, dentro desta pasta store, crie um arquivo chamado e cole os códigos abaixo dentro dele. 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, } Este arquivo contém todas as funções essenciais para se comunicar com o CometChat SDK. Veja os códigos abaixo. O serviço 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, } Este arquivo contém todas as funções e procedimentos responsáveis pela interação com o contrato inteligente no blockchain usando a biblioteca Web3. Veja os códigos abaixo. O arquivo de serviço de contrato 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 } e inclua-o na pasta de ativos em seu diretório raiz. E com isso, você incluiu com sucesso tudo o que é necessário para executar este aplicativo. Ativos do projeto Baixe este logotipo Iniciando o servidor Para prosseguir com esta etapa, migre o contrato inteligente para a Web para poder interagir com ele. Execute o seguinte código em seu terminal. truffle migrate --network rinkeby O código acima enviará seu contrato inteligente para o servidor usando o Infura RPC. Você também pode configurar um blockchain local usando o servidor ganache-cli que configuramos no início deste tutorial. Basta executar o código abaixo para enviá-lo ao seu servidor blockchain local, se preferir. Abra um terminal e execute e em outro terminal execute ou . **ganache-cli -d** **truffle migrate** **truffle deploy** Observe que, se você estiver usando como seu EVM, também deverá adicionar o servidor localhost ao Metamask e importar as chaves privadas geradas pelo ganache. . ganache-cli Consulte Iniciando o ambiente de desenvolvimento para obter orientação Se precisar da minha ajuda para resolver problemas em seu projeto, . consulte-me nesta página Agora, execute para inicializar seu aplicativo react. E aí está com esta compilação no mercado NFT. yarn start . Assista meus tutoriais web3 GRATUITOS no Youtube agora Conclusão Chegamos à linha de chegada desta compilação NFT, sei que você conseguiu construir muito valor junto comigo. Seja qual for o seu nível, se você quiser crescer mais rápido em suas habilidades de desenvolvimento web3, . entre na minha aula particular Até a próxima vez, continue esmagando-o! Sobre o autor Gospel Darlington é um desenvolvedor de blockchain full-stack com mais de anos de experiência na indústria de desenvolvimento de software. 6+ Ao combinar desenvolvimento de software, redação e ensino, ele demonstra como criar aplicativos descentralizados em redes blockchain compatíveis com EVM. Suas pilhas incluem , , , , , , , e muito mais. JavaScript React Vue Angular Node React Native NextJs Solidity Para mais informações sobre ele, visite e siga sua página no , , ou em seu . Twitter GitHub LinkedIn site