- Minteo: Minteo de tokens a su wallet desde el Sequence Builder
- Autenticación de Wallet: Uso del Web SDK para autenticar a un usuario
- Consultas a la Blockchain: Consultar balances de tokens usando el Indexer
- Tipos de Wallets Múltiples: Permitir que los usuarios utilicen un Sequence Wallet o un EOA
- Creación de Solicitudes: Crear solicitudes de venta en el Sequence Market Protocol
- Aceptación de Órdenes: Aceptar las mejores órdenes del Marketplace
- (Opcional) Habilitar Wallet Embebido: Agregue una experiencia de usuario aún más fluida con transacciones sin confirmación
Vea un ejemplo de dapp de marketplace simplificado que permite a los usuarios mintear coleccionables, venderlos con el Sequence Marketplace Protocol y realizar compras con USDC en
base-sepolia obteniendo la mejor orden del Marketplace.El código se puede encontrar aquí1. Minteo
El primer paso es crear un coleccionable desde el Sequence Builder y mintear algunos tokens, lo cual puede lograrse con esta guía y usar eltokenId que minteó en los siguientes pasos para consultar y cumplir órdenes.
2. Autenticación de Wallet
Para su proyecto, necesitará una forma de autenticar a su usuario con un wallet. Su opción dentro del stack de Sequence es usar un Embedded Wallet para una experiencia headless y similar a web2, o un Ecosystem Wallet con Web SDK para llegar a más tipos de wallets. Para esta guía usaremos unUniversal Sequence Wallet con conector Web SDK (con opción de un Embedded Wallet), que puede autenticar usuarios usando Google o Apple, además de wallets traídos por el usuario como Coinbase o Metamask.
Instalar Paquetes
Puede crear un proyecto vanilla js/html/css desde un template como este para una configuración rápida, o aquí le mostraremos cómo usar React desde cero. Comience creando un proyecto en una carpeta con el nombre que prefiera:<project_name>
src, junto a index.tsx, cree un archivo config.ts con el siguiente contenido:
config para que sea consumido por el WagmiProvider en el index.tsx
App.tsx para que aparezca el modal del Web SDK
3. Consultas a la Blockchain
Una vez que tenga uno o varios coleccionables minteados, puede consultar los datos desde la dirección del contrato de su despliegue, que puede encontrar aquí:
tokenID para crear una solicitud en el marketplace; para este demo, asumiremos que está trabajando con un solo tokenID.
Respuesta de ejemplo
Respuesta de ejemplo
contractType(string): el tipo de contrato (por ejemplo, ERC20, ERC721 o ERC1155)contractAddress(string): la dirección del contrato del tokenaccountAddress(string): la dirección de la cuenta que desplegó el contratotokenID(string): el tokenID del token (siempre 0 si es ERC20)balance(string): el balance del tokenblockHash(string): el hash de merkle de la transacción del bloque donde se desplegó el tokenblockNumber(number): el número de bloque donde se desplegó el tokenchainId(number): el id de la red del tokencontractTypechainId(number): el id de la red del tokenaddress(string): la dirección del tokenname(string): nombre a nivel de contrato del tokentype(string): el tipo de contrato (por ejemplo, ERC20, ERC721 o ERC1155)symbol(string): el símbolo del tokendecimals(number): la cantidad de decimales que tiene el tokenlogoURI(string): el logo del token mostrado en sequence.appdeployed(boolean): si el token está desplegadobytecodeHash(string): hash del bytecode de un smart contract desplegado en la blockchainextensionslink(string): el sitio web asociado para enlazar al proyectodescription(string): la descripción de metadatos del tokenogImage(string): la imagen de banner del token, mostrada en sequence.apporiginChainId(number): el id de la red de origen que representa el tokenoriginAddress(string): la dirección del contrato de origen que representa el tokenverified(boolean): si el token está verificado y es confiableverifiedBy(string): la fuente de verificación que indica por qué esto no es spam
updatedAt(date): la última vez que se actualizó el indexadortokenMetadatatokenId(string): el tokenID del token (siempre 0 si es ERC20)contractAddress(string): la dirección del contrato del tokenname(string): nombre a nivel de tokendescription(string): la descripción del tokenimage(string): la imagen como url del tokendecimals(string): la cantidad de decimales del tokenproperties(object): un objeto que contiene las propiedades de los metadatos del tokenexternal_url(string): una url externa donde encontrar el token o más detallesupdatedAt(date): la última vez que se actualizaron los metadatos del token
4. Tipos de Multi-wallet
Debido a que en este ejemplo usamosWeb SDK, que le permite usar una Sequence wallet además de su propia EOA wallet, el envío de transacciones a la blockchain será diferente. Con una Sequence wallet puede enviar transacciones en lote para optimizar el costo de gas, mientras que con wagmi usando una EOA solo puede enviar una transacción a la vez.
Para lograr esto, seguimos algunos pasos para crear una variable de estado local que verifica cuál wallet está autorizada.
En el protocolo Sequence Market, cuando crea una listing, se le llama
request, y cuando acepta un request se le llama order.5. Creación de Request
Para este ejemplo, usaremosArbitrum Sepolia USDC del faucet de la comunidad
Vaya allí primero para obtener algunos tokens, así podrá crear una listing con su request.
Luego, para crear un request para el orderbook, primero debemos asegurarnos de habilitar el contrato del orderbook del marketplace con aprobación para transferir sus tokens. Primero, verificamos que el marketplace esté aprobado para el contrato, con algo de lógica.
useSendTransaction usando un mutex para confirmar de qué transacción proviene el hash. Esto se hace en una función useEffect de React.
En programación, una exclusión mutua (mutex) es un objeto de programa que
previene que múltiples hilos accedan al mismo recurso compartido
simultáneamente.
6. Aceptar Orders
Ahora que tenemos un order en el marketplace, debemos hacer algunas cosas:Consultar el Marketplace: consultar el marketplace para obtener unorderIdcorrespondiente a la orden que desea aceptarBalance de Moneda: verificar el balance de la moneda usando el indexadorAprobación de Token: verificar la aprobación del token para que el marketplace pueda transferir tokens
Consultar el Marketplace
Consultemos el orderbook del marketplace para obtener elpricePerToken y el orderId de la orden que queremos aceptar.
Balance de Moneda
Usaremos el indexador para consultar el balance y ver si el usuario tiene suficientes tokens para pagar la orden. Esto se puede hacer con el siguiente código:Aprobación de Token
Luego, verificaremos la aprobación del token para que el Marketplace pueda transferir la moneda.useEffect con la verificación del mutex como antes.
7. (Opcional) Integrar Embedded Wallet en Web SDK
Para que su conector de Web SDK sea compatible con Embedded Wallet, necesitaremos instalar algunas versiones de paquetes y actualizar nuestroconfig.ts que usamos al inicio de la guía.
La función Embedded Wallet permite transacciones sin confirmación, lo que puede crear una experiencia de usuario más fluida.