Interchain Bridge를 개발하면서 Metamask, Iconex, Kaikas 등의 Web3 Wallet과 연동할 일이 있어서 내용을 정리합니다.
내용은 Metamask Klaytn Network를 기준으로 작성하겠습니다.
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을 구축하여 커뮤니케이션 할 수 있습니다. [관련 링크]
다음으로는 Metamask에 JSON-RPC 네트워크를 추가하겠습니다.
네트워크는 Klaytn의 테스트넷인 Baobab Network를 추가하였습니다.
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;
}
}