Wallet 연동 완벽 가이드 블록체인

블록체인 애플리케이션에서 지갑 연동을 구현하는 방법을 단계별로 알아봅니다. MetaMask, WalletConnect 등 주요 지갑 연동 방법과 트랜잭션 처리까지 실전 예제로 학습합니다.

---

---

들어가며

이 글에서는 Wallet 연동 완벽 가이드 블록체인에 대해 상세히 알아보겠습니다. 총 10가지 주요 개념을 다루며, 각각의 개념에 대한 설명과 실제 코드 예제를 함께 제공합니다.

목차

1. MetaMask_연결_확인
2. 지갑_계정_연결
3. 현재_네트워크_확인
4. 계정_잔액_조회
5. 네트워크_변경_요청
6. 트랜잭션_전송
7. 계정_변경_감지
8. 네트워크_변경_감지
9. 메시지_서명_요청
10. WalletConnect_연동

---

1. MetaMask 연결 확인

개요

브라우저에 MetaMask가 설치되어 있는지 확인하고, 지갑 연결 가능 여부를 체크합니다.

코드 예제

const checkMetaMask = async () => {
  if (typeof window.ethereum !== 'undefined') {
    console.log('MetaMask가 설치되어 있습니다!');
    return true;
  }
  alert('MetaMask를 설치해주세요');
  return false;
};

설명

window.ethereum 객체의 존재 여부로 MetaMask 설치를 확인합니다. 설치되지 않은 경우 사용자에게 알림을 표시합니다.

---

2. 지갑 계정 연결

개요

사용자의 지갑 계정에 연결 요청을 보내고, 승인 시 계정 주소를 받아옵니다.

코드 예제

const connectWallet = async () => {
  try {
    const accounts = await window.ethereum.request({
      method: 'eth_requestAccounts'
    });
    console.log('연결된 계정:', accounts[0]);
    return accounts[0];
  } catch (error) {
    console.error('연결 실패:', error);
  }
};

설명

eth_requestAccounts 메서드로 지갑 연결을 요청하고, 사용자가 승인하면 계정 주소 배열을 반환받습니다.

---

3. 현재 네트워크 확인

개요

연결된 지갑이 어떤 블록체인 네트워크에 연결되어 있는지 확인합니다.

코드 예제

const getNetwork = async () => {
  const chainId = await window.ethereum.request({
    method: 'eth_chainId'
  });
  const networks = {
    '0x1': 'Ethereum Mainnet',
    '0x89': 'Polygon',
    '0x38': 'BSC'
  };
  return networks[chainId] || '알 수 없는 네트워크';
};

설명

eth_chainId로 현재 체인 ID를 조회하고, 미리 정의한 네트워크 맵핑으로 네트워크 이름을 반환합니다.

---

4. 계정 잔액 조회

개요

연결된 지갑 계정의 이더리움 잔액을 조회하고 ETH 단위로 변환합니다.

코드 예제

const getBalance = async (address) => {
  const balance = await window.ethereum.request({
    method: 'eth_getBalance',
    params: [address, 'latest']
  });
  const ethBalance = parseInt(balance, 16) / 10**18;
  return ethBalance.toFixed(4);
};

설명

eth_getBalance로 Wei 단위 잔액을 받아온 후, 10^18로 나누어 ETH 단위로 변환합니다.

---

5. 네트워크 변경 요청

개요

사용자에게 특정 블록체인 네트워크로 전환하도록 요청합니다.

코드 예제

const switchNetwork = async (chainId) => {
  try {
    await window.ethereum.request({
      method: 'wallet_switchEthereumChain',
      params: [{ chainId: chainId }]
    });
    console.log('네트워크 변경 완료');
  } catch (error) {
    console.error('네트워크 변경 실패:', error);
  }
};

설명

wallet_switchEthereumChain 메서드로 네트워크 전환을 요청합니다. 사용자가 승인하면 지갑의 네트워크가 변경됩니다.

---

6. 트랜잭션 전송

개요

이더리움을 다른 주소로 전송하는 트랜잭션을 생성하고 실행합니다.

코드 예제

const sendTransaction = async (to, amount) => {
  const params = {
    to: to,
    from: window.ethereum.selectedAddress,
    value: (amount * 10**18).toString(16)
  };
  const txHash = await window.ethereum.request({
    method: 'eth_sendTransaction',
    params: [params]
  });
  return txHash;
};

설명

받는 주소와 금액을 설정하고, eth_sendTransaction으로 트랜잭션을 전송합니다. 금액은 Wei 단위로 변환됩니다.

---

7. 계정 변경 감지

개요

사용자가 지갑에서 계정을 변경했을 때 이를 감지하고 대응합니다.

코드 예제

window.ethereum.on('accountsChanged', (accounts) => {
  if (accounts.length === 0) {
    console.log('지갑 연결이 해제되었습니다');
  } else {
    console.log('계정 변경:', accounts[0]);
    updateUI(accounts[0]);
  }
});

설명

accountsChanged 이벤트 리스너로 계정 변경을 실시간 감지합니다. 연결 해제나 계정 전환 시 UI를 업데이트할 수 있습니다.

---

8. 네트워크 변경 감지

개요

사용자가 지갑에서 네트워크를 변경했을 때 감지하고 페이지를 새로고침합니다.

코드 예제

window.ethereum.on('chainChanged', (chainId) => {
  console.log('네트워크 변경됨:', chainId);
  window.location.reload();
});

설명

chainChanged 이벤트로 네트워크 변경을 감지합니다. 대부분의 경우 페이지 새로고침으로 상태를 초기화합니다.

---

9. 메시지 서명 요청

개요

사용자에게 메시지 서명을 요청하여 계정 소유권을 증명합니다.

코드 예제

const signMessage = async (message, account) => {
  try {
    const signature = await window.ethereum.request({
      method: 'personal_sign',
      params: [message, account]
    });
    return signature;
  } catch (error) {
    console.error('서명 실패:', error);
  }
};

설명

personal_sign 메서드로 메시지 서명을 요청합니다. 로그인 인증이나 소유권 증명에 활용됩니다.

---

10. WalletConnect 연동

개요

WalletConnect 라이브러리를 사용하여 모바일 지갑과 연결합니다.

코드 예제

import WalletConnect from '@walletconnect/client';

const connector = new WalletConnect({
  bridge: 'https://bridge.walletconnect.org',
  qrcodeModal: QRCodeModal
});

await connector.connect();
const accounts = connector.accounts;

설명

WalletConnect를 초기화하고 QR 코드를 통해 모바일 지갑과 연결합니다. 브라우저 확장 없이 모바일 지갑 사용이 가능합니다.

---

마치며

이번 글에서는 Wallet 연동 완벽 가이드 블록체인에 대해 알아보았습니다. 총 10가지 개념을 다루었으며, 각각의 사용법과 예제를 살펴보았습니다.

관련 태그

#JavaScript #Web3 #Wallet #Blockchain #MetaMask