@mojito-inc/secondary-market

☁️ Mojito Modules - Secondary Marketplace

👨‍💻 React components for the Mojito Platform, Reference App and third-party projects, including Mojito's Secondary Marketplace

Version: 1.0.0

Using this library in your project

You can install this project with one of these commands:

npm install @mojito-inc/secondary-market

yarn add @mojito-inc/secondary-market

Once the package is installed, you can import the library using import;

For Theme Configuration

     You can create a theme folder inside a /src folder.
     Inside theme folder, Create a file index.ts.
     Inside the index.ts file, you can copy and paste the below code.

  import { createTheme } from '@mui/material';

  export const theme = createTheme({
    typography: {
      fontFamily: 'Sneak',
    },
    components: {
      MuiTextField: {
        styleOverrides: {
          root: {
            '& input::-webkit-outer-spin-button, & input::-webkit-inner-spin-button':
              {
                display: 'none',
              },
            '& input[type=number]': {
              MozAppearance: 'textfield',
            },
          },
        },
      },
      MuiCssBaseline: {
        styleOverrides: `
          @font-face {
            font-family: "Sneak";
            font-style: normal;
            font-display: swap;
            font-weight: 400;
            text-transform: none;
            font-size: 16px;
          }
        `,
      },
      MuiButton: {
        styleOverrides: {
          root: {
            fontFamily: 'Sneak',
            textTransform: 'none',
            borderRadius: '4px',
            fontWeight: 500,
            fontSize: '16px',
            backgroundColor: '#6563FD',
            color: '#fff',
            '&:hover': {
              backgroundColor: '#6563FD',
              color: '#fff',
              opacity: 0.5,
            },
            '&:disabled': {
              backgroundColor: '#F5F5F5',
              color: '#BDBDBD',
            },
          },
        },
      },
      MuiDialog: {
        styleOverrides: {
          paper: {
            border: '1px solid #D7D8DB',
            boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.08)',
            borderRadius: '4px',
          },
        },
      },
      MuiTooltip: {
      styleOverrides: {
        tooltip: {
          fontSize: '12px',
          color: '#ffffff',
          backgroundColor: '#000000',
          padding: '6px 8px 6px 8px',
        },
        arrow: {
          color: '#000000',
        },
      },
      },
      MuiDivider: {
        variants: [
          {
            props: { orientation: 'horizontal' },
            style: {
              ':before': {
                borderTop: 'thin solid #D7D8DB',
              },
              ':after': {
                borderTop: 'thin solid #D7D8DB',
              },
            },
          },
        ],
      },
    },
    palette: {
      primary: {
        main: '#6563FD',
        light: '#C9C8FE',
        dark: '#0703F7',
      },
      secondary: {
        main: '#A6FF00',
        light: '#C9FF66',
        dark: '#95E600',
      },
      appDefaultColor: {
        primary: {
          dark: '#FFFFFF',
          light: '#FFFFFF80',
        },
        secondary: {
          dark: '#000000',
          light: '#00000080',
        },
      },
      border: {
        dark: '#616161',
        light: '#E0E0E0',
      },
      background: {
        default: '#000',
        paper: '#fff',
      },
      text: {
        primary: '#000',
      },
      grey: {
        50: '#FAFAFA',
        100: '#F5F5F5',
        200: '#EEEEEE',
        300: '#E0E0E0',
        400: '#BDBDBD',
        500: '#9E9E9E',
        600: '#757575',
        700: '#616161',
        800: '#424242',
        900: '#212121',
      },
      divider: '#fff',
      toastError: {
        50: '#FEE3E5',
        100: '#FDBBBD',
        200: '#E2807A',
        300: '#CD564F',
        400: '#D0372E',
        500: '#CE2818',
        600: '#BF1E18',
        700: '#AD1414',
        800: '#9F0C10',
        900: '#90030F',
      },
      toastSuccess: {
      50: '#E7EFE8',
      100: '#CFDFD1',
      200: '#B7CFB9',
      300: '#9FBFA2',
      400: '#6EA074',
      500: '#3E8045',
      600: '#0E6017',
      700: '#0D5615',
      800: '#0B4D12',
      900: '#0A4310',
      1000: '#1BB82D',
      1100: '#D9F9DD',
      },
      toastWarning: {
        50: '#FFFFE5',
        100: '#FFFEC0',
        200: '#FCFB99',
        300: '#F8F676',
        400: '#F5F15C',
        500: '#F0EB47',
        600: '#FBDF47',
        700: '#FDC740',
        800: '#FCAD36',
        900: '#F98028',
      },
    },
  });

