[220518] 판매페이지 작성하기

구현하려는 기능

onSaleAnimalTokenArray

인덱스 값을 넣었을때 몇번째인지(=tokenId) 값을 알려줌

 

 

getAnimalTokenPrice

tokenId를 입력하면 가격을 알려줌 (Wei 기준)

 

 

animalTypes

인덱스 값을 넣었을때 뽑은 카드가 몇번인지 알려줌.

 

 

animalTokenPrices

뽑은 카드 번호를 입력하면 얼마인지 알려줌. (중복값이 나오는 경우는 어떻게 나오지)

 

 

 

 

코드 구현

sale-animal.tsx

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

interface SaleAnimalProps {
  account: string;
}

const SaleAnimal: FC<SaleAnimalProps> = ({ account }) => {
  const [saleAnimalCard, setSaleAnimalCard] = useState<IMyAnimalCard[]>();

  const getOnSaleAnimalTokens = async () => {
    try {
      const onSaleAnimalTokenArrayLength = await saleAnimalTokenContract.methods
        .getOnSaleAnimalTokenArrayLength()
        .call();

      const tempOnSaleArray: IMyAnimalCard[] = [];

      for (let i = 0; i < parseInt(onSaleAnimalTokenArrayLength, 10); i++) {
        const animalTokenId = await saleAnimalTokenContract.methods
          .onSaleAnimalTokenArray(i) // 인덱스 값을 넣었을때 몇번째인지(=tokenId) 값을 알려줌
          .call();

        const animalType = await mintAnimalTokenContract.methods
          .animalTypes(animalTokenId) // 인덱스 값을 넣었을때 뽑은 카드가 몇번인지 알려줌.
          .call();

        const animalPrice = await saleAnimalTokenContract.methods
          .animalTokenPrices(animalTokenId) // 뽑은 카드 번호를 입력하면 얼마인지 알려줌. (Wei 기준)
          .call();

        tempOnSaleArray.push({ animalTokenId, animalType, animalPrice });
      }

      setSaleAnimalCard(tempOnSaleArray);
    } catch (error) {
      console.error(error);
    }
  };

  useEffect(() => {
    getOnSaleAnimalTokens();
  }, []);

  useEffect(() => {
    console.log(saleAnimalCard);
  }, [saleAnimalCard]);

  return <Grid mt={4} templateColumns="repeat(4, 1fr)" gap={8}></Grid>;
};

export default SaleAnimal;

 

 

 

 

실행 결과

 

 

 

 

github

https://github.com/h662/h662Animals-frontend/commit/f51cd2b7b1931ac142658ee60bcf1d476c62d6e6