[Web3 provider + React + TS + VITE] WEB3 환경설정하기.

web3.js 기본 설정

react-web3-provider

metamask-react

$ npm i metamask-react

• 이거하나 설치하면 젤 쉽고 간단하고 잘 돌아감 
• 이유: 자바스크립트랑, 리액트랑 라이프 사이클이 다르기 때문에, 리액트에서 web3 provider를 생성하는건 쉽지 않다. 따라서 라이브러리를 쓰는것.

 

---

 

초기 삽질. (안봐도됨)

• web3사용 위해, 리액트앱 루트에 web3 react provider로 감싸줌,
• 루트 컴포넌트에 getlibrary를 props로 전달하는데 web3-react가 사용할 web3 provider를 제공하는 역할을 함.

GitHub - Uniswap/web3-react at v6

$ npm i @ethersproject/providers
$ npm i web3-react
# 메타마스크 설치 요청
$ npm i @web3-react/injected-connector
# interface정의시 필요
$ npm i @web3-react/abstract-connector
# 함수 호출 용이(useWeb3React())
$ npm i @web3-react/core

npm uninstall @ethersproject/providers web3-react @web3-react/injected-connector @web3-react/abstract-connector @web3-react/core
npm uninstall --save ethjs-provider-http 
npm uninstall --save ethjs-query

---
### HERE### HERE
## httprovider https 지원안함 
$ npm install --save ethjs-provider-http
$ npm install --save ethjs-query
## require가 commonJs라 모듈 설치 함

#문제점: [ethjs-query] while formatting outputs from RPC 
#'{"value":{"code":-32602,"message":"invalid argument 0: 
#hex string has length 0, want 40 for common.Address"}}' at index.js:108:29

## [ethjs-query] RPC의 출력을 포맷하는 동안'{"값":{"code":-32602,codice":"인수 0:
# 16진수 문자열의 길이는 0이고 공통으로 40을 원합니다.index.js:108:29의 주소 "}"

# 
# ==> 지우진 않았지만 보류 :: web3를 안쓰고, 다른 라이브러리를 사용한다는 생각이 들어
# 다시 web3를 사용해보고자 아래 agent-base설치
-----
npm uninstall agent-base 
## 사용하면, https지원함
## 설치 후 vertx를 찾을 수 없음
## 설치해서 바꿔줌 -> Java 없음
$ npm i agent-base 
## commonjs를 설치해서 두개가 충돌된건지, 어떤지 알 수가 없다.

----
# vite require시 오류 해결 위해, commonjs module 설치
$ npm install @originjs/vite-plugin-commonjs --save-dev

npm uninstall @originjs/vite-plugin-commonjs --save-dev
# 블록체인에서 숫자 데이터의 경우 자리수가 크기 때문에 문자로 처리되는 경향이 있다.
# 따라서 해당 문자를 숫자로 다시 바꿔주기 위하여 Bignumber 또는 BigInt를 사용해주어야 한다.
# $ npm i bn.js //아직 설치 X

const { connector, library, chainId, account, 
				active, error, activate, deactivate } = useWeb3React();
connector: 현재 dapp에 연결된 월렛의 connector 값   (현재 커넥터)
library: web3 provider 제공
chainId: dapp에 연결된 account의 chainId
account: dapp에 연결된 account address
active: dapp 유저가 로그인 된 상태인지 체크 (현재 로그인된 계정이 있는지)
//지갑에 연결하는 방법
activate: dapp 월렛 연결 기능 수행 함수
deactivate: dapp 월렛 연결 해제 수행 함수

TIL96. 메타마스크 지갑 연동(feat.web3-react)

Ethereum Provider API | MetaMask Docs

• eth.getbalance (X)
  • https://github.com/ethjs/ethjs-query
• ethjs-query