useGetTokenMetadata

Hook para obtener metadatos específicos de tokens individuales dentro de un contrato

​

Importar

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

​

Uso

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

// Example 1: Single NFT Details
function NFTDetails({ contractAddress, tokenId }) {
  const {
    data: tokensMetadata,
    isLoading,
    isError
  } = useGetTokenMetadata({
    chainID: "1", // Ethereum mainnet
    contractAddress, 
    tokenIDs: [tokenId]
  })

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

  const nft = tokensMetadata?.[0]
  if (!nft) return <div>NFT not found</div>

  return (
    <div className="nft-details">
      <img 
        src={nft.image}
        alt={nft.name}
        className="nft-image"
      />
      <div className="nft-info">
        <h1>{nft.name}</h1>
        <p>{nft.description}</p>
        
        <div className="attributes-grid">
          {nft.attributes?.map(attr => (
            <div key={attr.trait_type} className="attribute-card">
              <span className="trait-type">{attr.trait_type}</span>
              <span className="trait-value">{attr.value}</span>
              {attr.rarity && (
                <span className="trait-rarity">{attr.rarity}%</span>
              )}
            </div>
          ))}
        </div>
      </div>
    </div>
  )
}

// Example 2: Batch NFT Collection Display
function NFTCollectionGrid({ contractAddress, tokenIds }) {
  const {
    data: tokensMetadata,
    isLoading,
    isError
  } = useGetTokenMetadata({
    chainID: "1",
    contractAddress,
    tokenIDs: tokenIds // Will automatically chunk into batches of 50
  })

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

  return (
    <div className="nft-grid">
      {tokensMetadata?.map(token => (
        <div key={token.tokenId} className="nft-tile">
          <img 
            src={token.image}
            alt={token.name}
            loading="lazy"
          />
          <div className="nft-tile-info">
            <h3>{token.name}</h3>
            {token.attributes && (
              <div className="trait-pills">
                {token.attributes.slice(0, 3).map(attr => (
                  <span key={attr.trait_type} className="trait-pill">
                    {attr.trait_type}: {attr.value}
                  </span>
                ))}
              </div>
            )}
          </div>
        </div>
      ))}
    </div>
  )
}

​

Tipo de retorno: UseQueryResult<TokenMetadata[]>

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

interface TokenMetadata {
    tokenId: string;
    source: string;
    name: string;
    description?: string;
    image?: string;
    video?: string;
    audio?: string;
    properties?: {
        [key: string]: any;
    };
    attributes: Array<{
        [key: string]: any;
    }>;
    image_data?: string;
    external_url?: string;
    background_color?: string;
    animation_url?: string;
    decimals?: number;
    updatedAt?: string;
    assets?: Array<Asset>;
    status: ResourceStatus;
    queuedAt?: string;
    lastFetched?: string;
}

​

Propiedades

​

data

TokenMetadata[] | undefined

Arreglo de objetos que contienen metadatos para cada token solicitado:

• tokenId: ID del token específico
• source: Fuente/origen de los metadatos del token (por ejemplo, “sequence”, “opensea”)
• name: Nombre del token específico (por ejemplo, “Bored Ape #1234”)
• description: Descripción del token específico
• image: URL de la imagen del token (proxy automático a través del servicio de imágenes)
• video: URL de video si el token tiene contenido en video
• audio: URL de audio si el token tiene contenido en audio
• properties: Propiedades adicionales de metadatos como pares clave-valor
• attributes: Arreglo de objetos de atributos para NFTs
• image_data: Datos SVG/imágenes en crudo si se proporcionan
• external_url: URL externa asociada al token
• background_color: Color de fondo en formato hexadecimal
• animation_url: URL para contenido animado
• decimals: Decimales del token (para tokens ERC1155 fungibles)
• updatedAt: Marca de tiempo ISO de la última actualización de metadatos
• assets: Arreglo de archivos de activos adicionales
• status: Estado actual de los metadatos (“READY”, “PENDING”, “ERROR”)
• queuedAt: Marca de tiempo ISO cuando el indexado de metadatos fue puesto en cola
• lastFetched: Marca de tiempo ISO de la última obtención exitosa

​

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: GetTokenMetadataArgs

interface GetTokenMetadataArgs {
  chainID: string
  contractAddress: string
  tokenIDs: string[]
}

Parámetro	Type	Description
chainID	string	ID de cadena como string (por ejemplo, “1” para Ethereum mainnet)
contractAddress	string	Dirección del contrato del token/NFT
tokenIDs	string[]	Arreglo de IDs de tokens para obtener metadatos

​

options: HooksOptions

interface HooksOptions {
  disabled?: boolean
  retry?: boolean
}

Parámetro	Type	Description
disabled	boolean	(Opcional) Deshabilitar la consulta para que no se ejecute automáticamente
retry	boolean	(Opcional) Indica si se deben reintentar las consultas fallidas