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.
Gas Sponsoring
y el uso de la Transactions API
, deberá actualizar su plan de proyecto a Developer
siguiendo esta guía
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 pasosAcceder a configuración
Agregar cuenta de servicio
+ Add Service Account
Seleccionar permiso de escritura
Write
y Confirm
mkdir <project>
, luego cd <project>
y cree un proyecto vite
usando React:
/src
Primero, cree un archivo llamado algo como SequenceEmbeddedWallet.ts
con el siguiente código de inicialización:
useSessionHash.ts
que genere un hash de sesión único para el usuario desde el SDK:
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:
main.tsx
:
main.tsx
esté listo, creemos los botones de inicio de sesión, que se verán así:
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:
.env
en la raíz de su proyecto, agréguelo a .gitignore
y actualícelo con los siguientes valores obtenidos desde el Sequence Builder:
VITE_
para ser incluidas en el entorno de una aplicación viteERC1155
en lugar de un ERC721
. Los beneficios de usar un ERC1155
son:
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.
ERC1155
desplegado o simplemente clonar la plantilla específica para esta guía.
MINTER_ROLE
a la dirección de su cuenta relayer.generate
en el Cloudflare worker:
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:
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.gginferenceId
podemos consultar el estado de la inferencia y devolver el resultado cuando esté completo, lo cual se indica con el descriptor de estado succeeded
:
resObject.inference.images[0].url
:
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.
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:
Referrer
en los request.headers
y compararlo con el CLIENT_URL
en el wrangler.toml
:
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:
hasDailyMintAllowance
se divide en 2 funciones:
fullPaginationDay
de transacciones de la address
del usuariomintCount
que corresponde a que el from
sea la dirección 0x
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:
ERC721
y ERC1155
provienen de la dirección 0x
: