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

 

 


 

 개요

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

 

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

 

 

 실습해보기

 

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 했을 때의 바이트코드를 사용해야 한다. 이 코드를 얻는 가장 쉬운 방법은 Ganache5, Remix6, Klaytn IDE등으로 테스트 네트워크에 배치를 했을 때 나오는 바이트코드를 복사해두는 것이다.

 

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

 

 ODK Bytecode 다운로드: bytecode.hex

 

 

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

 

 0DK ABI 다운로드: ABI.json

 

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

 

 

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

 

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

 

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

 

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

 

 

 주요 파일

 

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

References

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