[NFT 101] Frontend 개발

Frontend는 React로 구성되어 있고, 하단에 소스를 첨부하였다.  내용이 길어 주요 부분만 기록해 둔다.

 

const [account, setAccount] = useState<string>("");

  const getAccount = async() => {
    try {
      if (window.ethereum) {
        const accounts = await window.ethereum.request({
          method: "eth_requestAccounts"
        });
        setAccount(accounts[0]);
      }
    }
    catch (error) {
      console.log(error);
    }
  };

  useEffect(() => {
    getAccount();
  }, [account]);

<app.tsx, 계정 가져오기>

 

 

window.ethereum.request로 metamask에서 계정을 가지고 온다. 해당 함수를 실행하면 metamask가 실행된다. metamask에서 암호를 입력하면 계정을 가져오게 된다. 

 

const mintProductTokenAbi: AbiItem[] = [
	// remix에서 ABI를 가져 옵니다
];

const mintProductTokenAddress = "remix에서 address를 가져옵니다";

export const web3 = new Web3(window.ethereum);

export const mintProductTokenContract = new web3.eth.Contract(
  mintProductTokenAbi,
  mintProductTokenAddress
);

<web3config.ts, contract 가져오기>

 

remix에서 배포한 contract을 가져온다. address와 ABI를 가져오는 방법은 이전 포스트에서 설명했다. mintProductTokenContract를 통해 contract의 함수들을 실행할 수 있다.

 

const balanceLength = await mintProductTokenContract.methods.balanceOf(account).call();

      if (balanceLength === "0") return;
      console.log(balanceLength);

      const tempProductCardArray: IMyProductCard[] = [];

      const response = await mintProductTokenContract.methods.getProdTokens(account).call();

      response.map((v: IMyProductCard) => {
        tempProductCardArray.push({
          productTokenId: v.productTokenId,
          serialNo: v.serialNo,
          productType: v.productType,
          lastOwner: v.lastOwner,
          lastPrice: v.lastPrice,
          price: v.price,
          repairedCount: v.repairedCount
        });
      });

      setProductCardArray(tempProductCardArray);

<main.tsx, 구매한 목록 가져오기>

 

위에서 설명한 대로, mintProductTokenContract을 통해 계약서를 통해 이루어진 계약의 모든 데이터에 접근 가능하다. balanceOf를 통해 account에 해당하는 모든 구매 목록의 갯수를 가져온다. getProdTokens는 계약서 내에 별도로 구현한 함수로 아래의 형식을 갖고 있다. 자세한 구현은 이전 포스팅([NFT 101] Contract 개발 (tistory.com))을 참고한다. 목록을 하나하나 가져오지 않고 별도의 함수로 만든 이유는 블록체인의 속도가 느리기 때문이다. 목록을 한꺼번에 만들어 가져올 수 있도록 했다. 

 

function getProdTokens(address _prodTokenOwner) view public returns (ProdTokenData[] memory)

 

이어지는 코드들은 목록들을 UI에 표시하기 위해, 구조체 형태의 array에 목록들을 담는 과정이다.

 

나머지 코드들은 React UI를 표시하기 위한 부분으로 포스팅 범위에 벗어나서 아래의 코드를 가져가서 테스트 해 보면 된다. 이전 포스팅에서와 같이 계약서를 배포해 minting까지 마친 후, 아래 zip파일이 풀린 디렉토리에서 'npm run start'를 실행하면 3000번 포트로 프론트엔드가 수행된다. 수행되는 브라우저에는 metamask extension이 설치되어 있어야 한다. 

 

frontend.zip

0.84MB