DAY : 26
React Day : 16

1. NFT 연동 (발행 후 화면에 출력)

• solidity 개념
  - balanceOf : (입력한 지갑주소) nft 잔고 개수 출력
  - tokenOfOwnerByIndex : 해당 nft의 token ID조회
  (방금 생성한 NFT의 메타데이터 주소 = 내가 가지고 있는 가장 마지막 NFT)
  
  
• 코드 작성 순서

1. balanceOf로 마지막 nft의 index값 알아내기 : parseInt(balanceOf) - 1
2. tokenOfOwnerByIndex로 해당 index의 token ID 조회
3. token ID에 해당하는 URI를 call을 통해서 가지고 옴
   
   App.jsx

if (!account) return;
const result = await nftContract.methods
 .mintNft("https://gateway.pinata.cloud/ipfs/QmTiJEjE44cfESVmTTRnGH2jMHGbjZ5xGDLqL1WJjWj6AC" )
 .send({
   from: account,
   });
if (!result.status) return;
      const balanceOf = await nftContract.methods.balanceOf(account).call();
      const tokenOfOwnerByIndex = await nftContract.methods
        .tokenOfOwnerByIndex(account, parseInt(balanceOf) - 1)
        .call();
      console.log(balanceOf);
      console.log(tokenOfOwnerByIndex);
      const tokenURI = await nftContract.methods
        .tokenURI(tokenOfOwnerByIndex)
        .call();
      console.log(tokenURI);
    } catch (error) {
      console.error(error);

2. Generative art

: 컴퓨터의 알고리즘을 바탕으로 무작위로 생성되는 디지털 아트의 한 형태

• 사용법

1. 레이어별 이미지 생성 (pixilart) _(파일명에 #숫자를 적어서 생성 비율을 정해줌)
2. https://github.com/HashLips 설치
   (code zip파일로 다운)
3. npm install (안되면 npm update)
4. 생성했던 이미지 layers폴더에 맞게 넣어줌
5. config.js 파일 수정

const layerConfigurations = [
  {
    growEditionSizeTo: 50,
    layersOrder: [
      { name: "Background" },
      { name: "Face" },
      { name: "Hat" },
      { name: "Eyes" },
    ],
  },

6. npm run build
   => build파일 안에 이미지 생성완료
   
7. Pinata(ipfs)에 생성된 이미지 폴더 업로드
8. //General metadata for Ethereum 부분 코드 작성
9. npm run update_info
10. Pinata(ipfs)에 update된 json 폴더 업로드
11. Remix에서 배포 후 mintNft
    MintNft.sol

    // SPDX-License-Identifier: MIT
    pragma solidity ^0.8.18;
    import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";
    import "@openzeppelin/contracts/utils/Strings.sol";
    contract MintNft is ERC721Enumerable {
       string public metadataUri;
       uint public totalNft;
       constructor(
           string memory _name, 
           string memory _symbol, 
           string memory _metadataUri, 
           uint _totalNft
       ) ERC721(_name, _symbol) {
           metadataUri = _metadataUri;
           totalNft = _totalNft;
       }
       function mintNft() public {
           require(totalNft > totalSupply(), "No more mint.");
           uint tokenId = totalSupply() + 1;
           _mint(msg.sender, tokenId);
       }
       function batchMint(uint _amount) public {
           for(uint i = 0; i < _amount; i++) {
               mintNft();
           }
       }
       function tokenURI(uint _tokenId) public override view returns(string memory) {
           return string(abi.encodePacked(metadataUri, '/', Strings.toString(_tokenId), '.json'));
       }
       function burnNFT(uint _tokenId) public {
           require(msg.sender == ownerOf(_tokenId), "Caller is not token owner.");
           _burn(_tokenId);
       }
    }

➕ NFT데이터 : 메타데이터,토큰 id,소유자
메타데이터 : 사진 같은 진짜 데이터 (ipfs에 저장한 데이터)

• 도전과제 (clone 사이트) https://konkrit.io/collection/0x8e45963aa5dec4681406818f14495acb4fae65ad