• React
  • Hooks
  • useToken

useToken

Hook for fetching ERC-20 token information.

import { useToken } from 'wagmi'

Usage

The follow examples use $ENS.

import { useToken } from 'wagmi'
 
function App() {
  const { data, isError, isLoading } = useToken({
    address: '0xc18360217d8f7ab5e7c516566761ea12ce7f9d72',
  })
 
  if (isLoading) return <div>Fetching token…</div>
  if (isError) return <div>Error fetching token</div>
  return <div>Token: {data?.symbol}</div>
}

Return Value

{
  data?: {
    address: string
    decimals: number
    name: string
    symbol: string
    totalSupply: {
      formatted: string
      value: bigint
    }
  }
  error?: Error
  isIdle: boolean
  isLoading: boolean
  isFetching: boolean
  isSuccess: boolean
  isError: boolean
  isFetched: boolean
  isFetchedAfterMount: boolean
  isRefetching: boolean
  refetch: (options: {
    throwOnError: boolean
    cancelRefetch: boolean
  }) => Promise<{
    address: string
    decimals: number
    symbol: string
    totalSupply: {
      formatted: string
      value: bigint
    }
  }>
  status: 'idle' | 'error' | 'loading' | 'success'
}

Configuration

address (optional)

Address of ERC-20 token. If address is not defined, hook will not run.

import { useToken } from 'wagmi'
 
function App() {
  const token = useToken({
    address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
  })
}

chainId (optional)

Force a specific chain id for the request. The wagmi Client's publicClient must be set up as a chain-aware function for this to work correctly.

import { useToken } from 'wagmi'
 
function App() {
  const token = useToken({
    address: '0xc18360217d8f7ab5e7c516566761ea12ce7f9d72',
    chainId: 1,
  })
}

cacheTime (optional)

Time (in ms) which the data should remain in the cache. Defaults to 0.

import { useToken } from 'wagmi'
 
function App() {
  const token = useToken({
    address: '0xc18360217d8f7ab5e7c516566761ea12ce7f9d72',
    cacheTime: 2_000,
  })
}

enabled (optional)

Set this to false to disable this query from automatically running. Defaults to true.

import { useToken } from 'wagmi'
 
function App() {
  const token = useToken({
    address: '0xc18360217d8f7ab5e7c516566761ea12ce7f9d72',
    enabled: false,
  })
}

formatUnits (optional)

Formats fee data. Defaults to ether.

import { useToken } from 'wagmi'
 
function App() {
  const token = useToken({
    address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
    formatUnits: 'gwei',
  })
}

scopeKey (optional)

Scopes the cache to a given context. Hooks that have identical context will share the same cache.

import { useToken } from 'wagmi'
 
function App() {
  const token = useToken({
    address: '0xc18360217d8f7ab5e7c516566761ea12ce7f9d72',
    scopeKey: 'wagmi',
  })
}

staleTime (optional)

Time (in ms) after data is considered stale. If set to Infinity the data will never be considered stale. Defaults to 1000 * 60 * 60 * 24 (24 hours).

import { useToken } from 'wagmi'
 
function App() {
  const token = useToken({
    address: '0xc18360217d8f7ab5e7c516566761ea12ce7f9d72',
    staleTime: 2_000,
  })
}

suspense (optional)

Set this to true to enable suspense mode.

import { useToken } from 'wagmi'
 
function App() {
  const token = useToken({
    address: '0xc18360217d8f7ab5e7c516566761ea12ce7f9d72',
    suspense: true,
  })
}

onSuccess (optional)

Function to invoke when fetching new data is successful.

import { useToken } from 'wagmi'
 
function App() {
  const token = useToken({
    address: '0xc18360217d8f7ab5e7c516566761ea12ce7f9d72',
    onSuccess(data) {
      console.log('Success', data)
    },
  })
}

onError (optional)

Function to invoke when an error is thrown while fetching new data.

import { useToken } from 'wagmi'
 
function App() {
  const token = useToken({
    address: '0xc18360217d8f7ab5e7c516566761ea12ce7f9d72',
    onError(error) {
      console.log('Error', error)
    },
  })
}

onSettled (optional)

Function to invoke when fetching is settled (either successfully fetched, or an error has thrown).

import { useToken } from 'wagmi'
 
function App() {
  const token = useToken({
    address: '0xc18360217d8f7ab5e7c516566761ea12ce7f9d72',
    onSettled(data, error) {
      console.log('Settled', { data, error })
    },
  })
}