[web3-react] MetaMask로 지갑 연동하기

우선 react로 설치한 뒤 아래의 순서에 맞춰 지갑을 연동해보았다.

만약 아래와 같이 진행했지만 뭔가 정상적이지 않다면 오타의 가능성이나 버전을 먼저 확인해보길 바란다.

멀고도 험한.. 블록체인의 길.. 걸음마부터 출발!

 

설치

npm i @web3-react/core @ethersproject/providers

 

설정

설치한 @web3-react/core에서 제공하는 Web3ReactProvider를 App root의 provider로 제공하고 web3 객체를 인스턴스화 하는 getLibrary 함수를 정의하여 props로 전달한다.

 

src/index.js

import React, { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import { Web3ReactProvider } from '@web3-react/core';
import { Web3Provider } from '@ethersproject/providers';
import './index.css';
import App from './App';

function getLibrary(provider) {
  const library = new Web3Provider(provider, "any");
  return library;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <StrictMode>
    <Web3ReactProvider getLibrary={getLibrary}>
      <App />
    </Web3ReactProvider>
  </StrictMode>
)

 

useWeb3React 활용 context 값 접근하기

root의 provider로 설정한 web3ReactProvider에서는 아래의 subtree에서 context 값에 접근할 수 있도록 useWeb3React라는 hook을 제공한다.

 

connecter, library, chainId, account, active, error, activate, deactivate 값들에 접근할 수 있다.

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 월렛 해제 수행함수

 

지갑연동

wallet을 dapp에 연결하기 위해서는 해당 wallet에 맞는 connector를 activate 함수에 전달해야 한다.

Metamask의 경우, injectedConnector, coinbass의 경우 walletlinkConnector를 portis의 경우 portisConnector를 설치한다.

 

Metamask 연동하기

metamask 크롬 익스텐션을 설치하고 web3-react/injected-connector를 설치한다.

npm i @web3-react/injected-connector

injectedConnector 인스턴스를 생성한다. connector들만 모아두고 관리하기 위해 lib/connectors.js 내부에 connector를 선언한다.

src/lib/connectors.js

import { InjectedConnector } from '@web3-react/injected-connector';
export const injected = new InjectedConnector();

activate 함수에 connector를 전달한다.

정상적으로 실행될 경우 useWeb3React에 제공하는 context값들이 갱신된다.

 

src/App.js

import { useWeb3React } from '@web3-react/core';
import { injected } from './lib/connectors';

import './App.css';

const App = () => {
  const {
    chainedId,
    account,
    active,
    activate,
    deactivate
  } = useWeb3React();

  const handdleConnect = () => {
    if(active) {
      deactivate();
      return;
    }
    
    activate(injected, (error) => {
      if('/No Ethereum provider was found on window.ethereum/'.test(error)) {
        window.open('https://metamask.io/download.html');
      }
    });
  }
  return (
    <div>
      <div>
        <p>Account: {account}</p>
        <p>ChainId: {chainedId}</p>
      </div>
      <div>
        <button type="button" onClick={handdleConnect}>{active ? 'disconnect':'connect'}</button>
      </div>
    </div>
  )
}

export default App;

✔︎ 주의사항

Metamask 익스텐션이 설치되어 있지 않은 경우, No Ethereum provider was found on window.ethereum에러가 발생하게 되는데 해당 에러 발생 시 유저를 설치 안내 페이지 링크로 이동하도록 익스텐션을 설치할 것.

 

결과물

 

참고 및 더 분석해볼 것!!!

https://github.com/NoahZinsmeister/web3-react

 

web3.js

https://web3js.readthedocs.io/en/v1.7.3/

web3.js - Ethereum JavaScript API — web3.js 1.0.0 documentation

앞으로 나의 블록체인의 길은 더 험난할 것이라 예상된다. ㅜㅜ 화이팅