Cofres del tesoro con minteo por IA
Aprenda a construir una aplicación web3 usando React con loot generado por IA desde cofres del tesoro. Utilice Embedded Wallet para autenticación, Cloudflare Worker para facilitar transacciones y herramientas de Sequence Stack.
Tiempo para completar: 50-60 minutos
En esta guía, crearemos una aplicación web3 construida en React, aprovechando herramientas de Sequence Stack para mintear loot generado por IA desde cofres del tesoro usando Embedded Wallet para autenticación y Cloudflare Worker para transacciones fáciles y sin confirmación.
Esto está integrado en un juego dungeon crawler para mostrar estas funciones en un entorno de juego donde puede jugar y ganar loot.
El código completo está disponible en los siguientes repositorios:
Estas herramientas le permitirán realizar:
- Registro en Sequence Builder Console y creación de proyecto: Cree un proyecto con el Builder
- Gestión de claves de acceso: Reclame una clave de acceso pública, una clave secreta y una clave de configuración waas para interactuar con Sequence Stack
- Integración de Embedded Wallet: Integre un Embedded Wallet en la aplicación
- Despliegue de contrato y patrocinio de gas: Despliegue un contrato de ítems y patrocine el gas
- Despliegue de un Cloudflare Worker: Despliegue un Cloudflare Worker para transacciones sin gas y sin confirmación
- Generación de prompts e imágenes con IA: Cree prompts de IA a partir de una API y genere imágenes para cargar
- Almacenar medios en el servicio de metadatos de Sequence: Suba metadatos de colección y tokens a Sequence
- Asegure su Cloudflare Worker: Evite solicitudes externas a su Cloudflare Worker restringiendo la URL de referencia
- (Opcional) Restricción de minteo nativo por wallet: Limite el minteo diario por wallet
1. Registro en Sequence Builder Console y creación de proyecto
Primero, siga esta guía para aprender cómo registrarse en el Sequence Builder Console y crear un proyecto.
Para usar ciertas funciones, como Gas Sponsoring
y el uso de la Transactions API
, deberá actualizar su plan de proyecto a Developer
siguiendo esta guía
2. Gestión de claves de acceso
Ahora que tiene un proyecto, necesitará obtener 3 claves de acceso diferentes para su proyecto y así autenticar su aplicación con Sequence Stack:
Waas Config Key
utilizada para Embedded Wallet, puede aprender más aquíPublic Access Key
utilizada para Embedded Wallet y Transactions API, puede obtenerla aquíSecret Access Key
utilizada para el servicio de metadatos, siguiendo estos pasos
Creación de clave de acceso secreta
Acceder a configuración
Primero, acceda a la configuración y seleccione las claves de API
Agregar cuenta de servicio
Desplácese hacia abajo y seleccione + Add Service Account
Seleccionar permiso de escritura
Luego cambie el acceso a Write
y Confirm
Por último, copie la clave y guárdela en un lugar seguro, ya que no podrá acceder a ella nuevamente desde el Builder Console.
3. Integración de Embedded Wallet
Puede ver y clonar el repositorio de la plantilla aquí
Comenzaremos desde cero construyendo el proyecto con los componentes necesarios para habilitar el uso de un Sequence Embedded Wallet, lo que permite que los usuarios se incorporen a su aplicación usando proveedores de autenticación web2.
Primero, cree una carpeta de proyecto con mkdir <project>
, luego cd <project>
y cree un proyecto vite
usando React:
A continuación, instalaremos el paquete correcto de Wallet-as-a-Service (Waas) para usar Embedded Wallet:
Todos los archivos nuevos creados en los siguientes pasos deben crearse en /src
Primero, cree un archivo llamado algo como SequenceEmbeddedWallet.ts
con el siguiente código de inicialización:
Luego cree otro archivo llamado useSessionHash.ts
que genere un hash de sesión único para el usuario desde el SDK:
Por último, para implementar la autenticación de Google, necesitará el GoogleOAuthProvider
para envolver su aplicación. El siguiente comando instalará esto y el inicio de sesión con Apple, que se usará más adelante:
Luego, el código inicial se implementa con los archivos importados previamente, en el siguiente código dentro del archivo main.tsx
:
Una vez que su main.tsx
esté listo, creemos los botones de inicio de sesión, que se verán así:
En App.tsx
use el siguiente código que verifica si un usuario está conectado y muestra una dirección de wallet según el usuario autenticado, con los distintos botones y manejadores de inicio de sesión con redes sociales:
Luego, incluya un archivo .env
en la raíz de su proyecto, agréguelo a .gitignore
y actualícelo con los siguientes valores obtenidos desde el Sequence Builder:
Todas las variables de entorno deben comenzar con VITE_
para ser incluidas en el entorno de una aplicación vite
Ejecute su código con el siguiente comando en la carpeta raíz y pruébelo:
4. Despliegue un contrato y patrocine gas
Vamos a desplegar un contrato de token para poder vincular las imágenes generadas por IA con los metadatos de cualquier token. Al desplegar su contrato, se recomienda usar un ERC1155
en lugar de un ERC721
. Los beneficios de usar un ERC1155
son:
- Semi-fungible: ideal para activos de juegos que pueden tener múltiples copias del mismo objeto.
- Ahorro de gas: para proyectos que requieren varios tokens, ya que un solo ERC1155 puede contener muchas variedades diferentes.
En cuanto al beneficio de ahorro de gas, en vez de desplegar un nuevo contrato para cada tipo de token, un solo contrato ERC1155 puede mantener el estado completo del sistema, reduciendo costos y complejidad en el despliegue.
Para desplegar un contrato, puedes seguir esta guía para desplegar tu ERC1155 y actualizar tu wrangler.toml
con el CONTRACT_ADDRESS
.
Luego, para que la función de minteo funcione de manera programática y las transacciones sean sin gas para su relayer, necesitará que la Transactions API utilice los créditos de su cuenta en su plan de facturación actualizado patrocinando la dirección de su contrato inteligente desplegado.
Para permitir que la Transactions API retransmita transacciones sin comisión, patrocine el gas siguiendo esta guía para el contrato desplegado.
Todos los testnets de Sequence son gratuitos
5. Despliegue la Transactions API en un Cloudflare Worker
Siguiendo el paso anterior, la Transactions API de Sequence puedes implementar en un Cloudflare Worker sin servidor para que la interacción del usuario en el juego o la app sea fluida, sin que sea necesario firmar una confirmación ni pagar gas. En este caso, el Worker aprovechará la Transactions API de Sequence para mintear tokens a la dirección del usuario. Además, te beneficias de no tener que preocuparte por la velocidad de las transacciones, el rendimiento o los reorgs, y disfrutas de escalabilidad automática con Cloudflare.
Minteo de un token
Si deseas aprender cómo desplegar un Cloudflare Worker desde cero, puedes seguir esta guía sobre cómo crear un servicio de minteo de NFT sin servidor con tu contrato ERC1155
desplegado o simplemente clonar la plantilla específica para esta guía.
Asegúrese de que, si está usando un Sequence Standard ERC1155 Items Contract, otorgue el MINTER_ROLE
a la dirección de su cuenta relayer.
Una vez configurado, llamaremos al endpoint de la instancia de Cloudflare Worker para mintear nuestros NFTs en un paso posterior.
6. Generación de prompts e imágenes con IA
Al comenzar su experiencia en la generación de imágenes con IA, necesitará una fuente de prompts de modelos de IA para producir contenido. Para esta guía y demo, hemos obtenido prompts de los objetos incluidos en el juego Diablo.
En la plantilla, hemos incluido código para llamar a una API ya desplegada y código para analizar la respuesta.
Con esta API, mostraremos cómo generar imágenes usando el prompt de la API de Diablo desplegada dentro de la función generate
en el Cloudflare worker:
Luego complete la función getInferenceWithItem
para obtener la referencia de inferencia instanciada desde la Scenario API y pasarle un prompt
que es el nombre y tipo del loot generado, así como algunos parámetros adicionales del modelo, los cuales pueden personalizarse según la documentación de la Scenario API:
Para esta guía, elegimos el tipo de scheduler EulerDiscreteScheduler
de la Scenario API por su calidad y tiempo, pero si desea experimentar con otros schedulers, puede usar este CLI local personalizado y revisar los resultados en el dashboard de Scenario.gg
Luego simplemente implementamos las funciones anteriores en el código de react:
Una vez que tengamos el inferenceId
podemos consultar el estado de la inferencia y devolver el resultado cuando esté completo, lo cual se indica con el descriptor de estado succeeded
:
Nuevamente, agregamos la función anterior al código de React y pasamos el inferenceId. Cuando recibas la respuesta, puedes obtener la url de la imagen con resObject.inference.images[0].url
:
Cabe señalar que puede diseñar aplicaciones que devuelvan varias imágenes por prompt y permitir que el usuario, desde la interfaz de usuario, elija la generación correcta.
7. Almacenar medios en Sequence Metadata Service
Con la url
del medio obtenida de la Scenario API, podemos pasar a almacenar el recurso en el Sequence Metadata Service
. Esto le permite vincular la imagen generada por IA con los metadatos específicos del token, todo a través de llamadas REST-API.
Cada recompensa de cofre del Dungeon Minter sigue el mismo proceso, donde primero se almacenan los metadatos usando la Sequence Metadata API, y se devuelve al cliente la url
y el tokenID
generado aleatoriamente (lo que permite solicitudes en paralelo). Luego, el usuario da su consentimiento, tras inspeccionar el coleccionable, para mintear el token, donde el tokenID
y la address
del usuario se envían de vuelta al worker creado en el Paso 5.
Implementación
Complete e integre esta guía para construir su servicio de medios sin servidor aprovechando la Sequence Metadata API que utiliza Cloudflare workers, o simplemente clone nuestra plantilla de cloudflare para esta guía.
Una vez terminado, pase el tokenID
y la url
del medio almacenado al frontend para que se muestre y el usuario pueda mintear después de ver qué va a mintear:
8. Minteo con su Cloudflare Worker
El último paso es finalmente mintear el tokenId correspondiente que vinculó previamente a los metadatos, a la dirección del usuario. Aquí enviamos una solicitud al Cloudflare Worker que creamos en el Paso 5, el cual minteará el token al usuario.
Un punto importante es que probablemente querrá asegurarse de que sus Cloudflare workers solo procesen solicitudes desde un origen frontend específico; simplemente puede verificar el valor Referrer
en los request.headers
y compararlo con el CLIENT_URL
en el wrangler.toml
:
Conclusión
Recapitulemos lo que hicimos durante este tutorial:
Vimos cómo crear un proyecto Sequence y obtener acceso a nuestra suite de APIs. Desplegamos y configuramos un wallet embebido para asegurar una experiencia de juego fluida en un ejemplo de dungeon crawler. Además, utilizamos la plataforma Sequence para desplegar un contrato y patrocinar gas para ese contrato, simplificando la experiencia del usuario. También desplegamos un minteador de NFT sin servidor usando la Sequence Transaction API, lo que permite que su juego escale a millones de jugadores y maneje interacciones blockchain complejas como reorgs. Asimismo, aprovechamos la API de scenario.gg para crear dinámicamente activos de juego como recompensas para los jugadores. Estas imágenes luego se vinculan a los metadatos de un NFT usando la Sequence Metadata API. Ahora debería entender cómo mintear arte de IA para su juego impulsado por Scenario.gg y Sequence.
Está claro cuántos componentes intervienen en la creación de un juego blockchain escalable, seguro y divertido, pero la plataforma Sequence junto con Scenario le brinda todo lo que necesita.
Por último, puede ver todos los pasos anteriores integrados en una experiencia completa con nuestro juego dungeon crawler para explorar el laberinto y obtener su propio botín.
¡Feliz construcción!
9. (Opcional) Restricción de minteo nativo por wallet
Como opción para evitar el uso excesivo del minteo de cofres desde wallets específicas, se puede establecer un parámetro llamado DAILY_MINT_RESTRICTION
en el wrangler.toml
como un máximo de minteos permitidos por día. Y, si lo considera necesario, puede agregar un ADMIN
a su protocolo para poder mintear una cantidad infinita.
Estas funciones pueden implementarse en el código con los siguientes pasos:
Donde hasDailyMintAllowance
se divide en 2 funciones:
fullPaginationDay
de transacciones de laaddress
del usuariomintCount
que corresponde a que elfrom
sea la dirección0x
Paginación completa del Indexer por un día
Como nota adicional, la pila de Sequence Indexer solo almacena 30 días de transacciones en este periodo, así que puede ampliar el rango de tiempo desde un día hasta este máximo.
Para usar el Sequence Indexer, necesitaremos ejecutar pnpm install @0xsequence/indexer
Luego, para implementarlo, usamos un bucle while que obtiene el primer lote de transacciones y el valor de page.after
del indexer, y verifica continuamente si la marca de tiempo es menor a 24 horas, agregando a un arreglo temporal en cada pasada. Esto asegura que obtengamos todas las transacciones disponibles:
Conteo de minteos en un día
Todos los coleccionables minteados desde los contratos estándar Sequence ERC721
y ERC1155
provienen de la dirección 0x
: