[개발] window.ethereum 을 이용한 메타마스크 연결

안녕하세요 @realmankwon 입니다.

window.ethereum 을 이용한 메타마스크 연결은 다음의 소스를 호출하면 바로 할 수 있습니다.

     const walletAddress = await window.ethereum.request({
      method: "eth_requestAccounts",
      params: [
        {
          eth_accounts: {},
        },
      ],
    });

하지만 연결을 진행하기 전에 체크 해야할 것들이 있습니다.

1 . 메타마스크 설치 여부
window.ethereum의 값이 없다면 설치가 되지 않은 상태입니다.
아래의 소스를 이용하여 설치되지 않은 경우에는 설치를 하도록 유도합니다.

if(!window.ethereum){
    window.open('https://metamask.io/download.html');
}

2 . 특정 네트워크로 전환 및 네트워크 추가
접근하게 할 네트워크가 아니라면 자동 전환이 되도록 설정합니다.
이때 네트워크가 존재하지 않는다면 에러가 발생하게 됩니다.
해당 에러가 발생하였을 경우에 네트워크를 자동으로 추가하도록 아래와 같이 작성합니다.

     window.ethereum.request({
         method: "wallet_switchEthereumChain",
         params: [{ chainId: network.chainId }],
     })
    .catch(async (e: any) => {
         //Unrecognized chain ID
         if (e.code == 4902) {
             await window.ethereum.request({
             method: "wallet_addEthereumChain",
             params: [network],
          });
       }
   });

위와같이 작성을 하면 메타마스크가 설치되지 않은 경우라도 자동으로 메타마스크를 실행시키면서 지갑 연결이 가능하게 됩니다.