A Polygon (MATIC) é uma criptomoeda e uma plataforma de tecnologia que conecta e dimensiona redes blockchain. Ela alimenta alguns dos lançamentos NFT mais famosos, como SportX, ZEN RUN, EasyFi, Quickswap e outros.

Neste artigo, você passará de zero a herói ao lançar um drop NFT na blockchain Polygon. Vamos criar um site para os usuários cunharem para suas carteiras Polygon. Por fim, o check-out com cartão de crédito será incluído para tornar a cunhagem o mais simples possível.

O que estamos construindo

Neste artigo, criaremos After Ape, uma coleção NFT de macacos bonitos na rede de teste Mumbai. Também criaremos um site de cunhagem totalmente funcional para os usuários cunharem.

Você poderá cunhar seu After Ape de duas maneiras. Primeiro, com Testnet ETH em uma carteira MetaMask e, segundo, com Crossmint usando um cartão de crédito de teste. Você poderá ver que possui o NFT no OpenSea.

Aqui está uma prévia de como ficará o projeto final:

Sumário

1 . O que estamos construindo
..... . Sobre a Polygon
..... . O que você aprenderá
..... . O que será necessário

2 . Configuração do Projeto

3 . Configurando o hardhat

4 . Contrato Inteligente
..... . Implantando nosso contrato inteligente com Hardhat
..... . Como implantar na rede de teste Mumbai
..... . Configurando o Alchemy para enviar atualizações para a blockchain

5 . Cunhando o NFT
..... . Criando nosso site de cunhagem
..... . Integrando o SDK Crossmint em nosso site de cunhagem

5 . Cunhando seu primeiro NFT com Crossmint
..... . O que é Crossmint

Sobre a Polygon

A plataforma Polygon conecta projetos baseados em Ethereum e roda na blockchain Ethereum. O uso da plataforma Polygon pode aumentar a flexibilidade, escalabilidade e soberania de uma blockchain, mantendo a segurança, interoperabilidade e vantagens estruturais da blockchain Ethereum.

O rápido crescimento da Ethereum tem um alto custo; ocasionalmente, os custos de transferência excedem o valor que está sendo transferido. Isso se deve à substancial base de usuários da Ethereum, que limita severamente a escalabilidade das trocas.

Para resolver esses problemas, podemos usar a Polygon. O sistema da Polygon envolve um grande número de participantes, incluindo designers de blocos, desenvolvedores, usuários e partes interessadas. Os clientes da Polygon usam a Sidechain MATIC para executar e se comunicar com outros programas descentralizados da Ethereum. A MATIC é mais acessível e mais rápida do que as redes concorrentes. Para saber mais sobre a Polygon, confira a documentação aqui.

O que você aprenderá

• Como codificar um contrato inteligente de cunhagem de NFTs
• Como codificar o frontend para cunhagem de NFTs
• Como usar o Hardhat para desenvolvimento de blockchains
• Como implantar um contrato inteligente
• Como escrever testes para seus contratos inteligentes
• Como escrever scripts para seus contratos inteligentes
• Como permitir que seus compradores paguem com cartão de crédito

Prepare-se, porque estamos indo para um passeio de código…

O que será necessário

Você precisará do seguinte para esmagar este tutorial:

• NodeJs está instalado em sua máquina (versão 16)
• NPM pacote instalado (versão 8)
• Carteira Metamask instalada como uma extensão do navegador
• Hardhat versão 2.9.7
• Uma atitude entusiástica para aprender Web3.

Configuração do Projeto

Agora que sabemos o que iremos construir e os pré-requisitos, é hora de começar a escrever algum código.

Crie um novo diretório chamado after-ape e navegue até ele:

mkdir after-ape && cd after-ape

Em seguida, vá em frente para inicializar o projeto:

npm init -y

O npm init ajuda a transformar sua pasta em um projeto Javascript baseado em npm, ele faz várias perguntas enquanto o sinalizador -y ou — yes pode ser usado para pular as perguntas. Ele preenche o arquivo package.json.

npm install ethers hardhat ethereum-waffle chai @nomiclabs/hardhat-waffle @nomiclabs/hardhat-ethers web3modal @openzeppelin/contracts ipfs-http-client axios dotenv base64-sol @nomiclabs/hardhat-etherscan @alch/alchemy-web3

O primeiro conjunto de comandos instala os matchers Waffle Chai e adiciona uma versão do Waffle pronta para Hardhat ao Hardhat Runtime Environment. Uma biblioteca amigável chamada Web3Modal facilita os desenvolvedores de aplicativos a integrarem o suporte para vários provedores em suas criações. O @openzeppelin/contracts nos permite usar a biblioteca do OpenZepplin para criar contratos inteligentes seguros.

Configurando o hardhat

