Tutorial de minter de NFT: cómo crear una dApp full stack

En este tutorial, vas a construir un minter de NFT y aprenderás a crear una dApp full stack conectando tu smart contract a un frontend en React usando Metamask y herramientas de Web3.

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

• 🌟 Cómo mintear un NFT usando Web3.js
• 🪄 Cómo mintear un NFT con Ether.js
• 👛 Cómo ver tu NFT en tu wallet móvil
• 💸 Cómo establecer un precio para un NFT

Uno de los mayores desafíos para los desarrolladores que vienen de un background de Web2 es descubrir cómo conectar su smart contract a un proyecto frontend e interactuar con él.

Al construir un minter de NFT —una UI simple donde puedes ingresar un link a tu activo digital, un título y una descripción—, aprenderás a:

• Conectarte a Metamask desde tu proyecto frontend
• Llamar métodos del smart contract desde tu frontend
• Firmar transacciones usando Metamask

En este tutorial, vamos a usar React como nuestro framework de frontend. Dado que este tutorial está enfocado principalmente en desarrollo Web3, no vamos a dedicar mucho tiempo a explicar los fundamentos de React. En cambio, nos vamos a enfocar en darle funcionalidad a nuestro proyecto

Sin más preámbulos, ¡empecemos!

Paso 0: fundamentos de la creación de NFTs

Antes de empezar a mirar código, es importante entender cómo funciona la creación de un NFT. Involucra dos pasos:

1) Publicas un smart contract de NFT en la blockchain de Ethereum. Generalmente es un smart contract ERC-721 o ERC-1155.

2) Llamas a la función de minteo en ese smart contract de NFT para mintear el NFT. Mintear es simplemente el acto de publicar una instancia única de tu token no fungible en la blockchain.

Normalmente, esta función de minteo requiere que pases dos variables como parámetros: primero el destinatario, que especifica la dirección que recibirá tu NFT recién minteado, y segundo el tokenURI del NFT, un string que apunta a un documento JSON que describe los metadatos del NFT.

En este tutorial, nos vamos a enfocar en la parte 2, llamando a la función de minteo de un smart contract de NFT existente usando nuestra UI de React.

​Aquí tienes un link al smart contract ERC-721 de NFT que vamos a llamar en este tutorial. Si quieres aprender cómo lo creamos, te recomendamos revisar nuestro otro tutorial, "Cómo crear un NFT."​

Genial, ahora que entendemos cómo funciona la creación de un NFT, ¡clonemos nuestros archivos iniciales!

Paso 1: clona los archivos iniciales

Primero, ve al repositorio de github nft-minter-tutorial para obtener los archivos iniciales de este proyecto. Clona este repositorio en tu entorno local.

Cuando abras este repositorio clonado nft-minter-tutorial, notarás que contiene dos carpetas: minter-starter-files y nft-minter.

• minter-starter-files contiene los archivos iniciales (esencialmente la UI de React) para este proyecto. En este tutorial, vamos a trabajar en este directorio, mientras aprendes a darle vida a esta UI conectándola a tu wallet de Ethereum y a un smart contract de NFT.
• nft-minter contiene el tutorial completo terminado y está ahí como referencia por si te atascas.

A continuación, abre tu copia de minter-starter-files en tu editor de código favorito (en Alchemy, somos grandes fans de VSCode), y luego navega a tu carpeta src:

Vamos a trabajar dentro de la carpeta "src"

Todo el código que vamos a escribir vivirá bajo la carpeta src. Vamos a editar el componente Minter.js y a escribir archivos javascript adicionales para darle funcionalidad Web3 a nuestro proyecto.

Paso 2: revisa nuestros archivos iniciales

Antes de empezar a programar, es importante revisar qué se nos proporciona ya en los archivos iniciales.

Pon tu proyecto de react a correr

