Este artigo mostra a criação de um site de cunhagem NFT semelhante ao ExoBitsNFT.com. Supõe-se que você tenha algum conhecimento de tokens não fungíveis, moeda criptográfica, contratos inteligentes e carteiras quentes como MetaMask. Se você não estiver familiarizado com essas tecnologias, este tutorial fornecerá tudo o que você precisa para começar. No entanto, é altamente recomendável que você obtenha uma boa compreensão desses conceitos antes de prosseguir com seu próprio projeto NFT.
Por que NFT?
Quando eu explico o mundo dos Non-Fungible Tokens para as pessoas, a reação é invariavelmente algum tipo de olhar confuso seguido de “Eu não entendo. É apenas um jpeg.” Devo admitir que tenho sentimentos semelhantes em relação à cultura atual de avatares de fumantes e arte abstrata. O valor que vejo na tecnologia NFT é sua capacidade de criar propriedade de bens digitais. Produtos digitais que podem apreciar em valor e são transferíveis da mesma forma que joias ou um livro colecionável. Neste momento, um e-book não tem valor intrínseco. Sua cópia ainda pertence ao editor, nunca poderá ser revendida. Claro, pode ser copiado um número infinito de vezes, mas essas cópias não pertencem a ninguém, então não têm valor. Uma NFT desse e-book é “sua cópia” e pode ser vendida para alguém para se tornar “sua cópia”. É isso que dá valor.
Meu interesse em NFTs não é lançar o próximo Crypto Punk. Trata-se de explorar uma tecnologia que acredito ser o futuro de todos os DRM. Sou programador de profissão, mas sempre incorporei arte e design (e alienígenas, é claro) ao meu trabalho. Explorar a tecnologia NFT me permite fazer as duas coisas da maneira que considero mais atraente.
Quando comecei a criar o site para meu primeiro projeto NFT, ExoBits , tive que coletar informações de fontes diferentes. Este artigo serve para consolidar esse conhecimento, ilustrando como implantar um contrato inteligente e escrever o JavaScript necessário para interagir com ele.
Projeto de demonstração
Ao longo deste tutorial, usaremos um projeto de exemplo chamado ReExoBits. É um site que permite criar imagens estáticas de alguns dos meus ExoBit NFTs interativos. Eles são “suavemente usados” e podem parecer um pouco amarelados, mas ainda são tão ágeis quanto no dia em que foram cunhados.
Para obter o projeto ReExoBits, acesse https://github.com/mwilber/nft-minting-website-example e baixe ou clone uma cópia do repositório.
Implantação do Contrato NFT
Esta seção apresentará as etapas necessárias para implantar o contrato inteligente incluído “ReExoBits.sol” na rede de teste Rinkeby. Se você já está familiarizado com a implantação de um contrato Ethereum, pode usar seu método preferido e pular para a próxima seção.
Para esta parte do tutorial, usaremos o Remix, um IDE gratuito baseado em navegador que fornece tudo o que você precisa para desenvolver, compilar e implantar um contrato inteligente Ethereum. Para começar a usar o Remix, basta acessar https://remix.ethereum.org/ e pronto.
Ao iniciar, você verá um navegador de arquivos no painel do lado esquerdo. Haverá uma pasta de “contratos” com alguns contratos de amostra. Se você está aprendendo sobre contratos inteligentes e a linguagem Solidity, esses são exemplos úteis. Ignore-os por enquanto porque vamos usar um contrato preparado do projeto de exemplo.
Com a pasta de contratos destacada, clique no botão “Criar um novo arquivo” acima. Nomeie o novo arquivo “ReExoBits.sol”. Se o arquivo não abrir automaticamente no editor de código, clique duas vezes nele para abrir. Voltando ao projeto de exemplo, localize o arquivo “Contract/ReExoBits.sol”. Abra este arquivo em seu editor de texto favorito e copie seu conteúdo para o arquivo “ReExoBits.sol” no Remix.
Agora que você tem a fonte “ReExoBits.sol” no Remix, é hora de compilar o contrato. Clique no botão “Compilador” na navegação lateral para abrir as opções do compilador. Clique no grande botão azul “Compile ReExoBits.sol”. O botão “Compilador” na navegação lateral terá uma marca de seleção verde quando seu contrato for compilado.
Neste ponto, você precisará da carteira MetaMask instalada e configurada em seu navegador. Se você ainda não o instalou, acesse o site do MetaMask para instalar e configurar um novo endereço de carteira. Clique no ícone “Metamask Fox” e espere um ou dois segundos para que a interface da carteira apareça. O menu de seleção na parte superior provavelmente dirá “Ethereum Mainnet”, clique nele e selecione “Rinkeby Test Network”.
Agora precisamos de algum dinheiro grátis para testar. Clique no botão “Comprar” e um pop-up será aberto. Role até a parte inferior e clique em “Get Ether” na seção “Test Faucet”. A página inicial do Rinkeby será aberta. Clique no botão “Crypto Faucet” e siga as instruções na página resultante para obter um pouco de Ether em sua carteira. Se você nunca trabalhou com uma rede de teste antes é importante entender que este Ether funciona exatamente da mesma forma que na rede Principal, apenas exclusivamente nesta rede de teste Rinkeby. Não pode ser trocado por Ether na rede principal ou outras moedas. NOTA: No momento em que escrevo este artigo, a torneira vinculada no MetaMask está recebendo uma enorme quantidade de tráfego. Se sua primeira tentativa falhar, tente novamente mais tarde ou procure uma alternativa “Rinkeby Faucet”.
Voltando ao Remix, clique no botão “Deploy” na navegação lateral para abrir o painel de deployment à esquerda. É aqui que você publica seu contrato no blockchain. A caixa de seleção mais alta, rotulada como “Ambiente”, permite direcionar onde seu contrato será implantado. Selecione “Web3 Injetado”. Isso vincula o Remix à sua carteira MetaMask. Abaixo da seleção deve indicar a rede à qual sua carteira está conectada, neste caso “Rinkeby”. Um pouco mais abaixo, você verá uma caixa de seleção chamada “Contrato”. Certifique-se de que “ReExoBits.sol” esteja selecionado. Por fim, clique no botão “Implantar” para implantar seu contrato na Rinkeby Test Network. Logo em seguida, você deverá vê-lo no painel, abaixo de “Contratos implantados”.
Deixe o Remix aberto porque voltaremos a ele em um momento.
Funções do contrato NFT
O contrato neste exemplo é um contrato básico ERC721 NFT. Ele é derivado da biblioteca OpenZepplin, um conjunto de código aberto de contratos Ethereum que são auditados quanto à segurança e precisão. O OpenZepplin nos dá tudo o que precisamos para começar a cunhar tokens imediatamente. Há um pouco no padrão ERC721, mas este tutorial se concentrará apenas em algumas funções necessárias para o site de exemplo:
- tokenUri — Uma função padrão ERC721 que retorna o URI anexado a um token. Ele aceita um único parâmetro inteiro para o ID do token
- totalSupply — Uma função padrão ERC721 que retorna um número inteiro positivo representando a contagem total de tokens armazenados no contrato
- CustomMint — Uma função personalizada que chamará a função “safemint” do OpenZepplin para cunhar nosso NFT. Ele aceita um único parâmetro de string que é um URI público a ser anexado ao token. Normalmente, isso aponta para um servidor ipfs, mas para este exemplo ele apontará para nosso servidor de desenvolvimento.
- tokenByUri — Uma função personalizada que retorna um ID de token associado ao URI fornecido ou 0 se não for encontrado.
- tokensOfOwner — Retorna uma matriz de IDs de token pertencentes ao endereço de carteira fornecido.
Uma observação sobre este contrato: Para simplificar, este contrato apenas anexa um URI ao token. Embora o padrão ERC721 exija apenas que você anexe um URI, normalmente você armazena informações adicionais, como um identificador exclusivo relacionado ao ativo. É altamente recomendável que você procure tutoriais adicionais sobre redação de contratos para ver a vasta gama de possibilidades disponíveis em contratos inteligentes.
Endereço do contrato e ABI
Existem duas informações críticas necessárias para conectar seu site com JavaScript ao seu contrato no blockchain Ethereum: o endereço do contrato e o contrato Application Binary Interface (ABI). Se você não estiver familiarizado com a ABI, pense nela como um mapa de origem. É simplesmente um objeto JSON com uma matriz que define todas as suas propriedades de contrato. Ele fornece todas as informações necessárias para que um aplicativo JavaScript faça referência a eles. Você pode recuperar o endereço do contrato e a ABI do Remix.
Primeiro, abra o projeto de amostra em seu editor de código favorito. Abra o arquivo /src/components/Login.jsx . Localize a linha onde a variável contractAddress está definida. Exclua o endereço existente nas aspas. O endereço do contrato existente aponta para o contrato de teste usado para escrever este artigo e pode não estar mais disponível no momento em que você ler isso. Além disso, você vai querer usar seu novo contrato que começa do zero.
Retorne ao Remix e localize o nome do seu contrato na parte inferior do painel lateral, em “Contratos implantados”. À direita do nome, há um botão “Copiar para a área de transferência”. Clique nele para copiar seu endereço de contrato implantado. Cole este endereço no arquivo Login.jsx para definir a variável contractAddress para seu endereço de contrato.
Retorne ao Remix novamente e clique no botão “Compiler” na navegação lateral para retornar à guia Compiler. Perto da parte inferior do painel lateral há uma caixa de seleção chamada “Contrato”. Certifique-se de que “ReExoBits.sol” esteja selecionado. Clique no botão “Detalhes da compilação”. No pop-up resultante, você verá um item rotulado “ABI”, clique no botão “Copiar” ao lado dele para copiar a matriz ABI para a área de transferência. Em seguida, retorne à origem do projeto e abra o arquivo /src/contract/ReExoBits.json . Apague completamente o conteúdo do arquivo e cole a matriz ABI que você acabou de copiar. Com o contrato de exemplo, essa ABI deve ser exatamente a mesma que você acabou de excluir. No entanto, se você fizer alguma alteração no contrato, precisará atualizar a matriz ABI do projeto dessa maneira.
Web3
Web3.js é uma biblioteca de código aberto usada para interagir com o blockchain Ethereum a partir de um ambiente JavaScript. É importante entender que o Web3.js não acessa o blockchain diretamente. Ele deve se conectar a um servidor que fornece uma interface JSON-RPC para um nó blockchain. O servidor pode vir de uma variedade de fontes. No caso deste exemplo, sua carteira MetaMask fornecerá esse servidor.
Usando Web3.js você poderá fazer o seguinte: Recuperar seu endereço de carteira pública, conectar-se ao seu Ethereum Smart Contract, ler dados de seu contrato (por exemplo, obter um URI de token), chamar funções em seu contrato (por exemplo, obter uma lista de tokens pertencentes a um endereço) e realizar transações em seu contrato (por exemplo, criar tokens). Esse último item, realizar transações, em qualquer contrato é um caso um pouco especial. Ao ler os dados do contrato, você não está alterando seu estado. Esses tipos de operações são gratuitas porque não precisam atualizar o blockchain. Uma transação, por outro lado, altera o estado do contrato e, portanto, deve ser “extraída” para atualizar o blockchain. Para transações é necessária uma “taxa de gás”. Neste exemplo, usaremos o Ether de teste gratuito que obtivemos da torneira Rinkeby. Mas no blockchain principal você deve usar o Ether real,
Execução de teste
Neste ponto, você pode iniciar o projeto e visualizar o site com o servidor de desenvolvimento fornecido. Primeiro, instalaremos os módulos npm necessários para compilar e hospedar o projeto de desenvolvimento. A maioria dos módulos de nó que estamos instalando são para desenvolvimento, mas há dois usados no próprio site: Web3.js e React . O React é usado apenas para simplificar o desenvolvimento do próprio site. Se você não estiver familiarizado com o React, ou preferir outra solução, todo o código do projeto que faz interface com o blockchain é JavaScript vanilla e facilmente adaptável a outros ambientes.
Na pasta do projeto na linha de comando, digite:
npm install
Quando a instalação estiver concluída, construa o projeto e execute o servidor de teste:
npm start
Uma vez executado, você pode acessar o servidor web em seu navegador usando o endereço:
Conectando a carteira NFT
Quando carregado, o site exibirá um grande botão “Conectar carteira”. Clique nesse botão e você receberá um prompt do MetaMask para fazer login e autorizar o site. Depois de fazer isso, o botão de conexão é substituído por um menu de navegação do site. Nos bastidores, tanto o endereço da sua carteira quanto uma referência ao contrato foram recuperados.
Vamos passar pelo código necessário para conseguir isso. Abra o arquivo /src/components/Login.jsx . Quando você clica no botão “Connect Wallet”, ele chama a função DoConnect() local :
const DoConnect = async () => {
console.log(‘Connecting….’);
try {
const web3 = new Web3(Web3.givenProvider ||
“ws://localhost:8545”);
await window.ethereum.request({ method: ‘eth_requestAccounts’ })
const accounts = await web3.eth.getAccounts();
const instance = new web3.eth.Contract(
ExobitsABI,
contractAddress
);
props.callback({ web3, accounts, contract: instance });
} catch (error) {
console.error(“Could not connect to wallet.”, error);
}
};
A primeira coisa que a função faz é instanciar um novo objeto Web3. Na mesma linha, Web3.givenProvider aponta para o servidor JSON-RPC fornecido no MetaMask. Se você usar outro provedor, especifique aqui. O endereço localhost é um substituto genérico para desenvolvimento local e não é usado aqui.
A próxima linha chama window.ethereum.request() solicitando acesso ao provedor e, neste caso, solicita ao MetaMask que autorize o site. A propriedade Ethereum é injetada no objeto de janela pelo MetaMask. Uma vez autorizado, podemos acessar seu contrato no blockchain via MetaMask e sua interface JSON-RPC.
A próxima linha recupera o endereço da carteira conectada chamando a função Web3.js getAccounts() . A função retorna um array de endereços disponíveis com o ativo na posição 0. A próxima linha instancia um objeto Web3.js Contract que é usado para interagir com o contrato. O construtor aceita a ABI do contrato e o endereço como parâmetros.
O endereço da carteira e o objeto do contrato são tudo o que você precisa para começar a interagir com seu contrato ativo no blockchain. Neste exemplo, esses objetos são passados para uma função de retorno de chamada OnLogin() , em /src/App.js , para propagá-los para os componentes individuais do React que compõem o site. Esta etapa final varia de acordo com a implementação do site.
Fichas de cunhagem
Agora que você está conectado ao blockchain por meio do serviço JSON-RPC no MetaMask, você pode começar a interagir com seu contrato. Um dos principais recursos que você precisa em seu site NFT é a capacidade de criar, ou “mint”, novos tokens. O projeto de demonstração vem com 4 ativos predefinidos prontos para serem usados, você os encontrará no diretório /public/token_data/ . Cada ativo é um arquivo png com um arquivo de metadados json que o acompanha. O URI do arquivo json é o que você passará para a função mint. Ele contém dados em um formato padrão que galerias de terceiros como o OpenSea entenderão. É por meio desse arquivo de dados json que seu NFT aponta para o recurso de imagem.
Vamos tentar cunhar um token. No site de exemplo, clique no link “Mint” na navegação superior. Você é apresentado com quatro ativos possíveis para cunhar. A cunhagem é uma transação e, portanto, deve ser paga em “gás” para ser concluída. Além disso, nosso contrato de exemplo também cobra uma taxa de cunhagem de 0,001 Ether, paga ao proprietário do contrato. Escolha sua imagem favorita e clique nela para cunhar o token. O MetaMask apresentará uma janela para confirmar a transação. Uma vez confirmado, você pode acompanhar o status da transação no MetaMask. Seja paciente, dependendo da atividade do blockchain, a cunhagem pode levar minutos ou até horas.
Com seu primeiro token criado, vamos dar uma olhada no código subjacente. Abra o arquivo de projeto: /src/pages/Mint.jsx O código neste arquivo exibe as 4 imagens de ativos. Cada imagem tem um manipulador de eventos de clique que chama uma função DoMint local que, por sua vez, chama a função CustomMint em seu contrato. Vamos dar uma olhada na função DoMint :
const DoMint = async (tokenURI) => {
try{
let gasLimit = await props.contract.methods.
CustomMint(tokenURI).estimateGas({
from: props.address,
value: 100000000000000
});
let result = await props.contract.methods.
CustomMint(tokenURI).send({
from: props.address,
value: 100000000000000,
gasLimit: gasLimit
});
CheckAssetURIs();
}catch(e){
console.error('There was a problem while minting', e);
}
};
Existem três etapas principais para esta função. A primeira etapa recupera uma estimativa do pagamento de gás necessário para concluir a transação. Como a cunhagem é um processo transacional, ou seja, está atualizando o estado do seu contrato, é necessária uma taxa de gás. A taxa paga aos mineradores para atualizar o blockchain que solidifica sua transação em um registro público permanente. Os preços do gás flutuam descontroladamente. É importante saber o valor esperado para que um preço preciso possa ser apresentado ao usuário. Chamar o método estimativaGas, em uma função de contrato, é como um teste para a transação. Ele examinará a função CustomMint do contrato e calculará o custo esperado.
O método estimativaGas aceita um objeto de parâmetro correspondente à transação real. O objeto contém o endereço do solicitante, bem como um “valor” opcional que é uma quantidade de Ether transferida do solicitante para o contrato. O valor é separado da taxa do gás. Pode ser qualquer valor, incluindo 0, e neste exemplo optamos por cobrar 0,001 Ether como pagamento ao proprietário do contrato. O valor é representado em “Wei”, que é a menor unidade de Ether. 0,001 Ether se traduz em 100000000000000 Wei.
Com sua estimativa de gás pronta, é hora de realizar a transação real. Isso é feito chamando o método send em uma função de contrato. Uma vez chamada, a carteira solicitará ao usuário que confirme a transação e, se tudo der certo, um token será cunhado.
A etapa final no exemplo chama a função CheckAssetURIs local para atualizar a galeria. Como acabamos de cunhar um token, o ativo não está mais disponível, então queremos removê-lo da página de cunhagem. CheckAssetURIs chama a função de contrato tokenByUri . tokenByUri retorna o ID do token (inteiro positivo começando com 1) para o ativo solicitado ou 0 se esse ativo não tiver sido cunhado. Nesse caso, descartaremos quaisquer URIs de ativos que retornem um ID de token. Observe que aqui ele usa o método call() da função de contrato em vez de send() . Isso ocorre porque tokenByUriestá simplesmente retornando dados, não está atualizando o estado do contrato. Portanto, nenhuma taxa de transação precisa ser enviada.
let tokenId = await props.contract.methods.tokenByUri(uri).call();
Criar uma galeria de tokens NFT
Com um token cunhado em seu contrato, é hora de visualizá-lo na galeria do site. Clique no link “Galeria” na navegação superior. A galeria exibe ativos de imagem para todos os tokens disponíveis no contrato. Neste ponto, há apenas um. Você pode voltar para a página “Mint” e cunhar mais alguns, se quiser. Depois, volte para a galeria para ver os novos tokens.
Agora que você pegou o jeito de chamar funções de contrato, obter os dados do token é bastante simples. Vamos dar uma olhada mais profunda no código que compõe a galeria. Abra o arquivo de projeto /src/pages/Gallery.jsx . Quando a galeria é carregada, a primeira coisa que ela faz é chamar a função de contrato totalSupply . Esta função retornará a contagem total de tokens armazenados.
const totalSupply =
await props.contract.methods.totalSupply().call();
Como os IDs dos tokens são armazenados como números inteiros incrementais começando com 1, podemos simplesmente fazer um loop de 1 até a contagem total e ter o ID de cada token. Isso é feito na função GetTokenURIs da galeria :
const GetTokenURIs = async (totalSupply) => {
if(!totalSupply) return;
let tokens = [];
for(let idx=totalSupply; idx>=1; idx — ){
try{
let tokenURI =
await props.contract.methods.tokenURI(idx).call()
let response = await fetch(tokenURI);
let metaData = await response.json();
if(metaData && metaData.image)
tokens.push(metaData.image);
}catch(e){
console.error(‘Error occurred while fetching metadata.’)
continue;
}
}
if(tokens.length) setTokenURIs([…tokens]);
};
if(tokens.length) setTokenURIs([…tokens]);
};
Essa função aceita a contagem total de suprimentos e usa um loop for para iterar por cada ID de token. Com cada ID, ele chama a função de contrato tokenURI e recebe o URI de metadados json para esse token específico. Em seguida, ele usa uma solicitação de busca de API para recuperar os dados json, analisa-os e obtém o URI da imagem para a galeria.
Este projeto simplesmente renderiza as tags <img> com o URI da imagem recuperada como seu src. A forma como os NFTs são exibidos na galeria varia para cada implementação. Por exemplo, o site ExoBits renderiza o NFT em um componente da web. Portanto, em vez de recuperar o URI da imagem, ele recupera um valor de chave exclusivo armazenado no contrato e o carrega no componente da web. A imagem, por sua vez, é renderizada em tempo real. Isso permite recursos extras, como um cartão comercial simulado, no qual você pode clicar para ver as estatísticas no verso. Os proprietários de tokens ainda têm acesso a recursos especiais que ninguém mais faz, como redesenhar em câmera lenta, remover o plano de fundo e baixar a imagem.
Galeria do proprietário
Falando em proprietários, como as coleções de NFT tendem a ser milhares, não é uma boa experiência de usuário fazer as pessoas rolarem por uma galeria inteira para encontrar seus tokens. Podemos configurar uma galeria privada para que os proprietários possam ver apenas seus tokens. Dê uma olhada no arquivo do projeto: /src/pages/MyTokens.jsx . Você verá que funciona quase exatamente como a página da galeria com uma diferença. Em vez de recuperar o fornecimento total de tokens, isso chama a função de contrato tokensOfOwner :
const userTokens = await props.contract.methods.
tokensOfOwner(props.address).call();
Essa função aceita um endereço de carteira e retorna uma matriz de IDs de token pertencentes a esse endereço. Nesse caso, passamos o endereço da carteira conectada para recuperar os IDs dos tokens. Em seguida, ele percorre essa matriz, recuperando os dados do token da mesma forma que a página da galeria.
Considerações Finais
Com isso, você tem todas as funcionalidades principais que todo site NFT precisa. Use isso como seu ponto de partida. Construa nele funcionalidades adequadas à singularidade de sua própria NFT. Se você não estiver familiarizado com a escrita de contratos inteligentes, é melhor explorar esse aspecto desse processo a seguir. O poder das NFTs está em como você representa os dados do proprietário do token no contrato. Uma compreensão clara dos contratos inteligentes permite que você solidifique melhor as principais informações da sua NFT no blockchain.
