web3-react를 이용한 메타마스크,코인베이스 지갑 연동

 

 

  

Web3-react

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

 

 

Web3 설치 및 사용해보기

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

import { Web3ReactProvider } from "@web3-react/core";
import {
  ExternalProvider,
  JsonRpcFetchFunc,
  Web3Provider,
} from "@ethersproject/providers";

import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";

function getLibrary(provider: ExternalProvider | JsonRpcFetchFunc) {
  return new Web3Provider(provider);
}

const queryClient = new QueryClient();

ReactDOM.render(
  <Web3ReactProvider getLibrary={getLibrary}>
    <App />
  </Web3ReactProvider>,
  document.getElementById("root") as HTMLElement
);

web3를 사용하려면 리액트 앱 루트에 Web3ReactProvider컴포넌트로 감싸줘야합니다.

이 컴포넌트에 getLibrary함수를 props로 전달하는데, web3-react가 사용할 web3 provider를 제공하는 역할을 합니다.

 

 

 

useWeb3React()

const {connector, library, chainId, account, active, error, activate, deactivate} = useWeb3React();

• connector: 현재 dapp에 연결된 지갑의 connector 값
• library: web3 provider 제공
• chainId: dapp에 연결된 account의 chainId
• account: dapp에 연결된 지갑 주소
• active: dapp 유저가 로그인 상태
• activate: dapp 월렛 연결 기능 함수
• deactivate: dapp 월렛 연결 해제 함수

 

구현코드

.
.
.
import { useWeb3React } from "@web3-react/core";
import { InjectedConnector } from "@web3-react/injected-connector";
import { WalletLinkConnector } from "@web3-react/walletlink-connector";

.
.
.

const Login = () => {
  const navigate = useNavigate();
  const { account, activate } = useWeb3React();

  const connectWallet = ( connect : WalletLinkConnector | InjectedConnector) => {
    try {
      activate(connect);
    } catch (err) {
      alert(err);
    }
  };
  
  const handleLogin = async (account: string) => {
    const result = await login({
      walletAddress: account,
    });
    if (result) {
      navigate("/main");
    }
  }; 

  useEffect(() => {
    if (account) {
      handleLogin(account);
    }
  }, [account]);

  return (
    <>
        <Button onClick={() => connectWallet(Injected)}>
          Metamask
        </Button>
        <Button onClick={() => connectWallet(CoinbaseWallet)}>
          Coinbase
        </Button>
    </>
  );
};

export default Login;