Claim Management Kit
⚙️ How to Install and Setup the Mojito Claim-management SDK module.
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:
- 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.
- 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.
- API URL: Determine the appropriate API URL to use based on your environment.
- Wallet: Connecting with the Mojito Claim Management SDK requires a wallet. Choose one of the following wallet options:
- MetaMask
- Wallet Connect
- 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:
npm install @mojito-inc/claim-management
Install using Yarn:
yarn add @mojito-inc/claim-management
Install via package.json:
"@mojito-inc/claim-management": "1.0.1"
Step 2: Connect Wallet
- After installing, connect your wallet by clicking the Connect your existing wallet button.

- 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:
-
In the root file of your application, wrap the provider component. This step allows you to connect to the claim management APIs.
-
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
.
- Development Environment: Use the API URL
-
Obtain a JWT token or Auth0 token from your authentication provider. This token will be used for authorization purposes.
-
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 formatBearer <Token>
.
onAuthenticated
: Optionally, you can handle theonAuthenticated
event by providing a callback function.
- Import the
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:
-
Import the
ClaimTokenModal
component from the@mojito-inc/claim-management
module.import { ClaimTokenModal } from "@mojito-inc/claim-management";
-
Pass the required parameters to the
ClaimTokenModal
component.
Parameters
Params | Type | Required | Description |
---|---|---|---|
open | boolean | ✅ | to open or close the modal |
walletAddress | string | ✅ | |
config | object | ✅ | Configuration |
onCloseModal | event() | ✅ | to close the modal |
onChangeWalletAddress | event (address) | ✅ | in the callback you will get the wallet address |
isDisConnect | boolean | ✅ | to disconnect wallet |
walletOptions | object | ✅ | walletOptions: to enable or disable wallet options |
link | object | ✅ | link: redirections in app |
claimCode | string | pass claim code here if isEnterClaimCode was false | |
isEnterClaimCode | boolean | to claim token with no code | |
content | object | content: to customize the content inside the modal |
Configuration
Params | Type | Required |
---|---|---|
CHAIN_ID | number | ✅ |
NETWORK_ID | string | ✅ |
ORG_ID | string | ✅ |
CROSSMINT_API | string | |
CROSSMINT_ENV | string | |
infuraId | string | |
paperClientId | string | |
paperNetworkName | string |
Wallet Options
Params | Type | Required |
---|---|---|
enableMetamask | boolean | ✅ |
enableWalletConnect | boolean | ✅ |
enableCrossmint | boolean | ✅ |
enablePaper | boolean | ✅ |
Link
Params | Type | Required |
---|---|---|
viewTokenTrackerURL | string | ✅ |
termsUrl | string | ✅ |
logoUrl | string | ✅ |
Content
Params | Type | Required | Description |
---|---|---|---|
ClaimCodeContent | object | contentData: to customise the title and description | |
ConnectWalletContent | object | contentData: to customise the title and description | |
SuccessContent | object | contentData: to customise the title and description |
Content Data
Prams | Type | Required |
---|---|---|
title | string | |
description | string |
- Call the
ClaimTokenModal
API by providing the required parameters:<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.
Updated 2 months ago