Cómo acuñar un NFT usando web3.js

Este tutorial describe cómo mintear un NFT en la blockchain de Ethereum usando Web 3 y nuestro smart contract de la Parte I: Cómo crear un NFT

Tiempo estimado para completar esta guía: ~10 minutos

Además, no dejes de revisar el resto de nuestra serie de tutoriales de NFT:

• 🪄 Cómo mintear un NFT con Ether.js
• 👛 Cómo ver tu NFT en tu wallet móvil
• 💸 Cómo fijar un precio para un NFT
• 💻 Tutorial de minteo de NFT: cómo crear una dApp full stack

"Mintear un NFT" es el acto de publicar una instancia única de tu token ERC721 en la blockchain. Ahora que ya desplegamos un smart contract en la red Sepolia en la Parte I de esta serie de tutoriales de NFT, pongamos en práctica nuestras habilidades de web3 y minteemos un NFT.

Al final de este tutorial, podrás mintear tantos NFTs como quieras con este código. ¡Empecemos!

Paso 1: instalar Web3

Si seguiste el primer tutorial sobre cómo crear tu smart contract de NFT, ya tienes experiencia usando Ethers.js. Web3 es similar a Ethers, ya que es una librería usada para facilitar la creación de solicitudes a la blockchain de Ethereum. En este tutorial usaremos Alchemy Web3, que es una librería web3 mejorada que ofrece reintentos automáticos y soporte robusto de WebSocket.

En el directorio raíz de tu proyecto ejecuta:

Paso 2: crear un archivo mint-nft.js

Dentro de tu directorio scripts, crea un archivo mint-nft.js y agrega las siguientes líneas de código:

Paso 3: obtener el ABI de tu contrato

El ABI de nuestro contrato (Application Binary Interface) es la interfaz para interactuar con nuestro smart contract. Hardhat genera automáticamente un ABI para nosotros y lo guarda en el archivo MyNFT.json. Para usarlo, necesitaremos extraer su contenido agregando las siguientes líneas de código a nuestro archivo mint-nft.js:

Si quieres ver el ABI, puedes imprimirlo en tu consola:

Para ejecutar mint-nft.js y ver tu ABI impreso en la consola, ve a tu terminal y ejecuta

Paso 4: configurar los metadatos de tu NFT usando IPFS

Si recuerdas de nuestro tutorial en la Parte I, la función mintNFT de nuestro smart contract recibe un parámetro tokenURI que debe resolver a un documento JSON que describe los metadatos del NFT, lo cual es en realidad lo que le da vida al NFT, permitiéndole tener propiedades configurables, como un nombre, descripción, imagen y otros atributos.

Usaremos Pinata, un API y toolkit conveniente de IPFS, para almacenar el asset y los metadatos de nuestro NFT y así asegurarnos de que sea verdaderamente descentralizado. Si no tienes una cuenta de Pinata, regístrate gratis en pinata.cloud y completa los pasos para verificar tu correo electrónico.

Una vez que hayas creado una cuenta:

• Ve al botón "Pinata Upload" en la parte superior derecha
• Sube una imagen a pinata; esta será el asset de imagen para tu NFT. Puedes nombrar el asset como quieras
• Después de subirla, en la parte superior de la página debería aparecer un popup verde que te permite ver el hash de tu subida. Copia ese hash. Puedes ver tu subida en: https://gateway.pinata.cloud/ipfs/<hash-code>

Para quienes aprenden mejor de forma visual, los pasos anteriores se resumen aquí. Ahora, vamos a subir un documento más a Pinata. Pero antes de hacerlo, ¡necesitamos crearlo!

En tu directorio raíz, crea un nuevo archivo llamado nft-metadata.json y agrega el siguiente código json:

Siéntete libre de cambiar los datos en el json. Puedes quitar o agregar elementos en la sección de attributes. Lo más importante es asegurarte de que el campo image apunte a la ubicación de tu imagen en IPFS; de lo contrario, tu NFT incluirá una foto de un perro (¡muy tierno!).

Una vez que termines de editar el archivo json, guárdalo y súbelo a Pinata, siguiendo los mismos pasos que usamos para subir la imagen.

