React와 Web3의 만남-3

이민정·2021년 12월 18일

NFT_dApp 블록체인

blockChain

목록 보기

5/10

결과물

~~강아즤 귀여워,, 고양이랑 강아지가 세상을 구한다,,,~~

함수 전체 코드

  const addNewErc721Token = async() =>{
    const tokenContract = await new web3.eth.Contract(erc721Abi, newErc721addr); // 컨트랙트의 ABI와 주소로 *컨트랙트 객체 생성*
    console.log(tokenContract);
    console.log(erc721Abi);

    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){
      const tokenOwner = await tokenContract.methods.ownerOf(tokenId).call();

      if(String(tokenOwner).toLowerCase() === account){
        const tokenURI = await tokenContract.methods.tokenURI(tokenId).call();
        setErc721list((prev)=>{
          return [...prev, {name, symbol, tokenId, tokenURI}];
        })
      }
    }
  }

addNewErc721Token()

web3.js를 사용해서 컨트랙트 객체를 생성하고
컨트랙트 객체를 통해 컨트랙트 함수를 호출하여 계정이 가지고 있는 토큰의 목록 저장

new web3.eth.Contract()으로 컨트랙트 객체 생성 후 tokenContract에 담기

컨트랙트 객체 생성을 위해 ABI와 address 필요

Contract 함수 실행

    const name = await tokenContract.methods.name().call();
    const symbol = await tokenContract.methods.symbol().call();
    const totalSupply = await tokenContract.methods.totalSupply().call();

Contract 객체를 통해 함수 실행 시, 뒤에 call()을 붙여 주어야 함

Owner의 토큰 찾기

    for(let tokenId of arr){
      const tokenOwner = await tokenContract.methods.ownerOf(tokenId).call();

      if(String(tokenOwner).toLowerCase() === account){
        const tokenURI = await tokenContract.methods.tokenURI(tokenId).call();
        setErc721list((prev)=>{
          return [...prev, {name, symbol, tokenId, tokenURI}];
        })
      }
    }

tokenContract.methods.tokenURI(tokenId).call()로 각 토큰의 오너 주소를 받아옴
tokenOwner와 account(dApp으로 연결한 계정 주소)가 일치하는지 확인
일치한다면 tokenContract.methods.tokenURI(tokenId).call()로 토큰의 URI 값 가져옴
erc721list에 토큰 정보 저장

컨트랙트 함수 호출은 비동기적으로 실행되므로
반복문을 사용하기 위해서는 for...of 사용

component

Component는 2가지

<TokenList>: 자신이 가지고 있는 모든 토큰의 목록 출력
<Erc721>: ERC721 토큰만 출력

TokenList Component

import Erc721 from "./Erc721";
import React from 'react';

function TokenList({erc721list}){
    return(
        <div className="tokenlist">
            <Erc721 erc721list={erc721list}/>
        </div>
    )
}

export default TokenList;

Erc721 Component

import React from 'react';

function Erc721({erc721list}){
    return(
        <div className="erc721list">
            {erc721list.map((token)=>{
                return (
                    <div className="erc721Token" key={token.tokenId}>
                        Name: <span className="name">{token.name}</span>
                        (<span className="symbol">{token.symbol}</span>)
                        <div className="nft">id: {token.tokenId}</div>
                        <img src={token.tokenURI} width={300}/>
                    </div>
                );
            })}
        </div>
    )
}
export default Erc721;