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.

Cree un proyecto en Sequence Builder

Antes de comenzar a programar, debe configurar su proyecto:

Vaya a Sequence Builder
Cree un nuevo proyecto
Siga nuestra Guía de White-label Marketplace
Anote su Project ID y API Access Key

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:

# 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

Instale las dependencias requeridas

Instale el Marketplace SDK y sus dependencias peer:

pnpm add @0xsequence/marketplace-sdk @0xsequence/connect wagmi viem @tanstack/react-query

Crear configuración del SDK

Cree un nuevo archivo src/config/sdk.ts para guardar la configuración del SDK:

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

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

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.

Configure los Providers

Cree un nuevo archivo src/providers.tsx para configurar los providers necesarios:

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>
  );
}

Actualice el punto de entrada principal

Actualice su main.tsx para usar el componente Providers:

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>
)

Crear componente de tarjeta de coleccionable

Cree un nuevo componente src/components/CollectibleCard.tsx para mostrar e interactuar con coleccionables:

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>
);
}

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

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.

Actualice el componente App

Actualice su App.tsx para usar los nuevos componentes:

import NFTCard from "./nft-card";

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

Ejecute su aplicación

Inicie su servidor de desarrollo:

pnpm run dev

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

Conectar su wallet usando el botón de conexión
Ver detalles del coleccionable
Hacer ofertas por el coleccionable usando el botón Hacer oferta

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.

​Primeros pasos

​Próximos pasos

Primeros pasos

Próximos pasos