Paso 5: crear una instancia de tu contrato

Ahora, para interactuar con nuestro contrato, necesitamos crear una instancia de él en nuestro código. Para hacerlo, necesitaremos la dirección de nuestro contrato, que podemos obtener del despliegue o de Etherscan buscando la dirección que usaste para desplegar el contrato.

En el ejemplo anterior, la dirección de nuestro contrato es 0x81c587EB0fE773404c42c1d2666b5f557C470eED.

A continuación, usaremos el método contract de web3 para crear nuestro contrato usando el ABI y la dirección. En tu archivo mint-nft.js, agrega lo siguiente:

Paso 6: actualizar el archivo .env

Ahora, para crear y enviar transacciones a la cadena de Ethereum, usaremos la dirección pública de tu cuenta de Ethereum para obtener el nonce de la cuenta (lo explicaremos más abajo).

Agrega tu clave pública a tu archivo .env. Si completaste la parte 1 del tutorial, nuestro archivo .env ahora debería verse así:

Paso 7: crear tu transacción

Primero, definamos una función llamada mintNFT(tokenData) y creemos nuestra transacción haciendo lo siguiente:

1. Obtén tu PRIVATE_KEY y PUBLIC_KEY del archivo .env.
2. A continuación, necesitamos averiguar el nonce de la cuenta. La especificación del nonce se usa para llevar la cuenta del número de transacciones enviadas desde tu dirección, lo cual necesitamos por motivos de seguridad y para evitar ataques de repetición. Para obtener el número de transacciones enviadas desde tu dirección, usamos getTransactionCount.
3. Finalmente, configuraremos nuestra transacción con la siguiente información:
4. 'from': PUBLIC_KEY: el origen de nuestra transacción es nuestra dirección pública
5. 'to': contractAddress: el contrato con el que queremos interactuar y al que enviaremos la transacción
6. 'nonce': nonce: el nonce de la cuenta con el número de transacciones enviadas desde nuestra dirección
7. 'gas': estimatedGas: el gas estimado necesario para completar la transacción
8. 'maxPriorityFeePerGas': estimatedFee: la tarifa estimada a ofertar por gas.
9. 'data': nftContract.methods.mintNFT(PUBLIC_KEY, md).encodeABI(): el cómputo que deseamos realizar en esta transacción, que en este caso es mintear un NFT

Tu archivo mint-nft.js ahora debería verse así:

Paso 8: firmar la transacción

Ahora que hemos creado nuestra transacción, necesitamos firmarla para poder enviarla. Aquí es donde usaremos nuestra clave privada.

web3.eth.sendSignedTransaction nos dará el hash de la transacción, que podemos usar para confirmar que nuestra transacción fue minada y que la red no la descartó. Notarás que, en la sección de firma de la transacción, agregamos verificación de errores para saber si nuestra transacción se completó con éxito.

Paso 9: llamar a mintNFT y ejecutar node contract-interact.js

¿Recuerdas el metadata.json que subiste a Pinata? Obtén su hash desde Pinata y pásalo en una llamada a mintNFT https://gateway.pinata.cloud/ipfs/

Así es como se obtiene el hash:

En conjunto, tu código debería verse algo así:

Ahora, ejecuta node scripts/mint-nft.js para desplegar tu NFT. Después de unos segundos, deberías ver una respuesta como esta en tu terminal:

A continuación, visita tu mempool de Alchemy para ver el estado de tu transacción (si está pendiente, minada, o si la red la descartó). Si tu transacción fue descartada, también es útil revisar Sepolia Etherscan y buscar el hash de tu transacción.

¡Y eso es todo! Ahora has desplegado Y minteado un NFT en la blockchain de Ethereum 🎉

Usando el mint-nft.js puedes mintear tantos NFTs como tu corazón (y tu wallet) desee. Solo asegúrate de pasar un nuevo tokenURI que describa los metadatos del NFT; de lo contrario, terminarás creando un montón de NFTs idénticos con distintos IDs.

Seguramente querrás poder mostrar tu NFT en tu wallet 😉, así que no dejes de revisar la Parte III: Cómo ver tu NFT en tu wallet móvil.