Em seguida, estaremos executando o seguinte comando:

hardhat npx

Um menu aparece e queremos criar um projeto Javascript e pressionar enter para todo o resto.

Os seguintes arquivos e pastas agora devem estar visíveis em seu diretório raiz:

• hardhat.config.js — Este arquivo contém toda a configuração do Hardhat, incluindo sua configuração, plug-ins e tarefas personalizadas.
• scripts — esta pasta contém o script sample-script.js, que, quando executado, implanta seu contrato inteligente.
• test — Esta pasta contém um script de teste de exemplo
• contracts — Esta pasta contém um exemplo de contrato inteligente do Solidity

Você pode prosseguir para Excluir o contrato Lock.sol na pasta de contratos. Em seguida, edite o arquivo hardhat.config.js conforme mostrado abaixo:

require("@nomiclabs/hardhat-waffle");
require('dotenv').config();
module.exports = {
 defaultNetwork: "mumbai",
 networks: {
mumbai: {
url: "https://rpc-mumbai.maticvigil.com",
accounts: [process.env.PRIVATE_KEY]
 }
 },
solidity: {
 version: "0.8.1",
 settings: {
 optimizer: {
 enabled: true,
 runs: 200
 }
 }
 },
etherscan: {
apiKey: process.env.POLYGONSCAN_API_KEY
}
}

Nesta seção, configuramos a rede de teste Mumbai, bem como o ambiente de desenvolvimento local do Hardhat.

Contrato Inteligente

Em seguida, criaremos nosso contrato inteligente. Crie um novo arquivo no diretório de contratos chamado AfterApe.sol. Aqui, adicione o seguinte código:

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.1;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";