For Custom Theme Configuration

    Inside the theme folder, create a file mui.d.ts.
    Inside the mui.d.ts file, copy and paste the below code to customize your theme.

  import '@mui/material/styles';
  interface SecondaryTheme {
    dark?: string;
    light?: string;
  }


  declare module '@mui/material/styles' {
    export interface Palette {
      appDefaultColor?: {
        primary?: SecondaryTheme,
        secondary?: SecondaryTheme
      }
      border?: SecondaryTheme
      toastError?: ColorPartial
      toastSuccess?: ColorPartial
      toastWarning?: ColorPartial
    }
    // allow configuration using `createTheme`
    export interface PaletteOptions {
      appDefaultColor?: {
        primary?: SecondaryTheme,
        secondary?: SecondaryTheme
      }
      border?: SecondaryTheme
      toastError?: ColorPartial
      toastSuccess?: ColorPartial
      toastWarning?: ColorPartial
    }
  }

For development URL

baseURL = https://api-dev.mojito.xyz/query

For production URL

baseURL = https://api.mojito.xyz/query

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


    const AuthenticationProvider = ({ children }: AuthenticationProviderProps) => {
        const sessionData = sessionStorage.getItem('AuthToken');
        const tokenData = sessionData ? JSON.parse(sessionData ?? '') : null;
        const client = useMemo(
            () => ({
            uri: baseURL,
            token: tokenData ? `Bearer ${ tokenData }` : undefined,
            }),
            [tokenData],
        );
        return (
            <ThemeProvider theme={ theme }>
                <SecondaryMarketProvider
                    theme={ theme }
                    clientOptions={ client }>
                    { children }
                </SecondaryMarketProvider>
            </ThemeProvider>
        )
    }

    export default AuthenticationProvider;

Param	type	Description
uri	string
theme	object	Create a theme using MUI createTheme
token	string

After setup with SecondaryMarketProvider

following the api are

1. Product details page
2. List Item
3. Accept And Reject Offer
4. Buy Now
5. Make Offer

ProductDetailPage

The Product Details Page (PDP) is a crucial component of our project that provides users with comprehensive information about a specific product. This documentation will outline the key features and functionalities of the PDP, including the display of provenance, metadata, network details, offers, traits, and the ability to perform actions such as making offers, buying now, listing items, and accepting offers.

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

    const ProductDetail = () => {
        const configuration = {
            orgId: ORG_ID,
            infuraId: INFURA_ID,
            paperClientId: PAPER_CLIENT_ID,
            walletOptions: {
                enableMetamask: true,
                enableWalletConnect: true,
                enableEmail: true,
            },
        };
        const Image = {
            ethIcon: Images.ETH_ICON.src,
            logo: Images.LOGO_ICON.src,
            metamask: Images.METAMASK.src,
            walletConnect: Images.WALLET_CONNECT.src,
            loader: Images.LOADER.src,
        };
        return (
            <ProductDetailPage
                config={ configuration }
                Image={ Image }
                walletDetails={ walletDetails }
                onClickDisconnectWallet={ onClickDisconnectWallet }
                onConnectWallet={ onConnectWallet }
                onRefetchBalance={ onRefetchBalance }
                tokenDetails={ tokenDetails } />
        )
    }

    export default ProductDetail;

