Requisitos:
- Familiaridade básica com Next.js
- Uma carteira como a Metamask
- Uma imagem divertida para brincar
Iniciando com a Thirdweb V2
- 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.
- Selecione “Create NFTs and Tokens” (Criar NFTs e Tokens) e depois “NFT Collection” (Coleção NFT)
- 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
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
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
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
})
}
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)