[220517] 판매 등록 하기

 

1.   setApprovedForAll에서 판매등록하기

 

setApprovedForAll 코드로 구현하기

// 판매등록하는 setApprovesForAll 기능 구현
    const onClickApproveToggle = async () => {
        try {
            if (!account) return; // 계정이 없으면 return

            const response = await mintAnimalTokenContract.methods
                .setApprovalForAll(saleAnimalTokenAddress, !saleStatus)
                .send({ from: account }); // 주의! call이 아니고 transact 기능 구현!! 

            if (response.status) { // 값이 변했다는 신호
                setSaleStatus(!saleStatus); // 판매상태 업데이트
            }
        } catch (error) {
        	console.error(error);
    }
};

 

 

 

 

 

2.   isApprovedForAll에서 boolean값 확인하기

 

owner에는 주인의 주소를, operator에는 팔아야할 이미지의 주소를 넣어야했다.

 

isApprovedForAll기능을 코드로 구현하기

// 판매상태를 가져오는 isApprovedForAll 기능 구현
const getIsApprovedForAll = async () => {
    try {
      const response = await mintAnimalTokenContract.methods
        .isApprovedForAll(account, saleAnimalTokenAddress)
        .call();

      if (response) {
        setSaleStatus(response); // 판매상태 업데이트
      }
    } catch (error) {
      console.error(error);
    }
};

 

 

 

 

 

판매 등록 기능 구현

My Animal 페이지

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


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

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

    // 새로 민팅했을때 이미지를 가져오던 단계와 같다
    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);
        }
      };

      // 판매상태를 가져오는 isApprovedForAll 기능 구현
      const getIsApprovedForAll = async () => {
        try {
          const response = await mintAnimalTokenContract.methods
            .isApprovedForAll(account, saleAnimalTokenAddress)
            .call();
    
          if (response) {
            setSaleStatus(response); // 판매상태 업데이트
          }
        } catch (error) {
          console.error(error);
        }
      };
    
      // 판매등록하는 setApprovesForAll 기능 구현
      const onClickApproveToggle = async () => {
        try {
          if (!account) return; // 계정이 없으면 return
    
          const response = await mintAnimalTokenContract.methods
            .setApprovalForAll(saleAnimalTokenAddress, !saleStatus)
            .send({ from: account }); // 주의! call이 아니고 transact 기능 구현!! 
    
          if (response.status) { // 값이 변했다는 신호
            setSaleStatus(!saleStatus); // 판매상태 업데이트
          }
        } catch (error) {
          console.error(error);
        }
      };
    
      useEffect(() => {
        if (!account) return;
    
        getIsApprovedForAll(); // 먼저 판매상태 확인하고
        getAnimalTokens(); // 동물 리스트를 가져옴
      }, [account]);
    
      return (
        <>
            <Flex alignItems="center">
                <Text display="inline-block">
                    {/* saleStatus : 판매상태 */}
                    Sale Status : {saleStatus ? "True" : "False"}
                </Text>
                
                {/*
                    판매상태 토글버튼 : 판매상태 승인 || 취소
                    판매 승인 버튼!
                */}
                <Button
                    size="xs"
                    ml={2}
                    colorScheme={saleStatus ? "red" : "blue"}
                    onClick={onClickApproveToggle}
                >
                    {saleStatus ? "Cancel" : "Approve"}
                </Button>
            </Flex>

            {/* 한줄에 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;

 

 

 

github

https://github.com/h662/h662Animals-frontend/commit/4dce170467ee5f3b748ab4078c69a8258cd4f73f