Cree un Marketplace Personalizado
Esta guía le guía paso a paso para crear un marketplace personalizado utilizando el stack de Sequence. Cubre el minteo de tokens, la autenticación de wallet, la visualización de colecciones, la creación y compra de listados, la realización y aceptación de ofertas, y la gestión de inventario, todo integrado de forma fluida con un wallet embebido y el Web SDK.
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:
- Minteo: Minteo de tokens a su wallet desde el Sequence Builder
- Autenticación de Wallet: Uso del Web SDK para autenticar a un usuario
- Configuración del Marketplace SDK: Guía básica para configurar el Marketplace SDK
- Visualización de colecciones: Obtener y mostrar las colecciones disponibles en el marketplace.
- Publicaciones y Ofertas: Permita que los usuarios publiquen tokens en venta o realicen ofertas
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.
Para esta guía usaremos un Embedded Wallet
con conector Web SDK
, que puede autenticar usuarios usando inicio de sesión con redes sociales de Google o Apple, además de wallets traídas por el usuario como Coinbase o Metamask.
Instalar Paquetes
Puede comenzar con una excelente base usando nuestro Marketplace Boilerplate, que ya incluye todo esto integrado con una gran interfaz, 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>
Cree una configuración
Asegúrese de agregar todos los chainIds que va a utilizar
Cree un layout en el main.tsx
Componente de Autenticación
Para completar la autenticación, necesitará el componente de autenticación
3. Configuración del Marketplace SDK
Marketplace SDK es un conjunto de herramientas completo que integra fácilmente nuestros Marketplaces en aplicaciones. Más información sobre Marketplace SDK
Agregue las importaciones CSS requeridas a su archivo principal de estilos
Configure el plugin de Tailwind CSS en vite.config.ts
Cree una configuración
Agregue los proveedores de Marketplace SDK junto con los proveedores de su Web SDK
4. Visualización de colecciones
Para mostrar las colecciones del marketplace, necesitamos crear una carpeta llamada Collections
dentro del directorio src/app/components
. Dentro de esta carpeta, crearemos dos archivos: index.tsx
y Collection.tsx
.
Para finalizar, agregaremos el componente Collections en el App.tsx
5. Listados y Ofertas
Esta sección es para integrar las publicaciones y ofertas de nuestro marketplace en la interfaz de usuario.
Cree un archivo de tipos
Antes de comenzar esto, necesitamos un archivo con algunos tipos para nuestros componentes dentro de src/utils
. Usaremos esto para tipar nuestras funciones y mantener el código consistente y fácil de mantener.
Configure los componentes de coleccionables
Para crear la página de Items y sus componentes, necesitamos agregar una nueva carpeta llamada Collectibles dentro del directorio src/app/components. Dentro de esta carpeta, crearemos dos archivos: index.tsx
y Collectible.tsx
.
Finalmente, agregue el componente de Publicaciones y Ofertas en nuestro archivo App.tsx
Ejecute y pruebe
Ha agregado exitosamente los artículos a su nueva página y ahora deberían ser visibles en la interfaz. Para verlos en acción, ejecute pnpm dev. Desde la página principal, seleccione cualquiera de sus colecciones para ver los NFTs que contiene. Asegúrese de que todo funcione correctamente probando los flujos clave como publicar, comprar, hacer ofertas y aceptar ofertas en un NFT.