WEB3DEV

Cover image for Implantar e Cunhar um NFT do tipo CryptoKitties com Contrato Inteligente ERC-721
Fatima Lima
Fatima Lima

Posted on

Implantar e Cunhar um NFT do tipo CryptoKitties com Contrato Inteligente ERC-721

Alvorecer do ERC-721

Mencione a revolução NFT e você provavelmente tropeçará neste projeto repetidas vezes: CryptoKitties. Originalmente construído sobre a blockchain Ethereum, o CryptoKitties foi o primeiro token não-fungível (NFT) que permitiu a criação de colecionáveis digitais únicos como kits, usando o contrato inteligente ERC-721. Antes do surgimento do ERC-721, os tokens em blockchain eram apenas fungíveis, ou seja, podiam ser negociados ou trocados por outro idêntico do mesmo valor, muito semelhante a uma nota de dólar.

Já discutimos como você pode fazer um token fungível usando o ERC20, mas e se você quiser criar tokens que não sejam nada parecidos?

O que estamos construindo

O CryptoKitties realmente se preparou para o crescimento e uso dos NFTs que vemos hoje e, neste tutorial, vamos avançar na criação e implantação de um contrato inteligente ERC-721 e cunhar o token na Testnet Kovan da Optimism usando Solidity↗, Hardhat↗ e Pinata↗.

Ao final deste tutorial - você será capaz de cunhar um NFT e exibi-lo no Quixotic↗ (um mercado de NFT na Optimism) a partir do seu contrato ERC721 implantado.

Image description

Começando

PS: Sei que acabei de lançar uma tonelada de novas palavras para você na seção anterior e se alguma das palavras acima foi confusa, não se preocupe, pois discutiremos cada uma delas em detalhes.

Mas antes de sujarmos as mãos, vamos fazer um rápido resumo do que é a Optimism?

O que é a Optimism da Ethereum?

A Optimism é uma solução de camada 2 escalável para ETH, o que significa que funciona no topo da rede principal Ethereum (L1). Ela utiliza uma tecnologia chamada rollups, especificamente os rollups Optimistic, onde as transações são executadas fora da cadeia e são agrupadas em uma única transação antes de serem empurradas para a blockchain principal. Isto aumenta a velocidade da transação e o rendimento e diminui o custo por transação.

Muito útil, certo? Pronto para experimentar a Optimism?


Passo 1: Conecte a Metamask à Testnet Kovan da Optimism

Se você não possui uma carteira, a primeira coisa que precisa ser feita é baixar e instalar a extensão para o navegador da MetaMask↗.

Uma vez instalada e funcionando a MetaMask, siga estes passos simples para se conectar com a Testnet Kovan da Optimism:

  • Navegue até chainlist.org
  • Habilite a opção Testnet e procure pela Kovan da Optimism e conecte sua carteira com o RPC (chamada de procedimento remoto) dado.

Se você quiser lançar seu contrato ERC721 diretamente na rede principal, substitua o URL do RPC pelo RPC Público da Ankr -> https://rpc.ankr.com/optimism


Passo 2: Adicione Ether de teste a partir de uma Faucet

Para solicitar fundos, vá para a Faucet Kovan da Optimism↗ e assine com GitHub para adquirir alguns tokens. Espere um pouco e sua carteira deverá ser creditada!

Nota: ETH em testnets não tem valor real.


Passo 3: Configure seu ambiente de desenvolvimento

Para começar com a instalação do hardhat, precisamos primeiro configurar nosso ambiente de desenvolvimento. Para fazer isso, crie um novo diretório chamado erc721-token-mint.

  • Agora, inicialize seu novo projeto npm no diretório erc721-token-mint executando o seguinte comando no terminal do seu editor de código preferido.
npm init

Enter fullscreen mode Exit fullscreen mode
npm install dotenv
Enter fullscreen mode Exit fullscreen mode
  • Quando seu projeto estiver pronto, instale o Hardhat, um ambiente de desenvolvimento Ethereum para testar e implantar contratos inteligentes para a blockchain.

