BlockChain - react web3 hook, openzeppelin, ERC20, Token

---

목차

1. 세팅하기

2. 나만의 토큰 만들기 (컨트랙트)

3. useWeb3 hook 만들기

4. 리액트로 작성하기

---

 

 

 

** openzeppelin 설치 후 ERC20으로 나만의 토큰만들기

* react에서 web3 custom hook을 만들어서 사용하기 

* remix를 사용하여 배포 진행

- 메타마스크에서 세폴리아 테스트 네트워크 사용

 

 

 

1. 세팅하기

npx create-react-app erc20

npm i web3

npm install @openzeppelin/contracts

remixd -s . --remix-ide "https://remix.ethereum.org/"

 

 

 

 

 

 

 

2. 나만의 토큰 만들기 (컨트랙트)

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

import "../node_modules/@openzeppelin/contracts/token/ERC20/ERC20.sol";


contract boramToken is ERC20 {
  constructor(string memory name, string memory symbol, uint value) ERC20(name, symbol) {
    _mint(msg.sender, value * (10 ** decimals()));
  }
}

 - remix를 사용해서 배포 한 다음, abi와  CA주소 복사하기

   - abi는 json 파일로 저장해두기

 

 

 

 

 

 

 

3. useWeb3 hook 만들기

 

- useWeb3을 만들어서 import해서 사용하기

- window.ethereum.request({ method: 'eth_requestAccounts' }) :  계정 요청하기

   - 메타마스크를 사용하고 있다면 isMetaMask: true 

 

- 해당 계정의 잔고(getBalance 함수로 요청했을때)를 wei로 알려주는데, fromWei함수를 사용해서 ether로 변한하기

 

 

 

 

4. 리액트로 작성하기

 

- useWeb3, abi import 해서 user, web3를 사용하기

  - 지갑 주소, 잔액, 보유하고있는 토큰갯수, 모든 토큰의 수 보여주기

- 토큰은 useState로 관리하기

 

 

 

 

---

※  .eth는 이더리움 여러 기능을 제공하는 객체로 계정 조회, 잔고 확인, 트랜잭션 생성 등등에 사용
※  .utils는 이더리움 데이터 변환, 단위 변환, 해시 계산 등에 사용