Secondary Marketplace Kit

⚙️ How to Install and Setup the Mojito Secondary-marketplace SDK module.

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:

npm install @mojito-inc/secondary-market

Install using Yarn:

yarn add @mojito-inc/secondary-market

Install via package.json:

"@mojito-inc/secondary-market": "1.0.3-beta.15"

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.

Basic setup example:

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

const client = {
  uri: "API_URL",
  token: tokenData ? "Bearer " + tokenData : undefined
};

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:

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

Component configuration:

const pdpConfig = {
  config: configuration,
  Image: ImageConfig,
  walletDetails: walletDetails,
  onClickDisconnectWallet: handleDisconnectWallet,
  onConnectWallet: handleConnectWallet,
  onRefetchBalance: handleRefetchBalance,
  tokenDetails: tokenDetails
};

Fill in the required parameters for the ProductDetailPage

ParameterTypeRequiredDescription
configurationObjectConfiguration
ImageObjectImage
walletDetailsObjectWalletDetails
tokenDetailsObjectTokenDetails
onClickDisconnectWalletfunctionfunction to handle disconnect wallet
onConnectWalletfunctionfunction to handle connect wallet
onRefetchBalancefunctionfunction to handle refetch balance

Fill in the required parameters for the Configuration

ParameterTypeRequiredDescription
orgIdstringorganisation id
infuraIdstringinfura id to connect wallet
paperClientIdstringpaper client id to connect with email
walletOptionsObjectwalletOptions

Fill in the required parameters for the walletOptions

ParameterTypeRequiredDescription
enableMetamaskbooleanto enable or disable metamask
enableWalletConnectbooleanto enable or disable wallet connect
enableEmailbooleanto enable or disable email connect

Fill in the required parameters for the Image

ParameterTypeRequiredDescription
ethIconstringeth icon in svg, png, jpeg or gif format
metamaskstringmetamask icon in svg, png, jpeg or gif format
walletConnectstringwallet connect icon in svg, png, jpeg or gif format
logostringlogo icon in svg, png, jpeg or gif format
loaderstringloader icon in svg, png, jpeg or gif format

Response

Product Details Page

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:

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

Component configuration:

const listItemConfig = {
  open: open,
  image: ImageConfig,
  config: configuration,
  tokenDetails: tokenDetails,
  isRemoveListing: isRemoveListing,
  walletDetails: walletDetails,
  onClickViewItem: handleCloseListItemModal,
  onClickBackToMarketPlace: handleCloseListItemModal,
  onCloseModal: handleCloseListItemModal,
  onConnectWallet: handleConnectWallet
};

Fill in the required parameters for the ListItemContainer

ParameterTypeRequiredDescription
openbooleanto open modal
configurationObjectConfiguration
ImageObjectImage
walletDetailsObjectWalletDetails
tokenDetailsObjectTokenDetails
isRemoveListingbooleanshould be true to render remove listing modal
onClickBackToMarketPlacefunctionfunction to handle custom redirection
onClickViewItemfunctionfunction to handle custom redirection
onConnectWalletfunctionfunction to handle connect wallet
onCloseModalfunctionfunction to handle close modal

Response

List Item Modal

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:

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

Component configuration:

const buyNowConfig = {
  open: open,
  config: configuration,
  image: ImageConfig,
  tokenDetails: tokenDetails,
  walletDetails: walletDetails,
  onClickViewItem: handleCloseBuyNowModal,
  onClickBackToMarketPlace: handleCloseBuyNowModal,
  onClickConnectWallet: handleConnectWallet,
  onClickDisconnectWallet: handleClickDisconnectWallet,
  onCloseModal: handleCloseBuyNowModal,
  onRefetchBalance: handleRefetchBalance
};

Fill in the required parameters for the BuyNow

ParameterTypeRequiredDescription
openbooleanto open modal
configurationObjectConfiguration
ImageObjectImage
walletDetailsObjectWalletDetails
tokenDetailsObjectTokenDetails
onRefetchBalancefunctionfunction to handle refetch balance logic
onClickBackToMarketPlacefunctionfunction to handle custom redirection
onClickViewItemfunctionfunction to handle custom redirection
onConnectWalletfunctionfunction to handle connect wallet
onClickDisconnectWalletfunctionfunction to handle disconnect wallet
onCloseModalfunctionfunction to handle close modal