Pode levar um ou dois minutos para instalar tudo!

npm install --save-dev hardhat
Enter fullscreen mode Exit fullscreen mode
  • Execute npx hardhat e escolha "create an empty hardhat.config.js".
npx hardhat
Enter fullscreen mode Exit fullscreen mode

Seu projeto deve conter agora os seguintes arquivos e pastas: hardhat.config.js, node_modules, package.json e package-lock.json.

  • Em seguida, vamos criar dois novos diretórios para abrigar nosso contrato inteligente e o script de implantação. Para fazer isso, digite os seguintes comandos:
mkdir contracts
mkdir scripts
Enter fullscreen mode Exit fullscreen mode
  • Vamos agora instalar um plugin Hardhat que traz a biblioteca da Ethereum ethers.js, que lhe permite interagir com a blockchain Ethereum de maneira simples.
npm install --save-dev @nomiclabs/hardhat-ethers ethers
npm install --save-dev @openzeppelin/hardhat-upgrades
Enter fullscreen mode Exit fullscreen mode
  • Crie um arquivo .env na pasta raiz do seu projeto e configure a variável environment como a seguir. Esta é a chave privada da conta que você pretende usar na Rede Optimism da MetaMask.
PRIVATE_KEY = YOUR_PRIVATE_KEY

Enter fullscreen mode Exit fullscreen mode

Passo 4: Configuração das Configs Hardhat

Antes de criar o arquivo hardhat.config.js, precisaremos de um portal para nos comunicarmos com a blockchain Ethereum. Para isso, estaremos utilizando a testnet Kovan do RPC https://kovan.optimism.io/fornecido para a Optimism.

Se você quiser implantar seu ERC-721 diretamente na rede principal, você pode usar Ankr's Public RPC↗ para a Optimism. Basta copiar o URL. Não é necessária nenhuma conta ou login!

Image description

Agora você está pronto para editar o seu hardhat.config.js com o seguinte:

  • Abra o arquivo hardhat.config.js
  • Apague o código interno e copie - cole o código abaixo:
/**
* @typeimport('hardhat/config').HardhatUserConfig
*/
require('dotenv').config();
require("@nomiclabs/hardhat-ethers");

module.exports = {
   solidity: "0.8.1",
   defaultNetwork: "kovan",
   networks: {
      hardhat: {},
      kovan: {
         url: "https://kovan.optimism.io/",
         accounts: [`0x${process.env.PRIVATE_KEY}`]
      }
   },
}
Enter fullscreen mode Exit fullscreen mode

Você percebeu como estamos obtendo a variável PRIVATE_KEY neste arquivo? Estamos carregando a partir de process.env usando a biblioteca dotenv que instalamos enquanto configurávamos o ambiente de desenvolvimento .


Passo 5: Escreva o Contrato Inteligente ERC-721

Usaremos um padrão ERC-721 baseado no OpenZepplin. O OpenZepplin↗️ é um padrão de código aberto para proteger aplicativos de blockchain. Ele fornece produtos de segurança para construir, automatizar e operar dApps.

  • Para isso, instalaremos a biblioteca de contratos do OpenZepplin.
npm install @openzeppelin/contracts

Enter fullscreen mode Exit fullscreen mode
  • Agora navegue até a pasta contracts e crie um novo arquivo chamado KittyMonster.sol
  • Abaixo está nosso código de contrato inteligente NFT baseado na implementação do ERC721 do OpenZeppelin. Copie e cole o conteúdo abaixo em seu arquivo KittyMonster.sol.
// SPDX-License-Identifier: MIT
//Declare a versão da solidity para compilar este contrato.
//Isto deve corresponder à versão da solidity em seu arquivo hardhat.config.js
pragma solidity ^0.8.1;

