OpenSea Clone (2)

Clone OpenSea_NFTs

3. 나의 NFT목록 확인

컨트랙트에 발급되어 있는 토큰들 중 연결되어 있는 주소 소유의 토큰들만을 조회할 수 있어야한다 이를 통해 추후에는 본인 소유의 토큰만 다른 지갑주소로 토큰을보낼 수 있도록 작업 할 예정이다

mynft.js

  useEffect(async () => {
    saveMyToken()
  }, []);

 const saveMyToken = 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();
    const totalSupply = await tokenContract.methods.totalSupply().call();
    let arr = [];
    for (let i = 1; i <= totalSupply; i++) {
      arr.push(i);
    }

    for (let tokenId of arr) {
      let tokenOwner = await tokenContract.methods.ownerOf(tokenId).call();
      if (String(tokenOwner).toLowerCase() === account) {
        let tokenURI = await tokenContract.methods.tokenURI(tokenId).call();
        setNftlist((prevState) => {
          return [...prevState, { name, symbol, tokenId, tokenURI }];
        });
      }
    }
    setIsLoading(false);
  };

• saveMyToken : walletType을 구분하여 지갑주소를 연결할 때 저장한 상태에 따라 _app.js에서 관리하는 web3와 caver를 받아와서 컨트랙트에서 받아온 ABI와 컨트랙트 블록 주소값을 이용해서 tokenContract에 객체를 생성해 준다
  이를통해 NFT의 속성과 총 개수를 가져온다 총 개수 만큼 반복문을 실행해 토큰의 아이디를 통해 현재 연결된 주소값과 비교해서 자신의 소유일 경우에만 저장한다
  그 후 이 저장된 리스트로 map()을 이용해 화면에 출력해준다

실제 실행 화면

2. 다른 사람들의 NFT 확인

다른 사람의 NFT를 확인하는 것은 위에 나의 NFT목록을 확인하는것을 반대로 하면 된다,
나의 지갑주소로 소유하지 않은 토큰들의 목록을 생성하므로 코드는 간단하게만 작성한다

explore.js

 for (let tokenId of arr) {
      let tokenOwner = await tokenContract.methods.ownerOf(tokenId).call();
      if (String(tokenOwner).toLowerCase() !== account) {
        let tokenURI = await tokenContract.methods.tokenURI(tokenId).call();
        setNotMyToken((prevState) => {
          return [...prevState, { name, symbol, tokenId, tokenURI }];
        });
      }
    }

• 위에 함수와 비교하는 부분만 달라졌으며, 이 함수 역시도 페이지에 들어가면 useEffect를 통해 실행하여 리스트들을 map()으로 출력한다

실제 실행 화면

마치며

두 개의 기능은 한 가지 로직으로 구현 가능했다 남은 전송하기와, 발행하기는 이렇게 쉽게 해결되지 않을 것 같다.... 그래도 다음으로 넘어가 보쟈 😅😅