Skip to content
Documentation
/
Hooks
/
useNetwork

useNetwork

Hook for accessing information about connected network.

import { useNetwork } from 'wagmi'

Usage

Some connectors do not support programmatic network switching (i.e. WalletConnect) and switchNetwork will be undefined. For those situations, you can typically switch networks in the wallet app (i.e. Rainbow) and wagmi will stay up-to-date.

import { useNetwork } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, switchNetwork] = useNetwork()

  return (
    <>
      <div>
        {data.chain?.name ?? networkData.chain?.id}{' '}
        {data.chain?.unsupported && '(unsupported)'}
      </div>

      {switchNetwork &&
        data.chains.map((x) =>
          x.id === data.chain?.id ? null : (
            <button key={x.id} onClick={() => switchNetwork(x.id)}>
              Switch to {x.name}
            </button>
          ),
        )}

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

Return Values

result

{
  data?: {
    chain?: Chain & { unsupported: boolean }
    chains: Chain[]
  }
  error?: Error
  loading?: boolean
}

switchNetwork

(chainId: number) => Promise<{ data?: Chain; error?: Error }>
useFeeData
useProvider