WEB3DEV

Cover image for Cunhando um NFT usando a thirdweb V2 e o Next.js
Paulo Gio
Paulo Gio

Posted on

Cunhando um NFT usando a thirdweb V2 e o Next.js

Requisitos:

  • Familiaridade básica com Next.js
  • Uma carteira como a Metamask
  • Uma imagem divertida para brincar

Iniciando com a Thirdweb V2

  1. Vá para https://thirdweb.com/dashboard, conecte sua carteira, selecione “Create New Contract” (Criar novo contrato) e escolha a rede que deseja implantar: Polygon, Fantom, Avalanche, Mumbai Testnet.
  2. Selecione “Create NFTs and Tokens” (Criar NFTs e Tokens) e depois “NFT Collection” (Coleção NFT)
  3. Carregue uma imagem, escolha um nome para a coleção e escreva uma descrição.

NOTA ---------

  • A imagem, o nome e a descrição que você escolher na etapa 3 >NÃO têm nenhuma restrição nos NFTs que você criará.

Indo para o IDE

1.Comece instalando o SDK da thirdweb, ethers, fs e path em seu projeto Next.js

npm i @3rdweb/sdk ethers fs path
Enter fullscreen mode Exit fullscreen mode

2.Coloque uma imagem de sua escolha na pasta pública.

https://miro.medium.com/max/786/1*t_OxH2LCwDGHuJjzcXYJSA.webp

funImg.png

3.Crie um componente de front-end para cunhar um NFT (ClientSide)

// pages/index.js
import React from 'react' function index() {       
   const onMintHandler = async () => {
// faça uma solicitação de API do servidor de back-end para criar um NFT
    await fetch("/api/mintNFT", {
      method: "POST",
          headers: {
              "content-type": "application/json",                 
          },    
      })  
  }
  return (
     <div>
        <img src="/funImg.png" />
        <button onClick={()=>{onMintHandler()}}>
            Cunhe o NFT 🦘
        </button>
    </div>
  ) }

export default index
Enter fullscreen mode Exit fullscreen mode

4.Exporte a chave privada da carteira que você usou para criar o projeto anteriormente

https://miro.medium.com/max/786/1*AE7E0yOnJYyhz2-Nvci3mg.webp

5.Copie o endereço sob o título do contrato

https://miro.medium.com/max/786/1*9OU126ZJvi14uUtc4IH0Mw.webp

6.Crie um arquivo raiz chamado .env.local

— — Certifique-se de que seu .env.local está em seu .gitignore

— — Cole a chave privada como uma variável de ambiente

— — Cole o endereço do módulo que você criou anteriormente (encontrado abaixo)

ENV_KEY = chave privada aqui
CONTRACT_ADDRESS = endereço do contrato aqui
Enter fullscreen mode Exit fullscreen mode

7.Crie uma API node.js para manipular e criar o NFT (ServerSide)

NOTAS ---------

  • O FS em next.js não funciona da mesma forma em localhost e em produção.
  • Para usar corretamente fs.readFileSync() na produção, use o snippet de caminhos especificado abaixo para direcionar corretamente a pasta pública compilada.
// pages/api/mintNFT.js
import { ethers } from "ethers";
import { ThirdwebSDK } from "@3rdweb/sdk";
import fs from "fs"; 
import path from 'path';

const PRIVATE_KEY = process.env.ENV_KEY
const CONTRACT_ADDRESS = process.env.CONTRACT_ADDRESS
const build = process

// Certifique-se de inicializar as variáveis de ambiente acima do início da função api

export default async function mintNFT ( req, res ) {    
   const configDirectory = path.resolve(build.cwd(), 'public')
   // Este trecho informa a seguir onde procurar corretamente na produção    
   const walletAddress = 'exampleString'
   // O endereço da carteira que você gostaria de cunhar

   const rpcUrl = "https://polygon-rpc.com"
   // Use a rede em que você criou o projeto inicial

   const wallet = new ethers.Wallet(
        PRIVATE_KEY,
        ethers.getDefaultProvider(rpcUrl)
   )
   const sdk = new ThirdwebSDK(wallet)
   const module = sdk.getNFTCollection(
        CONTRACT_ADDRESS
        // O endereço de você o contrato que você criou em thirdweb
    );    
   const image = //// No localhost
        = fs.readFileSync('public/funImg.png')// Na produção
        = fs.readFileSync(path.join(configDirectory, 'funImg.png'))       
   const data = {
       name: "Your NFT's Name.",
       description: "Your description!",
       image: image,
       attributes: [
           { trait_type : 'Anything', value : 'you',},
           { trait_type : 'Want', value: 'as',},
           { trait_type : 'key-value', value: 'properties', },
       ]
   }    
   const mint = await contract.mintTo('walletAddress', data)    
// Dados que você pode querer enviar de volta para o frontend↓     
   const receipt = mint.receipt // o recibo da transação
   const tokenId = mint.id // o id do NFT cunhado
   const nft = await mint.data()    res.status(200).json({
       receipt : receipt,
       tokenId : tokenId,
       nft : nft
   })
}
Enter fullscreen mode Exit fullscreen mode

8.Verifique o endereço da carteira que você cunhou no Opensea ou DollaryDoo para verificar a cunhagem.

E voilá! Você acabou de cunhar seu primeiro NFT!

Artigo original publicado por Jacob Carter. Traduzido por Paulinho Giovannini.

Latest comments (0)