web3-react 와 디센트 지갑 연동 기능 개발기

Published in

IOTRUST : Team Blog

6 min readMar 10, 2021

예전에 MakerDAO 의 Oasis 에서 디센트 회사 지갑을 연결할 수 있게 지원하기 위해 plugin 을 개발했던적이 있었습니다.
그렇게 개발하고 잊고 있었는데 MakerDAO 에서 지갑 연동을 web-react 를 이용해서 연동하겠다고 하니 디센트 지갑을 web3-react 를 통해 어떻게 연동할지 알아볼겸 web3-react에 대해 글을 써보려 합니다.

그래서 web3-react 가 뭐지?

web3-react 에 대해 설명하기전에 이름에서 보이는 두 가지, web3와 react 에 대해 먼저 간략하게 설명하자면,
web3.js
자바스크립트 기반으로 이더리움 Dapp 이나 서비스를 구현할때 사용하는 라이브러리입니다.
react.js
페이스북에서 만든 UI 라이브러리입니다. 특징으로 쉬운 상태관리, 컴포넌트 기반 개발, 가상돔 렌더링 등을 가지고 있습니다.

web3-react 는 react 앱에서 Context를 이용해 web3의 Dapp 과 관련된 특정 주요 데이터(사용자의 현재 계정, chain id, web3 provider 등)를 최신상태로 유지해주는 state machine 입니다.

글만 봐선 잘 모르겠으니 한 번 사용해보자!

한 번 web3-react 를 이용해 현재 이더리움의 block number 를 보여주는 코드를 만들어 보겠습니다.

완성된 프로젝트

web3-react 를 사용하려면 리액트 앱 루트에 Web3ReactProvider 컴포넌트가 존재해야합니다.
저는 export default function 에 다음과 작성하였습니다.

Web3ReactProvider 컴포넌트는 web3-react 가 관리하는Context 의 Provider 컴포넌트입니다.
이 컴포넌트에 getLibrary 함수를 props 로 전달해줘야 하는데 이 함수의 역할은 web3-react가 사용할 web3 provider 를 제공하는 역할입니다.

그 뒤 Web3ReactProvider 의 하위 컴포넌트에서 useWeb3React 를 통해 Context 를 얻을 수 있습니다.

web3-react 는 connector 를 연결해서 Context가 어떤 데이터를 관리할지 결정할 수 있는데 저는 이더리움의 blockNumber 를 최신으로 유지해야하므로,
web3-react 에서 기본으로 제공하는 NetworkConnector 를 통해 연결했습니다.
activate 버튼을 누를경우 networkConnector 가 web3-react 와 연결되서 active 되고(useWeb3React 로 받아온 active 가 true로 변경)
deactivate 버튼을 누르면 web3-react 와의 연결이 끊어지고 비활성화됩니다. (useweb3React로 받아온 active 가 false 로 변경)

NetworkConnector 가 연결이 되면 아까 Web3ReactProvider 에 전달해준 getLibrary 가 실행되면서 useWeb3React 의 library 가 제가 getLibrary() 에서 반환한 provider 로 설정되는데,
BlockNumber 를 최신으로 유지시켜주기 위해 library를 통해 block 이 변경될때마다 blockNumber 를 변경시켜줍시다.

여기까지 하면 BlockNumber를 최신으로 보여주는 웹페이지가 완성되었습니다!

그럼 어떻게 디센트 지갑을 web3-react 와 연동해야 할까?

아까 위에서 스쳐 지나가며 말했는데

web3-react 는 connector 를 연결해서 Context가 어떤 데이터를 관리할지 결정할 수 있는데

네. 디센트 지갑에 연결해주는 Connector 를 만들면 됩니다.

Connector 를 만들 때는 추상클래스인 AbstractConnector 를 구현해주면 됩니다. 각 메서드중 몇 개를 살펴보면,

activate 메서드는 useWeb3React 의 activate 메서드를 사용하면 호출되는 메서드입니다. provider 와 chianid, account 를 가능한 경우 반환해주면 되는데,
저는 디센트 지갑에 접근을 위해 DcentSubProvider 를 만들고 이더리움 네트워크 접근을 위해 CacheSubProvider 와 RPCSubProvider 를 이용해 Web3ProviderEngine 으로 Provider 를 만든뒤 반환해주었습니다.
(여기서 반환해준 Provider 는 getLibrary 의 arguments 인 provider 로 전달됩니다.)

deactive 는 connector 가 끊길때(새로운 Connector를 activate 하거나, deactivate 를 호출할경우) 해줄 동작을 정의해주면 되고,

getAccount는 아마 사용자가 여러개의 계정중 직접 어떤 계정을 사용할지 선택 가능한 지갑일경우, 사용자가 선택한 계정을 반환하는 메서드인것 같은데.. 디센트 지갑에는 계정 선택 기능이 없으므로 무조건 1번 이더리움 계정을 반환하게 했습니다.

그 뒤 DcentConnector 를 생성한 후 activate 를 해주면?