@mojito-inc/claim-management

☁️ Mojito Modules - Claim Management

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

Using this library in your project Claim Management

You can install this project with one of these commands:

npm install --save @mojito-inc/claim-management

yarn add @mojito-inc/claim-management

Install the following packages:

npm i @mui/material@5.11.11 @mui/icons-material@5.11.11 @apollo/client graphql @web3modal/ethers5 @walletconnect/modal

yarn add @mui/material@5.11.11 @mui/icons-material@5.11.11 @apollo/client graphql @web3modal/ethers5 @walletconnect/modal

Theme Config

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

  export const theme = createTheme({
    typography: {
      fontFamily: 'Slate',
    },
    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: "Slate";
                  font-style: normal;
                  font-display: swap;
                  font-weight: 400;
                  text-transform: none;
                  font-size: 16px;
                }
              `,
      },
      MuiButton: {
        styleOverrides: {
          root: {
            fontFamily: 'Slate',
            textTransform: 'none',
            borderRadius: '4px',
            fontWeight: 700,
            fontSize: '16px',
            backgroundColor: '#FDCC35',
            color: '#000',
            '&:hover': {
              backgroundColor: '#FDCC35',
              color: '#000',
              opacity: 0.5,
            },
          },
        },
      },
      MuiDialog: {
        styleOverrides: {
          paper: {
            border: '1px solid #D7D8DB',
            boxShadow: '0px 8px 16px rgba(0, 0, 0, 0.08)',
            borderRadius: '4px',
          },
        },
      },
      MuiDivider: {
        variants: [
          {
            props: { orientation: 'horizontal' },
            style: {
              ':before': {
                borderTop: 'thin solid #D7D8DB',
              },
              ':after': {
                borderTop: 'thin solid #D7D8DB',
              },
            },
          },
        ],
      },
    },
    palette: {
      primary: {
        main: '#FDCC35',
      },
      secondary: {
        main: '#356045',
        light: '#F5F5F5',
      },
      background: {
        default: '#000',
      },
      text: {
        primary: '#000',
      },
      grey: {
        100: '#868b93',
        500: '#A1A5AB',
      },
      divider: '#fff',
      toastWarning: {
        50: '#FFFFE5',
        100: '#FFFEC0',
        200: '#FCFB99',
        300: '#F8F676',
        400: '#F5F15C',
        500: '#F0EB47',
        600: '#FBDF47',
        700: '#FDC740',
        800: '#FCAD36',
        900: '#F98028',
      },
    },
    MojitoClaim: {
      Header: {
        background: '#000',
      },
      Footer: {
        background: '#000',
        color: '#fff',
      },
      Hero: {
        background: '#356045',
        color: '#fff',
      },
      Discount: {
        inProgressColor: '#F98028',
        inProgressBackground: '#FFFEC0',
      },
      error: '#BF1E18',
      success: '#3E8045',
      deliveryBackgroundColor: '#FAFBFB',
      linkColor: '#6563FD',
      textTertiary: '#868b93',
      borderColor: '#242629'
    },
    MojitoCoreUI: {
      font: {
        primary: 'Slate',
        secondary: 'Slate',
        tertiary: 'Sneak',
      },
    },
  });

Theme Notes for typescript error

If you are faced any type issue in theme, create a file called "mui.d.ts" and paste the below code:

import '@mui/material/styles';
import { MojitoClaimManagementTheme } from './MojitoClaimManagementTheme';

declare module '@mui/material/styles' {
  export interface Theme {
    MojitoClaim?: MojitoClaimManagementTheme
  }
  // allow configuration using `createTheme`
  export interface ThemeOptions {
    MojitoClaim?: MojitoClaimManagementTheme
  }
}

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

For theme configuration Ref above: Theme Config

  import { ClaimManagementProvider } from '@mojito-inc/claim-management';

  const [token, setToken] = useState<string>();
  const client = useMemo(
    () => ({
      uri: 'https://api-sandbox.mojito.xyz/query', // API url
      token: token || undefined, // bearer token
    }),
    [token],
  );

  // note: you can get the bearer token from local storage with a key "token"

  <ClaimManagementProvider
    theme={theme}
    clientOptions={client}
    activeChain={activeChain}
    clientId={clientId}
    onAuthenticated={setToken}
    walletConnectProjectId={ walletConnectProjectId } // project id from wallet connect
    walletOptions={{         // Optional parameter
      enableCrossmint: false,
      enableMetamask: true,
      enableWalletConnect: true,
      enableEmailWallet: true,
    }}
  >
    <Component {...pageProps} />
  </ClaimManagementProvider>

onAuthenticated

when user gets Authenticated gets token as response

Provider parameters

Param	type	Required	Description
theme	theme	✅
client	object	✅
activeChain	enum	✅
clientId	string	✅	client id for email wallet
walletConnectProjectId	string	✅	wallet connect project id
onAuthenticated	function	✅
walletOptions	object		walletOptions

ClaimTokenModal

present claim token modal for following setup

import { ClaimTokenModal } from "@mojito-inc/claim-management";

  <ClaimTokenModal
    open=<open>
    name=<name>
    userEmail=<userEmail>
    config=<Configuration>
    onCloseModal=<onCloseModal>
    onSuccess=<onSuccess>
    onClickBuyToken=<onClickBuyToken>
    isDisConnect=<isDisConnect>
    walletOptions=<walletOptions>
    link=<link>
    claimCode=<claimCode>
    tokenGatingConfig={{
      groupId: <groupId>,
      ruleId: <ruleId>,
    }}
    content=<content>
    claimType=<claimType>
  />

Param	type	Required	Description
open	boolean	✅	if true it will open the modal if false the modal will close
config	Object	✅	Configuration
isDisConnect	boolean	✅	to disconnect wallet
onCloseModal	function	✅	to close the modal
link	Object		link
claimCode	string		pass the claim code
listingId	string		pass the item id for claim process
content	Object		content to define the content for the popup
onSuccess	function		function for handle your own logic in success modal button
skipClaimModal	boolean		if true it will skip the claim process after connect connect
skipSuccessModal	boolean		if true it will skip the success screen after claim completed
skipConfirmClaimModal	boolean		if true it will skip the claim confirmation screen and claim will happen automatically once wallet connected
isPaperWallet	boolean		if true it will work as paper wallet with email else it will work as thirdweb embedded wallet.
tokenGatingConfig	Object		tokenGatingConfig config for token gating
tokenName	string		pass the token name for token gating
onclickBuyToken	function	function to make custom redirection when click on buy token button
showDisconnectButton	boolean		if true it will show Disconnect Wallet button in token gating modal
showBuyButton	boolean		if false it will hide buy now button in token gating modal
isClaimWithGas	boolean		if true the claim process will execute with metamask
price	string		pass price to display in claim UI
claimType	enum		pass claim type
loginWithPersonalInformation	boolean		if true means personal information should be provided by user
firstName	string		pass the first name of the user
lastName	string		pass the last name of the user
userEmail	string		pass the email of the user

Hooks

useWallet hooks

To get the connected wallet details:

  import { useWallet } from "@mojito-inc/claim-management";

  const { address, balance, networkDetails, provider, providerType } = useWallet();

useTransaction hooks

To get the transaction details:

  import { useTransaction } from "@mojito-inc/claim-management";

  const { error, fetchInvoiceDetail, transactionDetails } = useTransaction();

Transaction interface

Param	type	Required	Description
error	boolean		return true if invoice API fail
fetchInvoiceDetail	async function(invoiceId)		to fetch the invoice details. you should pass the invoiceId
transactionDetails	object		after successfully claim or refetch the invoice API (fetchInvoiceDetail) you will get transaction object

interface

Configuration

Param	type	Required	Description
chainId	number	✅
orgId	string	✅
crossmintApiKey	string
crossmintEnv	string
paperClientId	string
paperNetworkName	string

walletOptions

Param	type	Required	Description
enableCrossmint	boolean	✅
enableMetamask	boolean	✅
enableWalletConnect	boolean	✅
enableEmailWallet	boolean	✅

link

Param	type	Required	Description
viewTokenTrackerURL	string	✅
termsUrl	string	✅
privacyUrl	string
additionalTermsUrl	string
logoUrl	string	✅

content

Param	type	Required	Description
ClaimCodeContent	Object		contentData
SuccessContent	Object		contentData
ConnectWalletContent	Object		contentData
LoaderContent	Object
RecoveryCodeModal	Object
ClaimWithGasContent	Object
TokenGatingContent	Object
TokenGatingNotEligibleContent	Object
ClaimErrorContent	Object

tokenGatingConfig

Param	type	Required	Description
groupId	string	✅
ruleId	string	✅

walletOptions

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

paymentOptions

Param	type	Required	Description
creditCard	boolean	✅
walletConnect	boolean	✅
wire	boolean	✅
coinbase	boolean	✅

mixersConfig

Param	type	Required	Description
lotId	string	✅
paymentId	string
discountCode	string
walletOptions	object		walletOptions
paymentOptions	object		paymentOptions
errorPageUrl	string		redirection url during checkout payment error
successPageUrl	string		redirection url for success page
isAutoFillCountryCode	boolean		To enable or disable auto country code import
breadCrumbs	array		Custom bread crumbs name
onClickGoToMarketPlace	function		custom function when click on back to marketplace after payment in mixers

contentData

Param	type	Required	Description
title	string
description	string
buttonName	string
breadcrumbsLabel	string
agreeTermsAndConditionsMessage	string
additionalTermsAndConditionsLabel	string
privacyPolicyLabel	string
termsandConditionsLabel	string
titleImageURL	string

To use Mixers SDK for BuyNow Flow

Note:

In the _app.tsx file, please add the following line: <Script src="https://cdn.checkout.com/js/framesv2.min.js" />. if it was not added, credit card payments won't work.

ClaimTokenModal

present claim token modal for following setup

import { ClaimTokenModal } from "@mojito-inc/claim-management";

  <ClaimTokenModal
    open=<open>
    name=<name>
    userEmail=<userEmail>
    config=<Configuration>
    mixersConfig=<MixersConfiguration>
    onCloseModal=<onCloseModal>
    onSuccess=<onSuccess>
    isDisConnect=<isDisConnect>
    walletOptions=<walletOptions>
    content=<content>
    claimType="BuyNow"
  />

Param	type	Required	Description
open	boolean	✅	if true it will open the modal if false the modal will close
config	Object	✅	Configuration
isDisConnect	boolean	✅	to disconnect wallet
walletOptions	Object	✅	walletOptions
onCloseModal	function	✅	to close the modal
link	Object		link
listingId	string		pass the item id for claim process
content	Object		content to define the content for the popup
onSuccess	function		function for handle your own logic in success modal button
showDisconnectButton	boolean		if true it will show Disconnect Wallet button in token gating modal
showBuyButton	boolean		if false it will hide buy now button in token gating modal
isClaimWithGas	boolean		if true the claim process will execute with metamask
claimType	enum		pass claim type
loginWithPersonalInformation	boolean		if true means personal information should be provided by user
firstName	string		pass the first name of the user
lastName	string		pass the last name of the user
userEmail	string		pass the email of the user
mixersConfig	Object	✅	mixersConfig config for mixers buy now

Error page

Create an error page with the page path /payments/failure:

Success page

Create an success page with the page path /payments/success:

Retrieve the paymentId from the query parameters of the URL and pass it as a parameter to the MojitoCheckout component

  <PaymentMixersSuccess
    onClickGoToMarketPlace={onClickGoToMarketPlace} />

Claim Service development

Development setup