Overview

Token gating in blockchain restricts access to specific features, functions, or services in a decentralized network based on owning certain tokens. It creates exclusive ecosystems where users must hold a set amount of tokens to access privileges or resources.

In the Mojito platform, we are providing a 100% discount to redeem new tokens.

In the mojito flow of token gating, create a group and map with rules against the group. the user needs to validate to user NFTs are gated. if the gated users can utilize some features like a discount,...

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

📘

Note:

For more detailed information, examples and theme customizations, you can refer to the NPM Public repository here.

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. API URL: Determine the appropriate API URL to use based on your environment.

Installation and Setup

Step 1: Install the Token-gating Module

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

Install using NPM:

JavaScript

  npm i @mojito-inc/connect-wallet

Install using Yarn:

JavaScript

  yarn add @mojito-inc/connect-wallet

Install via package.json:

"@mojito-inc/connect-wallet": "1.0.1-beta.15"

Step 2: Integrate Token Gating

To use the Token Gating feature, follow these steps:

Import the necessary modules from the @mojito-inc/connect-wallet package:

import { TokenGatingContainer } from "@mojito-inc/connect-wallet";

    <TokenGatingContainer
      open={tokenGatingDetails.open}
      config={{
        orgId,
        projectId: configuration.projectId,
        paperClientId: configuration.paperClientId,
        paperNetworkName: 'Polygon',
        groupId,
        ruleId: tokenopenGatingDetails?.ruleId,
        chainId: 5,
        collectionItemId,
        isClaimToken: tokenGatingDetails?.isClaimToken,
      }}
      screenConfig={tokenGatingDetails?.screenConfig ?? {}}
      walletConnectScreenDetails={walletConnectScreenDetails}
      claimTokenScreenDetails={claimTokenScreenDetails}
      errorScreenDetails={errorScreenDetails}
      onCloseModal={onCloseTokenGatingModal}
      setInvoice={setInvoice}
      getInvoiceDetails={getInvoiceDetails}
      invoiceID={tokenGatingDetails?.invoiceId}
    />

Fill in the required parameters for the TokenGating

Fill in the required parameters for the Configuration

Fill in the required parameters for the walletConnectScreenDetails

Fill in the required parameters for the errorScreenDetails

Fill in the required parameters for the screenConfig

Fill in the required parameters for the claimTokenScreenDetails

Fill in the required parameters for the tokenDetail

Fill in the required parameters for the WalletImages

Fill in the required parameters for the walletOptions

Response