contract AfterApeNFT is ERC721URIStorage {
using Counters for Counters.Counter;

Counters.Counter private _tokenIds;
constructor() ERC721("AfterApeNFT", "AfterApe") {}

function mintNFT(address recipient, string memory tokenURI) external payable returns (uint256) {
_tokenIds.increment();

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

Contratos inteligentes são normalmente escritos em Solidity, uma linguagem de programação completa. O Solidity é muito semelhante a linguagens como C++ e JavaScript. Para se familiarizar ainda mais com contratos inteligentes, leia nosso artigo sobre contratos inteligentes aqui mesmo no Medium.

Implantando nosso contrato inteligente com Hardhat

Escrever testes de contrato inteligente no Hardhat é feito usando JavaScript ou TypeScript e é aqui que estaríamos usando o Hardhat que instalamos anteriormente.

Quando você instala o Hardhat, ele dá acesso a uma blockchain local que só existe no seu computador. O objetivo disso é que você possa compilar e começar a executar testes em seu contrato inteligente localmente. Desta vez, criaremos nosso próprio script de execução usando JavaScript para compilar nosso código e executá-lo na blockchain local.

const main = async () => {
 const nftContractFactory = await hre.ethers.getContractFactory('AfterApeNFT');
 const nftContract = await nftContractFactory.deploy();
 await nftContract.deployed();
 console.log("Contract deployed to: ", nftContract.address);
}
const runMain = async () => {
 try {
 await main();
 process.exit(0);
 } catch (error) {
 console.log(error);
 process.exit(1);
 }
};
runMain();

Certifique-se de colocar o conteúdo desse arquivo em um arquivo chamado deploy.js na pasta scripts do seu aplicativo.

Em seu diretório raiz, crie um arquivo chamado .env que abrigará o URL e a chave privada. Vá para o diretório raiz do projeto e digite touch .env:

API_URL = "←SEU URL DE ALCHEMY AQUI →"
PRIVATE_KEY = "←SUA CHAVE PRIVADA AQUI →"
POLYGONSCAN_API_KEY=
CONTRACT_ADDRESS=
PUBLIC_KEY=
CID=

Sua chave privada pode ser encontrada na seção de conta de sua Metamask. Para obter sua chave de API Polyscan, você criará uma conta com Polyscan, navegue até a seção Meu Perfil > Chaves de API e crie uma nova chave.

Agora, antes de implantar o contrato, também precisamos obter alguns Matic de teste na faucet (torneira) e adicionar a Mumbai à nossa carteira Metamask:

URL RPC: https://rpc-mumbai.maticvigil.com
ID da cadeia: 80001
Símbolo: MATIC

Em seguida, você deve executar o seguinte comando no terminal:

npx hardhat run scripts/deploy.js

Se tudo foi feito corretamente e não há erros em seu contrato Solidity ou no arquivo run.js, você deve ver o seguinte exibido em seu terminal:

Compiled 12 Solidity file successfully
Contract deployed to: 0x0EF1b6939693B8db18d744E7929753Cf1403c2Ae

Parabéns! Você implantou o contrato AfterApeNFT na blockchain Mumbai.

Como implantar na rede de teste Mumbai

Nesta seção, faremos a implantação na rede de teste Mumbai. Você pode pensar na rede de teste Mumbai como semelhante a um ambiente de desenvolvimento temporário. Precisamos de uma carteira Metamask, uma chave privada e uma ferramenta chamada Alchemy para ajudar a enviar atualizações para a blockchain.

Configurando o Alchemy para enviar atualizações para a blockchain

Alchemy é uma ferramenta que ajudará a transmitir nossa transação de criação de contrato para garantir que ela seja prontamente detectada pelo maior número possível de mineradores. Por enquanto, esteja ciente de que o Alchemy é fundamental para colocar nosso NFT na rede de teste Mumbai.

Crie uma conta com Alchemy aqui. Ao criar um aplicativo, certifique-se de selecionar a rede de teste Mumbai na seção Network do aplicativo.

Em seguida, copie o URL https e cole-o no arquivo .env

Em seguida, precisamos modificar nosso hardhat.config.js para conter as variáveis ​​necessárias em Solidity.

require('@nomiclabs/hardhat-waffle');
require("dotenv").config({ path: ".env" });
module.exports = {
 solidity: {
 version: "0.8.1"
 },
 networks: {
 rinkeby: {
 url: process.env.ALCHEMY_API_KEY_URL,
 accounts: [process.env.RINKEBY_PRIVATE_KEY],
 },
 },
};

Agora, se tudo foi configurado corretamente, eis o que você precisa fazer:

npx hardhat run scripts/run.js — network matic

Sim, é o mesmo script que você já criou. A única diferença é que você está usando o modificador — network no terminal. Ele agora usará as variáveis ​​que você definiu no arquivo de configuração.

Isso implantará seu contrato inteligente, incluindo todos os seus NFTs, na rede de teste Mumbai.

Agora você deve ver uma mensagem semelhante à que viu quando implantou seu NFT.

Compiled 1 Solidity file successfully
Contract deployed to: 0x0EF1b6939693B8db18d744E7929753Cf1403c2Ae

Ótimo! Agora nosso NFT está na blockchain Mumbai.

Verificando o contrato no Polygonscan​

Você pode confirmar facilmente seu contrato no Polygonscan executando os seguintes comandos. Isso torna simples para qualquer pessoa visualizar o código-fonte do contrato implantado.

$ npm install — save-dev @nomiclabs/hardhat-etherscan
$ npx hardhat verify — network matic 
0x0EF1b6939693B8db18d744E7929753Cf1403c2Ae

Lembre-se de alterar seu endereço para seu próprio endereço de contrato implantado. Quando a instrução for bem-sucedida, o Polygonscan exibirá uma confirmação do seu contrato!

Se for bem-sucedido, você deverá ver isto:

Cunhando o NFT

Execute este comando:

wget -c https://cdn.glitch.global/56a076b7-0edc-47eb-8e0c-f851f7bac21f/metdata.zip?v=1657739354184 -O metadata.zip && unzip metadata.zip

Se o comando acima falhar, cole o link em seu navegador para baixá-lo manualmente e descompacte-o na pasta raiz do projeto. Crie uma conta na Pinata e, em seguida, faça o upload do arquivo e do arquivo jpg da imagem, anotando o CID, pois iremos copiá-lo para o arquivo image.json

Em seguida, carregue o arquivo image.json e copie esse CID e cole-o no arquivo .env.

NOTA: Os dois CIDs são diferentes e é importante que o CID do arquivo .json vá para o arquivo .env

Em seguida, precisamos criar um novo script, execute este comando touch scripts/mint.js localize esse arquivo e cole este código nele:

const CONTRACT = require("./../artifacts/contracts/AfterApe.sol/AfterApeNFT.json");
require("dotenv").config();
const { ALCHEMY_URL, PUBLIC_KEY, PRIVATE_KEY, CONTRACT_ADDRESS, CID } = process.env;
const web3 = createAlchemyWeb3(`${ALCHEMY_URL}`);
const nftContract = new web3.eth.Contract(CONTRACT.abi, CONTRACT_ADDRESS);
async function mintNFT(tokenURI) {
const nonce = await web3.eth.getTransactionCount(PUBLIC_KEY, "latest");
//the transaction
const tx = {
"from": PUBLIC_KEY,
"to": CONTRACT_ADDRESS,
"nonce": nonce,
"gas": 500000,
"data": nftContract.methods.mintNFT(PUBLIC_KEY, tokenURI).encodeABI()
};
const signPromise = web3.eth.accounts.signTransaction(tx, `0x${PRIVATE_KEY}`);
signPromise
.then((signedTx) => {
 web3.eth.sendSignedTransaction(
 signedTx.rawTransaction,
 function(err, hash) {
 if (!err) {
 console.log(
 "The hash of your transaction is: ", hash ,
 "\nCheck Alchemy's Mempool to view the status of your transaction!"
 )
 } else {
 console.log(
 "Something went wrong when submitting your transaction:", err)
 }
 }
 )
})
.catch((err) => {
 console.log("Promise failed:", err)
});
}
mintNFT(`ipfs://${CID}`);

Em seguida, o executamos com o comando:

node scripts/mint.js

Se for bem-sucedido, você deverá ver isto:

Depois, dirija-se à Testnet do Opensea e cole o endereço do contrato na barra de pesquisa. Você deve ver isto:

Criando nosso site de cunhagem

Vamos começar a construir nosso site de cunhagem. Criamos uma pasta inicial que você pode baixar aqui para tornar isso o mais fácil possível.

Execute os seguintes comandos para começar:

cd react-polygon-ui
npm install

Então execute:

npm start

Como alternativa, você pode clonar o repositório GitHub e seguir as etapas acima para começar.

Integrando o SDK Crossmint em nosso site de cunhagem

Agora temos que instalar o cliente. Primeiro, certifique-se de instalar o Crossmint Client SDK (SDK Crossmint do Cliente)para react.js.

npm install @crossmint/client-sdk-react-ui

Em seguida, entre / crie uma conta no console da Crossmint, clique em criar uma nova coleção no canto superior direito (New collection)

Escolha a guia Polygon

Preencha os campos com o que quiser e clique em *Create Collection *(Criar coleção).

Agora você terá o SDK disponível. Acesse seu arquivo App.js e importe o Crossmint pay com o trecho de código abaixo:

import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui;

Por fim, vá em frente para substituir o conteúdo do seu arquivo App.js pelo seguinte, ele já possui o botão Crossmint:

import "./App.css";
import "./EthersBtn";
import EthersBtn from "./EthersBtn";
import { CrossmintPayButton } from "@crossmint/client-sdk-react-ui;
function App() {
 const styles = {
 display: 'inline-flex', 
 marginTop: '10px',
 color: 'black'
 }
 return (
 <div className="App">
 <h1>After Ape NFT</h1>
 <div className="container">
 <div className="btn-container">
 {/* <EthersBtn /> */}


 <CrossmintPayButton
 ​​collectionTitle="<TITULOS_PARA_SUA_COLEÇÃO>"
 collectionDescription="<DESCRIÇÃO DA SUA COLEÇÃO>"
 collectionPhoto="<OPT_URL_PARA_CAPA_DA_FOTO>"
 clientId="<YOUR_CLIENT_ID>"
 mintConfig={{
 price: "<SELECTED_PRICE>",
 _to: "$CrossmintUserAddress",
 _mintAmount: 1
 }}
 />

 </div>
 </div>
 </div>
 );
}
export default App;

Cunhando seu primeiro NFT com Crossmint

Agora execute o site novamente e, se tudo foi feito corretamente, você poderá clicar no botão Buy with Credit Card (Comprar com cartão de crédito) com o Crossmint e fazer com que tudo corra bem e funcione!

Parabéns por cunhar seu NFT com Crossmint! Se você verificar sua conta Crossmint e a carteira especificamente, verá que agora você tem acesso ao seu NFT e que ele está em sua carteira.

O que é Crossmint

Nosso objetivo na Crossmint é ajudar a tornar os NFTs o mais acessíveis possível. Nosso primeiro produto, Crossmint Pay, é uma ferramenta para criadores de NFT aceitarem pagamentos com cartão de crédito. Ele permite que qualquer pessoa crie um NFT em menos de um minuto usando apenas seu e-mail e cartão de crédito, sem a necessidade de carteira ou criptomoeda.

Também temos nossa API de cunhagem como um produto ativo em versão beta, você pode entrar em contato conosco para obter acesso. Se você quiser pular todas essas etapas, também pode criar um contrato inteligente NFT com uma linha de código, tornando mais fácil para qualquer pessoa produzir coleções NFT e expandir o público que pode possuí-las. Os criadores podem usar o Crossmint gratuitamente e atualmente oferecemos suporte a Solana, Ethereum, Polygon e Avalanche.

Siga-nos no Medium para ser notificado quando publicarmos outro artigo! Se você tiver algum comentário, sinta-se à vontade para entrar em contato conosco via Twitter. Você sempre pode conversar conosco em nosso servidor de Discord da comunidade, onde estão alguns dos desenvolvedores mais legais que você já conheceu.

Você é um desenvolvedor pronto para começar? Visite a documentação do Crossmint e veja como você pode integrar o Crossmint ao seu projeto em menos de 5 linhas de código.

Este artigo foi escrito por Idowu Daniel e traduzido por Diogo Jorge. O artigo original pode ser encontrado aqui.