Klip A2A JavaScript SDK

App2App SDK allows you to easily integrate Klip to your applications. For more detailed explanation and usage, please refer to Klip Docs.

(- If you have any questions, you can visit the Developer Forum for help.)

How to install

When using npm (node 10 or higher recommended)

Install using the npm install klip-sdk-global or yarn add klip-sdk-global command. It should be imported as an ES module as shown below

import {prepare, request, getResult, getCardList} from 'klip-sdk-global';

When downloading the file directly

Download Klip JavaScript SDK in the Download tab. Place the file in the repository and insert a script tag in the HTML file as shown below:

<script src="./lib/klipSDKGlobal-1.0.0.min.js"></script>

Access each method using the klipSDKGlobal variable declared in the global namespace.

klipGlobal.prepare(...)
klipGlobal.request(...)
klipGlobal.getResult(...)
klipGlobal.getCardList(...)

API

Overview

App2App API requests are made in the order: prepare, request, and getResult.

• prepare is the step in which requests (from of a total of five) are defined
• request is the step in which the function is called and the signing takes place on Klip
• getResult is the step in which the result is returned from the function call

In addition, getCardList is a function for the convenience of BApp developers that returns a list of NFTs of Klip users. If you need help with this document or Klip in general, please visit our Developer Forum.

prepare

Prepares a App2App API request and obtains a request key.

prepare.auth

Obtains user information.

Parameters

| Name | Type | Description | | ----------- | ------ | ---------------------------------------------------------------------------- | | bappName | string | The name of the BApp displayed to users | | successLink | string | (optional) The return link after obtaining user consent | | failLink | string | (optional) The return link in case of a problem while obtaining user consent |

Example

const bappName = 'my app';
const successLink = 'myApp://...';
const failLink = 'myApp://...';
const res = await prepare.auth({bappName, successLink, failLink});
if (res.err) {
  // Handle error
} else if (res.request_key) {
  // Store request_key
}

prepare.sendKLAY

A request to send a user's KLAY to a certain address.

Parameters

| Name | Type | Description | | ----------- | ------ | ----------------------------------------------------------------------------- | | bappName | string | The name of the BApp displayed to users | | to | string | The address of the recipient | | amount | string | The amount of KLAY to send (Unit: KLAY, up to the 6th decimal place) | | from | string | (optional) To check if the Klip account address matches with the from address | | successLink | string | (optional) The return link after obtaining user consent | | failLink | string | optional) The return link in case of a problem while obtaining user consent |

Example

cconst bappName = 'my app'
const from = '0xB21F0285d27beb2373EC...'
const to = '0xD8b1dC332...'
const amount = '13.2'
const successLink = 'myApp://...'
const failLink = 'myApp://...'
const res = await prepare.sendKLAY({ bappName, from, to, amount, successLink, failLink })
if (res.err) {
  // Handle error
} else if (res.request_key) {
  // Store request_key
}

prepare.sendToken

A request to send a user's tokens to a certain address.

Parameters

| Name | Type | Description | | ----------- | ------ | ------------------------------------------------------------------- | | bappName | string | 유저에게 표시될 BApp의 이름 | | to | string | 받는 사람의 주소 | | amount | string | 보낼 토큰 수량 (단위: 토큰의 default 단위, 소수점 최대 6자리 허용) | | contract | string | 토큰 컨트랙트 주소 | | from | string | 유저의 클립 계정 주소가 from 주소와 일치하는 경우만 진행 (optional) | | successLink | string | 유저 동의과정 완료 후 돌아올 링크 (optional) | | failLink | string | 유저 동의과정에서 문제가 발생 할 경우 돌아올 링크 (optional) |

Example

const bappName = 'my app';
const from = '0xB21F0285d27beb2373EC...';
const to = '0xD8b1dC332...';
const amount = '10.123';
const contract = '0x813FB7677BbBAA...';
const successLink = 'myApp://...';
const failLink = 'myApp://...';
const res = await prepare.sendToken({
  bappName,
  from,
  to,
  amount,
  contract,
  successLink,
  failLink
});
if (res.err) {
  // 에러 처리
} else if (res.request_key) {
  // request_key 보관
}

prepare.sendCard

A request to send a user's NFT to a certain address.

Parameters

