Prior to beginning this integration, ensure you have installed and configured our Web SDK. For setup instructions, please refer to the Web SDK - Getting started documentation. Once complete, return here to proceed.

Otherwise, we will walk you through the process of installing Marketplace SDK, instantiating the SDK and providing you some hooks to work with our marketplace

​
Installing Marketplace SDK Packages

Marketplace SDK is modular, allowing you to install only the necessary packages. To get started, install the @0xsequence/marketplace-sdk core package, as well as install other dependencies necessary dependencies.

npm install @0xsequence/kit @0xsequence/kit-checkout @0xsequence/kit-wallet @0xsequence/marketplace-sdk @0xsequence/design-system@^1 @0xsequence/network wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion@^8.5.2 pino-pretty
# or
pnpm add @0xsequence/kit @0xsequence/kit-checkout @0xsequence/kit-wallet @0xsequence/marketplace-sdk @0xsequence/design-system@^1 @0xsequence/network wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion@^8.5.2 pino-pretty
# or
yarn add @0xsequence/kit @0xsequence/kit-checkout @0xsequence/kit-wallet @0xsequence/marketplace-sdk @0xsequence/design-system@^1 @0xsequence/network wagmi ethers@^6 viem 0xsequence @tanstack/react-query @tanstack/react-query-devtools @legendapp/state framer-motion@^8.5.2 pino-pretty

​
Setting Up your Dapp

To utilize the core marketplace-sdk wrapper to interact with your marketplace from your application, follow these steps:

1

Verify If Your Web SDK Is Correctly Integrated

Ensuring that your Web SDK is properly integrated is crucial before getting started with Marketplace SDK. To verify this, simply check if you can log in and log out successfully.

2

Create a Config

Next, a configuration variable for Marketplace SDK will need to be created. In this file, we will define and manage essential configuration settings for our Marketplace SDK, including environment variables. This centralized approach ensures that configuration values are easily accessible and maintainable.

​
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;
}
3

Create an SSR Client

Next, a Ssr Client for Marketplace SDK will need to be created. This SSR Client serves as an entry point for initializing the marketplace SDK on the Next.js server, enabling efficient data fetching and configuration setup before rendering the UI.

​
Understanding the SSR Client

The SSR Client allows you to access key marketplace data and configurations, which are essential for properly initializing the SDK on the server side. The following data can be retrieved:

This setup ensures a seamless integration of the marketplace SDK with server-side rendering, improving performance and user experience.

​
ssrClient.ts

// You can omit this step with VITE
4

Add the Marketplace SDK Providers Alongside Your Web SDK Providers

Open your Providers.tsx file, where the Web SDK is configured, and integrate the Marketplace SDK providers.

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 */
);
5

Done

Congratulations! Now you’re ready to explore the available hooks in our Marketplace SDK. Interested? Check out the Marketplace SDK hooks documentation to learn more.

Was this page helpful?