[Wagmi] Connect Wallet 방법

728x90

Wagmi를 사용할 때 당신의 앱에 지갑을 연결하는 것은 매우 간단하며 MetaMask, WalletConnect, Coinbase Wallet으로 시작하고 실행하는 데 5분도 걸리지 않는다.

아래 예제는 useConnect, useAccount 및 useDisconnect를 사용하여 지갑을 연결하고 연결된 계정에 대한 ENS 정보를 볼 수 있는 예제이다.

🍀Connect Wallet 방법

1. Connectors 설정

Injected(예: MetaMask), WalletConnect 및 Coinbase Wallet connectors로 설정된 새로운 Wagmi client를 만든다.

import {
  WagmiConfig,
  createClient,
  defaultChains,
  configureChains,
} from 'wagmi'

import { alchemyProvider } from 'wagmi/providers/alchemy'
import { publicProvider } from 'wagmi/providers/public'

import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet'
import { InjectedConnector } from 'wagmi/connectors/injected'
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
import { WalletConnectConnector } from 'wagmi/connectors/walletConnect'

// Alchemy provider를 사용하여 chains 및 providers를 설정(=구성)한다.
// 유명한 2가지 provider는 Alchemy (alchemy.com) 와 Infura (infura.io) 이다.
const { chains, provider, webSocketProvider } = configureChains(defaultChains, [
  alchemyProvider({ apiKey: 'yourAlchemyApiKey' }),
  publicProvider(),
])

// Set up client 
const client = createClient({
  autoConnect: true,
  connectors: [
    new MetaMaskConnector({ chains }),
    new CoinbaseWalletConnector({
      chains,
      options: {
        appName: 'wagmi',
      },
    }),
    new WalletConnectConnector({
      chains,
      options: {
        qrcode: true,
      },
    }),
    new InjectedConnector({
      chains,
      options: {
        name: 'Injected',
        shimDisconnect: true,
      },
    }),
  ],
  provider,
  webSocketProvider,
})

// Pass client to React Context Provider
function App() {
  return (
    <WagmiConfig client={client}>
      <Profile />
    </WagmiConfig>
  )
}

2. Wallet Option 보여주기

앞서 connectors가 설정되었으므로, use Connect를 사용해 지갑을 접속하는 connector를 사용자가 선택할 수 있도록 하는 단계이다

import { useConnect } from 'wagmi'

export function Profile() {
  const { connect, connectors, error, isLoading, pendingConnector } =
    useConnect()

  return (
    <div>
      {connectors.map((connector) => (
        <button
          disabled={!connector.ready}
          key={connector.id}
          onClick={() => connect({ connector })}
        >
          {connector.name}
          {!connector.ready && ' (unsupported)'}
          {isLoading &&
            connector.id === pendingConnector?.id &&
            ' (connecting)'}
        </button>
      ))}

      {error && <div>{error.message}</div>}
    </div>
  )
}

3. Connected Wallet 보여주기

마지막으로, 계정이 연결되면 연결된 주소, ENS 이름, 아바타 등 기본적인 정보를 보여주는 단계이다.

여기서 useAccount으로 연결된 계정을 표시하고 useDisconnect로 연결 해제 버튼을 추가할 수 있다.

import {
  useAccount,
  useConnect,
  useDisconnect,
  useEnsAvatar,
  useEnsName,
} from 'wagmi'

export function Profile() {
  const { address, connector, isConnected } = useAccount()
  const { data: ensAvatar } = useEnsAvatar({ addressOrName: address })
  const { data: ensName } = useEnsName({ address })
  const { connect, connectors, error, isLoading, pendingConnector } =
    useConnect()
  const { disconnect } = useDisconnect()

  if (isConnected) {
    return (
      <div>
        <img src={ensAvatar} alt="ENS Avatar" />
        <div>{ensName ? `${ensName} (${address})` : address}</div>
        <div>Connected to {connector.name}</div>
        <button onClick={disconnect}>Disconnect</button>
      </div>
    )
  }

  return (
    <div>
      {connectors.map((connector) => (
        <button
          disabled={!connector.ready}
          key={connector.id}
          onClick={() => connect({ connector })}
        >
          {connector.name}
          {!connector.ready && ' (unsupported)'}
          {isLoading &&
            connector.id === pendingConnector?.id &&
            ' (connecting)'}
        </button>
      ))}

      {error && <div>{error.message}</div>}
    </div>
  )
}

이제 사용자가 지갑을 연결하고 연결된 계정에 대한 정보를 볼 수 있고, wagmi는 또한 연결과 정보를 최신 상태로 유지하기 위해 계정 및 체인 변경 사항을 계속 정보를 가져온다.