​
Importar

import { useGetTokenBalancesSummary } from '@0xsequence/hooks'

​
Uso

import React from 'react'
import { useGetTokenBalancesSummary } from '@0xsequence/hooks'
import { ContractVerificationStatus } from '@0xsequence/connect'
import { useAccount } from 'wagmi'
import { formatUnits } from 'viem'

function TokenBalancesList() {
  const { address } = useAccount()
  
  const {
    data: tokens,
    isLoading,
    isError
  } = useGetTokenBalancesSummary({
    chainIds: [1, 137], // Ethereum and Polygon
    filter: {
      accountAddresses: [address || ''],
      omitNativeBalances: false,
      contractStatus: ContractVerificationStatus.VERIFIED,
      // Optional: filter specific tokens
      contractWhitelist: [
        '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48', // USDC
        '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2'  // WETH
      ]
    }
  })

  if (isLoading) return <div>Loading balances...</div>
  if (isError) return <div>Error loading balances</div>

  return (
    <div className="token-list">
      {tokens?.map(token => (
        <div 
          key={`${token.chainId}-${token.contractAddress}`}
          className="token-item"
        >
          <div className="token-info">
            {token.contractInfo?.logoURI && (
              <img 
                src={token.contractInfo.logoURI}
                alt={token.contractInfo.symbol}
                width={32}
                height={32}
              />
            )}
            <div>
              <h4>{token.contractInfo?.symbol || 'Unknown'}</h4>
              <p>{token.contractInfo?.name}</p>
            </div>
          </div>
          
          <div className="token-balance">
            <span>
              {token.contractInfo?.decimals
                ? formatUnits(token.balance, token.contractInfo.decimals)
                : token.balance}
            </span>
            <span className="chain-badge">
              Chain: {token.chainId}
            </span>
          </div>
        </div>
      ))}
    </div>
  )
}

​
Tipo de retorno: UseQueryResult<TokenBalance[]>

El hook retorna todas las propiedades de UseQueryResult de React Query con los datos de balances de tokens. Esta es la estructura detallada:

interface TokenBalance {
  contractType: ContractType
  contractAddress: string
  accountAddress: string
  balance: string
  blockHash: string
  blockNumber: number
  chainId: number
  uniqueCollectibles: string
  isSummary: boolean
  contractInfo?: {
    name: string
    symbol: string
    decimals: number
    logoURI: string
  }
}

​
Propiedades

​
data

TokenBalance[] | undefined

Arreglo de objetos de balance de tokens que contienen:

  • contractType: Tipo de contrato del token (NATIVE, ERC20, ERC721, ERC1155)
  • contractAddress: Dirección del contrato del token
  • accountAddress: Dirección de la cuenta que posee los tokens
  • balance: Balance del token como string (en unidades base)
  • chainId: Chain ID donde existe el token
  • blockHash: Hash del bloque donde el balance fue actualizado por última vez
  • blockNumber: Número de bloque donde el balance fue actualizado por última vez
  • uniqueCollectibles: Cantidad de coleccionables únicos
  • isSummary: Indica si el balance es un resumen
  • contractInfo: Información básica del contrato del token, incluyendo nombre, símbolo, decimales y URL del logo

​
isLoading

boolean

Estado de carga para la obtención de datos.

​
isError

boolean

Estado de error que indica si la consulta falló.

​
error

Error | null

Cualquier error que ocurrió durante la obtención de datos.

​
Parámetros

El hook acepta dos parámetros:

​
args: GetTokenBalancesSummaryArgs

interface GetTokenBalancesSummaryArgs {
  chainIds: number[]
  filter: {
    accountAddresses: string[]
    contractWhitelist?: string[]
    contractBlacklist?: string[]
    omitNativeBalances?: boolean
    contractStatus?: ContractVerificationStatus
  }
}
ParámetroTypeDescription
chainIdsnumber[]Array de IDs de cadena para obtener balances
filter.accountAddressesstring[]Arreglo de direcciones de cuentas para obtener balances
filter.contractWhiteliststring[](Opcional) Arreglo de direcciones de contratos a incluir
filter.contractBlackliststring[](Opcional) Arreglo de direcciones de contratos a excluir
filter.omitNativeBalancesboolean(Opcional) Si es verdadero, excluye balances de tokens nativos
filter.contractStatusContractVerificationStatus(Opcional) Filtro para el estado de verificación del contrato

​
options: BalanceHookOptions

interface BalanceHookOptions {
  disabled?: boolean
  retry?: boolean
  hideCollectibles?: boolean
}
ParámetroTypeDescription
disabledboolean(Opcional) Deshabilitar la consulta para que no se ejecute automáticamente
retryboolean(Opcional) Indica si se deben reintentar las consultas fallidas
hideCollectiblesboolean(Opcional) Si es true, filtra tokens ERC721 y ERC1155