Skip to main content

​
Getting Started

Let’s create a simple React application that can display and interact with collectibles. We’ll set up wallet connection and basic collectible viewing functionality.
1

Create a Project in Sequence Builder

Before you begin coding, you’ll need to set up your project:
  1. Go to Sequence Builder
  2. Create a new project
  3. Follow our White-label Marketplace Guide
  4. Note down your Project ID and API Access Key
2

Create a New React Project

We’ll use Vite with React and TypeScript for this guide. You can use any package manager, but we’ll use pnpm in our examples:
# 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
3

Install Required Dependencies

Install the Marketplace SDK and its peer dependencies:
pnpm add @0xsequence/marketplace-sdk @0xsequence/connect wagmi viem @tanstack/react-query
4

Create SDK Configuration

Create a new file src/config/sdk.ts to store your SDK configuration:
import type { SdkConfig } from "@0xsequence/marketplace-sdk";

export const sdkConfig = {
  projectId: "YOUR_PROJECT_ID",
  projectAccessKey: "YOUR_PROJECT_ACCESS_KEY",
} satisfies SdkConfig;
Make sure to replace YOUR_PROJECT_ID and YOUR_PROJECT_ACCESS_KEY with your actual project credentials. You can find your Project ID at https://sequence.build/project/{YOUR_PROJECT_ID}/overview and your Project Access Key at https://sequence.build/project/{YOUR_PROJECT_ID}/settings/apikeys in the Sequence Builder dashboard.
5

Set Up Providers

Create a new file src/providers.tsx to configure the necessary providers:
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>
  );
}
6

Update Main Entry Point

Update your main.tsx to use the Providers component:
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>
)
7

Create Collectible Card Component

Create a new component src/components/CollectibleCard.tsx to display and interact with collectibles:
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>
);
}
Make sure you have minted at least one collectible in your collection, then use that collectible’s ID as the collectibleId
While Sequence Connect is recommended for the best experience, you can use other wallet providers with the Marketplace SDK. For custom wallet connectors, see our guide on custom connectors.
8

Update App Component

Update your App.tsx to use the new components:
import NFTCard from "./nft-card";

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

Run Your Application

Start your development server:
pnpm run dev
Your marketplace application will be running at http://localhost:5173. You can now:
  1. Connect your wallet using the connect button
  2. View collectible details
  3. Make offers on the collectible using the Make Offer button

​
Next Steps

Now that you have the basics working, you can:
  • Create collectible listings
  • Manage orders
  • Customize the UI
  • Check out our other guides for more features
Need help? Join our Discord community.