Asegurarse de que su Web SDK esté correctamente integrado es fundamental antes de comenzar con Marketplace SDK. Para verificarlo, simplemente compruebe si puede iniciar y cerrar sesión correctamente.

A continuación, deberá crear una variable de configuración para Marketplace SDK. En este archivo, definiremos y gestionaremos los ajustes esenciales de configuración para nuestro Marketplace SDK, incluidas las variables de entorno. Este enfoque centralizado garantiza que los valores de configuración sean fácilmente accesibles y mantenibles.

​

config.ts

import type { SdkConfig } from '@0xsequence/marketplace-sdk';

const projectAccessKey = import.meta.env.VITE_PROJECT_ACCESS_KEY;
const projectId = import.meta.env.VITE_PROJECT_ID!;
const waasConfigKey = import.meta.env.VITE_WAAS_CONFIG_KEY;
const googleClientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
const appleClientId = import.meta.env.VITE_APPLE_CLIENT_ID;
const appleRedirectURI = window.location.origin + window.location.pathname;
const walletConnectId = import.meta.env.VITE_WALLET_CONNECT_ID;

export function getConfig() {
  const embedded = waasConfigKey
    ? ({
        waasConfigKey,
        googleClientId,
        appleClientId,
        appleRedirectURI,
      } satisfies NonNullable<SdkConfig["wallet"]>["embedded"])
    : undefined;

  const config = {
    projectId,
    projectAccessKey,
    wallet: {
      walletConnectProjectId: walletConnectId,
      embedded,
    },
  } satisfies SdkConfig;

  return config;
}

A continuación, deberá crear un SSR Client para Marketplace SDK. Este SSR Client sirve como punto de entrada para inicializar el marketplace SDK en el servidor de Next.js, permitiendo una obtención eficiente de datos y configuración antes de renderizar la interfaz de usuario.

​

Entendiendo el SSR Client

El SSR Client le permite acceder a datos clave y configuraciones del marketplace, esenciales para inicializar correctamente el SDK del lado del servidor. Se puede obtener la siguiente información:

Esta configuración asegura una integración fluida del marketplace SDK con el renderizado del lado del servidor, mejorando el rendimiento y la experiencia del usuario.

​

ssrClient.ts

// You can omit this step with VITE

Abra su archivo Providers.tsx, donde está configurado el Web SDK, e integre los proveedores de Marketplace SDK.

import {
  MarketplaceProvider,
  ModalProvider,
} from "@0xsequence/marketplace-sdk/react";
import { getConfig } from "./config";

const sdkConfig = getConfig();

// Into your React component:

return (
  /* Your other providers should be placed here (they should wrap MarketplaceProvider) */
  
  <MarketplaceProvider config={sdkConfig}>
    {children}
    <ModalProvider />
  </MarketplaceProvider>

  /* Your other providers should close here */
);

¡Felicidades! Ahora está listo para explorar los hooks disponibles en nuestro Marketplace SDK. Consulte la documentación de hooks de Marketplace SDK para obtener más información.