블록체인 TIL-15Week-99Day

✅오늘은 뭐했니?

• 배포한 contract verify 하기 (constructor 있는 contract)

npx hardhat compile
npx hardhat run --network goerli ./scripts/deploy_erc_20.js

npx hardhat verify --network goerli CONTRACT 주소 123456789 /*얘는 constructor의 input 값*/

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

import '@openzeppelin/contracts/token/ERC20/ERC20.sol';

contract ABCToken is ERC20("LikeLion", "LION") {
    constructor(uint totalSupply) {
        _mint(msg.sender, totalSupply);
    }

    function getName() public pure returns(string memory) {
        return "ERC20_2";
    }

    function getNumber() public pure returns(uint) {
        return 12345;
    }

    function MintToken(uint a) public {
        _mint(address(this), a);
    }

    function decimals() public pure override returns(uint8) {
        return 0;
    }

    receive() external payable{}
}

// scripts/deploy_erc_20.js

const hre = require("hardhat");

async function main() {
  const LOCK = await hre.ethers.getContractFactory("ABCToken");
  const lock = await LOCK.deploy(123456789/*constructor의 input 값*/);
  console.log("LOCK deployed to : ", lock);
  console.log("LOCK deployed to : ", lock.target);
}

main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

require("@nomicfoundation/hardhat-toolbox");

const PVK = "개인키"

module.exports = {
  solidity: "0.8.17",
	etherscan : {
    apiKey : "이더스캔 api key",
  },
  networks : {
    goerli : {
      url : `https://goerli.infura.io/v3/apiKey 넣기`,
      accounts : [PVK],
    }
  }
};

---

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

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;

---

• 메타마스크 연결하기

import React, { 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));// wei 단위로 표시
				// setBalance(ethers.formatEther(_balance))// -> 이더 단위로 표시

      } catch (err) {
        console.error(err)
      } //네
    } else {
      console.log('Install Metamask')
    }
  }

  connect()

  return (
    <form>
      <div>
        <h1>current wallet : {account}</h1>
        <h1>current balance : {balance}</h1>
      </div>
    </form>
  )
}

export default App

---

• 로그인 유지 코드 참고(재우쓰 도움)

import React, { useEffect, useState } from "react";

const App = () => {
  const [walletAddress, setWalletAddress] = useState("");
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  useEffect(() => {
    const storedWalletAddress = localStorage.getItem("walletAddress");
    if (storedWalletAddress) {
      setWalletAddress(storedWalletAddress);
      setIsLoggedIn(true);
    }
  }, []);

  const handleLogin = (address) => {
    localStorage.setItem("walletAddress", address);
    setWalletAddress(address);
    setIsLoggedIn(true);
  };

  const handleLogout = () => {
    localStorage.removeItem("walletAddress");
    setWalletAddress("");
    setIsLoggedIn(false);
  };

  return (
    <div>
      {isLoggedIn ? (
        <div>
          <p>로그인되었습니다. 지갑 주소: {walletAddress}</p>
          <button onClick={handleLogout}>로그아웃</button>
        </div>
      ) : (
        <button onClick={() => handleLogin("메타마스크 지갑 주소")}>
          메타마스크로 로그인
        </button>
      )}
    </div>
  );
};

export default App;

---

🌜하루를 마치며..

프로젝트 하자...