Klaytn NFT 개발기(2)

OpenZepplin

오픈제플린은 컨트랙트 개발을 쉽게 도와주는 라이브러리이다. ERC20, ERC721에 대한 형식이 다 있어서 사용법을 보고 따라쓰면 된다.

https://github.com/OpenZeppelin/openzeppelin-contracts

ERC721 토큰에 들어가보면 ERC721과 IERC721이 있는데, ERC721은 토큰의 명세가 구현되어있고, IERC721은 인터페이스 역할을 합니다.

아래와 같이 다중상속을 이용해 구현한 것을 확인할 수 있다.

배포하고 테스팅해보기

배포는 Truffle을 사용하고 사용할 네트워크는 로컬환경에서 쉽게 테스팅 해볼 수 있는 ganache를 사용한다.

• Truffle
  Truffle은 솔리디티 코드를 로컬 환경에서 쉽게 컴파일 하고 배포할 수 있게 해준다.
  Truffle 폴더구조는 아래와 같습니다.
  
  - contracts는 솔리디티 컨트랙트의 소스파일이 담겨있다.
  - migrantions는 이더리움 네트워크에 배포할 때 사용하는 디렉토리이다.
  - test는 application과 컨트랙트 테스트 파일 디렉토리이다.
  - truffle.js는 트러플 설정파일이다.

• Ganache
  가나슈는 가상 이더리움 노드를 로컬환경에서 돌릴 수 있다.
  이더리움이나 클레이튼이나 솔리디티를 사용하고 클레이튼은 이더리움에서 포크되었기 때문에 이더리움 가상 네트워크에서 테스트 해봐도 된다.

  ganache-cli를 통한 로컬테스팅 커맨드

트러플로 배포하기 위해서는 아래의 명령어를 사용하면 된다.

truffle migrate --compile-all --reset --network ganache

배포가 끝나면 build폴더에 json형식으로 컨트랙트들이 저장된다.

배포한 컨트랙트의 노드로 들어가기 위해서는 아래의 명령어를 사용하면 된다.

truffle console --network ganache

배포된 컨트랙트의 노드에 들어가 컨트랙트 인스턴스를 받아올 수 있다.

instance 변수에 컨트랙트를 담아올 수 있다. 또한 컨트랙트에 ERC721FULL 컨트랙트를 상속받아와 생성자에 이름과 심볼을 넣었기 때문에 instance.name()으로 이름을 받아올 수 있다.

컨트랙트 토큰 생성 로직

• ERC721에서 구현된 _mint()를 통해 토큰을 생성한다.
  공식문서에 구현된 내용을 참조해보면, 토큰 아이디, 토큰개수를 매핑을 통해 구현을 해놓았고, 실제 사용은 ERC721을 상속받고 함수에 인자를 넣어주면 된다.

function _mint(address to, uint256 tokenId) internal virtual {
        require(to != address(0), "ERC721: mint to the zero address");
        require(!_exists(tokenId), "ERC721: token already minted");

        _beforeTokenTransfer(address(0), to, tokenId);

        _balances[to] += 1;
        _owners[tokenId] = to;

        emit Transfer(address(0), to, tokenId);
    }

토큰 URL

• 토큰에 모든 정보를 담을 수 없으니(가스비 때문), 토큰의 정보를 다른곳에 저장해놓고 그 정보의 URL을 넣어주어, 토큰에 메타데이터를 넣어준다.
  (메타데이터를 사용하는 방식이 마치 데이터베이스가 데이터를 저장하는 방식과 매우 흡사하다고 생각한다. 앞부분만 떼어놓고 실제 뒤에 큰 정보는 연결해놓고 사용하는 느낌)

function tokenURI(uint256 tokenId) public view virtual override returns (string memory) {
        require(_exists(tokenId), "ERC721Metadata: URI query for nonexistent token");

        string memory baseURI = _baseURI();
        return bytes(baseURI).length > 0
            ? string(abi.encodePacked(baseURI, tokenId.toString()))
            : '';
    }

토큰 테스트

컨트랙트를 다시 재배포하고 실행하였다.

• mint함수를 통한 토큰 생성
  성공적으로 발행이 되었다면 영수증을 발행한다
  

• 토큰 전체 개수 확인하기
  토큰의 전체 개수를 확인해보면 1개로 나온다.
  

토큰 중복 테스트

컨트랙트 methods안에 이미 구현되어있는 함수를 이용해 중복테스트를 하였다.

