wagmi web3 지갑 연동 라이브러리 정리

Wagmi

- react, typescript를 지원하는 라이브러리로 이더리움 어플리케이션을 구축할 때 지갑 연결 및 체인 데이터 관리에 있어서 직관적이고 효율적으로 처리할 수 있도록 도와주는 라이브러리이다.

 

주요 특징

- React Hook 기반 설계를 통해 리액트에서 쉽게 사용 가능하다.

- typescript로 구현되어 있다.

- 다양한 지갑 지원 ( MetaMask, WalletConnect, Coinbase Wallet 등 여러 지갑 연동 )

- 다양한 체인 지원 ( 이더리움 외에도 Polygon, Arbitrum 등 다양한 체인 지원 )

- Type-safe API 지원

---

Type-safe API

abi 기반으로 스마트 계약 함수 호출

import { useContractRead, useContractWrite } from 'wagmi';
import { abi } from './MyContractABI'; // ABI JSON 파일

const contractConfig = {
  address: '0xYourContractAddress',
  abi: abi,
};

const MyComponent = () => {
  // 타입 안전하게 함수 호출
  const { data, isError } = useContractRead({
    ...contractConfig,
    functionName: 'balanceOf',
    args: ['0xUserAddress'], // 타입에 맞는 파라미터 자동 체크
  });

  const { write } = useContractWrite({
    ...contractConfig,
    functionName: 'transfer',
    args: ['0xRecipientAddress', BigInt(1000)], // 타입 안전
  });

  return (
    <div>
      <p>Balance: {data?.toString()}</p>
      <button onClick={() => write()}>Transfer</button>
    </div>
  );
};

- useContractRead, useContractWrite를 사용하여 스마트 계약과 상호작용할 때 타입 안전성을 제공한다.

---

체인 연결 타입 강제

import { useSwitchNetwork } from 'wagmi';

const SwitchNetworkButton = () => {
  const { switchNetwork, chain } = useSwitchNetwork();

  return (
    <button onClick={() => switchNetwork?.(1)}>
      Switch to {chain?.name ?? 'Ethereum'}
    </button>
  );
};

- useSwitchNetwork를 사용하여 사용자가 특정 네트워크로 강제할 수 있다.

- 숫자 형식의 체인 ID만 허용하며, 잘못된 형식의 데이터는 컴파일 타임에 에러를 발생 시킨다.

 

---

Wagmi React Hook

• useAccount

import { useAccount } from 'wagmi';

const AccountInfo = () => {
  const { address, isConnected } = useAccount();

  return isConnected ? <p>Address: {address}</p> : <p>Not Connected</p>;
};

- 현재 연결된 계정 정보를 반환한다.

- address: 연결된 지갑 주소

- isConnected: 연결 여부

---

• useConnect

import { useConnect } from 'wagmi';

const ConnectWallet = () => {
  const { connect, connectors } = useConnect();

  return (
    <div>
      {connectors.map((connector) => (
        <button key={connector.id} onClick={() => connect(connector)}>
          Connect {connector.name}
        </button>
      ))}
    </div>
  );
};

- 사용자가 지갑을 연결할 수 있도록 도와준다.

- connect: 지갑 연결 함수

- connectors: 사용 가능한 지갑 목록

- error: 연결 시 발생한 에러

---

• useDiconnect

import { useDisconnect } from 'wagmi';

const DisconnectWallet = () => {
  const { disconnect } = useDisconnect();

  return <button onClick={disconnect}>Disconnect</button>;
};

- 현재 연결된 지갑을 해제한다.

- disconnect: 연결 해제 함수

 

 

• useSignMessage

import { useSignMessage } from 'wagmi';

const SignMessage = () => {
  const { signMessage, data } = useSignMessage();

  return (
    <div>
      <button onClick={() => signMessage({ message: 'Hello, Ethereum!' })}>
        Sign Message
      </button>
      {data && <p>Signed Message: {data}</p>}
    </div>
  );
};

- 사용자의 메시지 서명을 요청하고, 결과를 반환다.

- signMessage: 서명 요청 함수

- data: 서명 결과

- isLoading: 서명 처리 상태

---

• useChainId

import { useChainId } from 'wagmi';

const NetworkInfo = () => {
  const chainId = useChainId();

  return <p>Connected to Chain ID: {chainId}</p>;
};

- 현재 연결된 네트워크의 체인 ID를 반환 한다.

- chainId: 연결된 네트워크의 체인 ID

---

• useConnectors

import { useConnectors } from 'wagmi';

const WalletList = () => {
  const { connectors } = useConnectors();

  return (
    <ul>
      {connectors.map((connector) => (
        <li key={connector.id}>{connector.name}</li>
      ))}
    </ul>
  );
};

- 사용 가능한 지갑 커넥터 목록을 반환

- connectors : 지갑 커넥터 배열

 

---

Wagmi 사용 흐름도

• 지갑 연결 : useConnect로 사용자가 원하는 지갑을 연결 한다.
• 계정 상태 확인 : useAccount로 현재 연결된 지갑 정보를 가져온다.
• 네트워크 확인: useChainId로 사용자가 올바른 체인에 연결되었는지 확인한다.
• 메시지 서명: useSignMessage로 데이터를 서명받아 인증 과정을 처리한다.
• 연결 해제: useDisconnect로 연결을 해제한다.