[220518] 최적화를 위한 리팩토링하기

MintAnimalToken.tsx

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";
import "SaleAnimalToken.sol";
// MintAnimalToken이 SaleAnimalToken보다 먼저 생성되므로
// 자동적으로 가져올 수 없으니 임의로 import 해주기

contract MintAnimalToken is ERC721Enumerable {
    constructor() ERC721("h662Animals", "HAS") {}
    SaleAnimalToken public saleAnimalToken; // 가져온 SaleAnimalToken 전역화

    mapping(uint256 => uint256) public animalTypes;

	// 값을 한꺼번에 보낼 수 있도록 묶음
    struct AnimalTokenData {
        uint256 animalTokenId;
        uint256 animalType;
        uint256 animalPrice;
    }

    function mintAnimalToken() public {
        uint256 animalTokenId = totalSupply() + 1;

        uint256 animalType = uint256(
            keccak256( 
                abi.encodePacked(
                    block.timestamp, msg.sender, animalTokenId
                )
            )
        ) % 5 + 1;
        
        animalTypes[animalTokenId] = animalType;
        _mint(msg.sender, animalTokenId);
    }

    // view : 읽기전용, 블록체인의 값을 변화시키지 않으면 view를 사용함
    function getAnimalTokens(address _animalTokenOwner) view public returns (AnimalTokenData[] memory) {
        uint256 balanceLength = balanceOf(_animalTokenOwner);

        // balanceLength가 0이면 토큰이 없다는것
        require(balanceLength != 0, "Owner did not have token.");

        AnimalTokenData[] memory animalTokenData = new AnimalTokenData[](balanceLength);

        for(uint256 i = 0; i < balanceLength; i++) {
            uint256 animalTokenId = tokenOfOwnerByIndex(_animalTokenOwner, i);
            uint256 animalType = animalTypes[animalTokenId];
            uint256 animalPrice = saleAnimalToken.getAnimalTokenPrice(animalTokenId);
            // SaleAnimalToken.tsx에 getAnimalTokenPrice를 만들어준다

            animalTokenData[i] = AnimalTokenData(animalTokenId, animalType, animalPrice);
        }

        return animalTokenData;
    }
	
    // SaleAnimalToken을 사용하는 함수
    function setSaleAnimalToken(address _saleAnimalToken) public {
        saleAnimalToken = SaleAnimalToken(_saleAnimalToken);
    }
}

 

 

 

 

SaleAnimalToken.tsx

MintAnimalToken에서 getAnimalTokenPrice를 사용하기 위해 만들어주는 함수.

function getAnimalTokenPrice(uint256 _animalTokenId) view public returns(uint256){
    return animalTokenPrices[_animalTokenId]; //mapping이니까 []를 준다
}

 

 

my-animal.tsx

산개해있던 axios await을 줄여서 백엔드와 가능한 적게 통신하도록 값을 묶었다.

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

interface MyAnimalProps { account: string; }

const MyAnimal: FC<MyAnimalProps> = ({ account }) => {
  const [animalCardArray, setAnimalCardArray] = useState<IMyAnimalCard[]>();
  const [saleStatus, setSaleStatus] = useState<boolean>(false);

  const getAnimalTokens = async () => {
    try {

      const balanceLength = await mintAnimalTokenContract.methods
        .balanceOf(account)
        .call();

      if (balanceLength === "0") return;
      const tempAnimalCardArray: IMyAnimalCard[] = [];

	  // 백과 통신하는 await axios
      const response = await mintAnimalTokenContract.methods
        .getAnimalTokens(account)
        .call();
	  
      // 한번에 통신을 끝낼 수 있도록 묶었다.
      response.map((v: IMyAnimalCard) => {
        tempAnimalCardArray.push({
          animalTokenId: v.animalTokenId,
          animalType: v.animalType,
          animalPrice: v.animalPrice,
        });
      });

      console.log(tempAnimalCardArray);

      setAnimalCardArray(tempAnimalCardArray);
    } catch (error) {
...

 

 

 

 

web3Config.tsx

새로 민팅한 정보들을 업데이트 해준다.

...
const mintAnimalTokenAbi: AbiItem[]=[새로 민팅한 ABI];
const saleAnimalTokenAbi: AbiItem[]=[새로 판매등록한 ABI];

const mintAnimalTokenAddress = "새로 민팅한 주소";
export const saleAnimalTokenAddress = "새로 판매 등록한 주소";
...

 

 

 

 

getAnimalTokens 정보 읽는 법

tokenId : 1 / 카드 : 5번 / 가격 : 0원

 

 

 

여기까지 했다면 이미 한번 실행했던 작업이라면 속도가 좀더 빠르게 진행된다.

 

 

 

 

github

https://github.com/h662/h662Animals-frontend/commit/4550fbacb99e41aba5b6874e052855d5b0ac0be2