React와 Web3의 만남-2

Web3.js로 특정 계정의 ERC721 토큰 목록을 가져오려면
ERC721에 정의된 totalSupply 함수를 사용하면 된다

totalSupply
: 해당 컨트랙트에서 발행된 토큰의 개수 리턴

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";

contract NFTs is ERC721URIStorage, Ownable, ERC721Enumerable {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;

    constructor() public ERC721("cozNFT", "NFT"){}

    function _beforeTokenTransfer(
        address from,
        address to,
        uint256 tokenId
    ) internal
      override(ERC721, ERC721Enumerable) {
        super._beforeTokenTransfer(from, to, tokenId);
    }

    function _burn(
        uint256 tokenId
    ) internal
      override(ERC721, ERC721URIStorage) {
        super._burn(tokenId);
    }

  function supportsInterface(bytes4 interfaceId)
        public
        view
        override(ERC721, ERC721Enumerable)
        returns (bool)
    {
        return super.supportsInterface(interfaceId);
    }
    function tokenURI(
        uint256 tokenId
    ) public view
      override(ERC721, ERC721URIStorage) returns (string memory) {
        return super.tokenURI(tokenId);
    }
    
    function mintNFT(address recipient, string memory tokenURI) public onlyOwner returns (uint256) {
        _tokenIds.increment();

        uint256 newItemId = _tokenIds.current();
        _mint(recipient, newItemId);
        _setTokenURI(newItemId, tokenURI);

        return newItemId;
    }
}

해당 코드를 Remix에서 작성 및 컴파일하고, 컨트랙트의 ABI를 복사
-> 특정 컨트랙트에 있는 함수를 사용하기 위해서는 컨트랙트의 ABI 필요

ABI를 복사했다면 src 파일 내에 erc721.js와 App.js 설정

// 경로: src/erc721.js
const erc721Abi = [] // 대괄호 안에 복사한 ABI를 넣어줌
export default erc721Abi;

// App.js
import './App.css';
import Web3 from 'web3';
import React, {useState, useEffect} from 'react';
import erc721Abi from './erc721Abi';

메타마스크 지갑과 연동하고 배포한다

mintNFT 함수로 NFT를 2개 민팅한다
나는 민정인데

recipient: 연결한 계정 주소
tokenURI: 이미지 링크

IPFS

나는 자꾸 IPFS 읽을 때마다 ISFP로 읽음 MBTI 지겹

나는 ipfs에 이미지를 올렸는데 Apple Silicon쓰는 사람은
CLI, GUI 중에서 그냥 GUI용으로 응용 프로그램을 받자

CLI로 설치하려다가 뭐가 계속 안돼서 그냥 GUI로 하니까 잘 됨,,

https://github.com/ipfs/ipfs-desktop/releases
위 링크에서 pfs-desktop.dmg 받으면 된다

1. 응용 프로그램을 이용해서 파일 업로드
2. Set Pinning으로 고정
3. Share link를 통해 링크 copy(tokenURI에 복붙)