เริ่มต้นใช้งาน Wagmi

npm i wagmi viem
pnpm i wagmi viem
yarn add wagmi viem

import { configureChains } from '@wagmi/core'
import { optimism, optimismGoerli } from '@wagmi/core/chains'
import { publicProvider } from '@wagmi/core/providers/public'
import { useState } from 'react'
import { WagmiConfig, createConfig } from 'wagmi'

import './App.css'

const { publicClient } = configureChains(
  [optimism, optimismGoerli],
  [publicProvider()]
)
const config = createConfig({
  autoConnect: true,
  publicClient: publicClient,
})

function App() {
  return (
    <WagmiConfig config={config}>
			{...}
    </WagmiConfig>
  )
}
export default App

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

export default function ConnectWallet() {
  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>
}

import { configureChains } from '@wagmi/core'
import { optimism, optimismGoerli } from '@wagmi/core/chains'
import { publicProvider } from '@wagmi/core/providers/public'
import { WagmiConfig, createConfig } from 'wagmi'
import './App.css'
import ConnectWallet from './ConnectWallet'

const { publicClient } = configureChains(
  [optimism, optimismGoerli],
  [publicProvider()]
)
const config = createConfig({
  autoConnect: true,
  publicClient: publicClient,
})

function App() {
  return (
    <WagmiConfig config={config}>
      <ConnectWallet />
    </WagmiConfig>
  )
}

export default App

import { optimism, optimismGoerli } from '@wagmi/core/chains'
import { publicProvider } from '@wagmi/core/providers/public'
import { configureChains, createConfig, WagmiConfig } from 'wagmi'
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
import './App.css'
import SwitchChain from './CheckChain'
import ConnectWallet from './ConnectWallet'

export const suportChains = [optimism, optimismGoerli]

const { chains, publicClient } = configureChains(
  suportChains,
  [publicProvider()]
)

const config = createConfig({
  autoConnect: true,
  publicClient,
  connectors: [
    new MetaMaskConnector({
      chains,
    }),
  ],
})

function App() {
  return (
    <WagmiConfig config={config}>
      <ConnectWallet />
      <SwitchChain />
    </WagmiConfig>
  )
}

export default App

import { useAccount, useConnect, useDisconnect } from 'wagmi'
import { MetaMaskConnector } from 'wagmi/connectors/metaMask'
import { suportChains } from './App'

export default function ConnectWallet() {
  const { address, isConnected } = useAccount()
  const { connect } = useConnect({
    connector: new MetaMaskConnector({
      chains: suportChains,
      options: {
        shimDisconnect: true,
      },
    }),
  })
  const { disconnect } = useDisconnect()

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

import { useAccount, useNetwork, useSwitchNetwork } from 'wagmi'
import { suportChains } from './App'

export default function SwitchChain() {
  const { chain } = useNetwork()
  const { address } = useAccount()
  const { error, isLoading, pendingChainId, switchNetworkAsync } =
    useSwitchNetwork()
  const isNotSupport = !(
    chain &&
    suportChains &&
    suportChains.map((x) => x.id as number).includes(chain.id)
  )
  if (!address) {
    return null
  }
  return (
    <div>
      {isNotSupport
        ? 'Please Switch network'
        : chain && <div>Connected to {chain.name}</div>}

      {suportChains.map((x) => (
        <button
          disabled={
            !switchNetworkAsync ||
            x.id === chain?.id ||
            (pendingChainId === x.id && isLoading)
          }
          key={x.id}
          onClick={() => switchNetworkAsync?.(x.id)}
        >
          {x.name}
        </button>
      ))}

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