Overview

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, and Wallet Connect.

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

Prerequisite

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, 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.
4. Wallet: Connecting with the Mojito Claim Management SDK requires a wallet. Choose one of the following wallet options:
   1. MetaMask
   2. Wallet Connect
   3. Crossmint

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:

JavaScript

npm install @mojito-inc/claim-management

Install using Yarn:

JavaScript

yarn add @mojito-inc/claim-management

Install via package.json:

"@mojito-inc/claim-management": "1.0.1"

Step 2: Connect Wallet

1. After installing, connect your wallet by clicking the Connect your existing wallet button.

2. Select the wallet that you want to connect to Mojito.

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:

   • Development Environment: Use the API URL https://api-dev.mojito.xyz/query.
   • Production Environment: Use the API URL https://api.mojito.xyz/query.

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";

<ClaimManagementProvider
  theme={theme}
  clientOptions={{
    uri: <API_URL>,
    token: <`Bearer ${Token}`>,
  }}
  onAuthenticated={(token) => { }}
>
  <Component {...pageProps} />
</ClaimManagementProvider>

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.

   JavaScript

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

2. Pass the required parameters to the ClaimTokenModal component.

Parameters

Configuration

Wallet Options

Link

Content

Content Data

3. Call the ClaimTokenModalAPI by providing the required parameters:
   JavaScript

   <ClaimTokenModal
     open={isOpen}
     walletAddress={walletAddress}
     config={configuration}
     onCloseModal={handleModalClose}
     onChangeWalletAddress={handleWalletAddressChange}
     isDisConnect={isDisconnect}
     walletOptions={walletOptions}
     claimCode={claimCode}
     isEnterClaimCode={isEnterClaimCode}
     link={linkOptions}
     content={contentOptions}
   />
   

📘

Note:

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