Response

Buy Now Modal

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:

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

Component configuration:

const makeOfferConfig = {
  open: open,
  config: configuration,
  image: ImageConfig,
  tokenDetails: tokenDetails,
  offerOrderId: orderId,
  isCancelOffer: isCancelOffer,
  walletDetails: walletDetails,
  onClickViewItem: handleCloseMakeOfferModal,
  onClickBackToMarketPlace: handleCloseMakeOfferModal,
  onRefetchBalance: handleRefetchBalance,
  onConnectWallet: handleConnectWallet,
  onCloseModal: handleCloseMakeOfferModal
};

Fill in the required parameters for the MakeOffer

ParameterTypeRequiredDescription
openbooleanto open modal
configurationObjectConfiguration
ImageObjectImage
walletDetailsObjectWalletDetails
tokenDetailsObjectTokenDetails
isCancelOfferbooleanshould be true to render cancel offer modal
orderIdstringRequired for cancel offer
onRefetchBalancefunctionfunction to handle refetch balance logic
onClickBackToMarketPlacefunctionfunction to handle custom redirection
onClickViewItemfunctionfunction to handle custom redirection
onConnectWalletfunctionfunction to handle connect wallet
onCloseModalfunctionfunction to handle close modal

Response

Make Offer Modal

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:

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

Component configuration:

const acceptOfferConfig = {
  open: open,
  config: configuration,
  image: ImageConfig,
  tokenDetails: tokenDetails,
  orderId: orderId,
  isRejectOffer: isRejectOffer,
  walletDetails: walletDetails,
  onClickViewItem: handleCloseOfferModal,
  onClickBackToMarketPlace: handleCloseOfferModal,
  onConnectWallet: handleConnectWallet,
  onCloseModal: handleCloseOfferModal
};

Fill in the required parameters for the AcceptAndRejectOffer

ParameterTypeRequiredDescription
openbooleanto open modal
configurationObjectConfiguration
ImageObjectImage
walletDetailsObjectWalletDetails
tokenDetailsObjectTokenDetails
isRejectOfferbooleanshould be true to render reject offer modal
orderIdstringshould pass order id to which order going to accept or reject
onClickBackToMarketPlacefunctionfunction to handle custom redirection
onClickViewItemfunctionfunction to handle custom redirection
onConnectWalletfunctionfunction to handle connect wallet
onCloseModalfunctionfunction to handle close modal

Response

Accept Offer Modal

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";

const ListingType = {
  SALE: 'sale',
  CLAIMABLE: 'claimable'
};

Component configuration:

const walletsPageConfig = {
  walletDetails: walletDetails,
  config: config,
  Image: ImageConfig,
  tabConfig: [
    {
      tabLabel: 'Wallet',
      showTab: true,
    }, {
      tabLabel: 'Activity',
      showTab: true,
    }, {
      tabLabel: 'Account',
      showTab: true,
    }
  ],
  showViewItem: true,
  showInvoice: true,
  showMenu: true,
  hideWalletBalance: false,
  content: {
    noDataContent: ''
  },
  listingType: ListingType.CLAIMABLE,
  onClickLogout: handleClickDisconnectWallet,
  onConnectWallet: handleConnectWallet,
  onClickCard: handleClickCard,
  onViewItem: handleClickViewItem
};

Fill in the required parameters for the WalletsPage

ParameterTypeRequiredDescription
walletDetailsObjectWalletDetails
configObjectConfiguration
ImageObjectImage
showViewItembooleanto show show View Item button in Activity tab
showInvoicebooleanto show invoice download option in Activity tab
hideWalletBalancebooleanTo hide balance details in Account tab
showMenubooleanif true we can see menu in wallet tab else it will not show
showFilterbooleanIf false it will hide the search and sort UI
listingTypeenumfor sale listing user can give ListingType.SALE and for claimable listing user can give ListingType.CLAIMABLE
contentObjectto customize the text.
tabConfigObjectTo customize the tab name and the tabs, by default all the three tabs will show
onClickLogoutfunctionfunction to handle disconnect wallet
onConnectWalletfunctionfunction to handle connect wallet
onClickCardfunctionfunction to handle card click
onViewItemfunctionfunction to handle custom redirection

Response

Wallet tab:

Wallet Tab

Activity tab:

Activity Tab

Account tab:

Account Tab

📘

Note:

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