useAccount

Hook for accessing information (address, ens, balance, etc.) about connected account.

import { useAccount } from 'wagmi'

Usage#

import { useAccount } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, disconnect] = useAccount()

  return (
    <>
      <div>{data?.address}</div>

      <button onClick={disconnect}>
        Disconnect from {data?.connector?.name}
      </button>
    </>
  )
}

Return Values#

state#

{
  data?: {
    address: string
    balance: Balance
    connector: Connector
    ens?: {
      avatar?: string
      name: string
    }
  }
  error?: Error
  loading?: boolean
}

disconnect#

() => void

Configuration#

fetchBalance (optional)#

Fetches Ethereum balance for connected account. Defaults to false.

import { useAccount } from 'wagmi'

const App = () => {
  const [{ data, error, loading }] = useAccount({
    fetchBalance: true,
  })

  if (loading) return <div>Fetching balance…</div>
  if (error) return <div>Error fetching balance</div>
  return <div>{data?.balance?.formatted}</div>
}

fetchEns (optional)#

Fetches ENS name and avatar for connected account. Defaults to false.

import { useAccount } from 'wagmi'

const App = () => {
  const [{ data, error, loading }] = useAccount({
    fetchEns: true,
  })

  if (loading) return <div>Fetching ENS…</div>
  if (error) return <div>Error fetching ENS</div>
  return (
    <>
      <div>{data?.ens?.name}</div>
      <img src={data?.ens?.avatar} />
    </>
  )
}