Skip to main content
En esta guía repasaremos el proceso de crear un marketplace personalizado usando algunas herramientas simples del stack de Sequence. Estas herramientas le permitirán realizar:
  1. Minteo: Minteo de tokens a su wallet desde el Sequence Builder
  2. Autenticación de Wallet: Uso del Web SDK para autenticar a un usuario
  3. Consultas a la Blockchain: Consultar balances de tokens usando el Indexer
  4. Tipos de Wallets Múltiples: Permitir que los usuarios utilicen un Sequence Wallet o un EOA
  5. Creación de Solicitudes: Crear solicitudes de venta en el Sequence Market Protocol
  6. Aceptación de Órdenes: Aceptar las mejores órdenes del Marketplace
  7. (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 el tokenId 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 un Universal 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:
Luego, instale los paquetes requeridos en la carpeta <project_name>
Después, en src, junto a index.tsx, cree un archivo config.ts con el siguiente contenido:
Asegúrese de incluir un archivo .env en la raíz de su proyecto para agregar los secretos de cliente
Luego, importe el config para que sea consumido por el WagmiProvider en el index.tsx
Y finalmente, agregue un botón en el App.tsx para que aparezca el modal del Web SDK
¡Listo! Ahora debería tener una aplicación que puede autorizar a un usuario y devolver una dirección de wallet. Ahora puede probarlo con:

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í:
copiar dirección del contrato
Puede consultar datos usando el indexer, con este código donde una dirección de cuenta y la dirección del contrato (obtenidas del contrato desplegado desde el Sequence Builder) se ingresan en la API del indexer. Esto será importante cuando esté determinando un tokenID para crear una solicitud en el marketplace; para este demo, asumiremos que está trabajando con un solo tokenID.
Donde la respuesta de la llamada al indexador arroja los siguientes datos:
  • contractType (string): el tipo de contrato (por ejemplo, ERC20, ERC721 o ERC1155)
  • contractAddress (string): la dirección del contrato del token
  • accountAddress (string): la dirección de la cuenta que desplegó el contrato
  • tokenID (string): el tokenID del token (siempre 0 si es ERC20)
  • balance (string): el balance del token
  • blockHash (string): el hash de merkle de la transacción del bloque donde se desplegó el token
  • blockNumber (number): el número de bloque donde se desplegó el token
  • chainId (number): el id de la red del token
  • contractType
    • chainId (number): el id de la red del token
    • address (string): la dirección del token
    • name (string): nombre a nivel de contrato del token
    • type (string): el tipo de contrato (por ejemplo, ERC20, ERC721 o ERC1155)
    • symbol (string): el símbolo del token
    • decimals (number): la cantidad de decimales que tiene el token
    • logoURI (string): el logo del token mostrado en sequence.app
    • deployed (boolean): si el token está desplegado
    • bytecodeHash (string): hash del bytecode de un smart contract desplegado en la blockchain
    • extensions
      • link (string): el sitio web asociado para enlazar al proyecto
      • description (string): la descripción de metadatos del token
      • ogImage (string): la imagen de banner del token, mostrada en sequence.app
      • originChainId (number): el id de la red de origen que representa el token
      • originAddress (string): la dirección del contrato de origen que representa el token
      • verified (boolean): si el token está verificado y es confiable
      • verifiedBy (string): la fuente de verificación que indica por qué esto no es spam
  • updatedAt (date): la última vez que se actualizó el indexador
  • tokenMetadata
    • tokenId (string): el tokenID del token (siempre 0 si es ERC20)
    • contractAddress (string): la dirección del contrato del token
    • name (string): nombre a nivel de token
    • description (string): la descripción del token
    • image (string): la imagen como url del token
    • decimals (string): la cantidad de decimales del token
    • properties (object): un objeto que contiene las propiedades de los metadatos del token
    • external_url (string): una url externa donde encontrar el token o más detalles
    • updatedAt (date): la última vez que se actualizaron los metadatos del token

4. Tipos de Multi-wallet

Debido a que en este ejemplo usamos Web 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, usaremos Arbitrum 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.
Después, necesitaremos armar la transacción con el ABI correcto para generar el calldata esperado según los distintos caminos: no estar aprobado versus estar aprobado, y si es una Sequence wallet o no.
Finalmente, en el caso donde la transacción no se realiza desde una Sequence wallet y no está aprobada, debemos enviar una transacción una vez que haya un recibo de transacción del hook 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.
¡Listo! Ya terminó de crear requests para el protocolo Sequence Market, ahora puede implementar un botón y probar el flujo.

6. Aceptar Orders

Ahora que tenemos un order en el marketplace, debemos hacer algunas cosas:
  • Consultar el Marketplace: consultar el marketplace para obtener un orderId correspondiente a la orden que desea aceptar
  • Balance de Moneda: verificar el balance de la moneda usando el indexador
  • Aprobació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 el pricePerToken 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:
Debe asegurarse de que al realizar una comparación de igualdad en la dirección del contrato del token, la dirección esté en minúsculas.

Aprobación de Token

Luego, verificaremos la aprobación del token para que el Marketplace pueda transferir la moneda.
Finalmente, completaremos la lógica necesaria enviando realmente una transacción a la blockchain. Comenzamos con el mismo flujo de antes, considerando el envío de transacciones en lote si es una Sequence wallet y no está aprobada, o, si el Marketplace ya está aprobado para gastar sus tokens, solo enviando una transacción.
Luego, en el flujo donde no es una Sequence wallet y requiere aprobación, incluiremos otro useEffect con la verificación del mutex como antes.
¡Perfecto! Todo está listo si agrega el manejador de clic de la función a un botón.

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 nuestro config.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.
El último paso es asegurarse de actualizar a nuestro equipo con las URLs autorizadas de Google y Apple (por ejemplo, http://localhost:3000) para poder llamar al flujo de inicio de sesión de Embedded Wallet.