Empecemos ejecutando el proyecto de React en nuestro navegador. Lo bonito de React es que, una vez que tenemos nuestro proyecto corriendo en el navegador, cualquier cambio que guardemos se actualizará en vivo en nuestro navegador.

Para poner el proyecto a correr, navega al directorio raíz de la carpeta minter-starter-files, y ejecuta npm install en tu terminal para instalar las dependencias del proyecto:

Una vez que hayan terminado de instalarse, ejecuta npm start en tu terminal:

Al hacerlo debería abrirse http://localhost:3000/ en tu navegador, donde verás el frontend de nuestro proyecto. Debería consistir en 3 campos: un lugar para ingresar un link al activo de tu NFT, ingresar el nombre de tu NFT, y proporcionar una descripción.

Si intentas hacer clic en los botones "Connect Wallet" o "Mint NFT", notarás que no funcionan—¡eso es porque todavía necesitamos programar su funcionalidad! :)

El componente minter.js

Volvamos a la carpeta src en nuestro editor y abramos el archivo Minter.js. Es sumamente importante que entendamos todo lo que hay en este archivo, ya que es el componente principal de React con el que vamos a trabajar.

Al inicio de este archivo, tenemos nuestras variables de estado que actualizaremos después de eventos específicos.

Esto es lo que representa cada variable:

• walletAddress - un string que almacena la dirección de wallet del usuario
• status - un string que contiene un mensaje para mostrar en la parte inferior de la UI
• name - un string que almacena el nombre del NFT
• description - un string que almacena la descripción del NFT
• url - un string que es un link al activo digital del NFT

Después de las variables de estado, verás tres funciones sin implementar: useEffect, connectWalletPressed, y onMintPressed. Notarás que todas estas funciones son async, ¡eso es porque vamos a hacer llamadas asíncronas a APIs dentro de ellas! Sus nombres son epónimos con su funcionalidad:

• useEffect- este es un hook de React que se llama después de que tu componente se renderiza. Como tiene un prop de array vacío [] pasado en él (ver línea 3), solo se llamará en el primer render del componente. Aquí llamaremos a nuestro wallet listener y a otra función de wallet para actualizar nuestra UI y reflejar si ya hay una wallet conectada.
• connectWalletPressed - esta función se llamará para conectar la wallet de Metamask del usuario a nuestra dApp.
• onMintPressed - esta función se llamará para mintear el NFT del usuario.

Cerca del final de este archivo, tenemos la UI de nuestro componente. Si revisas este código con cuidado, notarás que actualizamos nuestras variables de estado url, name, y description cuando cambia el input en sus campos de texto correspondientes.

También verás que connectWalletPressed y onMintPressed se llaman cuando se hace clic en los botones con IDs mintButton y walletButton respectivamente.‍

Por último, veamos dónde se añade este componente Minter.

Si vas al archivo App.js, que es el componente principal de React y actúa como contenedor para todos los demás componentes, verás que nuestro componente Minter se inyecta en la línea 7.

En este tutorial, solo vamos a editar el archivo Minter.js y a agregar archivos en nuestra carpeta src.

Ahora que entendemos con qué estamos trabajando, ¡configuremos nuestra wallet de Ethereum!

Paso 3: configura tu wallet de Ethereum

Para que los usuarios puedan interactuar con tu smart contract, necesitarán conectar su wallet de Ethereum a tu dApp.

Descarga MetaMask

Para este tutorial, vamos a usar Metamask, una wallet virtual en el navegador usada para administrar tu dirección de cuenta de Ethereum. Si quieres entender más sobre cómo funcionan las transacciones en Ethereum, revisa esta página de la Ethereum foundation.

Puedes descargar y crear una cuenta de Metamask de forma gratuita aquí. Al crear una cuenta, o si ya tienes una, asegúrate de cambiar a la "Ropsten Test Network" en la esquina superior derecha (para no estar trabajando con dinero real).

Agrega ether desde un faucet

