[220517] 민팅한 이미지를 모아보는 마이페이지 만들기

민팅한 이미지를 모아보는 마이페이지 만들기

my-animal.tsx

import { Grid } from "@chakra-ui/react";
import React, { FC, useEffect, useState } from "react";
import AnimalCard from "../components/AnimalCard";
import { mintAnimalTokenContract } from "../web3Config";

// props에서 account를 내려줬으니까
interface MyAnimalProps {
    account: string;
}

// 내려준 account 받기
const MyAnimal: FC<MyAnimalProps> = ({account}) => {
    // 동물 리스트를 담을 state 생성
    // 동물의 타입만 담아 갈거니까 <string[]>
    const [animalCardArray, setAnimalCardArray] = useState<string[]>();

    // 새로 민팅했을때 이미지를 가져오던 단계와 같다
    const getAnimalTokens = async () => {
        try {

          // 민팅해서 갖고있는 nft 개수 확인
          const balanceLength = await mintAnimalTokenContract.methods
            .balanceOf(account)
            .call();
    
          // 마이페이지에 넣어줄 이미지 임시 배열
          const tempAnimalCardArray = [];
    
          // 민팅한 이미지를 가져올때는 가장 최근(마지막 index)것만 가져왔지만,
          // 지금은 모두 가져와야하기 때문에
          // 민팅한 tokenId를 index 0번부터 끝까지 for문으로 돌려서 가져옴
          for (let i = 0; i < parseInt(balanceLength, 10); i++) {
            // tokenId 확인하기
            const animalTokenId = await mintAnimalTokenContract.methods
              .tokenOfOwnerByIndex(account, i)
              .call();
            
            // tokenId가 갖고있는 값 확인하기
            const animalType = await mintAnimalTokenContract.methods
              .animalTypes(animalTokenId)
              .call();
    
            // 마이페이지에 넣을 이미지가 들어갈 임시 배열에 push
            tempAnimalCardArray.push(animalType);
          }
    
          // 완성된 배열을 담아주기
          setAnimalCardArray(tempAnimalCardArray);
        } catch (error) {
          console.error(error);
        }
      };
    
      useEffect(() => {
        if (!account) return;
    
        getAnimalTokens();
      }, [account]);
    
      return (
          // 한줄에 4개를 띄울것, 사이에 틈을 줄것.
        <Grid templateColumns="repeat(4, 1fr)" gap={8}>
          {animalCardArray &&
            animalCardArray.map((v, i) => {
                // {v} -> useState<string[]>에 있는 string 값
              return <AnimalCard key={i} animalType={v} />;
            })}
        </Grid>
      );
};

export default MyAnimal;

 

 

완성된 결과