@kanji-world/react-sdk v2.9.0

🧐 About

With Kanji, you can create and customize your NFTs collections and monitor them in the long. This nom package is meant to enable your developers to integrate the sale of your collection directly on your own website. It is written in Typescript, so is usable in any Javascript front end format. This is only a V1, much more to come next, enjoy!

🏁 Getting Started

Prerequisites

You will need start to install nodeJs and npm library.

• Node JS

Installing

The installation of the npm package is very simple, just open a terminal window in the root of your project and copy-paste the following lines:

npm i @kanji-world/react-sdk
//or
yarn add @kanji-world/react-sdk
//or
pnpm i @kanji-world/react-sdk

🎈 Usage

To use our package, your first need to import the kanji library:

import { KanjiSDK } from '@kanji-world/react-sdk';

As the first you need to instantiate the SDK by using following line:

///@dev instanciate kanjiSDK
const kanjiSDK = KanjiSDK.getInstance();

To communicate and load revelant datas for your customer, please provide your API KEY (no critical or private datas are loaded, you can use this API key in your front end code):

///@dev set your api key for return good collection and call API
kanjiSDK.setApiKey(api_key);

CONNECTION

connectToKanjiAccount

To connect your customers to the blockchain you need to use WEB3 modal, this will enable your customer to connect throw the wallet of their choice:

• metamask
• torus
• portis
• walletConnect
• ledger

To open the modal and perform connection please use the following line of code:

//if getNewSignature === true your provider (metamask or other) gonna request a signature and if false it gonna search if signature is stored and valid
kanjiSDK.connectWeb3(getNewSignature = true):jwt;

To disconnect your customer, use :

//@dev disconnect user
kanjiSDK.disconnectWeb3();

WEB2 CALLS

The following methods can be called, once you a mentioned your API key, in kanjiSDK.setApiKey(api_key) and grants you access to your releavant collections datas

COLLECTIONS

To get all of yours created collections you can use the following method:

  /**
   * Call api route /sdk/collections/ {GET} to get Lists of Collections of current brand connected
   * @returns {Promise<[ICollection]>} Return an array of collection linked by api_key
   * @category Collections
   */
  async kanjiSDK.getCollections(): Promise<[ICollection]>

  /**
   * Call api route /sdk/collections/ids {GET} to get Lists of Collections of current brand connected
   * @returns {Promise<[string]>} Return an array of ids collection linked by api_key
   * @category Collections
   */
  async getCollectionIds(): Promise<[string]>

  /**
   * Call api route /sdk/collections/names {GET} to get Lists of Collections of current brand connected
   * @returns {Promise<[string]>} Return an array of names collection linked by api_key
   * @category Collections
   */
  async getCollectionNames(): Promise<[string]>

  /**
   * Call api route /sdk/tokens/:collectionId {GET} to get Collection by id's collection
   * @param {ICollection} collection Collection interface you want to get tokens
   * @returns {Promise<[IFormattedToken]>} Return an object error or array of tokens interface
   * @category Collections
   */
  async getTokensByCollectionId(
    collection: ICollection
  ): Promise<[IFormattedToken]>

  /**
   * Call api route /sdk/tokens/:collectionName {GET} to retrieve tokens by name's collection
   * @param {ICollection} collection Collection interface you want to get tokens
   * @returns {Promise<[IFormattedToken]>}
   * @category Collections
   */
  async getTokensByCollectionName(
    collection: ICollection
  ): Promise<[IFormattedToken]> {
    return Fetch(`/sdk/tokens/` + collection.name, 'GET', {});
  }

CLAIMCONDITIONS

The follow method enables you to get all the sell phases (AKA claimConditions) that you created on Kanji platform to enable your customers to claim tokens of given collection for a certain price and conditions.

  /**
   * Call api route /sdk/claim-condtions/ {GET} to return array of claim condition in collection
   * @param {ICollection} collection Collection you want to interact
   * @returns {Promise<[IFormattedClaimCondition]>} Array of claim condition in collection
   */
  async getClaimConditions(
    collection: ICollection
  ): Promise<[IFormattedClaimCondition]>

To get the next active claim condition, you can use the following web3 method:

  /**
   * Call api route /sdk/next-claim-condtions/ {GET} to return next claim condition in collection or error if no current sales
   * @param {ICollection} collection Collection you want to interact
   * @returns {Promise<IFormattedClaimCondition>} Next claim condition in collection
   */
  async getNextClaimCondition(
    collection: ICollection
  ): Promise<IFormattedClaimCondition>

To get the current active claim condition, you can use the following web3 method:

  /**
   * Call api route /sdk/current-claim-condtions/ {GET} to return current claim condition in collection or error if no current sales
   * @param {ICollection} collection Collection you want to interact
   * @returns {Promise<IFormattedClaimCondition>} Current claim condition in collection
   */
  async getCurrentClaimCondition(
    collection: ICollection
  ): Promise<IFormattedClaimCondition>

WEB3 CALLS

The follow methods all require your customers to be connected to the blockchain, because they are meant to communicate with it

CLAIM

For your customer to be able to claim an nft of a specific collection, you can use the following web3 method:

  /**
   * Claim a quantity of token lazy minted and listed in claimCondition
   * @param {ICollection} collection Interface Collection with which you can interact
   * @param {number} quantity Quantity of token you want to claim
   * @param {number} tokenId Token Id for erc1155 or cardIdToRedeem
   * @returns {Promise<Record<string, string> | IErrorKanjiSmartContract>} Return the hash of the performed transaction on the blockchain
   * @category KANJIDROPERC721A
   */
  async claim(
    collection: ICollection,
    quantity: number,
    tokenId = 0
  ): Promise<Record<string, string> | IErrorKanjiSmartContract>

INTERFACES

//interface type of collection required to call some function
import {
  IFormattedToken,
  IFormattedClaimCondition,
  IErrorKanjiSmartContract,
  IClaimReturn,
} from '@kanji-world/react-sdk';

export interface IFormattedToken {
  _id: string;
  name: string;
  description: string;
  properties: any;
  thumbail: string;
  tokenId: number;
  collectionId: string;
  collectionName: string;
}

export interface IFormattedClaimCondition {
  name?: string;
  startTimestamp: number;
  endTimestamp: number;
  maxClaimableSupply?: number;
  supplyClaimed?: number;
  pricePerToken?: string;
  currency?: string;
}

export interface IErrorKanjiSmartContract {
  errorFunction: any;
  decoded: any;
  lastError: any;
}

export interface IClaimReturn {
  enrichedTokens: IToken[];
  claimer: IUser;
}