@mojito-inc/secondary-market v1.0.3-beta.59

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

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;

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;

interface

configuration

walletOptions

Image

walletDetails

balance

networkDetails

tokenDetails

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;

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;

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;

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;

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;