[220518] 구매 버튼 만들기

components/SaleAnimalCard.tsx 생성

현재 판매중인 이미지와 텍스트를 가져오는 코드

import { Box, Button, Text } from "@chakra-ui/react";
import React, { FC } from "react";
import { web3 } from "../web3Config";
import AnimalCard from "./AnimalCard";

interface SaleAnimalCardProps {
  animalType: string;
  animalPrice: string;
}

const SaleAnimalCard: FC<SaleAnimalCardProps> = ({
  animalType,
  animalPrice,
}) => {
  return (
    <Box textAlign="center" w={150}>
      <AnimalCard animalType={animalType} />
      <Box>
        <Text d="inline-block">{web3.utils.fromWei(animalPrice)} Matic</Text>

        {/* 판매 버튼 */}
        <Button size="sm" colorScheme="green" m={2}>
	        Buy
        </Button>
      </Box>
    </Box>
  );
};

export default SaleAnimalCard;

 

 

이전에 있던 routes/sale.animal.tsx를 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";
// 생성한 SaleAnimalCard import
import SaleAnimalCard from "../components/SaleAnimalCard";

interface SaleAnimalProps {
  account: string;
}

const SaleAnimal: FC<SaleAnimalProps> = ({ account }) => {
  const [saleAnimalCardArray, setSaleAnimalCardArray] = 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 });
      }

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

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

  return (
    // 판매중인 목록을 가져와서 map처리로 이미지와 텍스트를 나열함.
    <Grid mt={4} templateColumns="repeat(4, 1fr)" gap={8}>
      {saleAnimalCardArray &&
        saleAnimalCardArray.map((v, i) => {
          return (
            <SaleAnimalCard
              key={i}
              animalType={v.animalType}
              animalPrice={v.animalPrice}
            />
          );
        })}
    </Grid>
  );
};

export default SaleAnimal;

 

 

 

 

결과

입력창이 사라지고 판매 버튼이 생긴것을 볼 수 있다.

 

 

 

 

github

https://github.com/h662/h662Animals-frontend/commit/78e918fa5b9b62562a92ef253995d68bc98cc49d