Claim Management Kit

⚙️ How to Install and Setup the Mojito Claim-management SDK module.


The Mojito Claim Management SDK offers abstractions that facilitate interactions with claim tokens in a TypeScript/JavaScript environment. This SDK primarily focuses on handling claim tokens. It also provides various options for connecting to a wallet, such as an email connection, crossmint, Metamask, Email wallet, and Wallet Connect.

This guide will help you better understand how to use and integrate the Claim-management SDK into your application.


Before proceeding with the installation steps, ensure that you have the following prerequisites in place:

  1. Node.js and NPM/Yarn: Make sure you have Node.js installed on your machine, and the Node.js version should be 18 or higher, along with either NPM (Node Package Manager) or Yarn. You can download and install Node.js from the official website here.
  2. Authentication Provider: To obtain the necessary token for authentication, you need to have an authentication provider set up. This can be a JWT (JSON Web Token) or an Auth0 token, which will be passed as the "token" property in the configuration.
  3. API URL: Determine the appropriate API URL to use based on your environment.
  1. Wallet: Connecting with the Mojito Claim Management SDK requires a wallet. Choose one of the following wallet options:
    1. MetaMask
    2. Wallet Connect
    3. Email Wallet
    4. Crossmint

If you are using create-react-app

Add below packages as dependencies in your package.json

  "dependencies": {
    "url": "latest",
    "http": "npm:http-browserify",
    "https": "npm:https-browserify",
    "zlib": "npm:browserify-zlib",
    "http-browserify": "latest",
    "https-browserify": "latest",
    "browserify-zlib": "latest",
    "assert": "^2.0.0",
    "stream": "^0.0.2"

To ignore the sourcemap warnings, create a .env file with the following in your root directory:


Installation and Setup:

Step 1: Install the Claim-management Module

Install the Mojito Claim-management SDK module on your project by using one of the following methods below:

Install using NPM:

npm install @mojito-inc/claim-management

Install using Yarn:

yarn add @mojito-inc/claim-management

Step 2: Connect Wallet

  1. After installing, connect your wallet by clicking the Connect your existing wallet button.
  1. Select the wallet that you want to connect to Mojito.

  1. Read and Agree to the terms and click on the claim now to claim an item.
  1. After claimed you will get an success modal.

Step 3: Wrap the Provider in the Root File

To integrate the Mojito Claim Management SDK into your application, follow these steps:

  1. In the root file of your application, wrap the provider component. This step allows you to connect to the claim management APIs.

  2. Choose the appropriate API URL based on your environment:

    • Sandbox Environment: Use the API URL
    • Production Environment: Use the API URL
  3. Obtain a JWT token or Auth0 token from your authentication provider. This token will be used for authorization purposes.

  4. Wrap the provider using the ClaimManagementProvider component from the Mojito Claim Management SDK.

    • Import the ClaimManagementProvider from @mojito-inc/claim-management in your JavaScript file.
    • Use the ClaimManagementProvider component and provide the following props:
      • theme: Pass the theme configuration as per your requirements.
      • clientOptions: Provide the following options as an object:
        • uri: Set this prop to the determined API URL based on your environment.
        • token: Pass the obtained JWT token or Auth0 token as the value for this prop. Use the format Bearer <Token>.
      • onAuthenticated: Optionally, you can handle the onAuthenticated event by providing a callback function.
import { ClaimManagementProvider } from "@mojito-inc/claim-management";

const [token, setToken] = useState<string>();
const client = useMemo(
  () => ({
    uri: <API_URL>, // API url
    token: token || undefined, // bearer token

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

          theme={theme} // To customise the theme refer below document
          walletConnectProjectId={ walletConnectProjectId } // project id from wallet connect
          <Component {...pageProps} />

Step 4: Using the ClaimTokenModal Component

To utilize the ClaimTokenModal component from the Mojito Claim Management SDK, follow these steps:

  1. Import the ClaimTokenModal component from the @mojito-inc/claim-management module.

    import { ClaimTokenModal } from "@mojito-inc/claim-management";
  2. Pass the required parameters to the ClaimTokenModal component.

React 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();


openbooleanto open or close the modal
onCloseModalevent()to close the modal
isDisConnectbooleanpass true to disconnect wallet
walletOptionsobjectwalletOptions: to enable or disable wallet options
linkobjectlink: redirections in app
claimTypeenumpass the claim type
claimCodestringpass claim code here if isEnterClaimCode was false
listingIdstringpass the listing id for claim process
contentobjectcontent: to customize the content inside the modal
firstNamestringuser first name
lastNamestringuser last name
userEmailstringuser email
loginWithPersonalInformationbooleanit will login authenticate with personal details
onSuccessfunctionto handle own logic for the success modal button
pricestringpass price to display in claim UI
isClaimWithGasbooleanif true the claim process will execute with metamask
tokenNamestringpass the token name for token gating
tokenGatingConfigobjectconfig for token gating
showBuyButtonbooleanif false it will hide buy now button in token gating modal
showDisconnectButtonbooleanif true it will show Disconnect Wallet button in token gating modal

Claim type




Wallet Options





ClaimCodeContentobjectcontentData: to customise the title and description of claim modal
ConnectWalletContentobjectcontentData: to customise the title and description of wallet modal
SuccessContentobjectcontentData: to customise the title and description of success modal
LoaderContentobjectcontentData: to customise the title and description of loader modal
RecoveryCodeModalobjectcontentData: to customise the description of recovery modal
ClaimWithGasContentobjectcontentData: to customise the description of claim modal
TokenGatingContentobjectcontentData: to customise the description of token gating modal
TokenGatingNotEligibleContentobjectcontentData: to customise the description of token gating not eligible modal
ClaimErrorContentobjectcontentData: to customise the description of error modal

Content Data


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',
      background: {
        default: '#000',
      text: {
        primary: '#000',
      grey: {
        100: '#868b93',
        500: '#A1A5AB',
      divider: '#fff',
    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',
    MojitoCoreUI: {
      font: {
        primary: 'Slate',
        secondary: 'Slate',
        tertiary: 'Sneak',

Note: If you are faced any type issue in theme, create a file called "mui.d.ts" in root or theme folder 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



For complete documentation of the SDK offerings, see the chaim-management.