Para poder mintear nuestros NFTs (o firmar cualquier transacción en la blockchain de Ethereum), vamos a necesitar algo de Eth falso. Para obtener Eth puedes ir al faucet de Sepolia e ingresar la dirección de tu cuenta de Ropsten, luego hacer clic en "Send Ropsten Eth." ¡Deberías ver Eth en tu cuenta de Metamask poco después!

Revisa tu balance

Para verificar que nuestro balance está ahí, hagamos una solicitud eth_getBalance usando la herramienta composer de Alchemy. Esto devolverá la cantidad de Eth en nuestra wallet. Después de ingresar la dirección de tu cuenta de Metamask y hacer clic en "Send Request", deberías ver una respuesta como esta:

¡Uf! ¡Nuestro dinero falso está ahí! 🤑

Paso 4: conecta MetaMask a tu UI

Ahora que nuestra wallet de Metamask está configurada, ¡conectemos nuestra dApp a ella!

Como queremos seguir el paradigma M-V-C, vamos a crear un archivo separado que contenga nuestras funciones para manejar la lógica, los datos, y las reglas de nuestra dApp, y luego pasar esas funciones a nuestro frontend (nuestro componente Minter.js).

La función connectWallet

Para hacer esto, creemos una nueva carpeta llamada utils en tu directorio src y agreguemos un archivo llamado interact.js dentro de ella, que contendrá todas nuestras funciones de interacción con la wallet y el smart contract.

En nuestro archivo interact.js, vamos a escribir una función connectWallet, que luego importaremos y llamaremos en nuestro componente Minter.js.

En tu archivo interact.js, agrega lo siguiente

Vamos a desglosar qué hace este código:

Primero, nuestra función verifica si window.ethereum está habilitado en tu navegador.

Si window.ethereum no está presente, eso significa que Metamask no está instalado. Esto resulta en que se devuelva un objeto JSON, donde la address devuelta es un string vacío, y el objeto JSX status comunica que el usuario debe instalar Metamask.

Ahora bien, si window.ethereum sí está presente, ahí es cuando las cosas se ponen interesantes.

Usando un bucle try/catch, intentaremos conectarnos a Metamask llamando a window.ethereum.request\(\{ method: "eth\_requestAccounts" \}\); Llamar a esta función abrirá Metamask en el navegador, donde se le pedirá al usuario que conecte su wallet a tu dApp.

• Si el usuario elige conectarse, method: "eth_requestAccounts" devolverá un array que contiene todas las direcciones de cuenta del usuario que se conectaron a la dApp. En conjunto, nuestra función connectWallet devolverá un objeto JSON que contiene la primera address en este array (ver línea 9) y un mensaje status que le pide al usuario que escriba un mensaje al smart contract.
• Si el usuario rechaza la conexión, entonces el objeto JSON contendrá un string vacío para la address devuelta y un mensaje status que refleja que el usuario rechazó la conexión.

Agrega la función connectWallet a tu componente UI minter.js

Ahora que hemos escrito esta función connectWallet, conectémosla a nuestro componente Minter.js.

Primero, tendremos que importar nuestra función a nuestro archivo Minter.js agregando

import \{ connectWallet \} from "./utils/interact.js"; al inicio del archivo Minter.js. Las primeras 11 líneas de Minter.js ahora deberían verse así:

Luego, dentro de nuestra función connectWalletPressed, llamaremos a nuestra función importada connectWallet, así:

¿Notaste cómo la mayor parte de nuestra funcionalidad está abstraída de nuestro componente Minter.js hacia el archivo interact.js? ¡Esto es para cumplir con el paradigma M-V-C!

En connectWalletPressed, simplemente hacemos una llamada await a nuestra función importada connectWallet, y usando su respuesta, actualizamos nuestras variables status y walletAddress a través de sus state hooks.

Ahora, guardemos ambos archivos (Minter.js y interact.js) y probemos nuestra UI hasta ahora.

