OpenSea Clone (3)

Clone OpenSea_Transfer

5.나의 NFT를 다른사람에게 전송

본인 소유의 토큰을 소유만 하는 것이 아닌 다른 사람들과 공유도 가능해야 더 나아가 판매도 가능할 것이다 그 기초인 전송을 먼저 구현해 보자!! 😳

/mynft/[id].js

const router = useRouter();
  const { id } = router.query;

  useEffect(async () => {
    const tokenContract = "";
    if (walletType === "eth") {
      tokenContract = await new web3.eth.Contract(erc721Abi, newErc721addr);
    } else {
      tokenContract = await new caver.klay.Contract(kip17Abi, newKip17addr);
    }
    const name = await tokenContract.methods.name().call();
    const symbol = await tokenContract.methods.symbol().call();
    let tokenURI = await tokenContract.methods.tokenURI(id).call();
    setToken({ name, symbol, id, tokenURI });
  }, []);

  const sendToken = async (tokenId) => {
    const tokenContract = "";
    if (walletType === "eth") {
      tokenContract = await new web3.eth.Contract(erc721Abi, newErc721addr, {
        from: account,
      });
      tokenContract.options.address = newErc721addr;
      tokenContract.methods
        .transferFrom(account, to, token.id)
        .send({
          from: account,
        })
        .on("receipt", (receipt) => {
          setTo("");
          router.push("/");
        });
    } else {
      tokenContract = await new caver.klay.Contract(kip17Abi, newKip17addr, {
        from: account,
      });
      tokenContract.options.address = newKip17addr;
      tokenContract.methods
        .transferFrom(account, to, token.id)
        .send({
          from: account,
          gas: 0xf4240, 
        })
        .on("receipt", (receipt) => {
          setTo("");
          router.push("/");
        });
    }
  };

• 내 정보를 볼 숫 있는 창에서 토큰을 클릭하면, 토큰의 상세정보창으로 이동하게 함으로 연결된 계정의 소유 NFT만 보낼 수 있는 창이 나타나도록 했으며, Next.js의 Router를 이용해 토큰의 id값을 가져와 컨트랙트의transferFrom을 실행한다. transferFrom은 보내는 주소, 받는 주소, 토큰의 id값을 인자로 받아서 실행하며 Klaytn은 Ethereum 기반이기 때문에 컨트랙트는 어렵지 않았지만 웹에서 send를 이용해 보낼 때 gas비를 필수로 지정해서 보내야 한다 실행 후 router.push("/") 를 통해 메인 페이지로 돌아간다

실제 실행 화면

마치며

먼저 Ethereum을 사용해서 구현 후 Kaikas를 추가했는데 gas비 문제가 당황스러웠다 처음엔 숫자를 넣어서 사용해 보았지만 너무 적다던지 범위를 벗어난다는 이유로 계속 오류가 발생했지만 공식문서에 있는 예시 코드속에서 hex단위의 "0xf4240"값을 찾을 수 있었고 찾아보니 십진수로는 백만이었지만, 아직까지 정확하게 고정 gas비가 어색했다 🤔
언젠가 Groud X에서 대학교에서 강의한 유튜브영상에서 들었던 기억이나서 찾아볼 생각이다.🧐
일단은 이 문제는 따로 생각해보고, 마지막으로 토큰생성을 하러 다음으로 넘어가보자!!😏😏