recordNFT - 적용

react에 적용하는 것을 기준으로 설명하겠습니다. 

 

recordNFT 셋팅

1. src/Contract안에 RecordNFT.json을 생성해주시길 바랍니다. Contract 폴더가 없다면 새로 생성해주시길 바랍니다. 

2. RecordNFT.json에 RecordNFT abi 정보를 넣습니다.

{
  "abi": [
    {
      "inputs": [],
      "stateMutability": "nonpayable",
      "type": "constructor"
    },
    {
      "anonymous": false,
      "inputs": [
        {
          "indexed": true,
          "internalType": "address",
          "name": "from",
          "type": "address"
        },
        {
          "indexed": true,
          "internalType": "address",
          "name": "to",
          "type": "address"
        },
        {
          "indexed": true,
          "internalType": "uint256",
          "name": "tokenId",
          "type": "uint256"
        }
      ],
      "name": "Transfer",
      "type": "event"
    },
    {
      "inputs": [
        {
          "internalType": "string",
          "name": "_recordInfo",
          "type": "string"
        }
      ],
      "name": "createRecordNFT",
      "outputs": [
        {
          "internalType": "uint256",
          "name": "",
          "type": "uint256"
        }
      ],
      "stateMutability": "nonpayable",
      "type": "function"
    },
    {
      "inputs": [
        {
          "internalType": "uint256",
          "name": "tokenId",
          "type": "uint256"
        }
      ],
      "name": "getRecord",
      "outputs": [
        {
          "components": [
            {
              "internalType": "uint256",
              "name": "tokenId",
              "type": "uint256"
            },
            {
              "internalType": "address",
              "name": "owner",
              "type": "address"
            },
            {
              "internalType": "string",
              "name": "recordInfo",
              "type": "string"
            }
          ],
          "internalType": "struct RecordNFT.Record",
          "name": "",
          "type": "tuple"
        }
      ],
      "stateMutability": "view",
      "type": "function"
    },
    {
      "inputs": [
        {
          "internalType": "uint256",
          "name": "tokenId",
          "type": "uint256"
        }
      ],
      "name": "getRecordInfo",
      "outputs": [
        {
          "internalType": "string",
          "name": "",
          "type": "string"
        }
      ],
      "stateMutability": "view",
      "type": "function"
    },
    {
      "inputs": [],
      "name": "name",
      "outputs": [
        {
          "internalType": "string",
          "name": "",
          "type": "string"
        }
      ],
      "stateMutability": "view",
      "type": "function"
    }
  ]
}

3. recordNFT를 사용하고자하는 페이지에 web3 및 RecordNFT를 import해서 셋팅합니다.

import Web3 from "web3";
import RecordNFT from "../../../../Contract/RecordNFT.json";

function DetailWaitFunding() {

  const web3 = new Web3(Web3.givenProvider || "http://localhost:8545");

  const recordNFT = new web3.eth.Contract(
    RecordNFT.abi,
    [recordNFT address] // 예를 들어서 "0x234"
  );

추가 설명) 

• RecordNFT는 2번에 RecordNFT.json 위치를 찾아서 연결하는 것이기 때문에 제가 연결한 위치와 다를 수 있으니 정확한 위치에 연결해주시길 바랍니다. 
• [recordNFT address] 는 제가 설명한 recordNFT - 배포 및 address 확인 에서 설명한 내용 보시면 이해하실 수 있습니다.

create recordNFT 

• 설명) 해당 input에 내용을 입력하고 create record NFT를 클릭하면 적은 내용이 nft에 저장되는 것을 확인하실 수 있습니다. polygon 기준으로 설명하면 전에 설명 드렸던 recordNFT 배포 및 address 확인 방법에서 tx hash로 확인하시면정보를 저장한 블록이 생성된 것을 확인하실 수 있습니다. 다만 저장한 정보는 getRecord하위 메소드 이용해서 볼 수 있습니다. 

import { React, useState } from "react";
import Web3 from "web3";
import RecordNFT from "../../../../Contract/RecordNFT.json";

function DetailWaitFunding() {

  const web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
  const [recordInfo, setRecordInfo] = useState("");
  const [tokenId, setTokenId] = useState("");
  const recordNFT = new web3.eth.Contract(
    RecordNFT.abi,
    [recordNFT address] // 예를 들어서 "0x234"
  );
  // record 생성
  const createRecord = async () => {
    const accounts = await web3.eth.requestAccounts();
    const result = await recordNFT.methods
      .createRecordNFT(recordInfo)
      .send({ from: accounts[0] });
    setTokenId(result.events.Transfer.returnValues.tokenId);
  };
  
  return(
  <>
  	<input
       type="text"
       placeholder="Enter Record Info"
       value={recordInfo}
       onChange={(e) => setRecordInfo(e.target.value)}
     />
    <button onClick={createRecord}>Create Record NFT</button>
  </>
  )

 

get recordNFT

• 설명) 해당 input을 작성하기 위해서는 먼저 create를 진행을 해야하고 가장 첫번째 내용을 가지고 올려면 1을 입력하면 ul 안에 해당 정보를 가지고 옵니다. 

import { React, useState } from "react";
import Web3 from "web3";
import RecordNFT from "../../../../Contract/RecordNFT.json";

function DetailWaitFunding() {

  const web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
  const [recordInfo, setRecordInfo] = useState("");
  const [tokenId, setTokenId] = useState("");
  const [recordOwner, setRecordOwner] = useState("");
  const [recordList, setRecordList] = useState([]);
  
  const recordNFT = new web3.eth.Contract(
    RecordNFT.abi,
    [recordNFT address] // 예를 들어서 "0x234"
  );
  // getRecordInfo
  const getRecordInfo = async () => {
    const result = await recordNFT.methods.getRecordInfo(tokenId).call();
    console.log(result);
  };
  const getRecord = async () => {
    const result = await recordNFT.methods.getRecord(tokenId).call();
    setRecordOwner(result.owner);
    setRecordList([...recordList, result]);
  };
  return(
  <>
    <input
       type="text"
       placeholder="Enter Token ID"
       value={tokenId}
       onChange={(e) => setTokenId(e.target.value)}
     />
     <button onClick={getRecordInfo}>Get Record Info</button>
     <button onClick={getRecord}>Get Record</button>
        <h2>Record List</h2>
        <ul>
        {recordList.map((record, index) => (
            <li key={index}>
               Token ID: {record.tokenId}, Owner: {record.owner}, Info:{" "}
               {record.recordInfo}
             </li>
         ))}
        </ul>
  </>
  )

• 1번에 해당영역은 getRecordInfo 함수에 이벤트를 발생시킵니다. await recordNFT.methods.getRecordInfo(tokenId).call()이 의미하는 것은 recordNFT 블록체인에 저장된 데이터를 가지고 온다는 의미인데 블록단위로 저장되기 때문에 데이터를 찾을려면 해당 tokenId를 기억하고 있어야합니다. 그렇기 때문에 tokenId를 따로 받아서 db에 관리할 수 있습니다. 
• 2번에 해당영역은 1번과 동일하고 정보를 어떻게 가져오는 지 보여주고 있습니다.