[220518] 판매 버튼 만들기

입력창에 가격을 입력하고 Sell 버튼을 누르면 가격이 등록되게 만들기

MyAnimalCard.tsx

import {
    Box,
    Button,
    Input,
    InputGroup,
    InputRightAddon,
    Text,
  } from "@chakra-ui/react";
  import React, { ChangeEvent, FC, useState } from "react";
  import { saleAnimalTokenContract, web3 } from "../web3Config";
  
  import AnimalCard from "./AnimalCard";
  
  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,
  }) => {
    // string은 아직 없는 값이라서 ("")로 초기화해줌. 안하면 에러생김.
    const [sellPrice, setSellPrice] = useState<string>("");
    const [myAnimalPrice, setMyAnimalPrice] = useState<string>(animalPrice);
  
    const onChangeSellPrice = (e: ChangeEvent<HTMLInputElement>) => {
      setSellPrice(e.target.value);
    };
  
    const onClickSell = async () => {
      try {
        if (!account || !saleStatus) return;
  
        const response = await saleAnimalTokenContract.methods
          .setForSaleAnimalToken(
            animalTokenId,
            web3.utils.toWei(sellPrice, "ether")
            // 블록체인으로 가격을 보낼때 toWei, "단위"
            // 다른 토큰단위를 사용하더라도 어쨌든 이더 기반이기 때문!
          )
          .send({ from: account });
          // 보낸다!! account에서 보낸다!!!!
  
        if (response.status) {
          setMyAnimalPrice(web3.utils.toWei(sellPrice, "ether"));
        }
      } catch (error) {
        console.error(error);
      }
    };

    return (
      <Box textAlign="center" w={150}>
        <AnimalCard animalType={animalType} />
        <Box mt={2}>
          {myAnimalPrice === "0"
          ? (
            <>
                <InputGroup>
                    <Input
                        type="number"
                        value={sellPrice}
                        onChange={onChangeSellPrice}
                    />
                    <InputRightAddon children="eth" />
                </InputGroup>
                <Button size="sm" colorScheme="green" mt={2} onClick={onClickSell}>
                    Sell
                </Button>
            </>)
          : (
            <Text d="inline-block">
                {/*
                    블록체인에서 가격을 가져올때 fromWei
                    fromWei 가격에 맞게 알아서 0을 붙여줌.
                */}
              {web3.utils.fromWei(myAnimalPrice)} eth 
            </Text>
          )}
        </Box>
      </Box>
    );
  };
  
  export default MyAnimalCard;

 

 

결과

 

 

 

github

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