//herda três classes de contratos inteligentes OpenZepplin 

//contém a implementação do ERC721
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol"; 

//fornece contadores que só podem ser incrementados ou decrescidos de um
import "@openzeppelin/contracts/utils/Counters.sol"; 

//implementa a propriedade nos contratos
import "@openzeppelin/contracts/access/Ownable.sol"; 

//Esta função instancia o contrato e 
//classifica o ERC721 para esquema de armazenamento
contract KittyMonster is ERC721URIStorage, Ownable {

    //para manter registro do número total de NFTs cunhados
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    //define o nome e o símbolo do contrato
    constructor() ERC721("KittyMonster", "KMON") {}

    //endereço do destinatário: endereço que receberá o NFT recém cunhado
    //tokenURI: descreve os metadados do NFT
    function mintNFT(address recipient, string memory tokenURI)
        public onlyOwner
        returns (uint256)
    {
        _tokenIds.increment();

        uint256 newItemId = _tokenIds.current();
        _mint(recipient, newItemId);
        _setTokenURI(newItemId, tokenURI);
        return newItemId;
    }
}

Enter fullscreen mode Exit fullscreen mode
  • Salve o arquivo e compile seu contrato para ter certeza de que tudo está correto para a implantação, usando o comando abaixo:
npx hardhat compile# output# Compiled n Solidity file successfully



Enter fullscreen mode Exit fullscreen mode

Passo 6: Escreva o Script de Implantação

Agora que temos nosso contrato ERC-721 pronto, vamos criar o script de implantação.

  • Navegue até a pasta scripts e crie um novo arquivo chamado deploy.js
  • Abra o arquivo deploy.js e copie-cole o seguinte código:
async function main() {
    // Pegue a fábrica de contrato
    //utilizadas para implantar os novos contratos inteligentes
    const KittyMonster = await ethers.getContractFactory("KittyMonster"); 
    // Inicie a implantação, retornando uma promessa que solucione um objeto de contrato

    const KMONS = await KittyMonster.deploy(); // Instância do contrato


   console.log("Contract deployed to address:", KMONS.address);
 }
 main()
   .then(() => process.exit(0))
   .catch(error => {
     console.error(error);
     process.exit(1);
   });
Enter fullscreen mode Exit fullscreen mode
  • Salve e feche o arquivo
  • Execute npx hardhat run scripts/deploy.js --network kovan
npx hardhat run scripts/deploy.js --network kovan
Output: Contract deployed to address: 0xA2a736b9af8B2D3bb95F92d1cC015Bc6D0A2C0cB
Enter fullscreen mode Exit fullscreen mode

A execução do comando acima compilará o contrato e o implantará na Testnet Kovan da Optimism.

  • Se você for até o Etherscan Kovan da Optimism↗ e procurar pelo endereço do seu contrato, você deve ser capaz de ver que o contrato foi implantado com sucesso.

Image description


Passo 7: Nivelamento do arquivo Solidity

Para atualizar as informações do token no Etherscan, o endereço do contrato do token deve ser verificado. Como proprietários do contrato, podemos verificar nosso contrato seguindo os passos abaixo. Mas antes disso, precisaremos nivelar o arquivo Solidity usando o Hardhat.

  • Para isso, dentro de seu diretório de projetos, execute o seguinte comando em seu terminal:
npx hardhat flatten > flattened.sol
Enter fullscreen mode Exit fullscreen mode

Isso vai gerar um arquivo flattened.solque contém o código do(s) contrato(s) e todas suas dependências, que copiaremos e colaremos para o etherscan ao verificar o contrato.

Image description

Certifique-se de que seu arquivo flattened.sol, // SPDX-License-Identifier: MIT é mencionado apenas uma vez. Caso contrário, ele lhe enviará um erro.


Passo 8: Verificação do Contrato no Etherscan Kovan da Optimism

