@mpaucot/react-sdk v1.0.2

🧐 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 @kanjiwolrd/react-sdk
//or
yarn add @kanjiworld/react-sdk

🎈 Usage

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

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

Pour utiliser notre package directement sans passé par nos composants react, instancier le SDK de la manière suivante : 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

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.

///@dev return an array of object claim condition
async kanjiSDK.getClaimCondition(collection: collectionInterface):Promise<ClaimConditionInterface>

COLLECTIONS

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

///@dev Return all collections of brand api_key
async kanjiSDK.getCollections():Promise<Array<CollectionInterface>>

WEB3 CALLS

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

CLAIMCONDITIONS

To get the next active (or already active) claim condition, you can use the following web3 method:

async kanjiSDK.getActiveClaimCondition(collection: collectionInterface)

CLAIM

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

/// @dev Enable a customer to buy a quantity of nft of a specific collection and return the hash of the performed transaction on the blockchain
async kanjiSDK.claim(
  collection: CollectionInterface,//must be collection interface from which the customer want to claim
  quantity: number,//must be the quantity of nfts the customer want to buy
):Promise<string>

INTERFACES

//interface type of collection required to call some function
import {
  CollectionInterface,
  NftInterface,
  ClaimCondition,
} from '@kanji/react-sdk';

export interface ClaimCondition {
  startTimestamp: number;
  endTimestamp: number;
  maxClaimableSupply: number;
  supplyClaimed: number;
  quantityLimitPerTransaction: number;
  waitTimeInSecondsBetweenClaims: number;
  merkleRoot: string;
  pricePerToken: string;
  currency: string;
}

export interface CollectionInterface {
  _id?: string;
  name: string;
  symbol: string;
  description: string;
  thumbnail: string;
  maxMint: number;
  contract?: Contract;
  claimConditions: Array<ClaimCondition>;
}

export interface NftInterface {
  name: string;
  description: string;
  thumbnail: string;
  attributes: Array<Attribute>;
  tokenId: number;
}