import Web3Modal from "@klaytn/web3modal";
const web3Modal = new Web3Modal( {
cacheProvider: true,
providerOptions,
} )
지갑 연결 설정하기
사용자 지갑에 연결하려면 Web3Modal 인스턴스에서 connect() 메서드를 호출합니다. 이 작업을 비동기 함수로 감싸고 검색된 공급자를 상태에 저장하여 앱 전체에서 재사용하는 것이 좋습니다.
import { ethers } from 'ethers';
import { useState } from 'react';
function App() {
const [provider, setProvider] = useState();
const connectWallet = async () => {
try {
const web3ModalProvider = await web3Modal.connect();
// this guide uses ethers version 6.3.0.
const ethersProvider = new ethers.BrowserProvider(web3ModalProvider);
// for ethers version below 6.3.0.
// const provider = new ethers.providers.Web3Provider(web3ModalProvider);
setProvider(web3ModalProvider);
} catch (error) {
console.error(error);
}
};
return (
<div className="App">
<button onClick={connectWallet}>Connect Wallet</button>
</div>
);
}
유틸리티 함수 설정하기
이 가이드에서는 truncateAddress() 및 toHex()와 같은 유틸리티 함수를 사용하겠습니다. truncateAddress() 함수는 유효한 주소를 전달 받아 읽기 쉬운 형식으로 반환합니다. toHex() 함수는 숫자를 16진수로 변환합니다. 다음은 프로젝트에서 유틸리티 함수를 설정하고 사용하는 방법을 단계별로 보여줍니다.
1단계: src 루트 폴더에 utils.js 파일을 생성합니다.
새로 만든 utils.js 파일에 다음 코드를 붙여넣습니다.
export const truncateAddress = (address) => {
if (!address) return "No Account";
const match = address.match(
/^(0x[a-zA-Z0-9]{2})[a-zA-Z0-9]+([a-zA-Z0-9]{4})$/
);
if (!match) return address;
return `${match[1]}…${match[2]}`;
};
export const toHex = (num) => {
const val = Number(num);
return "0x" + val.toString(16);
};
2단계: App.js 파일에서 함수를 불러옵니다.
import { truncateAddress, toHex } from "./utils";
연결, 계정, 네트워크 정보에 엑세스하기
현재 Web3Modal은 연결된 계정 및 네트워크 데이터 가져오기와 같은 이더리움 상호작용을 기본적으로 지원하지 않습니다. 사용자의 주소 또는 연결된 네트워크 ID를 읽으려면 이더리움 라이브러리에서 정보를 직접 요청해야 합니다. 이 가이드에서는 ethers.js를 사용하여 해당 정보를 가져올 것입니다. 한 가지 방법으로 사용자를 디앱에 연결할 때 이 데이터를 가져와 저장해 보겠습니다.
앞서 설명한 바와 같이 Web3Modal은 이더리움 상호작용을 기본적으로 지원하지 않습니다. 네트워크를 추가하거나 전환하려면 이더리움 라이브러리에 (EIP-3085 또는 EIP-3326을 통해) 직접 요청해야 합니다. 다음은 사용자 지갑에 해당 네트워크가 없는 경우 네트워크 전환을 요청하고 해당 네트워크를 대체 네트워크로 추가하는 예시입니다:
const switchNetwork = async () => {
if (!provider) return;
try {
await provider.request({
method: "wallet_switchEthereumChain",
params: [{ chainId: toHex(8217) }],
});
} catch (switchError) {
// This error code indicates that the chain has not been added to MetaMask.
if (switchError.code === 4902) {
try {
await provider.request({
method: "wallet_addEthereumChain",
params: [
{
chainId: toHex(8217),
chainName: "Klaytn TestNet",
rpcUrls: ["https://klaytn-mainnet-rpc.allthatnode.com:8551"],
blockExplorerUrls: ["https://baobob.scope.com/"],
},
],
});
} catch (addError) {
throw addError;
}
}
}
};
return (
<div className="App">
<button onClick={switchNetwork}>Switch Network</button>
</div>
)
메시지 서명하기
공급자(Provider) 및 서명자(Signer) 객체를 초기화하면 사용자는 임의의 문자열에 서명할 수 있습니다.
2단계: 아래 코드를 @klaytn/klip-web3-provider/node_modules/caver-js/packages/caver.ipfs/package.json 파일에 붙여넣습니다.
"browser": {
"fs": false
},
Polyfill node core module error
BREAKING CHANGES: webpack<5 used to include polyfills for node.js core modules by default.
다음 단계
은 개발자가 구성을 쉽게 커스터마이징하여 자신의 dApp에 다양한 공급자에 대한 지원을 간편하게 추가할 수 있도록 도와주는 라이브러리입니다. 본 라이브러리를 통해 쉽게 지갑을 연결하고, 트랜잭션를 수행하고, 계정을 관리할 수 있습니다.
필요한 지갑을 설치됨(, , ).
RPC 엔드포인트: 지원되는 에서 가져올 수 있음.
에서 얻은 테스트 KLAY: 충분한 KLAY를 계정에 충전.
블록체인과 상호작용하기 위해 web3Modal과 선호하는 라이브러리를 설치합니다. 이 튜토리얼에서는 에서 파생되어 Kaikas 지갑과 Klip 지갑을 추가할 수 있도록 수정된 을 설치해 보겠습니다. 또한, 이 튜토리얼에서는 ethers.js를 사용해 Klaytn 블록체인과 상호작용할 것입니다.
이 오류는 Webpack 5 버전을 사용할 때 발생합니다. 이 버전에서는 NodeJS 폴리필이 더 이상 기본으로 지원되지 않습니다. 이 문제를 해결하려면 해당 를 참조하세요.
Web3Modal에 대한 자세한 가이드는 및 에서 확인할 수 있습니다. 또한 이 가이드에 대한 전체 코드 구현은 에서 확인할 수 있습니다.