| Name | Type | Description | | ----------- | ------ | ------------------------------------------------------------------------------- | | bappName | string | The name of the BApp displayed to users | | to | string | The address of the recipient | | id | string | ID of the NFT | | contract | string | The address of the NFT contract | | from | string | (optional) To check if the Klip account address matches with the from address | | successLink | string | (optional) The return link after obtaining user consent | | failLink | string | (optional) The return link in case of a problem while obtaining user consent |

Example

const res = await prepare.sendCard({
  bappName,
  from,
  to,
  id,
  contract,
  successLink,
  failLink
});
if (res.err) {
  setErrorMsg(res.err);
} else {
  setRequestKey(res.request_key);
}

prepare.executeContract

A request for the user to execute the functino of a certain contract.

Parameters

| Name | Type | Description | | ----------- | ------ | ------------------------------------------------------------------------------- | | bappName | string | The name of the BApp displayed to users | | to | string | The address of the contract | | value | string | Amount of KLAY to be sent during contract execution (unit: peb) | | abi | string | ABI of the function to execute | | params | string | List of parameters of the function to execute | | from | string | (optional) To check if the Klip account address matches with the from address | | successLink | string | (optional) The return link after obtaining user consent | | failLink | string | (optional) The return link in case of a problem while obtaining user consent |

Example

const bappName = 'my app';
const from = '0xB21F0285d27beb2373EC...';
const to = '0xD8b1dC332...';
const value = '800000000';
const abi =
  '{"constant":false,"inputs":[{"name":"tokenId","type":"uint256"}],"name":"buyCard","outputs":[],"payable":true,"stateMutability":"payable","type":"function"}';
const params = '["2829"]';
const successLink = 'myApp://...';
const failLink = 'myApp://...';
const res = await prepare.executeContract({
  bappName,
  from,
  to,
  value,
  abi,
  params,
  successLink,
  failLink
});
if (res.err) {
  // Handle error
} else if (res.request_key) {
  // Store request_key
}

Klip request

Request authentification or signature using deep link. If the device doesn't have Klip installed, it redirects automatically to the download page on Google Play. You need to pass the request key obtained during the prepare step as a parameter. To implement the request step using QR code, please refer to QR Code Tutorial.

Parameters

| Name | Type | Description | | ------------------------ | -------- | ----------------------------------------------------------------------- | | requestKey | String | Request number | | onUnsupportedEnvironment | Function | (optional) The callback function to execute in a non-mobile environment |

Example

request('b37f873d-32ce-4d5d-b72e-08d528e7fb8e', () =>
  alert('Please execute in a mobile environment')
);

getResult

Returns the response of an App2App API request.

Parameters

| Name | Type | Description | | ---------- | ------ | -------------- | | requestKey | String | Request number |

Example

getResult('b37f873d-32ce-4d5d-b72e-08d528e7fb8e');

getCardList

Returns a list of a user's Cards (NFTs). You have to know the contract address of the NFTs that you want to return. It must be a contract supported on Klip.

Parameters

| Name | Type | Description | | -------- | ------ | ----------------------------------------------------------------------------------------------------------------------- | | contract | String | The contract address of the Cards to retrieve | | eoa | String | Address of the user to retrieve | | cursor | String | (optional) The pointer after which the next request will retrieve the next 100 items if the number of Cards exceeds 100 |

Example

const contract = '0xB21F0285d27beb2373EC...';
const eoa = '0xD8b1dC332...';
const cursor = '';
getCardList({contract, eoa, cursor});

Error Code

| Http Status | Error Code | Description | | ----------- | ---------- | --------------------------------------------- | | - | - | Same as Klip REST API Error Code |

Example Code

For a simple example code, please refer to the [download page] (https://global.docs.klipwallet.com/a2a-sdk/a2a-sdk-download).

Directory Structure

project
├── dist/
│   ├── KlipGlobal.js
│   ├── KlipGlobal-1.0.0.min.js
│── src/
│   ├── config.js
│   ├── index.js
│   ├── web2app-standalone-1.0.15.js
├── example_react/
├── example_vanilla/
├── rollup.config.js
...

• /dist : built file
• /src : source
• /example_react: React example code
• /example_vanilla: Vanilla JS example code
• rollup.config.js : rollup config file

License

MIT