토큰 메타 데이터

실제 블록체인을 이용할때는 토큰의 해쉬값만 사용하고 데이터는 메타 데이터에 사용하는데 IPFS라는 분산 네트워크를 사용해 데이터를 저장한다.

https://ipfs.io/#why

메타데이터를 저장하고 받아온 해쉬값이다.

try{
      const metaData = this.getERC721MetadataSchema(videoId,title, `https://img.youtube.com/vi/${videoId}/mqdefault.jpg`);
      var res = await ipfs.add(Buffer.from(JSON.stringify(metaData)));
      alert(res[0].hash);
    }catch(err) {
      console.error(err);
      spinner.stop();
    }

프론트 토큰 생성 및 가스비 대납

프론트에서 토큰 생성로직은 크게 3가지로 나뉜다.

1. 메타데이터생성
2. ipfs에 업로드
3. 컨트랙트의 mintYTT함수 실행하기

먼저 sender로 로그인한 사용자의 계정을 담아오고, feePayer에 배포 및 대납을 해줄 컨트랙트 계정을 담아온다.

klaytn 네트워크에 가스비를 대신 납부해줄 대납 컨트랙트를 적고 트랜잭션을 보낸다.
트랜잭션이 성공하면 recipt.transactionHash에 영수증이 담긴다.

mintYTT: async function (videoId, author, dateCreated, hash) {    
    const sender = this.getWallet();
    const feePayer = cav.klay.accounts.wallet.add('0xb49458083fbe40c2b0f91f413236e9261e8c6d978701e88a78598be7a773c28c')

    // using the promise
    const { rawTransaction: senderRawTransaction } = await cav.klay.accounts.signTransaction({
      type: 'FEE_DELEGATED_SMART_CONTRACT_EXECUTION',
      from: sender.address,
      to:   DEPLOYED_ADDRESS,
      data: yttContract.methods.mintYTT(videoId, author, dateCreated, "https://ipfs.infura.io/ipfs/" + hash).encodeABI(),
      gas:  '500000',
      value: cav.utils.toPeb('0', 'KLAY'),
    }, sender.privateKey)

    cav.klay.sendTransaction({
      senderRawTransaction: senderRawTransaction,
      feePayer: feePayer.address,
    })
    .then(function(receipt){
      if (receipt.transactionHash) {
        console.log("https://ipfs.infura.io/ipfs/" + hash);
        alert(receipt.transactionHash);
        location.reload();
      }
    });
  },   

사용자가 가스비를 부담하는데 무리가 있으니 커뮤니티 차원에서 일단 가스비를 대납하는 방식으로 진행한다.

사용자 토큰 확인하기

사용자가 어떤 토큰을 가지는지 확인하기 위해선 ERC721Enumerable을 이용한다.
ERC721enumerable에 구현되어있는 tokenOfOwnerByIndex함수를 이용해 계정 토큰을 불러올 수 있다. 내부적으론 사용자 토큰을 배열로 저장해놓고 반복문을 돌면서 필요한 토큰을 반환한다.

https://github.com/ethereum/EIPs/blob/master/EIPS/eip-721.md

토큰을 mint 했으면 UI에 표시하기 위해 메타데이터로 ipfs에 올라가 있는 데이터를 받아와 UI로 보여주는 작업을 해야한다.

renderMyTokens: function (tokenId, ytt, metadata) {    
    var tokens = $('#myTokens');
    var template = $('#MyTokensTemplate');
    template.find('.panel-heading').text(tokenId);
    template.find('img').attr('src', metadata.properties.image.description);
    template.find('img').attr('title', metadata.properties.description.description);
    template.find('.video-id').text(metadata.properties.name.description);
    template.find('.author').text(ytt[0]);
    template.find('.date-created').text(ytt[1]);

    tokens.append(template.html());
  },

토큰 확인

토큰 사고팔기 컨트랙트

TokenSales 컨트랙트를 만들고 토큰을 사고파는 컨트랙트 로직을 작성하고 가나슈 환경에 배포하였다.

토큰 판매 로직

토큰 소유자를 불러오고 토큰 소유자가 함수를 호출했는지 유효성 검사를 한다.
그리고 제시한 가격이 0보다 큰지 유효성 검사를 하고, 토큰 소유자가 컨트랙트가 내 토큰을 사고팔수 있도록 했는지 확인하는 검사를 하고,
토큰 id에 토큰가격을 매핑한다.

