OpenSea Clone (4)

Clone OpenSea_Create

6.NFT 생성

NFT를 전송, 조회, 보내려면 사실은 앞서 생성이 제일 먼저일 것이다!
웹에서 NFT를 생성해 보자!!👨🏻‍💻 😎

create.js -> ipfs-http-client

const onChange = async (e) => {
    const file = e.target.files[0];
    setImage(URL.createObjectURL(file));
    try {
      const added = await client.add(file);
      const url = `https://ipfs.infura.io/ipfs/${added.path}`;
      updateFileUrl(url);
    } catch (error) {
      console.log("Error uploading file: ", error);
    }
  };

• input을 통해 파일을 받으면 ipfs로 파일과 함께 POST요청을 보낸다.
  보낸 후 받은 request의 path값dmfh url을 얻어 useState를 통해 상태에 저장한다
  • 사용한 module은 ipfs-http-client이며 자세한 내용은 Infura 공식문서에서 확인할 수 있다

create.js

const createNewNFT = async () => {
    let tokenContract;
    let newTokenId;

    if (walletType === "eth") {
      tokenContract = await new web3.eth.Contract(erc721Abi, newErc721addr, {
        from: account,
      });
      tokenContract.options.address = newErc721addr;
      newTokenId = await tokenContract.methods.mintNFT(account, fileUrl).send();
    } else {
      tokenContract = await new caver.klay.Contract(erc721Abi, newKip17addr, {
        from: account,
      });
      tokenContract.options.address = newKip17addr;
      newTokenId = await tokenContract.methods.mintNFT(account, fileUrl).send({ from: account, gas: 0xf4240 });
    }
    const name = await tokenContract.methods.name().call();
    const symbol = await tokenContract.methods.symbol().call();
    const totalSupply = await tokenContract.methods.totalSupply().call();

    setIsMint(true);
  };

• 컨트랙트를 통해 NFT를 생성하는 것 역시 이전과 비슷하다 여기서도 Klaytn서버에서는 요청을 보낼 때 from과 gas가 필수적으로 필요했다

실제 실행 화면

마치며

사실 이 부분을 제일 해결하기 어려웠다 파일이 IPFS위에 있어야하는데, 그걸 웹에서 처리하는 방법을 찾기가 너무 힘들었다 그러나 Infura를 이용하는 것을 알려주신 분 덕분에 해결할 수 있었다 이 자릴 빌려서 감사하다는 말씀을 전하고 싶다...!!
마지막으로 정말 마치는 글을 작성하러 가야겠다 🥳🥳