블록체인 TIL-14Week-95Day

✅오늘 뭐했나?

• 이더리움의 거래 구조.

• RLP 복습 (한달전쯤 주말에 강사님 강의 영상으로 공부함.)

• 이론 TEST2

• REACT로 실시간 블록넘버 가져와서 보여주기.

• 현재 블록 번호(그 시점에서 멈춤)

import React from 'react';
import {useEffect, useState} from 'react';
import Web3 from 'web3';

function App() {
  const [a, setA] = useState();
  const web3 = new Web3("wss://goerli.infura.io/ws/v3/c9272c6607724aa08e2432def393cb43");
  
  useEffect(()=> {
    async function subscribeBlock() {
      var blockNumber = await web3.eth.getBlockNumber();
      console.log(typeof(blockNumber));
      setA(Number(blockNumber));
    }
    subscribeBlock();
  })

  return (
    <div>
      current block number is : {a} 
    </div>
  );
}

export default App;

• 현재 블록 번호(계속 갱신)

import React from 'react';
import {useEffect, useState} from 'react';
import Web3 from 'web3';

function App() {
  const [a, setA] = useState();
  const web3 = new Web3("wss://goerli.infura.io/ws/v3/apikey");
  
  useEffect(()=> {
    async function subscribeBlock() {
      const subscription = await web3.eth.subscribe('newHeads');
      subscription.on('data', async blockhead => {
        console.log("Number of New Block : ", blockhead.number);
        setA(Number(blockhead.number));
      })
    }
    subscribeBlock();
  })

  return (
    <div>
      current block number is : {a} 
    </div>
  );
}

export default App;

• 현재 블록 번호 및 지갑 잔고 (계속 갱신, 속도 일부 향상)

import React from 'react';
import {useEffect, useState} from 'react';
import Web3 from 'web3';

function App() {
  const [blockNumber, setblockNumber] = useState();
  const [balance, setBalance] = useState();

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

  const privateKey = '개인키';
  const account = web3.eth.accounts.privateKeyToAccount(privateKey).address;

  useEffect(()=> {
    async function getBlock() {
      const blockNumber = await web3.eth.getBlockNumber();
      setblockNumber(Number(blockNumber));
    }

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

    async function getBalance() {
      var balance = await web3.eth.getBalance(account);
      setBalance(Number(balance));
    }

    getBalance();
  })

  return (
    <div>
      <li>real time current block number is : {blockNumber} </li>
      <li>current Wallet : {account}</li>
      <li>current Balance : {balance}</li>
    </div>
  );
}

export default App;

• with Metamask (Metamask 연결하기)

import React, {useEffect, useState} from 'react';
import {ethers} from 'ethers';

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(err) {
        console.error(err);
      }
    } else {
      console.log("install metamask");
    }
  }

  connect()

  return (
    <div>
      <h3>current wallet address : {account}</h3>
      <h3>current balance : {balance}</h3>
    </div>
  );
}

export default App;

🌜하루를 마치며..

이론 테스트가 끝나고서부터 머리가 너무 아프기 시작했다. 그래서 오후 수업을 제대로 집중해서 못들은게 아쉽다. 이제 다음주부터 파트4 final에 들어가게 되는데 팀원들에게 큰 도움이 되지는 못하겠지만 작은 도움이라도 되도록 해야겠다.