[220518] 가격 등록 하기

my-animal.tsx

<Grid templateColumns="repeat(4, 1fr)" gap={8} mt={4}>
    {animalCardArray &&
        animalCardArray.map((v, i) => {
        return <AnimalCard key={i} animalType={v} />;
        // return 이후를 수정한다.
    })}
</Grid>

 

 

components/MyAnimalCard.tsx 생성

import {
    Box,
    Button,
    Input,
    InputGroup,
    InputRightAddon,
    Text,
  } from "@chakra-ui/react";
  import React, { FC } from "react";
  import { web3 } from "../web3Config";
  
  import AnimalCard from "./AnimalCard";
  
  // 구조를 만들때 타입스크립트에서 쓰이는 interface
  export interface IMyAnimalCard {
    animalTokenId: string;
    animalType: string;
    animalPrice: string;
  }
  
  // IMyAnimalCard를 상속받음
  interface MyAnimalCardProps extends IMyAnimalCard {
    saleStatus: boolean;
    account: string;
  }
  
  const MyAnimalCard: FC<MyAnimalCardProps> = ({
    animalTokenId,
    animalType,
    animalPrice,
    saleStatus,
    account,
  }) => {
    return (
      <Box textAlign="center" w={150}>
        <AnimalCard animalType={animalType} />
        <Box mt={2}>
          {animalPrice === "0" ? (
            <div>판매 버튼</div>
          ) : (
            <Text d="inline-block">{web3.utils.fromWei(animalPrice)} Matic</Text>
          )}
        </Box>
      </Box>
    );
  };
  
  export default MyAnimalCard;

 

 

 

 

판매상태로 전환

Sale Status : False [approved]를 클릭하면 판매승인 상태로 바뀌면서 Sale Status : True [Cancel]로 바뀐다.

 

 

 

 

판매 가격 입력하기

웨이(wei)는 이더리움에서 사용하는 암호화폐인 이더의 가장 작은 단위이다.

1 웨이(wei)는 10-18 이더(ether)와 같다. 다시 말하면, 1 이더(ether)는 1018 웨이(wei)와 같다.

나는 0을 15개 붙여주었다.

setForSaleAnimalToken > transact를 클릭하면 판매버튼 텍스트가 뜬다.

 

 

 

 

 

판매 등록 하기 전

 

 

 

가격 등록한 후

 

 

 

 

 

github

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