[Web3] Web3 Wallet 연동하기

seohyun Kang·2022년 7월 20일
0

Chrome Extension

목록 보기
4/4

Introduction

Interchain Bridge를 개발하면서 Metamask, Iconex, Kaikas 등의 Web3 Wallet과 연동할 일이 있어서 내용을 정리합니다.

내용은 Metamask Klaytn Network를 기준으로 작성하겠습니다.

Preperation

npm install web3 

Web3.js Library를 설치해 줍니다.

declare global {
  interface Window {
    ethereum: any;
    klaytn: any;
  }
}

const App = () => {
	const { ethereum } = window;

	// do something...
}

Window에 ethereum 객체를 정의하여 window 객체에서 불러올 수 있습니다.

ethereum 객체를 통해 Metamask Web3 Wallet과 Interface Channel을 구축하여 커뮤니케이션 할 수 있습니다. [관련 링크]

Connect to Network

다음으로는 Metamask에 JSON-RPC 네트워크를 추가하겠습니다.


네트워크는 Klaytn의 테스트넷인 Baobab Network를 추가하였습니다.

Create Tx Object

const createTransferTx = ({
	sender,
    receiver,
    encodedData
}) => {

  const chainId = "0x" + "1001".toString(16);
  const rawTx = {
    from: sender,
    to: receiver,
    data: encodedData,
    chainId: chainId,
  };

  return rawTx;
}
const handleSubmit = async () => {
	try {
    	const rawTx = await createTransferTx(props);
    	await ethereum.request({
        	method : 'eth_sendTransaction',
            params : [rawTx],
            id: rndString()
        })
	} catch (e) {
    	throw e;
    }
}

0개의 댓글