[TIL] 2023-06-26 DAY64

---

Project

GIT 주소
https://github.com/dowoo303/SOLIDITY
https://github.com/dowoo303/hardhat

---

오늘 배운것들

1. NFT 데이터 변경법(remix)
2. react+web3
3. ethers 실습
4. react에서 ethers와 web3 차이점
5. liquidity pool 만들기 실습

각종 팁

회고

---

💻 Solidity 코딩

✅ NFT데이터 변경법

tokenURI를 이용하여 NFT 상태변경

🟥 코드

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

import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";
import "@openzeppelin/contracts/utils/Strings.sol";

// 변경가능한 NFT
contract Changeable is ERC721Enumerable {
    string public before_URI;
    string public after_URI;

    mapping(uint => bool) public status;

    constructor(string memory b_uri, string memory a_uir) ERC721("Changeable", "CH") {
        before_URI = b_uri;
        after_URI = a_uir;
    }

    function setTokenStatus(uint _number, bool _status) public {
        status[_number] = _status;
    }

    function mintNFT(uint _ID) public {
        _mint(msg.sender, _ID);     // 1, 2, 3 mint
    }

    function tokenURI(uint _ID) public override view returns(string memory) {
        if(status[_ID] == false) {
            return string(abi.encodePacked(before_URI, '/', Strings.toString(_ID), '.json'));
        } else {
            return string(abi.encodePacked(after_URI, '/', Strings.toString(_ID), '.json'));
        }
    }
}

---

✅ react+web3

메타마스크에서 가스 오류가 발생했을 때 대부분의 이유는 abi, 코드 문제이다.

msg.value가 존재하면 항상 어떤 일정한 값을 같이 넣어야 오류가 나지 않는다.

🟥 코드

import React, { useEffect, useState } from "react";
import Web3 from "web3";
import ethers from "ethers";
import abi from "./abi.json";

function App() {
  const [account, setAccount] = useState();

  const web3 = new Web3(
    "wss://goerli.infura.io/ws/v3/"
  );
  const web3_2 = new Web3(
    "https://goerli.infura.io/v3/"
  );

  const c_addr = "0x164fBaD2854187EEB7e26e79E8Bf4dA97977e095";
  const contract = new web3_2.eth.Contract(abi, c_addr);

  async function connect() {
    if (window.ethereum) {
      try {
        const res = await window.ethereum.request({
          method: "eth_requestAccounts",
        });
        setAccount(res[0]);
      } catch (err) {
        console.error(err);
      }
    } else {
      console.log("Install metamask");
    }
  }
  connect();

  async function mintNFT(e) {
    e.preventDefault();
    const data = new FormData(e.target);

    var _value = web3.utils.numberToHex(Number(1000000000000000));    // 16진수 변환

    await window.ethereum.request({
      method: "eth_sendTransaction",
      params: [
        {
          from: account,
          to: c_addr,
          value: _value,
          data: contract.methods.mintNFT(data.get("tokenID")).encodeABI(),
        },
      ],
    });
  }

  return (
    <div>
      <h1>NFT MINTING</h1>
      <h2>wallet address : {account}</h2>
      <form onSubmit={mintNFT}>
        <input type="text" name="tokenID"></input>
        <button type="submit">Mint</button>
      </form>
    </div>
  );
}

export default App;

---

✅ ethers

터미널에서 ethers 깔린 폴더로 이동

node 진입
var {ethers} = require('ethers')
var provider = new ethers.InfuraProvider(network="goerli")

var privateKey = '개인키'
var signer = new ethers.Wallet(privateKey, provider_goerli)

var account2 = '0x8f709f555c685da4D04703D66F0a986fcbA9a373'
var tx = {to : account2, value : 100000000000000000}
signer.sendTransaction(tx).then(console.log)
-> 오버플로우 오류 발생(10^17)(16승 이상은 오버플로우 오류)

var tx = {to : account2, value : 10000000000000000n} // n(빅넘버)추가
> var Txreceipt = signer.sendTransaction(tx).then(console.log)
-> 성공

---

✅ react에서 ethers와 web3 비교

web3에서는 블록넘버를 가져오면 뒤에 n(빅넘버)로 반환하지만 ethers는 번호만 반환한다.

메타마스크와 붙은 것들은 네트워크가 변경되면 바로 블록넘버 네트워크에 따라 변경된다.

-> web3는 모두 빅넘버로 반환된다.

---

✅ liquidity pool 만들기 실습

ERC20을 이용하여 1:1인 CSMM형식을 따르는 liquidity pool을 만들어본다.