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

Caver js

https://docs.kaikas.io/02_api_reference/02_caver_methods

Caver Methods - Kaikas Docs

caver-js는 개발자가 Klaytn 노드와 상호 작용할 수 있게 해주는 JavaScript API 라이브러리입니다. npm 에서 사용할 수 있습니다 .

 

1.  caver-js 설치

npm i caver-js

 

2. import

import Caver from 'caver-js'

const caver = new Caver(window.klaytn);

 

KaiKas

- 클릭시 KaiKas 크롬 확장 프로그램이 설치되지 않은 상태면, 설치 사이트로 이동,

설치된 상태면 else 부분 실행되도록 설정함

현재는 클릭시 Kaikas 로그인 모달창으로 연결되어 로그인되도록 설정, 로그인 시 해당 화면에 selectedAddress만 출력되도록 함

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

  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);
        setKaikasState(window.klaytn.selectedAddress);
      });

      //사용자 네크워크 정보 가져오기
      window.klaytn.on('networkChanged', function () {
        console.log(window.klaytn.networkVersion);
      });
      setKaikasState(window.klaytn.selectedAddress);
    } else {
      alert('클레이튼 지갑을 설치해주세요.');
      window.open(
        'https://chrome.google.com/webstore/detail/kaikas/jblndlipeogpafnldhgmapagcccfchpi',
        '_blank'
      );
    }
  };

  return (
    <>
      <header className='headerCotainer'>
        <ul>
          <li>Logo</li>
          {kaikasState ? (
            <li>
              <p>{kaikasState}</p>
            </li>
          ) : (
            <li>
              <li>
                <CreateBtn
                  text={'kaikas 연결'}
                  onClick={handleOpenKaikas}
                  className='noticeUpdateBtn'
                />
              </li>
              ..
            </li>
          )}
        </ul>
      </header>
    </>
  );
}

 

'사용자 네트워크 정보 가져오기' 가 필요한 이유?

사용자가 Kaikas 로그인을 할 때, 네트워크가 어딘지 파악하여 만약 테스트넷일 경우는 alert창으로 경고를, 메인넷(실제이용네트워크)일 경우는 이용할 수 있도록 설정하기 위함

+ 지갑 주소를 바꾸면 로그아웃된다는 설정을 추가할 수도 있다.

 

https://forum.klaytn.foundation/t/kaikas-account-change/2791/3

Kaikas account change

 

https://github.com/dev-jiwon/kaikas_extesnion_test/blob/master/src/App.js

GitHub - dev-jiwon/kaikas_extesnion_test

 

https://lhoiktiv.tistory.com/331

스터디 준비자료: caver.js - 1

https://junhee6773.tistory.com/entry/kaikas-sign

kaikas sign

https://velog.io/@eliz/Caver-js-%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90%EC%84%9C-%EC%8A%A4%EB%A7%88%ED%8A%B8-%EC%BB%A8%ED%8A%B8%EB%9E%99%ED%8A%B8-%EC%97%B0%EB%8F%99