NFT 마켓플레이스 개발(OpenSea 클론 코딩) - 3

4. 다른 지갑으로 NFT 전송

앞서 myPage에서 연결된 지갑에 있는 NFT 목록을 확인할 수 있었다.
이번에는 내 지갑에 있는 NFT를 다른 계정(지갑)으로 전송하는 법을 알아보자.

4-1. sendToken

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 목록을 클릭하면 다른 지갑으로 전송할 수 있도록 화면을 설계했다.
전송할 지갑 주소를 입력 후 전송 버튼을 클릭하면 sendToken 함수가 실행되며 전송이 되는데,
walleyType에 따라 해당 이더리움/클레이튼의 컨트랙트를 불러와 transferFrom 함수로 전송되도록 구현하였다.

4-2. 시연

다른 계정으로 NFT 전송

회고

첫번째 프로젝트 마치고 나니 아쉬운 점이 많았다.
일단 의욕적으로 많은 기능 구현을 해보려 했는데 좀 더 구체적인 계획을 세우면 더 좋은 결과가 있지 않았을까 싶다.
역시나 실제 구현 가능 여부에 따라 단계 별로 초기 계획을 잘 세우는게 중요하다..!
시작이 반이라고 이건 시작만 하면 프로세스의 반이 끝난다는 것이 아니라 그만큼 초기 계획이 중요하다는 것을 다시 한번 깨달았다.

그래도 프로젝트를 처음부터 빌드하고 기능 구현을 위해 공식문서도 찾아보며 조금은 성장한 것 같다.(경험치 획득!)
다음 프로젝트는 팀원들과 계획 단계에서부터 잘 조율하여 더 만족할만 한 성과를 내보도록 하자!