[개발] 리액트에서 메타마스크 지갑 연동

안녕하세요 @realmankwon 입니다.

리액트에서 메타마스크 를 연동하고 네트워크를 자동으로 변경 및 추가하는 것을 개발 중에 있습니다.

일단은 최상단의 App 를 작성하는 소스에 다음과 같이 라이브러리를 추가해줍니다.

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

이후 App 밖을 다음과 같이 감싸줍니다.

<Web3ReactProvider getLibrary={getLibrary}>
            <App />
          </Web3ReactProvider>

실제로 메타마스크를 연동하는 소스에 요렇게 라이브러리를 추가시켜줍니다.
injected 가 메타마스크를 의미합니다.

import { useWeb3React, UnsupportedChainIdError } from "@web3-react/core";
import { NetworkConnector } from "@web3-react/network-connector";
import {
  InjectedConnector,
  NoEthereumProviderError,
  UserRejectedRequestError as UserRejectedRequestErrorInjected,
} from "@web3-react/injected-connector";

export const injected = new InjectedConnector({
  supportedChainIds: [42161],
});

이후 아래와 같이 component를 작성하여 줍니다.

const WalletMetamask = function () {
  const { chainId, account, active, activate, deactivate, library } = useWeb3React();
  const handleConnect = async () => {
    if (active) {
      deactivate();
      return;
    }
    
    await activate(injected, async (error) => {
      if (error instanceof UnsupportedChainIdError) {
        await library.provider.request({
          method: "wallet_switchEthereumChain",
          params: [{ chainId: "42161" }],
        });
        alert(`You're conncted to an unsupported network.`);
      } else if (error instanceof NoEthereumProviderError) {
        window.open("https://metamask.io/download.html");
      } else if (error instanceof UserRejectedRequestErrorInjected) {
        alert(`Please authorize this website to access your account.`);
      } else {
        alert(`An unknow error occured. Check your status.`);
      }
    });
  };
  return (
    <div>
      <div>
        <p>Account: {account}</p>
        <p>ChainId: {chainId}</p>
      </div>
      <div>
        <button type="button" onClick={handleConnect}>
          {active ? "disconnect" : "connect"}
        </button>
      </div>
    </div>
  );
};

일단 요렇게 하면 지갑 연동은 잘 되는데 문제는 네트워크가 다르거나 없을때 처리가 안 되는군요.
아래의 부분에서 처리를 하는데 계속해도 library가 undefined로 뜨는군요...ㅜㅜ

await library.provider.request({
          method: "wallet_switchEthereumChain",
          params: [{ chainId: "42161" }],
});

결국은 방향을 전환해서 다른 라이브러리로 작업을 해야할 듯 합니다.
간단하게 지갑 연동은 가능한데 리액트도 @web3-react도 아직은 어렵군요.
그래도 잘 만들어봐야겠습니다.