❤
npm
Sign UpSign In

klip-sdk

2.2.1 • Public • Published

Klip A2A JavaScript SDK

Klip A2A JavaScript SDK는 Klip에 App2App 요청을 간편하게 처리하도록 도와주는 라이브러리입니다. 더 자세한 설명 및 사용 방법은 개발자 문서를 참고해주세요.

(* 문의 사항이 있으신 경우 개발자 포럼을 방문해 도움을 받으실 수 있습니다.)

설치 방법

npm이용 하는 경우 (node 10 이상 권장)

npm install klip-sdk 혹은 yarn add klip-sdk 커맨드를 통해 설치 후 다음과 같이 ES module import 방식으로 사용할 수 있습니다.

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

직접 파일을 다운 받아 사용하는 경우 (IIFE Module import)

다운로드 페이지에서 파일을 다운받은 후, 다운 받은 파일을 repository에 복사합니다. HTML 파일에 다음과 같이 스크립트 태그를 삽입합니다.

<script src="./lib/klipSDK-2.0.0.min.js"></script>

이후 글로벌 네임스페이스에 선언된 klipSDK 변수를 활용하여 각 메소드에 접근합니다.

klipSDK.prepare(...)
klipSDK.request(...)
klipSDK.getResult(...)
klipSDK.getCardList(...)

API

개요

App2App 요청은 크게 prepare, request, getResult의 순서로 진행이 됩니다.

  • prepare는 어떠한 요청을 할지 요청을 정의하는 단계로 총 5가지 종류의 요청이 존재
  • request는 함수 호출을 통해 Klip으로 화면이 전환되어 실제 서명 프로세스를 진행
  • getResult는 함수 호출을 통해 결과값을 받고 확인

추가적으로 getCardList는 BApp 개발의 편의를 위해 Klip 사용자의 NFT 목록을 받아올 수 있도록 제공되는 함수입니다.

prepare

App2App 요청을 준비하고 request key를 받습니다.

prepare.auth

사용자의 정보를 획득하는 요청입니다.

Parameters

Name Type Description
bappName string 유저에게 표시될 BApp의 이름
successLink string 유저 동의과정 완료 후 돌아올 링크 (optional)
failLink string 유저 동의과정에서 문제가 발생 할 경우 돌아올 링크 (optional)

Example

const bappName = "my app";
const successLink = "myApp://...";
const failLink = "myApp://...";
const res = await prepare.auth({ bappName, successLink, failLink });
if (res.err) {
  // 에러 처리
} else if (res.request_key) {
  // request_key 보관
}

prepare.sendKLAY

유저의 클레이를 특정 주소로 전송하는 요청입니다.

Parameters

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

Example

const 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) {
  // 에러 처리
} else if (res.request_key) {
  // request_key 보관
}

prepare.sendToken

유저가 보유한 토큰을 특정 주소로 전송하는 요청입니다.

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

유저가 보유한 카드(NFT)를 특정 주소로 전송하는 요청입니다.

Parameters

Name Type Description
bappName string 유저에게 표시될 BApp의 이름
to string 받는 사람의 주소
id string NFT id
contract string NFT 컨트랙트 주소
from string 유저의 클립 계정 주소가 from 주소와 일치하는 경우만 진행 (optional)
successLink string 유저 동의과정 완료 후 돌아올 링크 (optional)
failLink string 유저 동의과정에서 문제가 발생 할 경우 돌아올 링크 (optional)

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

유저가 특정 컨트랙트의 함수를 실행하도록 하는 요청입니다.

Parameters

Name Type Description
bappName string 유저에게 표시될 BApp의 이름
to string 컨트랙트의 주소
value string 컨트랙트 실행하면서 같이 보낼 KLAY 수량 (단위: peb)
abi string 실행할 함수의 abi
params string 실행할 함수의 인자 목록
from string 유저의 클립 계정 주소가 from 주소와 일치하는 경우만 진행 (optional)
successLink string 유저 동의과정 완료 후 돌아올 링크 (optional)
failLink string 유저 동의과정에서 문제가 발생 할 경우 돌아올 링크 (optional)

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) {
  // 에러 처리
} else if (res.request_key) {
  // request_key 보관
}

request

Deep Link를 통해 Klip에 인증 또는 서명을 요청합니다. prepare 요청을 통해 받은 request key를 인자로 받습니다.

isKlipAppCall 파라미터를 설정함으로써 Klip App을 명시적으로 우선 호출 할 수 있습니다. isKlipAppCall은 기본적으로 false이며 이때는 KakaoTalk의 Klip(인톡클립)을 실행합니다. 반면 isKlipAppCall을 true로 요청했을 경우, 실행 중인 스마트폰 기기에 Klip App과 KakaoTalk 설치 여부에 따라 아래와 같은 순서로 실행됩니다.

  1. Klip App이 디바이스에 설치되어 있을 경우 Klip App 먼저 실행
  2. 디바이스에 Klip App이 설치되지 않았을 경우, 인톡클립 실행
  3. KakaoTalk도 디바이스에 설치되어 있지 않을 경우, AppStore의 Klip App 다운로드 페이지로 이동

Parameters

Name Type Description
requestKey String 요청 번호
onUnsupportedEnvironment Function 모바일 환경이 아닌 경우 실행 할 콜백 함수 (optional)
isKlipAppCall boolean 명시적으로 Klip App을 호출 할 경우 (default: false)

Example

// KakaoTalk Klip 호출
request("b37f873d-32ce-4d5d-b72e-08d528e7fb8e", () =>
  alert("모바일 기기에서만 이용 가능한 기능입니다.")
);

// Klip App 호출
request(
  "b37f873d-32ce-4d5d-b72e-08d528e7fb8e",
  () => alert("모바일 기기에서만 이용 가능한 기능입니다."),
  true
);

getResult

App2App 요청에 대한 결과를 확인합니다.

Parameters

Name Type Description
requestKey String 요청 번호

Example

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

getCardList

사용자의 카드(NFT) 보유 목록을 가져옵니다. 조회하고자 하는 NFT 컨트랙트 주소를 알고 있어야 하며, 클립에서 지원하는 컨트랙트만 가능합니다.

Parameters

Name Type Description
contract String 조회할 카드의 컨트랙트 주소
eoa String 조회할 사용자 주소
cursor String 조회할 커서값입니다. 만약, 조회할 카드의 보유목록이 100개 이상이면, 다음 100개 정보를 받을 수 있습니다.(optional)

Example

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

예제 코드

간단한 예제 코드는 다운로드 페이지를 참고해 주세요.

Directory 구조

project
├── dist/
│   ├── klipSDK.js
│   ├── klipSDK-2.0.0.min.js
│── src/
│   ├── config.js
│   ├── index.js
│   ├── web2app-standalone-1.1.1.js
├── example_react/
├── example_vanilla/
├── rollup.config.js
...
  • /dist : 빌드된 파일
  • /src : 소스
  • /example_react: 리액트 예제 코드
  • /example_vanilla: 바닐라 자바스크립트 예제 코드
  • rollup.config.js : 롤업 설정 파일

License

MIT

/klip-sdk/

    Package Sidebar

    Install

    npm i klip-sdk

    Homepage

    docs.klipwallet.com

    Weekly Downloads

    387

    Version

    2.2.1

    License

    MIT

    Unpacked Size

    80.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • gx-devops
    Try on RunKit
    Report malware