Import
import { useGetMultipleContractsInfo } from '@0xsequence/hooks'
Usage
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>
)
}
Return Type: UseQueryResult<ContractInfo[]>
The hook returns all properties from React Query’s UseQueryResult
with an array of contract information. Here’s the detailed structure:
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;
}
Properties
data
ContractInfo[] | undefined
Array of objects containing contract information for each requested contract:
name
: Contract or token name
symbol
: Token symbol
decimals
: Number of decimals (for ERC20 tokens)
logoURI
: URL of the contract/token logo
type
: Contract type (ERC20, ERC721, ERC1155)
verified
: Whether the contract is verified
description
: Optional contract description
websiteURL
: Optional project website URL
imageURL
: Optional project image URL
bannerURL
: Optional banner image URL
chainID
: Chain ID where the contract exists
isLoading
boolean
Loading state for the data fetch.
isError
boolean
Error state indicating if the query failed.
error
Error | null
Any error that occurred during data fetching.
Parameters
The hook accepts two parameters:
args: GetContractInfoArgs[]
interface GetContractInfoArgs {
chainID: string
contractAddress: string
}
Parameter | Type | Description |
---|
chainID | string | Chain ID as string (e.g., “1” for Ethereum mainnet) |
contractAddress | string | Contract address to fetch info for |
options: HooksOptions
interface HooksOptions {
disabled?: boolean
retry?: boolean
}
Parameter | Type | Description |
---|
disabled | boolean | (Optional) Disable the query from automatically running |
retry | boolean | (Optional) Whether to retry failed queries |