- 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 Sequence Builder y mintear algunos tokens, lo cual puede lograrse con esta guía. Luego, utilice eltokenId
que minteó en los siguientes pasos para consultar y completar ó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 unEmbedded 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:npm
<project_name>
pnpm
Cree una configuración
config.ts
Asegúrese de agregar todos los chainIds que va a utilizar
Cree un layout en el main.tsx
main.tsx
Componente de Autenticación
Para completar la autenticación, necesitará el componente de autenticaciónApp.tsx
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 SDKAgregue las importaciones CSS requeridas a su archivo principal de estilos
index.css
Configure el plugin de Tailwind CSS en vite.config.ts
vite.config.ts
Necesitamos agregar la configuración del Marketplace SDK
config.ts
Agregue los proveedores de Marketplace SDK junto con los proveedores de su Web SDK
main.tsx
4. Visualización de colecciones
Para mostrar las colecciones del marketplace, necesitamos crear una carpeta llamadaCollections
dentro del directorio src/components
. Dentro de esta carpeta, crearemos dos archivos: index.tsx
y Collection.tsx
.
Collection.tsx
index.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 desrc/utils
. Usaremos esto para tipar nuestras funciones y mantener el código consistente y fácil de mantener.
types.ts
Configure los componentes de coleccionables
Para crear la página de ítems y sus componentes, debemos agregar una nueva carpeta llamada Collectibles dentro del directoriosrc/components
. Dentro de esta carpeta, crearemos dos archivos: index.tsx
y Collectible.tsx
.
Collectible.tsx
index.tsx
App.tsx
App.tsx