Para verificar o contrato no Etherscan Kovan da Optimism, siga os passos abaixo:

  • Sob o endereço do contrato, ao lado da aba Transaction, você poderá encontrar a aba "Contract". Depois clique em "Verify and Publish" (Verificar e Publicar) e você chegará na página Verify and Publish Contract Source Code.
  • No menu suspenso para o tipo de compilador, seleção de versão e tipo de licença, selecione as seguintes configs:

Image description

  • Pressione "continue" e na seção Enter the Solidity Contract Code below, copie e cole o código inteiro do arquivo flattened.sol que geramos no passo 7.
  • Clique em Verify e Publish e você poderá ver que seu contrato é verificado com sucesso no Etherscan Kovan da Optimism.

Quando o contrato tiver sido verificado, a página "Code" será preenchida com os detalhes do contrato. O código fonte do contrato está agora disponível publicamente no Etherscan.


Passo 9: Adição do Ativo NFT ao IPFS | Pinata

Vamos usar o Pinata para armazenar nossos ativos NFT e metadados JSON no IPFS para que possamos passá-los para o contrato do nosso token (lembra-se do parâmetro tokenURI da nossa função mintNFT no contrato inteligente?).

Se você não tem uma conta Pinata, cadastre-se↗ para uma conta gratuita aqui e complete os passos para verificar seu e-mail.

  • Depois de verificar sua conta no Pinata, navegue até a página "My Files" (Meus Arquivos) e clique no botão "Upload" (Carregar).
  • Carregue sua arte NFT e você verá seu arquivo de imagens na página Files junto com a coluna CID.

Image description

Aqui está a imagem↗ que eu usei.

Agora, vamos carregar mais um documento nos metadados do Pinata - JSON. Para fazer isso, siga os passos abaixo:

  • No diretório raiz do seu código, crie um novo arquivo chamado monstermeta.json e adicione o código abaixo ao arquivo JSON.
{
    "attributes" : [ {
      "trait_type" : "Monster",
      "value" : "Dybbuk"
    }, {
      "trait_type" : "Space",
      "value" : "Fire"
    } ],
    "description" : "not cryptokitties.",
    "image" : "https://gateway.pinata.cloud/ipfs/QmY3AiXaCt9JFJ33GTR5U7YjXKrC5xbtjJDjEdUbN8QMVG",
    "name" : "Kabbey"
}
Enter fullscreen mode Exit fullscreen mode

Sinta-se à vontade para adicionar ou remover os atributos. Além disso, certifique-se também de fornecer o URL de sua imagem IPFS - caso contrário, você também terá a Kabbey!!

  • Uma vez terminada a edição do arquivo JSON, salve-o e carregue-o no Pinata, seguindo os mesmos passos que seguimos para carregar a imagem e copiar o CID para o arquivo JSON (precisaremos disso na próxima etapa).

Passo 10: Cunhe o NFT

  • Para cunhar o NFT, navegue na página de endereço do contrato, ao lado da aba Transaction. Você encontrará a aba “Contract”.
  • Clique em “Write Contract” e "connect to Web3".
  • Em mintNFT, insira o endereço público de sua carteira em recipient (address) e C.D para o arquivo JSON que você carregou no Pinata.
  • Pressione "write", e você pode visualizar sua transação executada com sucesso no Etherscan Kovan da Optimism.

Agora, iremos para Quixotic.io↗, um mercado de NFT para a Optimism.

  • Conecte sua carteira ao mercado da testnet Quixotic e você poderá ver seu NFT cunhado lá!

Image description

Verifique o Repositório do GitHub

Se você seguiu o tutorial, fantástico! Aqui você pode encontrar o repositório GitHub com o código completo.

Próximos Passos

Se você está pronto para um desafio, construa um dApp completo para cunhar, exibir e transferir NFTs para seus amigos.

Esse artigo foi escrito por Krinza Momin e traduzido por Fátima Lima. Seu original pode ser lido aqui.

Top comments (0)