Param	type	Required	Description
configuration	Object	✅	configuration
Image	Object	✅	Image
walletDetails	Object	✅	walletDetails
onClickDisconnectWallet	function	✅
onConnectWallet	function	✅
onRefetchBalance	function	✅
tokenDetails	Object	✅	tokenDetails

interface

configuration

Param	type	Required	Description
orgId	string	✅
infuraId	string	✅
paperClientId	string	✅
walletOptions	Object	✅	walletOptions

walletOptions

Param	type	Required	Description
enableMetamask	boolean	✅
enableWalletConnect	boolean	✅
enableEmail	boolean	✅

Image

Param	type	Required	Description
ethIcon	string	✅
logo	string	✅
metamask	string	✅
walletConnect	string	✅
loader	string	✅
wethIcon	string	✅
maticIcon	string	✅
placeHolderImage	string

walletDetails

Param	type	Required	Description
walletAddress	string	✅
networkDetails	Object	✅	networkDetails
providerType	string	✅
balance	Object	✅	balance
open	boolean	✅
disConnect	boolean	✅
refetchBalance	boolean	✅

balance

Param	type	Required	Description
native	number	✅
nonNative	number	✅

networkDetails

Param	type	Required	Description
id	string	✅
chainID	number	✅
isTestnet	boolean	✅
name	string	✅

tokenDetails

Param	type	Required	Description
onChainTokenID	string	✅
contractAddress	string	✅
itemId	string	✅

ListItem

     ListItem outlines the process of making an NFT available for sale or auction, thereby entering it into the marketplace

  import { ListItemContainer } from '@mojitoinc/secondary-market';
      
  const ListItem = () => {
    const configuration = {
      orgId: ORG_ID,
      infuraId: INFURA_ID,
      paperClientId: PAPER_CLIENT_ID,
      walletOptions: {
        enableMetamask: true,
        enableWalletConnect: true,
        enableEmail: true,
      },
    };
    const Image = {
      ethIcon: Images.ETH_ICON.src,
      logo: Images.LOGO_ICON.src,
      metamask: Images.METAMASK.src,
      walletConnect: Images.WALLET_CONNECT.src,
      loader: Images.LOADER.src,
    };
    return (
      <ListItemContainer
        open={ openListItemModal }
        image={ Image }
        config={ configuration }
        tokenDetails={ tokenDetails }
        isRemoveListing={ isRemoveListing }
        walletDetails={ walletDetails }
        onClickViewItem={ onCloseListItemModal }
        onClickBackToMarketPlace={ onCloseListItemModal }
        onConnectWallet={ onConnectWallet } 
        onCloseModal={ onCloseListItemModal } />
    );
  };

  export default ListItem;

Param	type	Required	Description
config	Object	✅	config
image	Object	✅	Image
walletDetails	Object	✅	walletDetails
open	boolean	✅
tokenDetails	Object	✅	tokenDetails
isRemoveListing	boolean	✅
onCloseModal	function	✅	To close the modal
onClickViewItem	function	✅	For custom redirection
onClickBackToMarketPlace	function	✅	For custom redirection
onConnectWallet	function	✅

AcceptAndRejectOffer

Accepting an offer:
     It outlines the process of accepting an offer for an NFT, discussing the necessary steps and platforms commonly used for managing offers. It covers topics such as negotiation, pricing considerations, and potential implications of accepting an offer.

