[TIL] 2023-06-15

Today I Learned

---

[hardhat]

오늘은 이론시험을 봤고 리액트를 통해 web3.js로 블록 번호, 지갑 잔액을 출력하고 웹 소켓 프로토콜 통신과 web3.js의 함수인 subscribe을 통해 실시간으로 정보를 갱신하는 법과 window.ethereum으로 메타마스크와 연동하는 법을 배웠다.

---

web3.js

[실시간으로 갱신되지 않고 그 시점의 블록넘버를 출력하는 코드]

import { useEffect, useState } from "react";
import "./App.css";
import Web3 from "web3";
function App() {
  const [blockNum, setblockNum] = useState();
  const web3 = new Web3(
    "wss://goerli.infura.io/ws/v3/{apiKey}"
  );
  useEffect(() => {
    async function subscribeBlock() {
      var blockNumber = await web3.eth.getBlockNumber();
      setblockNum(Number(blockNumber));
    }
    subscribeBlock();
  });
  return (
    <div>
      <h2>현재 블록 넘버: {blockNum}</h2>
    </div>
  );
}
export default App;

-> 먼저 infura에서 제공하는 endpoints를 넣어 새로 선언해주고 useState로 블록넘버에 관한 상태 관리를 해준다.
web3.js의 getBlockNumber를 통해 setblockNum에 담아준다.
여기서 주의해야 할 점은 getBlockNumber()의 출력값의 자료형이 bigInt이므로 숫자뒤에 n이 붙는다.
따라서 그냥 출력하면 안되기때문에 Number()로 감싼 뒤 출력해야 똑바로 나온다.

[블록 넘버를 실시간으로 갱신해주는 코드]

  useEffect(() => {
    async function subscribeBlock() {
      const subscription = await web3.eth.subscribe("newHeads");
      subscription.on("data", async (blockheader) => {
        console.log("Number of New Block: ", blockheader.number);
        setblockNum(Number(blockheader.number));
      });
    }
    subscribeBlock();
  });

-> subscription에 subscribe("newHeads")로 선언해주는데 여기서 newHeads는 꼭 이거로 해줘야한다.
그럼 실시간으로 블록 넘버가 바뀌는 것을 확인할 수 있다.

[블록 번호, 지갑잔액 실시간으로 갱신해주는 코드]

  const privateKey =
    "";
  const account = web3.eth.accounts.privateKeyToAccount(privateKey).address;
  useEffect(() => {
    async function getBlock() {
      const blockNumber = await web3.eth.getBlockNumber();
      setblockNum(Number(blockNumber));
    }
    getBlock();
  });
  useEffect(() => {
    async function subscribeBlock() {
      const subscription = await web3.eth.subscribe("newHeads");
      subscription.on("data", async (blockheader) => {
        console.log("Number of New Block: ", blockheader.number);
        setblockNum(Number(blockheader.number));
      });
    }
    subscribeBlock();
    async function getBalance() {
      const balance = await web3.eth.getBalance(account);
      console.log(balance);
      setBalance(Number(balance));
    }
    getBalance();
  });
  return (
    <div>
      <h2>현재 블록 넘버: {blockNum}</h2>
      <h2>
        {account}'s balances: {balance}
      </h2>
    </div>
  );
}
export default App;

-> 여기서는 개인키와 지갑주소를 선언해주고 잔액과 블록넘버를 보여주는 코드를 작성하였다.

connect with metamask

[메타마스크 연결하는 코드]

function App() {
  const [account, setAccount] = useState();
  const [balance, setBalance] = useState();
  const connect = async () => {
    if (window.ethereum) {
      try {
        const res = await window.ethereum.request({
          method: "eth_requestAccounts",
        });
        console.log(res);
        setAccount(res[0]);
        const _balance = await window.ethereum.request({
          method: "eth_getBalance",
          params: [res[0].toString(), "latest"],
        });
        setBalance(Number(_balance));
      } catch (error) {
        console.log(error);
      }
    } else {
      console.log("install metamask");
    }
  };
  connect();
  return (
    <form>
      <div>
        <h2>
          {account}'s balances: {balance}
        </h2>
      </div>
    </form>
  );
}

-> window.ethereum 으로 메타마스크에 연결한다.