npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@mojito-inc/secondary-market

v1.0.3-beta.141

Published

Mojito secondary market is the platform to purchase NFT.

Downloads

2,979

Readme

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