안녕하세요 @realmankwon 입니다. 리액트에서 메타마스크 를 연동하고 네트워크를 자동으로 변경 및 추가하는 것을 개발 중에 있습니다. 일단은 최상단의 App 를 작성하는 소스에 다음과 같이 라이브러리를 추가해줍니다. ~~~ import { Web3ReactProvider, createWeb3ReactRoot } from "@web3-react/core"; import { Web3Provider } from "@ethersproject/providers"; ~~~ 이후 App 밖을 다음과 같이 감싸줍니다. ~~~ ~~~ 실제로 메타마스크를 연동하는 소스에 요렇게 라이브러리를 추가시켜줍니다. 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 (

Account: {account}

ChainId: {chainId}

); }; ~~~ 일단 요렇게 하면 지갑 연동은 잘 되는데 문제는 네트워크가 다르거나 없을때 처리가 안 되는군요. 아래의 부분에서 처리를 하는데 계속해도 library가 undefined로 뜨는군요...ㅜㅜ ~~~ await library.provider.request({ method: "wallet_switchEthereumChain", params: [{ chainId: "42161" }], }); ~~~ 결국은 방향을 전환해서 다른 라이브러리로 작업을 해야할 듯 합니다. 간단하게 지갑 연동은 가능한데 리액트도 @web3-react도 아직은 어렵군요. 그래도 잘 만들어봐야겠습니다.