Importar
import { useGetMultipleContractsInfo } from '@0xsequence/hooks'
Uso
import { useGetMultipleContractsInfo } from '@0xsequence/hooks'
function CrossChainPortfolio() {
const {
data: contractsInfo,
isLoading,
isError
} = useGetMultipleContractsInfo([
// NFTs
{
chainID: "1",
contractAddress: "0x..."
},
{
chainID: "137",
contractAddress: "0x..."
},
// ERC20 Tokens
{
chainID: "1",
contractAddress: "0x..."
},
{
chainID: "137",
contractAddress: "0x..."
}
])
if (isLoading) return <div>Loading portfolio...</div>
if (isError) return <div>Error loading portfolio</div>
const nfts = contractsInfo?.filter(info =>
info.type === 'ERC721' || info.type === 'ERC1155'
) || []
const tokens = contractsInfo?.filter(info =>
info.type === 'ERC20'
) || []
return (
<div className="portfolio">
<div className="nft-collections">
<h2>NFT Collections</h2>
{nfts.map((nft, index) => (
<div key={index} className="collection-card">
<img
src={nft.logoURI}
alt={nft.name}
width={64}
height={64}
/>
<div className="collection-info">
<h3>{nft.name}</h3>
<span>Type: {nft.type}</span>
<span>Chain ID: {nft.chainID}</span>
{nft.description && (
<p>{nft.description}</p>
)}
</div>
</div>
))}
</div>
<div className="tokens">
<h2>Tokens</h2>
{tokens.map((token, index) => (
<div key={index} className="token-card">
<img
src={token.logoURI}
alt={token.symbol}
width={32}
height={32}
/>
<div className="token-info">
<h4>{token.name}</h4>
<span>Symbol: {token.symbol}</span>
<span>Decimals: {token.decimals}</span>
<span>Chain ID: {token.chainID}</span>
</div>
</div>
))}
</div>
</div>
)
}
Tipo de retorno: UseQueryResult<ContractInfo[]>
El hook retorna todas las propiedades de UseQueryResult
de React Query con un arreglo de información de contratos. Esta es la estructura detallada:
interface ContractInfo {
chainId: number;
address: string;
source: string;
name: string;
type: string;
symbol: string;
decimals?: number;
logoURI: string;
deployed: boolean;
bytecodeHash: string;
extensions: ContractInfoExtensions;
updatedAt: string;
notFound: boolean;
queuedAt?: string;
status: ResourceStatus;
}
Propiedades
data
ContractInfo[] | undefined
Arreglo de objetos que contienen información de contrato para cada contrato solicitado:
name
: Nombre del contrato o token
symbol
: Símbolo del token
decimals
: Número de decimales (para tokens ERC20)
logoURI
: URL del logo del contrato/token
type
: Tipo de contrato (ERC20, ERC721, ERC1155)
verified
: Indica si el contrato está verificado
description
: Descripción opcional del contrato
websiteURL
: URL opcional del sitio web del proyecto
imageURL
: URL opcional de la imagen del proyecto
bannerURL
: URL opcional de la imagen de banner
chainID
: ID de cadena donde existe el contrato
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: GetContractInfoArgs[]
interface GetContractInfoArgs {
chainID: string
contractAddress: string
}
Parámetro | Type | Description |
---|
chainID | string | ID de cadena como string (por ejemplo, “1” para Ethereum mainnet) |
contractAddress | string | Dirección del contrato para obtener información |
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 |