useTokensBalance()

Use it to retrieve the balance of:

• All the associated tokens when tokens property is not passed.
• The balance of the provided tokens list.

Usage

When parameter multiSession={false}:

Request the balance for all the associated tokens with the current account:

import { useTokensBalance } from '@buidlerlabs/hashgraph-react-wallets'

const App = () => {
  const { data: tokensBalance } = useTokensBalance()

  return (
    <ul>
      {(tokensBalance ?? []).map(({ token_id, balance }) => (
        <li key={token_id}>
          <span>{token_id}</span> - <span>{balance}</span>
        </li>
      ))}
    </ul>
  )
}

Parameters

interface IUseTokensBalanceProps<Connector> {
  connector?: Connector | null
  accountId?: string
  tokens?: string[]
  autoFetch?: boolean
}

- connector

• Type: HWBridgeConnector
• Required: false

Request the tokens balance for a specific wallet when multiSession={true}

import { HashpackConnector } from '@buidlerlabs/hashgraph-react-wallets/connectors'
import { useTokensBalance } from '@buidlerlabs/hashgraph-react-wallets'

const App = () => {
  const { data: tokensBalance } = useTokensBalance({ connector: HashpackConnector }) 

  return (
    <ul>
      {(tokensBalance ?? []).map(({ token_id, balance }) => (
        <li key={token_id}>
          <span>{token_id}</span> - <span>{balance}</span>
        </li>
      ))}
    </ul>
  )
}

---

- accountId

• Type: string
• Required: false

Retrieve the balance of the associated tokens for a different account.

import { useWallet, useTokensBalance } from '@buidlerlabs/hashgraph-react-wallets'

const App = () => {
  const { isConnected } = useWallet() 
  const { data: tokensBalance } = useTokensBalance({ autoFetch: isConnected }) 

  return (
    <ul>
      {(tokensBalance ?? []).map(({ token_id, balance }) => (
        <li key={token_id}>
          <span>{token_id}</span> - <span>{balance}</span>
        </li>
      ))}
    </ul>
  )
}

- tokens

• Type: string[]
• Required: false

Retrieve the balance of the provided tokens IDs.

import { useTokensBalance } from '@buidlerlabs/hashgraph-react-wallets'

const App = () => {
  const { data: tokensBalance } = useTokensBalance({
    tokens: ['0.0.123456', '0.0.654321'], 
  })

  return (
    <ul>
      {(tokensBalance ?? []).map(({ token_id, balance }) => (
        <li key={token_id}>
          <span>{token_id}</span> - <span>{balance}</span>
        </li>
      ))}
    </ul>
  )
}

---

- autoFetch

• Type: boolean
• Required: false

import { useWallet, useTokensBalance } from '@buidlerlabs/hashgraph-react-wallets'

const App = () => {
  const { isConnected } = useWallet() 
  const { data: tokensBalance } = useTokensBalance({ autoFetch: isConnected }) 

  return (
    <ul>
      {(tokensBalance ?? []).map(({ token_id, balance }) => (
        <li key={token_id}>
          <span>{token_id}</span> - <span>{balance}</span>
        </li>
      ))}
    </ul>
  )
}

Return Type

type TTokensBalanceResult = {
  automatic_association: boolean
  balance: number
  created_timestamp: string
  decimals: number
  token_id: string
  freeze_status: string
  kyc_status: string
}

Returns a TanStack query result where TData is TTokensBalanceResult[]

type UseQueryResult<TTokensBalanceResult[], Error>