2023.10.25 웹3로 블록 조회 및 트랜잭션 찾기

1. 블록 채굴시 이를 이벤트로 받아 실시간으로 데이터를 업데이트

"use client";
import React, { useEffect, useState } from "react";
import Web3 from "web3";

declare global {
  interface Window {
    ethereum?: any;
  }
}
const Page = () => {
  const [user, setUser] = useState({
    account: "",
    balance: "",
  });
  const [web3, setWeb3] = useState<Web3>();

  const temp = async () => {
    console.log(web3);
    const data = await web3?.eth.subscribe(
      "newBlockHeaders",
      (error: Error, result: any) => {
        console.log("인식함");
        if (!error) {
          console.log(result);

          return;
        }

        console.error(error);
      }
    );
    data?.on("data", async (event) => {
      console.log(event);
      await getBlock();
    });
    data?.on("connected", function (subscriptionId) {
      console.log(subscriptionId);
    });
    data?.on("error", (err) => {
      throw err;
    });
  };

  const getBlock = async () => {
    await web3?.eth.getBlock("latest").then((data) => {
      console.log(data);
    });
  };

  useEffect(() => {
    if (!window.ethereum) {
      alert("지갑을 만드세요옹");
    } else {
      window.ethereum
        .request({
          method: "eth_requestAccounts",
        })
        .then(async ([data]: [string]) => {
          const tempWeb3 = new Web3(window.ethereum);
          setWeb3(tempWeb3);
          console.log("asd");

          setUser({
            account: data,
            balance: tempWeb3.utils.toWei(
              await tempWeb3.eth.getBalance(data),
              "ether"
            ),
          });
          console.log("유저의 계좌", data);
        });
    }
  }, []);
  useEffect(() => {
    temp();
  }, [web3]);

  return (
    <div>
      <button className="ring-2" onClick={temp}>
        asdasd
      </button>
    </div>
  );
};

export default Page;

• temp함수를 보면 subscribe메서드를 확인할 수 있는데, 이는 해당하는 이벤트를 구독(관찰)하는 메서드이다.
• newBlockHeaders 이벤트는 블록이 생성될 때 마다 실행되는 메서드를 정의 할 수 있다.
• 구독을 하였다면 on으로 이벤트를 감시하자. data이벤트가 해당하는 블록의 정보를 담고 있다.

2.해당 블록의 transaction hash를 받아오는 법

