myKlaytnContract – 컨트랙 소스없이 스마트컨트랙 배치 및 함수 호출하기

 

 


 

 개요

소스 저장소: https://github.com/andrwj/myKlaytnContract/tree/wp1https://github.com/andrwj/myKlaytnContract/tree/wp

 

Klaytn2https://www.klaytn.com/ Baobab 네트워크에 스마트컨트랙을 설치하고 원격 호출을 실험하는 앱이다. Functional Programming3https://www.npmjs.com/package/@andrwj/fp을 적용한 첫번째 React 코드인데 다른 업무와 병행하며 짧은 시간동안 만들었던 것이라 크게 내세울만한 기능은 없다. 그래도 컨트랙 ABI 정보와 배치된 주소를 알기만 하면 해당 컨트랙의 API를 호출할 수 있다는 점이 나름 유용한데,  Klaytn IDE4https://ide.klaytn.com/에서는 컨트랙 소스없이는 원격 호출관련 처리가 불가능 하기 때문이다.

 

 

 실습해보기

 

1) 자신이 만들어둔 컨트랙 소스를 컴파일해서 바이트 코드를 준비한다. 이때 주의할 점은 소스의 바이트코드가 아니라, 인스턴스의 바이트코드가 필요하다는 점이다. 이 차이는 명백히 다르다. 아래의 코드에서 보듯 어떤 클래스를 컴파일 한 코드와 그 클래스의 인스턴스를 생성한 코드는 전혀 다른 것과 같다.


contract MyContract {
  function totalSupply() public view returns (uint256);
  function balanceOf(address who) public view returns (uint256);
  function transfer(address to, uint256 value) public returns (bool);
  event Transfer(address indexed from, address indexed to, uint256 value);

  constructor(string _name, string _symbol, uint _initialSupply, uint _decimals, bool _mintable) public ERC20 () {

  }
}

 

소스를 컴파일한 바이트코드는 owner 정보가 없다. owner 정보는 constructor()가 실행될 때야 비로소 설정되기 때문이다. 따라서, 여러분은 반드시 컨트랙을 Deploy 했을 때의 바이트코드를 사용해야 한다. 이 코드를 얻는 가장 쉬운 방법은 Ganache5https://www.trufflesuite.com/ganache, Remix6https://remix.ethereum.org, Klaytn IDE등으로 테스트 네트워크에 배치를 했을 때 나오는 바이트코드를 복사해두는 것이다.

 

손쉬운 테스트를 위해 오덕Oh Duck Token토큰을 소개한다.  1 ODK == 오리 다섯마리 가치에 상응하는 토큰인데 아직 ICO는 거치지 않았다.

 

 ODK Bytecode 다운로드: bytecode.hex

 

 

2) 해당 컨트랙의 ABI 내용을 준비한다.

 

 0DK ABI 다운로드: ABI.json

 

3)  기존에 사용중인 클래이튼 계정이 없다면 새로운 계정을 만들고 keystore 파일을 받아 둔다.7https://wallet.klaytn.com/create

 

 

4) 위 어플리케이션 탭에서 Deploy Contract 탭을 클릭한다음, bytecode.hex 내용을 복사해서 넣자. Klaytn 계정 로그인은 이전/이후 언제 해도 상관없다. 테스트 네트워크에 컨트랙을 배치할 것이므로 부담없이 컨트랙에 Sign Transacton 버튼을 누르고 DEPLOY CONTRACT 버튼을 클릭한다.

 

5) 성공적으로 컨트랙을 배치했다면 배치한 주소를 잘 기록해두거나 복사해둔다.  (복사후 메세지 패널의 오른쪽 부분을 클릭하면 사라진다)

 

6)  이제 앱의 Interact With Contract 탭을 눌러 배치된 컨트랙의 주소를 복사해 넣고 ABI.json 파일의 내용도 넣는다. 로그인한 상태에서  두개의 정보를 다 넣고 Access 버튼을 누르면 호출 가능한 함수 목록이 선택 박스에 나열된다. (함수 이름을 입력할 때마다 근접검색을 해주므로 마우스보다 빨리 접근할 수 있다)

 

7)  위의 0DK 토큰에서는 반드시 setTransgerAgent 부터 설정해야 한다. 그런 뒤 ReleaseAgent 를 설정하고 releaseTokenTransfer를 진행하게되면 토큰 거래가 가능해진다. 

 

 

 주요 파일
  • mason.js 8https://github.com/andrwj/myKlaytnContract/blob/wp/src/Utils/mason.js – Klaytn 관련 함수를 모아둔 파일
  • Contract.js9https://github.com/andrwj/myKlaytnContract/blob/wp/src/Contract/Contract.js: React Component, Contract 관련 기능 호출
  • RunCommand.js10https://github.com/andrwj/myKlaytnContract/blob/wp/src/Contract/RunCommand.js – 유효성 검사 동적 함수 호출
  • @andrwj/fp11https://www.npmjs.com/package/@andrwj/fp – Either  Monad 구현체

 

Web3JS를 사용해본 사용자라면 Klaytn 툴킷 caver-js12https://docs.klaytn.com/sdk/caverjs 를 쓰는데 별 어려움 없을 것이다.  다음 번 게시물에는 이런 예제보다 수수료 대납기능등을 구현한 것들을 올려볼 예정인데 대납구조를 실습하려면 백엔드 서버가 필요하므로 시간이 좀 걸릴듯.   이런 종류의 앱은 너무 초보적이지만 시간이 지나고 되돌아 봤을 때를 대비해 올려둔다.

References   [ + ]

1. https://github.com/andrwj/myKlaytnContract/tree/wp
2. https://www.klaytn.com/
3, 11. https://www.npmjs.com/package/@andrwj/fp
4. https://ide.klaytn.com/
5. https://www.trufflesuite.com/ganache
6. https://remix.ethereum.org
7. https://wallet.klaytn.com/create
8. https://github.com/andrwj/myKlaytnContract/blob/wp/src/Utils/mason.js
9. https://github.com/andrwj/myKlaytnContract/blob/wp/src/Contract/Contract.js
10. https://github.com/andrwj/myKlaytnContract/blob/wp/src/Contract/RunCommand.js
12. https://docs.klaytn.com/sdk/caverjs