Kaikas의 내장 caver 객체 사용하기

React 환경에서 caver-js를 설치하고 컴파일하면, 에러가 발생한다.
🧅 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.

caver-js에서 사용되는 패키지들이 webpack v5에 포함되지 않았기에 발생하는 문제이다.

이를 해결하기 위해 webpack.config.js에 설정을 해주거나, react-scripts의 버전(to v4)을 낮출 수도 있다.
🍄 webpack.config.js는 리액트에서 node_modules/react-scripts/config 폴더 내부에 존재한다.

하지만 이러한 방법들은 결국 임시방편에 지나지 않는다고 생각하였고, 다른 방법을 찾는 도중에 카이카스 공식 문서에서 다음과 같은 방법을 찾아냈다.
🍳 참고한 Kaikas 공식 문서 : https://docs.kaikas.io/02_api_reference/02_caver_methods

Caver Methods - Kaikas Docs

Caver provided by Kaikas

• 위의 문서에 따르면, window.caver.sendTransaction으로 트랜잭션을 발생시킬 수 있다.
• Kaikas는 1.4.0 버전의 Caver를 제공하기에, 우리는 이 내장된 Caver 객체로 트랜잭션을 발생시킬 수 있다.
• 카이카스 지갑이 설치되어 있다면, window.caver의 존재를 콘솔로 확인할 수 있다.

• 공식문서를 참고하여 이 caver 객체를 통해서 react에서 klay를 전송하는 코드를 작성해봤다.

const transferKlay = async () => {
     window.caver.klay
         .sendTransaction({
            type: 'VALUE_TRANSFER',
            from: window.klaytn.selectedAddress,
            to: '토큰을 보낼 주소',
            value: window.caver.utils.toPeb('1', 'KLAY'), // 1 클레이 전송
            gas: 8000000
         })
         .once('transactionHash', transactionHash => {
            console.log('txHash', transactionHash);
         })
         .once('receipt', receipt => {
            console.log('receipt', receipt);
         })
         .once('error', error => {
            console.log('error', error);
            alert("지불에 실패하셨습니다.");
         })
     }
}

• 공식 문서를 참고하여, 컨트랙트 객체를 만들고 매서드를 사용하는 코드를 작성해봤다.

      const to = "토큰을 보낼 주소";
      const amount = 1000000000000000000n; // 토큰 1개
      const contract = new window.caver.klay.Contract(컨트랙트의 ABI, 컨트랙트 주소);
      
      console.log(contract); // 컨트랙트 객체가 만들어졌다.
      
      // 토큰을 전송하는 매서드를 실행한다.
      const transfer = await contract.methods.transfer(to, amount).send(
      	{
        	from : window.klaytn.selectedAddress, 
            gas: 8000000
        }); 
      console.log(transfer);

 

• 블록체인 트랜잭션은 주로 백엔드에서 처리하는 것이 권장되기에 최신의 react 환경에서 caver-js 라이브러리 사용에 대한 지원이 제대로 이루어지지 않았던 것 같다.
• caver-js를 이용한 블록체인 관련 로직은 node 서버를 위한 느낌이 들었다.
• window.caver.kct.kip7는 어떨 때 사용되는지 생각이 필요한 것 같다.
• window.caver.kct.kip7.methods를 사용하여 kip-7 토큰을 transfer를 하려고 하였으나, 오류가 발생하여 전송이 되지 않았다.

	  const kip7 = new window.caver.kct.kip7(contractAddress);

      kip7.methods.safeTransfer(보낼 주소, 보낼 토큰 수)
      	 .send({from : window.klaytn.selectedAddress, gas: 8000000})
         .then(el => console.log(el))
         .catch(err => console.log(err)); // 오류 발생

• 다만, kip7.balanceOf(address)를 사용하여 BigInt로 표현된 잔액은 확인할 수 있었다.
• 컨트랙트 객체(ABI 정보를 포함하는)가 있어야지 해당 컨트랙트의 메서드를 사용할 수 있는 것 같다.