개요
소스 저장소: 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 |