Build Marketplace

Provides developers with the technical implementation details for building a complete NFT marketplace using the Rarible API and Camp Network blockchain integration.

API Setup & Configuration

const BASE_URL = "https://bff.rarible.fun/api";
const API_BASE_URL = "https://api.rarible.org/v0.1";
const API_KEY = "your-api-key";
const BLOCKCHAIN = "BASECAMPTESTNET";

const getCommonHeaders = () => ({
  accept: "*/*",
  "accept-language": "en-US,en;q=0.9",
  "cache-control": "no-cache",
  origin: "https://your-app.com",
  referer: "https://your-app.com/",
  "user-agent": "Mozilla/5.0...",
});

Fetch NFT Collection

You can revice data of dayVolum,totalVolum,topOffer,....

export const getCollectionStatistics = async (contractAddress: string): Promise<CollectionStats> => {
  const url = `${BASE_URL}/collections/${BLOCKCHAIN}:${contractAddress}/statistic`;
  try {
    const response = await fetch(url, {
      headers: getCommonHeaders(),
    });
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error fetching collection statistics:", error);
    throw error;
  }
};

Search NFTs in Collection

You can revice data of detail of NFTItem...

export const searchNFTs = async (params: {
}) => {
  const url = `${BASE_URL}/nfts/search`;
  try {
    const response = await fetch(url, {
      method: "POST",
      headers: {
        ...getCommonHeaders(),
        "content-type": "application/json",
      },
      body: JSON.stringify({
        sort: params.sort || "LOW_PRICE_FIRST",
        filters: {
          status: params.status || "all",
          collection: `${BLOCKCHAIN}:${params.contractAddress}`,
          blockchains: [BLOCKCHAIN],
        },
        continuation: params.continuation,
        size: params.size || 20,
      }),
    });
    
    const data = await response.json();
    return data; // { nfts: NFTItem[], continuation?: string, totalNftsCount: number }
  } catch (error) {
    console.error("Error searching NFTs:", error);
    throw error;
  }
};

Get Individual NFT Details

// Get detailed information for a specific NFT
export const getItemDetails = async (itemId: string) => {
  const encodedId = encodeURIComponent(itemId);
  const url = `${API_BASE_URL}/items/${encodedId}`;
  
  try {
    const response = await fetch(url, {
      headers: {
        ...getCommonHeaders(),
        "x-api-key": API_KEY,
      },
    });
    
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Error fetching item details:", error);
    throw error;
  }
};

Handle List, Buy, UnList NFT

Rarible SDK doesn't officially support Camp Network blockchain operations. The following functions are custom implementations that handle direct blockchain transactions.Uses custom buyNFT(),ListNFT(),unListNFT()function for Camp Network compatibility.

Reference Implementation: Complete code available at: https://github.com/tranchungs/Pixel_CampNetwork/blob/main/src/components/MarketplaceSection.tsx