[개발] 리액트에서 메타마스크 지갑 연동
안녕하세요 @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도 아직은 어렵군요.
그래도 잘 만들어봐야겠습니다.