> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sequence.xyz/llms.txt
> Use this file to discover all available pages before exploring further.

# Primeros pasos con Marketplace SDK

> Aprenda cómo integrar Marketplace SDK en su aplicación con orientación sobre la instalación, configuración e implementación de la función de hacer ofertas.

# Primeros pasos

Vamos a crear una aplicación sencilla en React que permita mostrar e interactuar con coleccionables. Configuraremos la conexión de wallet y la funcionalidad básica para ver coleccionables.

<Steps>
  <Step title="Cree un proyecto en Sequence Builder">
    Antes de comenzar a programar, debe configurar su proyecto:

    1. Vaya a [Sequence Builder](https://sequence.build)
    2. Cree un nuevo proyecto
    3. Siga nuestra [Guía de White-label Marketplace](https://docs.sequence.xyz/solutions/payments/marketplace/overview)
    4. Anote su Project ID y API Access Key
  </Step>

  <Step title="Cree un nuevo proyecto React">
    Para esta guía usaremos Vite con React y TypeScript. Puede usar cualquier gestor de paquetes, pero en los ejemplos utilizaremos pnpm:

    ```bash theme={null}
    # Create a new project
    pnpm create vite@latest my-marketplace-app -- --template react-ts

    # Navigate to the project directory
    cd my-marketplace-app

    # Install dependencies
    pnpm install
    ```
  </Step>

  <Step title="Instale las dependencias requeridas">
    Instale el Marketplace SDK y sus dependencias peer:

    ```bash theme={null}
    pnpm add @0xsequence/marketplace-sdk @0xsequence/connect wagmi viem @tanstack/react-query
    ```
  </Step>

  <Step title="Crear configuración del SDK">
    Cree un nuevo archivo `src/config/sdk.ts` para guardar la configuración del SDK:

    ```tsx theme={null}
    import type { SdkConfig } from "@0xsequence/marketplace-sdk";

    export const sdkConfig = {
      projectId: "YOUR_PROJECT_ID",
      projectAccessKey: "YOUR_PROJECT_ACCESS_KEY",
    } satisfies SdkConfig;
    ```

    <Check>
      Asegúrese de reemplazar `YOUR_PROJECT_ID` y `YOUR_PROJECT_ACCESS_KEY` por las credenciales reales de su proyecto. Puede encontrar su Project ID en `https://sequence.build/project/{YOUR_PROJECT_ID}/overview` y su Project Access Key en `https://sequence.build/project/{YOUR_PROJECT_ID}/settings/apikeys` en el panel de [Sequence Builder](https://sequence.build).
    </Check>
  </Step>

  <Step title="Configure los Providers">
    Cree un nuevo archivo `src/providers.tsx` para configurar los providers necesarios:

    ```tsx theme={null}
    import {
      MarketplaceProvider,
      MarketplaceQueryClientProvider,
      ModalProvider,
      createWagmiConfig,
      getQueryClient,
      marketplaceConfigOptions,
    } from "@0xsequence/marketplace-sdk/react";
    import { useQuery } from "@tanstack/react-query";
    import { WagmiProvider } from "wagmi";
    import {
      SequenceConnectProvider,
      type ConnectConfig,
    } from "@0xsequence/connect";
    import { sdkConfig } from "./config/sdk";

    interface ProvidersProps {
      children: React.ReactNode;
    }

    export default function Providers({ children }: ProvidersProps) {
      const queryClient = getQueryClient();
      const { data: marketplaceConfig, isLoading } = useQuery(
        marketplaceConfigOptions(sdkConfig),
        queryClient
      );

      if (isLoading) {
        return <div>Loading configuration...</div>;
      }

      if (!marketplaceConfig) {
        return <div>Failed to load marketplace configuration</div>;
      }

      const connectConfig: ConnectConfig = {
        projectAccessKey: sdkConfig.projectAccessKey,
        signIn: {
          projectName: marketplaceConfig.settings.title,
        },
      };

      const wagmiConfig = createWagmiConfig(marketplaceConfig, sdkConfig);

      return (
        <WagmiProvider config={wagmiConfig}>
          <MarketplaceQueryClientProvider>
            <SequenceConnectProvider config={connectConfig}>
              <MarketplaceProvider config={sdkConfig}>
                {children}
                <ModalProvider />
              </MarketplaceProvider>
            </SequenceConnectProvider>
          </MarketplaceQueryClientProvider>
        </WagmiProvider>
      );
    }
    ```
  </Step>

  <Step title="Actualice el punto de entrada principal">
    Actualice su `main.tsx` para usar el componente Providers:

    ```tsx theme={null}
    import React from 'react'
    import ReactDOM from 'react-dom/client'
    import App from './App'
    import Providers from './providers'
    import './index.css'

    ReactDOM.createRoot(document.getElementById('root')!).render(
      <React.StrictMode>
        <Providers>
          <App />
        </Providers>
      </React.StrictMode>
    )
    ```
  </Step>

  <Step title="Crear componente de tarjeta de coleccionable">
    Cree un nuevo componente `src/components/CollectibleCard.tsx` para mostrar e interactuar con coleccionables:

    ```tsx theme={null}
    import {
    useCollectible,
    useMakeOfferModal,
    useMarketplaceConfig,
    useOpenConnectModal,
    } from "@0xsequence/marketplace-sdk/react";
    import type { Address } from "viem";
    import { useAccount } from "wagmi";

    export default function CollectibleCard() {
    const { data: marketplaceConfig, isLoading: isMarketplaceConfigLoading } = useMarketplaceConfig();
    const { isConnected } = useAccount()
    const { openConnectModal } = useOpenConnectModal()

    const collection = marketplaceConfig?.market.collections[0];
    const chainId = collection?.chainId as number;
    const collectionAddress = collection?.itemsAddress as Address;
    const collectibleId = "0";

    const { data: collectible, isLoading: isCollectibleLoading, error: collectibleError } = useCollectible({
    chainId,
    collectionAddress,
    collectibleId,
    });

    const { show } = useMakeOfferModal();

    if (isMarketplaceConfigLoading || isCollectibleLoading) return <div>Loading...</div>;
    if (collectibleError) return <div>Error: {collectibleError.message}</div>;
    if (!collectible) return <div>No collectible found</div>;

    return (
    <div>
      <img width={200} height={200} src={collectible.image} alt={collectible.name} />
      <h3>{collectible.name}</h3>
      {isConnected ? (
        <button
          onClick={() => {
            show({
              chainId,
              collectionAddress,
              collectibleId,
            });
          }}
        >
          Make Offer
        </button>
      ) : (
        <button onClick={() => openConnectModal()}>Connect Wallet</button>
      )}
    </div>
    );
    }
    ```

    <Note>
      Asegúrese de haber minteado al menos un coleccionable en su colección, luego use el ID de ese coleccionable como `collectibleId`
    </Note>

    <Tip>
      Aunque se recomienda Sequence Connect para la mejor experiencia, puede usar otros proveedores de wallet con el Marketplace SDK. Para conectores de wallet personalizados, consulte nuestra guía sobre [conectores personalizados](/sdk/web/wallet-sdk/embedded/custom-connectors).
    </Tip>
  </Step>

  <Step title="Actualice el componente App">
    Actualice su `App.tsx` para usar los nuevos componentes:

    ```tsx theme={null}
    import NFTCard from "./nft-card";

    export default function App() {
    return (
        <NFTCard />
    );
    }
    ```
  </Step>

  <Step title="Ejecute su aplicación">
    Inicie su servidor de desarrollo:

    ```bash theme={null}
    pnpm run dev
    ```

    Su aplicación de marketplace estará corriendo en `http://localhost:5173`. Ahora puede:

    1. Conectar su wallet usando el botón de conexión
    2. Ver detalles del coleccionable
    3. Hacer ofertas por el coleccionable usando el botón Hacer oferta
  </Step>
</Steps>

## Próximos pasos

Ahora que tiene lo básico funcionando, puede:

* Crear publicaciones de coleccionables
* Gestionar órdenes
* Personalizar la interfaz de usuario
* Consulte nuestras otras guías para más funciones

¿Necesita ayuda? Únase a nuestra [comunidad en Discord](https://discord.com/invite/YnGKP7d3vS).