Overview

The Secondary Marketplace SDK is a powerful platform that enables users to purchase Non-Fungible Tokens (NFTs) using cryptocurrency. This SDK offers a range of functionalities to facilitate seamless transactions within the secondary NFT market. This documentation will focus on the key features of the SDK, including the Product Details Page (PDP), making offers, buying now, accepting offers, rejecting offers, listing items, removing listings, editing listings, and canceling offers.

This guide will help you better understand how to use and integrate the Secondary-marketplace SDK into your application.

📘

Note:

For more detailed information, examples and theme customizations, you can refer to the NPM Public repository here.

Prerequisite

Before proceeding with the installation steps, ensure that you have the following prerequisites in place:

1. Node.js and NPM/Yarn: Make sure you have Node.js installed on your machine, and the Node.js version should be 18 or higher. along with either NPM (Node Package Manager) or Yarn. You can download and install Node.js from the official website here.
2. API URL: Determine the appropriate API URL to use based on your environment.
3. NEXT js: We are recommended to use Next.js for this SDK.

Installation and Setup

Step 1: Install the Secondary-marketplace Module

Install the Mojito Secondary-marketplace SDK module on your project by using one of the following methods below:

Install using NPM:

JavaScript

  npm i @mojito-inc/secondary-market

Install using Yarn:

JavaScript

  yarn add @mojito-inc/secondary-market

Step 2: Wrap the Provider and Set API URL, Bearer Token and Theme

In your project's root file, follow these steps to wrap the provider and configure the API URL, Bearer token and Theme:

1. Determine the appropriate API URL based on your environment:

   • For the development environment, set API_URL to https://api-dev.mojito.xyz/query.
   • For the production environment, set API_URL to https://api.mojito.xyz/query.

2. Wrap the provider using the SecondaryMarketProvider component from the Mojito Secondary-marketplace SDK.

   • Import the SecondaryMarketProvider from @mojito-inc/secondary-market in your JavaScript file.
   • Use the SecondaryMarketProvider component and provide the following props:
     • uri: Set this prop to the determined API_URL based on your environment.
     • token: Pass the obtained JWT token or Auth0 token as the value for this prop. Use the format Bearer <Token>.

import { SecondaryMarketProvider } from "@mojito-inc/secondary-market";
import { ThemeProvider } from '@mui/material/styles';

const client = {
  uri: API_URL,
  token: tokenData ? `Bearer ${ tokenData }` : undefined,
}

<ThemeProvider theme={ theme }>
  <SecondaryMarketProvider clientOptions={ client } theme={ theme }>
    { children }
  </SecondaryMarketProvider>
</ThemeProvider>

Step 3: Integrate Product Details Page (PDP)

To use the Product Details Page feature, follow these steps:

Import the necessary modules from the @mojito-inc/secondary-market package:

📘

Note:

To get the wallet details, please refer to our Connect Wallet SDK document. Once the wallet is connected, you will receive the wallet details. Pass the wallet details in the respective module.

import { ProductDetailPage } from "@mojito-inc/secondary-market";

<ProductDetailPage
        config={ configuration }
        Image={ Image }
        walletDetails={ walletDetails }
        onClickDisconnectWallet={ onClickDisconnectWallet }
        onConnectWallet={ onConnectWallet }
        onRefetchBalance={ onRefetchBalance }
        tokenDetails={ tokenDetails } />

Fill in the required parameters for the ProductDetailPage

Fill in the required parameters for the Configuration

Fill in the required parameters for the walletOptions

Fill in the required parameters for the Image

Response

Integrate Listing Item or Remove listing Modal

To use the Listing Item or Remove listing Modal feature, follow these steps:

Import the necessary modules from the @mojito-inc/secondary-market package:

📘

Note:

To get the wallet details, please refer to our Connect Wallet SDK document. Once the wallet is connected, you will receive the wallet details. Pass the wallet details in the respective module.

import { ListItemContainer } from "@mojito-inc/secondary-market";

<ListItemContainer
        open={ open }
        image={ Image }
        config={ configuration }
        tokenDetails={ tokenDetails }
        isRemoveListing={ isRemoveListing }
        walletDetails={ walletDetails }
        onClickViewItem={ onCloseListItemModal }
        onClickBackToMarketPlace={ onCloseListItemModal }
        onCloseModal={ onCloseListItemModal }
        onConnectWallet={ onConnectWallet } />

