[Wagmi] 개념 및 사용방법

🍀 Wagmi이란?

▶️ React Hooks for Ethereum

Wagmi는 Ethereum 작업을 시작하는 데 필요한 모든 것을 포함하는 React Hooks의 모음이다.

Wagmi를 사용하면 캐싱, 요청 중복 제거 및 지속성을 통해 "Connect Wallet", ENS 표시 및 균형 정보, 메시지 서명, 계약 및 기타 작업을 쉽게 수행할 수 있다.

 

🍀 설치 방법

npm i wagmi ethers

 

🍀 사용 예시

import { WagmiConfig, createClient } from 'wagmi'
import { getDefaultProvider } from 'ethers'

const client = createClient({
  autoConnect: true,
  provider: getDefaultProvider(),
})

function App() {
  return (
    <WagmiConfig client={client}>
      <Profile />
    </WagmiConfig>
  )
}

이 예에서는 Wagmi Client를 생성하여 WagmiConfig React Context에 전달합니다.
클라이언트가 Ethers Default Provider를 사용하도록 설정되어 있고, 이전에 연결된 지갑에 자동으로 연결됩니다.

import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'

function Profile() {
  const { address, isConnected } = useAccount()
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  })
  const { disconnect } = useDisconnect()

  if (isConnected)
    return (
      <div>
        Connected to {address}
        <button onClick={() => disconnect()}>Disconnect</button>
      </div>
    )
  return <button onClick={() => connect()}>Connect Wallet</button>
}

 

다음으로, UseConnect Hook을 사용하여 injected wallet(예: MetaMask)을 앱에 연결합니다.
마지막으로 연결된 계정의 주소를 useAccount로 표시하고 useDisconnect로 연결을 끊을 수 있도록 합니다.

 

🍀 특징들

• 20+ Hooks for working with wallets, ENS, contracts, transactions, signing, etc.
• Built-in wallet connectors for MetaMask, WalletConnect, Coinbase Wallet, and Injected
• Caching, request deduplication, multicall, batching, and persistence
• Auto-refresh data on wallet, block, and network changes
• TypeScript ready
• Test suite running against forked Ethereum network
• 등등

 

🔅 (npm 설치 후) 빠르게 사용 맟 시작하는 방법 

1. Wagmi에서 사용할 chains과 providers를 구성

import { configureChains, chain } from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'

const { chains, provider, webSocketProvider } = configureChains(
  [chain.mainnet, chain.polygon],
  [publicProvider()],
)

참고: 프로덕션 앱에서는 공용 공급자 엔드포인트에서 속도 제한이 발생할 수 있으므로 publicProvider만 configureChains에 전달하는 것보다는 추가로 alchemyProvider 또는 infuraProvider를 통과하는 것을 권장한다.

 

2. Wagmi client 생성하기

createClient를 사용하여 wagmi Client 인스턴스를 만들고, configureChains의 결과를 해당 인스턴스로 전달한다.

import {
  WagmiConfig,
  createClient,
  configureChains,
  defaultChains,
} from 'wagmi'
import { publicProvider } from 'wagmi/providers/public'

const { chains, provider, webSocketProvider } = configureChains(
  [chain.mainnet, chain.polygon],
  [publicProvider()],
)

const client = createClient({
  autoConnect: true,
  provider,
  webSocketProvider,
})

 

3. App을 WagmiConfig태그로 감싼다.

WagmiConfig 구성 요소로 App을 감싸고 client를 전달한다.

const client = createClient({
  autoConnect: true,
  provider,
  webSocketProvider,
})

function App() {
  return (
    <WagmiConfig client={client}>
      <YourRoutes />
    </WagmiConfig>
  )
}

 

4. Use Hooks! 

Every component inside the WagmiConfig is now set up to use the wagmi hooks.

import { useAccount, useConnect, useEnsName } from 'wagmi'
import { InjectedConnector } from 'wagmi/connectors/injected'

function Profile() {
  const { address, isConnected } = useAccount()
  const { data: ensName } = useEnsName({ address })
  const { connect } = useConnect({
    connector: new InjectedConnector(),
  })

  if (isConnected) return <div>Connected to {ensName ?? address}</div>
  return <button onClick={() => connect()}>Connect Wallet</button>
}

 

5.  더 자세한 예시들

https://wagmi.sh/examples/connect-wallet

Connect Wallet Example – wagmi

 

👍🏻 참고자료

https://wagmi.sh/