Abre tu navegador en la página http://localhost:3000/, y presiona el botón "Connect Wallet" en la parte superior derecha de la página.

Si tienes Metamask instalado, deberías recibir una solicitud para conectar tu wallet a tu dApp. Acepta la invitación para conectarte.

¡Deberías ver que el botón de wallet ahora refleja que tu dirección está conectada! Yasssss 🔥

Ahora, intenta refrescar la página... esto es extraño. Nuestro botón de wallet nos pide conectar Metamask, aunque ya está conectado...

¡Pero no te preocupes! Podemos solucionar esto fácilmente implementando una función llamada getCurrentWalletConnected, que verificará si una dirección ya está conectada a nuestra dApp y actualizará nuestra UI en consecuencia.

La función getCurrentWalletConnected

En tu archivo interact.js, agrega la siguiente función getCurrentWalletConnected:

Este código es muy similar a la función connectWallet que escribimos anteriormente.

La diferencia principal es que en lugar de llamar al método eth_requestAccounts, que abre Metamask para que el usuario conecte su wallet, aquí llamamos al método eth_accounts, que simplemente devuelve un array que contiene las direcciones de Metamask actualmente conectadas a nuestra dApp.

Para ver esta función en acción, llamémosla en la función useEffect de nuestro componente Minter.js.

Como hicimos con connectWallet, debemos importar esta función desde nuestro archivo interact.js a nuestro archivo Minter.js así:

Ahora, simplemente la llamamos en nuestra función useEffect:

Fíjate que usamos la respuesta de nuestra llamada a getCurrentWalletConnected para actualizar nuestras variables de estado walletAddress y status.

Una vez que hayas agregado este código, intenta refrescar la ventana de tu navegador. El botón debería decir que estás conectado, y mostrar una vista previa de la dirección de tu wallet conectada—¡incluso después de refrescar! 😅

Implementa addWalletListener

El último paso en la configuración de la wallet de nuestra dApp es implementar el wallet listener para que nuestra UI se actualice cuando cambie el estado de nuestra wallet, como cuando el usuario se desconecta o cambia de cuenta.

En tu archivo Minter.js, agrega una función addWalletListener que se vea así:

Vamos a desglosar rápidamente qué está pasando aquí:

Primero, nuestra función verifica si window.ethereum está habilitado (es decir, si Metamask está instalado).

• Si no lo está, simplemente configuramos nuestra variable de estado status como un string JSX que le pide al usuario que instale Metamask.
• Si está habilitado, configuramos el listener window.ethereum.on("accountsChanged") en la línea 3 que escucha cambios de estado en la wallet de Metamask, que incluyen cuando el usuario conecta una cuenta adicional a la dApp, cambia de cuenta, o desconecta una cuenta. Si hay al menos una cuenta conectada, la variable de estado walletAddress se actualiza como la primera cuenta en el array accounts devuelto por el listener. De lo contrario, walletAddress se establece como un string vacío.

Finalmente, debemos llamarla en nuestra función useEffect:

¡Y listo! ¡Hemos terminado de programar toda nuestra funcionalidad de wallet! Ahora que nuestra wallet está configurada, ¡averigüemos cómo mintear nuestro NFT!

Paso 5: fundamentos de los metadatos de NFT

Entonces, ¿recuerdas los metadatos de NFT de los que hablamos en el Paso 0 de este tutorial? Le dan vida a un NFT, permitiendo que tenga propiedades, como un activo digital, nombre, descripción, y otros atributos.

Vamos a necesitar configurar estos metadatos como un objeto JSON y almacenarlos, para poder pasarlos como el parámetro tokenURI al llamar a la función mintNFT de nuestro smart contract.

El texto en los campos "Link to Asset", "Name", "Description" conformará las distintas propiedades de los metadatos de nuestro NFT. Vamos a formatear estos metadatos como un objeto JSON, pero hay un par de opciones sobre dónde podemos almacenar este objeto JSON:

