web3-react, 지갑 연동
v6 기준으로 작성된 포스트 입니다. v8과 많은 차이가 있어 참고하시며 읽어 주시길 바랍니다.
web3-react?
web3-react는 react에서 web3의 Dapp과 관련된 특정 데이터를 최신 상태로 유지해주는 state machine 으로
지갑 연동 및 스마트컨트랙트 ABI와 상호작용을 쉽고 간단하게 할 수 있도록 도와준다.
설치
web3-react(V6 기준) 를 사용하기 위해서는 먼저
@web3-react/core와 @ethersproject/providers를 설치한다.기본 설정
설치한 @web3-react/core에서 제공하는
Web3ReactProvider 를 App root의 provider로 제공하고 web3 객체를 인스턴스화 하는 getLibrary 함수를 정의하여 prop로 전달한다.src/index.js
useWeb3React 활용 context 값 접근하기
root의 provider로 설정한
Web3ReactProvider 에서는 아래 subtree에서 context 값에 접근 할 수 있도록 useWeb3React 라는 hook을 제공한다.connector, library, chainId, account, active, error, activate, deactivate 값들읋 접근 할 수 있다.
- connector: 현재 dapp에 연결된 월렛의 connector 값
- library: web3 provider 제공
- chainId: dapp에 연결된 account의 chainId
- account: dapp에 연결된 account address
- active: dapp 유저가 로그인 된 상태인지 체크
- activate: dapp 월렛 연결 기능 수행 함수
- deactivate: dapp 월렛 연결 해제 수행 함수
지갑 연동
wallet을 dapp에 연결하기 위해서는 해당 wallet에 맞는 connector를 activate 함수에 전달해야 된다.
metamask의 경우 injectedConnector, coinbase의 경우 walletlinkConnector를 portis의 경우 portisConnector를 설치한다.
metamask 연동하기
@web3-react/injected-connector를 설치한다. (metamask 크롬 익스텐션 설치 필요)
- injectedConnector 인스턴스를 생성한다. (connector 들만 모아두고 관리하기 위해
lib/connectors.js내부에 connector들 선언)
src/lib/connectors.js
- activate 함수에 connector를 전달한다. 정상적으로 실행될 경우 useWeb3React에서 제공하는 context 값들이 갱신된다.
src/App.js
주의:
metamask 익스텐션이 크롬에 설치되어 있지 않은 경우
No Ethereum provider was found on window.ethereum 에러가 발생하게 되는데해당 에러 발생시 유저를 설치 안내 페이지 링크로 이동하도록 하여 익스텐션을 설치하는것이 좋다.
샘플 결과물
아래 결과물은 간단하게 사용하는 법을 구현한 것으로 새로고침시 로그인이 유지 않음.