@mojito-inc/secondary-market
TypeScript icon, indicating that this package has built-in type declarations

1.0.3-beta.59 • Public • Published

☁️ 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

Package Sidebar

Install

npm i @mojito-inc/secondary-market

Weekly Downloads

3

Version

1.0.3-beta.59

License

ISC

Unpacked Size

1.28 MB

Total Files

341

Last publish

Collaborators

  • vivek_mojito
  • kameshkishoreionixx
  • vivek_ionixx
  • alexinx