• Podríamos almacenarlo en la blockchain de Ethereum; sin embargo, hacerlo sería SUPER costoso (estamos hablando de cientos de dólares) debido a la naturaleza de Ethereum. ❌
• Podríamos almacenarlo en un servidor centralizado, como AWS o Firebase. Pero eso iría en contra de nuestro espíritu de descentralización. ❌
• Podríamos usar IPFS, un protocolo descentralizado y una red peer-to-peer para almacenar y compartir datos en un sistema de archivos distribuido. Como este protocolo es descentralizado y gratuito, ¡es nuestra mejor opción! ✅

Para almacenar nuestros metadatos en IPFS, vamos a usar Pinata, un conveniente API y toolkit de IPFS. ¡En el siguiente paso, explicaremos exactamente cómo hacer esto!

Paso 6: usa Pinata para hacer pin de tus metadatos en IPFS

Si no tienes una cuenta de Pinata, regístrate para una cuenta gratuita aquí y completa los pasos para verificar tu correo y tu cuenta.

Crea tu API key de Pinata

Navega a la página https://app.pinata.cloud/developers/api-keys, luego selecciona el botón "New Key" en la parte superior, activa el widget Admin como habilitado, y nombra tu key.

Luego se te mostrará un popup con tu información de API. Asegúrate de guardar esto en un lugar seguro.

Ahora que nuestra key está configurada, agreguémosla a nuestro proyecto para poder usarla.

Crea un archivo .env

Podemos almacenar de forma segura nuestra key y secret de Pinata en un archivo de entorno. Instalemos el paquete dotenv en el directorio de nuestro proyecto.

Abre una nueva pestaña en tu terminal (separada de la que está corriendo el local host) y asegúrate de estar en la carpeta minter-starter-files, luego ejecuta el siguiente comando en tu terminal:

A continuación, crea un archivo .env en el directorio raíz de tu minter-starter-files ingresando lo siguiente en tu línea de comandos:

Esto abrirá tu archivo .env en vim (un editor de texto). Para guardarlo, presiona "esc" + ":" + "q" en tu teclado en ese orden.

Luego, en VSCode, navega a tu archivo .env y agrega tu API key y API secret de Pinata así:

Guarda el archivo, ¡y ya estarás listo para empezar a escribir la función para subir tus metadatos JSON a IPFS!

Implementa pinJSONToIPFS

Por suerte para nosotros, Pinata tiene una API específicamente para subir datos JSON a IPFS y un conveniente ejemplo en JavaScript con axios que podemos usar, con algunas modificaciones ligeras.

En tu carpeta utils, creemos otro archivo llamado pinata.js y luego importemos nuestro secret y key de Pinata desde el archivo .env así:

A continuación, pega el código adicional de abajo en tu archivo pinata.js. ¡No te preocupes, vamos a desglosar qué significa todo!

Entonces, ¿qué hace exactamente este código?

Primero, importa axios, un cliente HTTP basado en promesas para el navegador y node.js, que usaremos para hacer una solicitud a Pinata.

Luego tenemos nuestra función asíncrona pinJSONToIPFS, que recibe un JSONBody como entrada y la api key y secret de Pinata en su header, todo para hacer una solicitud POST a su API pinJSONToIPFS.

• Si esta solicitud POST tiene éxito, entonces nuestra función devuelve un objeto JSON con el booleano success en true y el pinataUrl donde se hizo pin de nuestros metadatos. Usaremos este pinataUrl devuelto como el input tokenURI para la función de minteo de nuestro smart contract.
• Si esta solicitud post falla, entonces nuestra función devuelve un objeto JSON con el booleano success en false y un string message que comunica nuestro error.

Al igual que con los tipos de retorno de nuestra función connectWallet, estamos devolviendo objetos JSON para poder usar sus parámetros para actualizar nuestras variables de estado y la UI.