Fill in the required parameters for the ListItemContainer

Response

Integrate Buy Now Modal

To use the Buy Now Modal feature, follow these steps:

Import the necessary modules from the @mojito-inc/secondary-market package:

📘

Note:

To get the wallet details, please refer to our Connect Wallet SDK document. Once the wallet is connected, you will receive the wallet details. Pass the wallet details in the respective module.

import { BuyNow } from "@mojito-inc/secondary-market";

<BuyNow
        open={ open }
        config={ configuration }
        image={ Image }
        tokenDetails={ tokenDetails }
        walletDetails={ walletDetails }
        onClickViewItem={ onCloseBuyNowModal }
        onClickBackToMarketPlace={ onCloseBuyNowModal }
        onClickConnectWallet={ onConnectWallet }
        onClickDisconnectWallet={ onClickDisconnectWallet }
        onCloseModal={ onCloseBuyNowModal }
        onRefetchBalance={ onRefetchBalance } />

Fill in the required parameters for the BuyNow

Response

Integrate Make Offer Modal

To use the Make Offer Modal feature, follow these steps:

Import the necessary modules from the @mojito-inc/secondary-market package:

📘

Note:

To get the wallet details, please refer to our Connect Wallet SDK document. Once the wallet is connected, you will receive the wallet details. Pass the wallet details in the respective module.

import { MakeOffer } from "@mojito-inc/secondary-market";

<MakeOffer
        open={ open }
        config={ configuration }
        image={ Image }
        tokenDetails={ tokenDetails }
        offerOrderId={ orderId }
        isCancelOffer={ isCancelOffer }
        walletDetails={ walletDetails }
        onClickViewItem={ onCloseMakeOfferModal }
        onClickBackToMarketPlace={ onCloseMakeOfferModal }
        onRefetchBalance={ onRefetchBalance }
        onConnectWallet={ onConnectWallet }
        onCloseModal={ onCloseMakeOfferModal } />

Fill in the required parameters for the MakeOffer

Response

Integrate Accept Offer Modal

To use the Accept Offer Modal feature, follow these steps:

Import the necessary modules from the @mojito-inc/secondary-market package:

📘

Note:

To get the wallet details, please refer to our Connect Wallet SDK document. Once the wallet is connected, you will receive the wallet details. Pass the wallet details in the respective module.

import { AcceptAndRejectOffer } from "@mojito-inc/secondary-market";

<AcceptAndRejectOffer
        open={ open }
        config={ configuration }
        image={ Image }
        tokenDetails={ tokenDetails }
        orderId={ orderId }
        isRejectOffer={ isRejectOffer }
        walletDetails={ walletDetails }
        onClickViewItem={ onCloseOfferModal }
        onClickBackToMarketPlace={ onCloseOfferModal }
        onConnectWallet={ onConnectWallet }
        onCloseModal={ onCloseOfferModal } />

Fill in the required parameters for the AcceptAndRejectOffer

Response

Integrate Account Wallet feature page

To use the Account Wallet feature, follow these steps:

Import the necessary modules from the @mojito-inc/secondary-market package:

📘

Note:

To get the wallet details, please refer to our Connect Wallet SDK document. Once the wallet is connected, you will receive the wallet details. Pass the wallet details in the respective module.

import { WalletsPage } from "@mojito-inc/secondary-market";

enum ListingType {
   SALE = 'sale',
   CLAIMABLE = 'claimable',
}

<WalletsPage
    walletDetails={ walletDetails }
    config={ config }
    Image={ Image }
    tabConfig={ [
    {
      tabLabel: 'Wallet',
      showTab: true,
    }, {
      tabLabel: 'Activity',
      showTab: true,
    }, {
      tabLabel: 'Account',
      showTab: true,
    },
    ] }
    showViewItem
    showInvoice
    showMenu
    hideWalletBalance
    content={{
      noDataContent:''
    }}
    listingType={ ListingType?.CLAIMABLE }
    onClickLogout={ onClickDisconnectWallet }
    onConnectWallet={ onConnectWallet }
    onClickCard={ onClickCard }
    onViewItem={ onClickViewItem } /> 

Fill in the required parameters for the WalletsPage

Response

Wallet tab:

Activity tab:

Account tab:

📘

Note:

For complete documentation of the Secondary-marketplace SDK offerings, see the secondary-marketplace.