• getBlock함수를 보면 web3 라이브러리에 getBlock내장 함수를 사용하여 새로운 블록을 가져올 수 있다. latest는 가장 최근에 생성된 블록이며 반환되는 데이터는 다음과 같다

  baseFeePerGas
  :
  307225939822n
  difficulty
  :
  0n
  extraData
  :
  "0xd883010d04846765746888676f312e32312e33856c696e7578"
  gasLimit
  :
  30000000n
  gasUsed
  :
  16552654n
  hash
  :
  "0x356be8225ba6393c314bcc7d522dc3352e8213a799bc6e0556f7b1c09c9f00a7"
  logsBloom
  :
  "0x2c0000803010100c0040205409206f00d080708210000001c055402200480d20110004006060020200000912000800910002b40850300021002101230024422131c18614020400129900010802008200080110120184a01100004046210200082c00a04042002814028100a502420e90220074118400600440a0011046048200e41008000210203120201080500060240020830282848a2018098e808444402102080000010102226220800200090480004020120800000fd01a61480c032028040001028880001820c140850034000050200302110000a04000960408142060c492a00420008220024700012083084c88400128000002240100140882040000"
  miner
  :
  "0x455e5aa18469bc6ccef49594645666c587a3a71b"
  mixHash
  :
  "0x27400b1a2e9a0a4c8b297e2d423a60d2a1c99dd9d3e604314611a59cb8d83fdb"
  nonce
  :
  0n
  number
  :
  4558811n
  parentHash
  :
  "0x406010631c20bd0ca7b6a373b7e082710951382f1cd6783feff01209fbcf24ee"
  receiptsRoot
  :
  "0x79b13b0cb46f8b4f671e6d624407573dbb3113a91763a3a82af62d8261d22502"
  sha3Uncles
  :
  "0x1dcc4de8dec75d7aab85b567b6ccd41ad312451b948a7413f0a142fd40d49347"
  size
  :
  84401n
  stateRoot
  :
  "0xf0e8fd407d682e37b0f2e5eb668189ada4d6655780bc1dd38183ac4a0350cd64"
  timestamp
  :
  1698222528n
  totalDifficulty
  :
  17000018015853232n
  transactions
  :
  (81) ['0xc943ea1ad78b8f550c8d590345edc93fac5bc8bdd644f4905810a5e8825c84d7', '0x80a30d735f0f4ded454f28e75fb1cf9d89b5da10a187a4487303403a9f4a4588', '0x128893dfd7bd4999fb2dbf961401c2a40fc2e7646251f9d8cef655eea3d8b5eb', '0x81ddb98982b279a9ae19043734e049f1715c84e2ebe974f6ec1de5797ca5c380', '0xafd1886b838febe3aca64126e82e94d6870b652b3fe68f01de0eb4ee1461d126', '0xb8e525f9a5890e1ab55fbf96296445732a1d24b23d480ba9ac8853a9c7b8f608', '0x1c9299b8ea8b2fc8995da12f0bb0d418bf8b247d12ad1f9473e0db864e048b00', '0x8076a64f4b2fcf6442e8971ae4faac12237176d1b03953c58bbce649fd6a540e', '0x650d46df818f07f042365bd220812f461e8f24868e73c51cfcaf0fa04140ed91', '0xca5b989add4a30030d74fc9dc66fd177ad3026691788cf15782156a245358b76', '0x77e1b364a696409072b58f5f0269487ae8196bbe3343083809446fa44240f799', '0x512880ef038b5c99ac5c068707e59fcb2cee8073ebc58301788d7a26dadd379f', '0xf4fd31ca80a9292bf39956725a464229b1044fd603fca744cd081f81ce75a2fa', '0x0b831e9a698f8983a59693d31208a8ecf0b64d1b4c6da370ceb665cdc1a1f2f3', '0x602197c2285f7abccbddacf69c9e14cf8a0a50a867e45e8da05fbb93dc4c5123', '0x9cdb54ea7ecd9b8ec2d9734b21054b67e5113e7d811a1df69f433182245f93f5', '0xf89f4b7be7df1782b3ea71f83f5db94c5a2a1415e91b5efde579e64d692d7b2f', '0xb1d4eab4360cc2b49532da72aeaa834f7345e944c9a1f06c76bf7ed4e4524daf', '0xd8d737ac08f2cdd18a4817ddf7c7279d771c1a430d7d9a842beb7009a3b4f5f1', '0x819d9051e7f5fa4ff31f640137924295ed02f67f1c3796bdce4af491bcfd92a6', '0xba0b609203865e19e22f6db1901cbf3c79f965267af8d7d8b37331b11e17799f', '0x2cbbaad273954c25c39e379caf7d05fbccd95edce87f38efec70fc2746baf77f', '0x117d4328022c774f8888eeef7094515f50d62e035eb084f4c2ee1cee1dd515f9', '0x0443f66aca9343f9db0ed727bc80d8b9998c2b650e9822b9322ec2895d2be9a3', '0x87a6c25ae270c9158ab7f1d30ae42148a162445fe4aad20ad3969af11c20ddae', '0x85c74ca2c1aef051f4a302fa8a51155c84db3fbb1bfec0c425e535b4a045e83b', '0xc8333f6540570e2ede52dd719a454c8f2dd122f3007e3d18bdd0e95dbe25fa44', '0x5e63a05b3c207aa1c5c54fd2aef62dd5b309cea151f651c2851fe29cb3faada7', '0x35e95906bca1a8e05f690805882d60ca84f569700b307cc61f95711204240b25', '0x3a4076dc4e566039e7a48ba2ab7a3f0fee0be6863dd8264883ca6f9c3727a783', '0xcd12c14071f47fcd8d58d42e33d2a35789c9f04a348711bd74be40d40f979532', '0x2f9d7f77c11be30c9186cf67e674e0f41703202b5bc1c368c19648e4ecaf7b50', '0xb8d0826e31c26066404ccff42b38ae0921a3bee6587133a9df3136a4bbf6a4fc', '0xf0e2991b8c2bb51f312f73c1449acf9b28729dc8af4f140bc0568e8c870e06d0', '0xbccf3491ec853da41bf689fd17f1921c24b36de0c7b5412227ab1cc813255a98', '0x807abc1deb2374f0866ec226085e79873664a34bd5b722f3987982d34be3382a', '0x59856517e20e2def101ecf61c32f2088025fd4117ff71ea1584a2607755ea440', '0xcb4bc47594256f1fda3e0173d0f51aa1fde5da4695849cddfbb533fa29206538', '0x95ee3e5d518e3313dfd3f3b185cb7fcf13b705f3cd4bf94ee902af776f762583', '0xdcc290a3c41d8e31116f9748735c44ab3421558a1efe273740e26d72d41fbc20', '0x527fd3e46c546bd8a52c28e518bb48c786a102f195dc988c5f80fb51f0e95319', '0xcb52b19c2aad7658d06dfe0af48bc1642a1537184462b6a3e566075a9f1b18d2', '0xb5e7085f32b34f5bbc3fbc219cb0776921fee8a9f0305a1298bc2ef3abb6dab5', '0x95ec8048a2189f04f9d54c3b682f134d69688da3e1644b895bc692e110864f66', '0x85f3e412c4529385e4fb5ea23e2e45bbe4931e441bff10013769d02c29f245a3', '0xfd82292f7cd3933130272db670c25d00b00a9d5484f4aeec3565e4064bb9b11b', '0xcffa9e9f40a598cdc0449924cabf2ef90dc33410b51749c6587f5340ecbd658b', '0x380efc666391d75674d37d41bd8fa3308be1ca9826d8ab8b6b01c27d7009fcfd', '0x7007306d3d97d769eed1233f61c22a0854e4e3b59c5e16a1cc1cabcbd19652be', '0x316c289690d9f8f797a9598f0e10e0c4c49846cb2ca70523aaefe3225575fa5d', '0x5064f61daa02a090048246d241979dfd251438b99d034c85686004e583fd5163', '0xf5baca542a74574a2e179612b341db4508a7599d5cfbe9937fd91b097bc506fd', '0x94de66301ae3acc62e77ac08ae44807b8f1001076f97d773485b817ac33e4d4d', '0x6774ea67826140f1f7ff58f7e5d81659c8ca62805bdac3c4acc64259485bb520', '0x85313da86e86904d4223a9c0dd923d7eda94ccf969823ef8c2f832dc5c28ba37', '0x27cb90df2ed65f0aaeb24b2311c392171f99e99a685a6e779df05e9e8d990f72', '0x29fc419216df48e4c70af5085f20615af33f3fb4b8d551ecac151831415bb5a9', '0xe5b00e9ec02e3a234e0002b23fbb91513442e7ab8dbdaefdf0f2efeab4a37fb3', '0x00dab7b09c19b04e9d8ec3c859dfb26d3911aebf1e35be0ead1901f9addb9efb', '0xe6a9f7da6e40a2740cc9f78cb584e25ddc0105df56b4acc4a605a50704f7d459', '0x5e2c54e39f6884bb2372ed9ea96cd0858cd7c12a7a1f1907912728ba44eea79e', '0x0cad27544707db2cf26cd3c96e7f4f9a5adfe283c1d9fbdd94aa54beedcd59f4', '0xf715969f0b0648cb9e99dea549d4e1e59f9ef350699532cc02cb0410ec57097c', '0x003a04bf5989bbb1204a762007e2e219824e688257dfdcc10f515116a6cd42ac', '0x1f79bbcb2a9b34e26ef482186ed24ece78b16393ecf4892f1cf9a680cdfd833f', '0xe586c1527d2ebb31c37e28e4211de16eca5cdc01910d93023ff97acc7212f2d8', '0x45ce954e8d390039cfae171503635a2bc3a7c1e8f679d3a7759925ca1dc3e495', '0xf76f712ac34975c4fc944d8245b27fbd53e9667072774c00dd62d46d7708aa5c', '0x84b453f2ba2296e5d91cf6b9321641b23dda10b47a062654c0001b9a840997b8', '0xbaa08003aa8ae18cb78bfd0c82de5d9403ef5f2e9e23cad360ca8800784acad2', '0xc3af83ad80486a828dd490f81399fed2b938524809c8a5fbc3e4d23e5477728a', '0x7d37261fd268a9aaef77cc1a13ad50e56b341a85c2b412526d97ff3bc521f0d9', '0xb1e5868234739e75f5e276a0fc02e6124dee85474e738f7c404a53ba9871e043', '0x3f1c6361aa95e612d57429d29f807ab6e4e4c2f016f30a9d08fdc433b17c8e19', '0xecca19d753e39fbc960419dd828c3334ce263840bad9ffa649449af3e77e7d4e', '0xcd0730bf9ae20a9c91e02a94b10c09e325e48d385579c95f640de3d2734c94b4', '0x357b488d90c8c36d6b71ffab8b08c8858b009f5a2f0aefec6ca8e0ea01ebc40b', '0xee89e7f7cc69f231492024f6925c5cc50caee14dc0d4684d97bd917eaf3c906e', '0xe8f84386bb1d94fcb6f8db8b96cd18ad22de36484d2a6f87611f577e9daf0376', '0x50fcb74950e47b6a5dde4df0fbff14e16e2394f7906d10534d1f4a25949d6ff3', '0x9ae03350c7b308f506e3386df302d5509c1411783cc3c6d17f295525b8029589']
  transactionsRoot
  :
  "0xc211d5a952907ae20662df40a848438d0bda511f444bffc149a7bc43b500e308"
  uncles
  :
  []

이게 뭐야

• [81]이 트랜잭션 해쉬의 배열이면 이 해쉬 값을 이용해 트랜잭션을 조회 할 수 있다.

3.느낀점

본격적으로 기업협약을 시작하기전에 필요한 주요 정보나 핵심 라이브러리 기능을 정리할 것이다. 나중에 필요할 때 분명히 같은 부분에서 막힐 것이므로 잘 정리해보자.