Paso 7: carga tu smart contract

Ahora que tenemos una forma de subir los metadatos de nuestro NFT a IPFS a través de nuestra función pinJSONToIPFS, vamos a necesitar una forma de cargar una instancia de nuestro smart contract para poder llamar a su función mintNFT.

El ABI del contrato

Si examinaste nuestros archivos con cuidado, habrás notado que en nuestro directorio src, hay un archivo contract-abi.json. Un ABI es necesario para especificar qué función va a invocar un contrato, así como para asegurar que la función devolverá los datos en el formato que esperas.

También vamos a necesitar una API key de Alchemy y la API de Alchemy Web3 para conectarnos a la blockchain de Ethereum y cargar nuestro smart contract.

Crea tu API key de Alchemy

Si aún no tienes una cuenta de Alchemy, regístrate gratis aquí.

Una vez que hayas creado una cuenta de Alchemy, puedes generar una API key creando una app. Esto nos permitirá hacer solicitudes a la red de prueba Ropsten.

Navega a la página "Create App" en tu Dashboard de Alchemy pasando el mouse sobre "Apps" en la barra de navegación y haciendo clic en "Create App"

Nombra tu app (nosotros elegimos "My First NFT!"), ofrece una breve descripción, selecciona "Staging" para el Environment (usado para llevar el registro de tu app), y elige "Ropsten" para tu network.

Haz clic en "Create app" ¡y eso es todo! Tu app debería aparecer en la tabla de abajo.

Genial, ahora que hemos creado nuestra URL HTTP de la API de Alchemy, cópiala a tu portapapeles así…

…y luego agreguémosla a nuestro archivo .env. En conjunto, tu archivo .env debería verse así:

Ahora que tenemos el ABI de nuestro contrato y nuestra API key de Alchemy, estamos listos para cargar nuestro smart contract usando Alchemy Web3.

Configura tu endpoint de Alchemy Web3 y tu contrato

Primero, si aún no lo tienes, vas a necesitar instalar Alchemy Web3 navegando al directorio raíz: nft-minter-tutorial en la terminal:

Ahora volvamos a nuestro archivo interact.js. Al inicio del archivo, agrega el siguiente código para importar tu key de Alchemy desde tu archivo .env y configurar tu endpoint de Alchemy Web3:

A continuación, agreguemos el ABI y la dirección de nuestro contrato a nuestro archivo.

Una vez que tengamos ambos, ¡estaremos listos para empezar a programar nuestra función de minteo!

Paso 8: implementa la función mintNFT

Dentro de tu archivo interact.js, definamos nuestra función, mintNFT, que, de forma epónima, minteará nuestro NFT.

Como vamos a hacer numerosas llamadas asíncronas (a Pinata para hacer pin de nuestros metadatos en IPFS, a Alchemy Web3 para cargar nuestro smart contract, y a Metamask para firmar nuestras transacciones), nuestra función también será asíncrona.

Los tres inputs de nuestra función serán el url de nuestro activo digital, name, y description. Agrega la siguiente firma de función debajo de la función connectWallet:

Manejo de errores en el input

Naturalmente, tiene sentido tener algún tipo de manejo de errores de input al inicio de la función, para salir de esta función si nuestros parámetros de input no son correctos. Dentro de nuestra función, agreguemos el siguiente código:

Básicamente, si alguno de los parámetros de input es un string vacío, entonces devolvemos un objeto JSON donde el booleano success es false, y el string status comunica que todos los campos en nuestra UI deben estar completos.

Sube los metadatos a IPFS

Una vez que sabemos que nuestros metadatos están formateados correctamente, el siguiente paso es envolverlos en un objeto JSON y subirlo a IPFS a través de la función pinJSONToIPFS que escribimos.

Para hacer esto, primero necesitamos importar la función pinJSONToIPFS a nuestro archivo interact.js. Al inicio de interact.js, agreguemos:

