npm package: @mpaucot/react-sdk
Description: <p align="center">   <a href="" rel="noopener">  <img width=200px height=200px src="https://i.imgur.com/6wj0hh6.jpg" alt="kanji logo"></a> </p>
Latest version: 1.0.2

<p align="center">
  <a href="" rel="noopener">
 <img width=200px height=200px src="https://i.imgur.com/6wj0hh6.jpg" alt="kanji logo"></a>
</p>

<div align="center">

[![Status](https://img.shields.io/badge/status-active-success.svg)]()
[![GitHub Issues](https://img.shields.io/github/issues/kylelobo/The-Documentation-Compendium.svg)](https://github.com/kylelobo/The-Documentation-Compendium/issues)
[![GitHub Pull Requests](https://img.shields.io/github/issues-pr/kylelobo/The-Documentation-Compendium.svg)](https://github.com/kylelobo/The-Documentation-Compendium/pulls)
[![License](https://img.shields.io/badge/license-MIT-blue.svg)](/LICENSE)

</div>

---

<p align="center"> This package permits to communicate to kanji API and load releavant datas for your brand.
To use it you need API_KEY that you can find on your dashboard on www.kanji.io
    <br> 
</p>

## 🧐 About <a name = "about"></a>

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 <a name = "getting_started"></a>

### Prerequisites

You will need start to install nodeJs and npm library.

- [Node JS](https://nodejs.org/en/download/)

### 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:

```javascript
npm i @kanjiwolrd/react-sdk
//or
yarn add @kanjiworld/react-sdk
```

## 🎈 Usage <a name="usage"></a>

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

```javascript
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:

```javascript
///@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):

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

# [CONNECTION](/docs/classes/_internal_.Connection.html)

---

### 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:

```javascript
//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 :

```javascript
//@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.

```javascript
///@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:

```javascript
///@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:

```javascript
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:

```javascript
/// @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

```javascript
//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;
}
```