[Tech] web3Klaytn Overview

what is web3Klaytn ?

evm 기반 네트워크를 이용한 서비스 개발을 위한 라이브러리는
대표적으로 ethers와 web3 가 있습니다.

klaytn의 경우 caver 라이브러리를 배포하였으며,
caver는 web3 라이브러리를 기반으로 커스터마이징 되어
klaytn network만의 기능들을 쉽게 이용하도록
쾌적한 개발환경을 제공합니다.

하지만…

caver에만 의존하기에는 몇가지 문제점들이 생겨납니다.

1.klaytn외에 다수의 체인을 서비스해야 하는 경우

• 타 체인과 상호 작용하는 서비스 제공해야 하는 경우에
  caver 외에 ethers, web3 라이브러리를 위한
  코드작성을 추가적으로 하여야 합니다.

2. ethers, web3에 의존하는 새로운 라이브러리

• 서비스 제공자들을 위한 서드파티 라이브러리들은
  자연스럽게 ethers와 web3에 의존하여 배포가 되는데
  서드파티 라이브러리 이용에 용이하지 않습니다.

3. 개발자들의 사소한 러닝커브

• 각각의 라이브러리들은 비슷하면서 다릅니다.
  지원하는 기능들의 차이도 약간씩 존재하기 때문에
  코드 작성시 불필요한 소요시간이 생깁니다.

이러한 점들은 타 네트워크에서 klaytn으로
마이그레이션의 저해요소로 작용 합니다.

그래서 ?

klaytn은 web3klaytn 이라는 익스텐션 SDK를 제공 합니다.

web3klaytn은
ethers-ext, web3js-ext, web3j-ext, web3py-ext
총 4가지의 익스텐션이 존재하며

불필요한 코드를 추가하거나 거의 변경하지 않더라도
klaytn과 쉽게 상호작용이 가능 합니다.

ethers, web3를 위한 언어별 익스텐션

간단한 사용 예시

지난번 포스팅에서 다루었던 feedelegation tx를
ethers, ethers-ext를 이용하여 적용을 하면 간단하게 사용이 가능 합니다.

• npm i — save @klaytn/ethers-ext
• npm i — save ethers

ethers의 경우 v5 기준으로 작성 합니다.

index.js

import ethers from "ethers";
import { Wallet, TxType } from "@klaytn/ethers-ext";

// ethers를 이용하여 Provider 인스턴스를 생성 합니다.
// caver = new Caver("rpc")와 동일 합니다.
const provider = new ethers.providers.JsonRpcProvider("https://public-en-baobab.klaytn.net");

// ethers-ext를 이용하여 월렛 인스턴스를 생성 합니다.
const caller = new Wallet("0x{private key}", provider)
const feePayer = new Wallet("0x{private key}", provider)

/* 기존 caver 이용시 아래와 같았습니다.
const feePayer = caver.wallet.keyring.createFromPrivateKey("0x{private key}");
*/


// contract 인스턴스 생성
const techTokenInstance = new ethers.Contract(
    TECH_TOKEN_ADDRESS,
    TECH_TOKEN_ABI,
    provider
 );


const param = techTokenInstance.interface.encodeFunctionData("mint", [
    input_address,
    input_amount,
  ]);

  let tx = {
  // type에 들어가는 TxType은 ethers-ext의 타입을 입력 합니다.
    type: TxType.FeeDelegatedSmartContractExecution,
    from: caller.address,
    to: TECH_TOKEN_ADDRESS,
    value: 0,
    input: param,
  };

  // type에 klaytn network의 tx type에 맞는 값이 들어가야 하기때문에
  // populateTransaction를 이용하여 채워줍니다.
  tx = await caller.populateTransaction(tx);

  //caller의 tx 서명
  const callerTxHashRLP = await caller.signTransaction(tx);
  //payer의 서명
  const sentTx = await feePayer.sendTransactionAsFeePayer(callerTxHashRLP);
  const receipt = await sentTx.wait();

  console.log("receipt=====\n", receipt);

• 큰 맥락은 caver를 사용했을 때와 같습니다.
• tx를 전송하는 방법은 여러 방법이 있기때문에 더 간소화 한다면
  가능할걸로 보입니다.

예제 깃헙 링크

tech_at_channelin/src/1_web3klaytn_feeDelegate at main · cic-develop/tech_at_channelin