Recuerda que pinJSONToIPFS recibe un body JSON. Así que antes de hacer una llamada a él, vamos a necesitar formatear nuestros parámetros url, name, y description en un objeto JSON.

Actualicemos nuestro código para crear un objeto JSON llamado metadata y luego hacer una llamada a pinJSONToIPFS con este parámetro metadata:

Fíjate que almacenamos la respuesta de nuestra llamada a pinJSONToIPFS(metadata) en el objeto pinataResponse. Luego, analizamos este objeto en busca de errores.

Si hay un error, devolvemos un objeto JSON donde el booleano success es false y nuestro string status comunica que nuestra llamada falló. De lo contrario, extraemos el pinataURL de pinataResponse y lo almacenamos como nuestro tokenURIvariable.

Ahora es momento de cargar nuestro smart contract usando la API de Alchemy Web3 que inicializamos al inicio de nuestro archivo. Agrega la siguiente línea de código al final de la función mintNFT para configurar el contrato en la variable global window.contract:

Lo último que hay que agregar en nuestra función mintNFT es nuestra transacción de Ethereum:

Si ya estás familiarizado con las transacciones de Ethereum, notarás que la estructura es bastante similar a lo que ya has visto.

Primero, configuramos los parámetros de nuestra transacción.

• to especifica la dirección destinataria (nuestro smart contract)
• from especifica el firmante de la transacción (la dirección del usuario conectada a Metamask: window.ethereum.selectedAddress``\)
• data contiene la llamada al método mintNFT de nuestro smart contract, que recibe nuestro tokenURI y la dirección de wallet del usuario, window.ethereum.selectedAddress, como inputs

Luego, hacemos una llamada await, window.ethereum.request, donde le pedimos a Metamask que firme la transacción. Fíjate que, en esta solicitud, estamos especificando nuestro método eth (eth\_SentTransaction) y pasando nuestro transactionParameters. En este punto, Metamask se abrirá en el navegador, y le pedirá al usuario que firme o rechace la transacción.

• Si la transacción tiene éxito, la función devolverá un objeto JSON donde el booleano success se establece en true y el string status le pide al usuario que revise Etherscan para más información sobre su transacción.
• Si la transacción falla, la función devolverá un objeto JSON donde el booleano success se establece en false, y el string status comunica el mensaje de error.

En conjunto, nuestra función mintNFT debería verse así:

¡Esa es una función gigante! Ahora, solo necesitamos conectar nuestra función mintNFT a nuestro componente Minter.js...

Paso 9: conecta mintNFT a nuestro frontend minter.js

Abre tu archivo Minter.js y actualiza la línea import \{ connectWallet \} from "./utils/interact.js"; al inicio para que sea:

Finalmente, implementa la función onMintPressed para hacer una llamada await a tu función importada mintNFT y actualiza la variable de estado status para reflejar si nuestra transacción tuvo éxito o falló:

Paso 10: despliega tu NFT en un sitio web en vivo

‌¿Listo para llevar tu proyecto a producción para que los usuarios puedan interactuar con él? Revisa este tutorial para desplegar tu Minter en un sitio web en vivo:

Paso 11: toma por asalto el mundo de la blockchain 🚀

JK, ¡llegaste al final del tutorial! Para recapitular, al construir un minter de NFT, aprendiste exitosamente a:

• Conectarte a Metamask desde tu proyecto frontend
• Llamar métodos del smart contract desde tu frontend
• Firmar transacciones usando Metamask

Seguramente te gustaría poder mostrar los NFTs minteados a través de tu dApp en tu wallet — así que no dejes de revisar nuestro tutorial rápido Cómo ver tu NFT en tu wallet!

Y, como siempre, si tienes alguna pregunta, visita el centro de soporte de Alchemy. ¡No podemos esperar a ver cómo aplicas los conceptos de este tutorial en tus futuros proyectos! 🧙‍♂️