[블록체인] 메타마스크 MetaMask 시작하기(로그인)

https://docs.metamask.io/guide/getting-started.html#basic-considerations

Getting Started | MetaMask Docs

 

Kaikas 가 MetaMask 를 활용하여 만든 것이기 때문에 거의 똑같아서 코드 작성은 동일하다.

 

import { useRecoilState } from 'recoil';
import { walletAtom } from '@stores/wallet/wallet';
import Caver from 'caver-js';

export default function Header() {
  const caver = new Caver(window.klaytn);
  const [kaikasState, setKaikasState] = useRecoilState(kaikasAtom);

  //Kaikas
  const handleOpenKaikas = async () => {
    if (window.klaytn) {
      //접속
      alert('카이카스를 연결하겠습니다.');

      const accounts = await window.klaytn.enable();
      const account = accounts[0];
      console.log(account);

      //사용자 계정에 접근하기
      window.klaytn.on('accountsChanged', function (accounts) {
        console.log(window.klaytn.selectedAddress);
        setWalletState(window.klaytn.selectedAddress);
      });

      //사용자 네크워크 정보 가져오기
      window.klaytn.on('networkChanged', function () {
        console.log(window.klaytn.networkVersion);
      });
      setWalletState(window.klaytn.selectedAddress);
    } else {
      alert('클레이튼 지갑을 설치해주세요.');
      window.open(
        'https://chrome.google.com/webstore/detail/kaikas/jblndlipeogpafnldhgmapagcccfchpi',
        '_blank'
      );
    }
  };
  
  //Metamask
  const handleOpenMetamask = async () => {
    if (window.ethereum) {
      //접속
      alert('메타마스크를 연결하겠습니다.');

      const accounts = await window.ethereum.enable();
      const account = accounts[0];
      console.log(account);

      //사용자 계정에 접근하기
      window.ethereum.on('accountsChanged', function (accounts) {
        console.log(window.ethereum.selectedAddress);
        setWalletState(window.ethereum.selectedAddress);
      });

      //사용자 네크워크 정보 가져오기
      window.ethereum.on('networkChanged', function () {
        console.log(window.ethereum.networkVersion);
      });
      setWalletState(window.ethereum.selectedAddress);
    } else {
      alert('메타마스크 지갑을 설치해주세요.');
      window.open(
        'https://chrome.google.com/webstore/detail/metamask/nkbihfbeogaeaoehlefnkodbefgpgknn',
        '_blank'
      );
    }
  };

  return (
   <>
      <header className='headerCotainer'>
        <div>
          <div>Logo</div>
          {walletState ? (
            <div>
              <p>{walletState}</p>
            </div>
          ) : (
            <div>
              <div>
                <CreateBtn
                  text={'kaikas 연결'}
                  onClick={handleOpenKaikas}
                  className='noticeUpdateBtn'
                />
              </div>
              <div>
                <CreateBtn
                  text={'metamask 연결'}
                  onClick={handleOpenMetamask}
                  className='noticeUpdateBtn'
                />
              </div>
            </div>
          )}
        </div>
      </header>
    </>
  );
}

 

전에 작성한 KaiKas 는 아래 링크

[블록체인] 클레이튼 지갑 KaiKas 시작하기(로그인)

 

 

https://gist.github.com/kennethhutw/a30cd65a8af7709c055d6c01aa28a208

Detecting Metamask account or network change in Javascript using Web3 1.2.4