function setForSale(uint256 _tokenId, uint256 _price) public {
    address tokenOwner = nftAddress.ownerOf(_tokenId);
    require(tokenOwner == msg.sender, "caller is not token owner");
    require(_price > 0, "price is zero or lower");
    require(nftAddress.isApprovedForAll(tokenOwner, address(this)), "token owner did not approve TokenSales contract");
    tokenPrice[_tokenId] = _price;
  }

토큰 판매를 걸어놨으면 토큰을 살 수 있게 로직을 만들어주어야 한다.
토큰 구매에 유효성 검사는 두가지가 있다.

1. 구매자가 클레이가 충분히 있어야 한다.
2. 토큰 판매자는 자신의 토큰을 구매할 수 없다.

위의 두가지 유효성 검사가 끝나면 판매자 계정으로 돈을 송금하고 구매자 계정으로 토큰을 전송하고 토큰 가격을 0원으로 바꾼다.

function purchaseToken(uint256 _tokenId) public payable {
    uint256 price = tokenPrice[_tokenId];
    address tokenSeller = nftAddress.ownerOf(_tokenId);
    require(msg.value >= price, "caller sent klay lower than price");
    require(msg.sender != tokenSeller, "caller is token seller");
    address payable payableTokenSeller = address(uint160(tokenSeller));
    payableTokenSeller.transfer(msg.value); // 판매자 계정으로 돈 송금
    nftAddress.safeTransferFrom(tokenSeller, msg.sender, _tokenId);
    tokenPrice[_tokenId] = 0;
  }

토큰 판매 취소

소유자는 자신이 판매로 올려놓은 토큰판매를 취소할 수 있어야 한다.
인자로 가지고 있는 토큰을 받고, 토큰의 가격을 0으로 만들어 더이상 판매하는 토큰이 아님을 작성한다.

function removeTokenOnSale(uint256 memory tokenIds) public {
    require(tokenIds.length > 0 , "tokenIds is empty");
    for(uint i = 0; i < tokenIds.length; i++){
      uint tokenId = tokenIds[i];
      address tokenSeller = nftAddress.ownerOf(tokenId);
      require(msg.sender == tokenSeller, "caller is not token seller");
      tokenPrice[tokenId] = 0;
    }
  }

토큰판매 UI

컨트랙트가 판매자의 토큰을 대신 팔수 있도록 approved를 해주고 isApproved로 승인을 받았는지를 받아온다

var isApproved = await this.isApprovedForAll(walletInstance.address, DEPLOYED_ADDRESS_TOKENSALES);

승인이 완료되고, 토큰 판매를 누르면 얼마에 팔지 KLAY를 적을 수 있다.

인자로 받아온 판매값을 통해 tokenSales 컨트랙트의 setForSale함수를 통해 컨트랙트에게 판매 권한을 제공한다.
물론 가스비는 대납 컨트랙트에서 대신 납부한다.

const { rawTransaction: senderRawTransaction } = await cav.klay.accounts.signTransaction({
      type: 'FEE_DELEGATED_SMART_CONTRACT_EXECUTION',
      from: sender.address,
      to:   DEPLOYED_ADDRESS_TOKENSALES,
      data: tsContract.methods.setForSale(tokenId,cav.utils.toPeb(amount, 'KLAY')).encodeABI(),
      gas:  '500000',
      value: cav.utils.toPeb('0', 'KLAY'),
    }, sender.privateKey)

    cav.klay.sendTransaction({
      senderRawTransaction: senderRawTransaction,
      feePayer: feePayer.address,
    })
    .then(function(receipt){
      if (receipt.transactionHash) {
        alert(receipt.transactionHash);
        location.reload();
      }
    });
    }catch(err){
      console.error(err);
      spinner.stop();
    }

승인이 완료되면 얼마에 팔고있다고 알려준다.

토큰 구매

판매토큰에 썻던 로직과 비슷하다. tokenSales 컨트랙트의 purchaseToken함수를 실행하고 인자를 넣어주면 된다.

 const { rawTransaction: senderRawTransaction } = await cav.klay.accounts.signTransaction({
      type: 'FEE_DELEGATED_SMART_CONTRACT_EXECUTION',
      from: sender.address,
      to:   DEPLOYED_ADDRESS_TOKENSALES, 
      data: tsContract.methods.purchaseToken(tokenId).encodeABI(),
      gas:  '500000',
      value: price,
    }, sender.privateKey)