Rejecting an offer:
     The content provides insights into the reasons one might choose to reject an offer for an NFT. It discusses factors such as pricing misalignment, personal preferences, strategic decision-making, and the potential impact of rejecting an offer on the relationship with the potential buyer.

  const AcceptAndRejectOfferPage = () => {
    const configuration = {
      orgId: ORG_ID,
      infuraId: INFURA_ID,
      paperClientId: PAPER_CLIENT_ID,
      walletOptions: {
        enableMetamask: true,
        enableWalletConnect: true,
        enableEmail: true,
      },
    };
    const Image = {
      ethIcon: Images.ETH_ICON.src,
      logo: Images.LOGO_ICON.src,
      metamask: Images.METAMASK.src,
      walletConnect: Images.WALLET_CONNECT.src,
      loader: Images.LOADER.src,
    };
    return (
      <AcceptAndRejectOffer
          open={ openOfferModal }
          config={ configuration }
          image={ Image }
          tokenDetails={ tokenDetails }
          orderId={ orderId }
          isRejectOffer={ isRejectOffer }
          walletDetails={ walletDetails }
          onClickViewItem={ onCloseOfferModal }
          onClickBackToMarketPlace={ onCloseOfferModal }
          onConnectWallet={ onConnectWallet }
          onCloseModal={ onCloseOfferModal } />
    );
  };

  export default AcceptAndRejectOfferPage;

Param	type	Required	Description
open	boolean	✅
image	Object	✅	Image
config	Object	✅	config
tokenDetails	Object	✅	tokenDetails
isRejectOffer	boolean	✅
orderId	string	✅
walletDetails	Object	✅	walletDetails
onCloseModal	function	✅
onClickViewItem	function	✅
onConnectWallet	function	✅
onClickBackToMarketPlace	function

BuyNow

     BuyNow enables buyers to instantly purchase an NFT at a fixed price, without engaging in an auction or negotiation process.

  const BuyNowPage = () => {
    const configuration = {
      orgId: ORG_ID,
      infuraId: INFURA_ID,
      paperClientId: PAPER_CLIENT_ID,
      walletOptions: {
        enableMetamask: true,
        enableWalletConnect: true,
        enableEmail: true,
      },
    };
    const Image = {
      ethIcon: Images.ETH_ICON.src,
      logo: Images.LOGO_ICON.src,
      metamask: Images.METAMASK.src,
      walletConnect: Images.WALLET_CONNECT.src,
      loader: Images.LOADER.src,
    };
    return (
      <BuyNow
          open={ openBuyNowModal }
          config={ configuration }
          image={ Image }
          tokenDetails={ tokenDetails }
          walletDetails={ walletDetails }
          onClickViewItem={ onCloseBuyNowModal }
          onClickBackToMarketPlace={ onCloseBuyNowModal }
          onClickConnectWallet={ onConnectWallet }
          onClickDisconnectWallet={ onClickDisconnectWallet }
          onRefetchBalance={ onRefetchBalance }
          onCloseModal={ onCloseBuyNowModal } />
    );
  };

  export default BuyNowPage;

Param	type	Required	Description
open	boolean	✅
image	Object	✅	Image
config	Object	✅	config
tokenDetails	Object	✅	tokenDetails
walletDetails	Object	✅	walletDetails
onCloseModal	function	✅	To close the Modal
onClickViewItem	function	✅	For custom redirection
onClickConnectWallet	function	✅	To connect wallet
onClickDisconnectWallet	function	✅	To disconnect Wallet
onClickBackToMarketPlace	function		For custom redirection
onRefetchBalance	function		To get new Balance

MakeOffer

     MakeOffer enables potential buyers to express their interest in purchasing an NFT by proposing a price they are willing to pay.

  const MakeOfferPage = () => {
    const configuration = {
      orgId: ORG_ID,
      infuraId: INFURA_ID,
      paperClientId: PAPER_CLIENT_ID,
      walletOptions: {
        enableMetamask: true,
        enableWalletConnect: true,
        enableEmail: true,
      },
    };
    const Image = {
      ethIcon: Images.ETH_ICON.src,
      logo: Images.LOGO_ICON.src,
      metamask: Images.METAMASK.src,
      walletConnect: Images.WALLET_CONNECT.src,
      loader: Images.LOADER.src,
    };
    return (
      <MakeOffer
          open={ openMakeOfferModal }
          config={ configuration }
          image={ Image }
          tokenDetails={ tokenDetails }
          offerOrderId={ selectedOffer?.id || '' }
          isCancelOffer={ isCancelOffer }
          walletDetails={ walletDetails }
          onClickViewItem={ onCloseMakeOfferModal }
          onClickBackToMarketPlace={ onCloseMakeOfferModal }
          onRefetchBalance={ onRefetchBalance }
          onConnectWallet={ onConnectWallet }
          onCloseModal={ onCloseMakeOfferModal } />
    );
  };

  export default MakeOfferPage;

