Caver js
https://docs.kaikas.io/02_api_reference/02_caver_methods
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
https://github.com/dev-jiwon/kaikas_extesnion_test/blob/master/src/App.js
https://lhoiktiv.tistory.com/331
https://junhee6773.tistory.com/entry/kaikas-sign
'React > BlockChain' 카테고리의 다른 글
[블록체인] 메타마스크 MetaMask 시작하기(로그인) (0) | 2023.03.14 |
---|---|
[블록체인] 메타마스크 MetaMask 설치 하기 (계정 생성): PC 크롬 (0) | 2023.03.14 |
[블록체인] 클레이튼 지갑 KaiKas 설치 하기 (계정 생성): PC 크롬 (0) | 2023.03.14 |