Param	type	Required	Description
open	boolean	✅
image	Object	✅	Image
config	Object	✅	config
tokenDetails	Object	✅	tokenDetails
isCancelOffer	boolean	✅
offerOrderId	string	✅
walletDetails	Object	✅	walletDetails
onCloseModal	function	✅	To close the Modal
onClickViewItem	function	✅	For custom redirection
onClickBackToMarketPlace	function		For custom redirection
onConnectWallet	function	✅
onRefetchBalance	function		To get new Balance

Account Wallet

     Account Wallet feature page allows user to view the purchased NFTs and the invoices generated

  const Wallets = () => {

    enum ListingType {
      SALE = 'sale',
      CLAIMABLE = 'claimable',
    }
    const config = {
      orgId: ORG_ID,
      paperClientId: PAPER_CLIENT_ID,
      projectId: PROJECT_ID,
      walletOptions: {
        enableMetamask: true,
        enableWalletConnect: true,
        enableEmail: true,
      },
    };
    const Image = {
      ethIcon: Images.ETH_ICON.src,
      logo: Images.LOGO_ICON.src,
      metamask: Images.METAMASK.src,
      walletConnect: Images.WALLET_CONNECT.src,
      loader: Images.LOADER.src,
      wethIcon: Images.WETH_ICON.src,
      maticIcon: Images.MATIC.src,
      placeHolderImage: Images.PLACEHOLDER.src,
    };
    const menusToDisplay=['Edit Listing', 'Transfer NFT', 'Copy Link', 'Download Artwork', 'Download Media'];

    return (
      <WalletsPage
          walletDetails={ walletDetails }
          config={ config }
          Image={ Image }
          tabConfig={ [
          {
            tabLabel: 'Wallet',
            showTab: true,
          }, {
            tabLabel: 'Activity',
            showTab: true,
          }, {
            tabLabel: 'Account',
            showTab: true,
          },
          ] }
          showViewItem
          showInvoice
          showMenu
          menuToDisplay={ menusToDisplay }
          showSearch={ false }
          showSort={ false }
          showRefresh={ false }
          hideWalletBalance
          showFilter
          content={{
            noDataContent: '',
            disconnectText: 'Disconnect Wallet',
            copyAddressText: 'Copy wallet address',
          }}
          listingType={ ListingType?.CLAIMABLE }
          onClickLogout={ onClickDisconnectWallet }
          onConnectWallet={ onConnectWallet }
          onClickCard={ onClickCard }
          onViewItem={ onClickViewItem } /> 
    );
  };

  export default Wallets;

Param	type	Required	Description
walletDetails	Object	✅	walletDetails
config	Object	✅	config
image	Object	✅	Image
showViewItem	boolean		To show View Item button in Activity tab
showInvoice	boolean		To show invoice download option in Activity tab
hideWalletBalance	boolean		To hide balance details in Account tab
showSearch	boolean		To hide or show search in wallet tab
showSort	boolean		To hide or show sort in wallet tab
showRefresh	boolean		To hide or show refresh button in wallet tab
showMenu	boolean		if true we can see menu in wallet tab else it will not show
menusToDisplay	Object		to specify the menus when clicked on three dot menu under wallet tab
listingType	enum		for sale listing user can give ListingType?.SALE and for claimable listing user can give ListingType?.CLAIMABLE
content	object		Custom text changes
tabConfig	object		To customize the tab name and the tabs, by default all the three tabs will show
filterByStatus	string[]		To fetch invoice by status
onClickLogout	function	✅	To disconnect Wallet
onConnectWallet	function	✅	To connect Wallet
onClickCard	function		For custom redirection
onViewItem	function		For custom redirection