Skip to main content

useNFT

Fetches all data for a ERC-721 NFT#

This hook fetches data for a given ERC-721 NFT and takes in a contractAddress and tokenId.

note

You can use the NFTFetchConfiguration wrapper component to fetch data on other networks.

The data.nft object contains the majority of the NFT data. The pricing information is in data.pricing which corresponds to on-chain data for ZORA's Auction House and the perpetual zNFT auctions.

import { useNFT } from '@zoralabs/nft-hooks'
// Getting data for the NFT at contract address 0x8d04...ff63 with id 2const { data, error } = useNFT('0x8d04a8c79ceb0889bdd12acdf3fa9d207ed3ff63', '2')
// All Data relating to an NFTtype NFTDataType = {  // NFT Data  nft: {    id: string // ID of zNFT    contract: {      address: string      knownIdentifier?: 'ZORA'    }    owner: { id: string } // Address of owner    creator?: { id: string } // Address of creator    metadataURI: string // URI of metadata for zNFT  }
  zoraNFT?: {    metadataHash: string // sha256 hash for metadata    contentURI: string // URI of content described by metadata    contentHash: string // sha256 hash of content  }
  // Bid/Auction Data  pricing: {    perpetual: {      bids: {        // empty array if no bids        id: string        createdAtTimestamp: string        bidder: { id: string }        pricing: PricingInfo      }[]      ask?: {        id: string        createdAtTimestamp: string        pricing: PricingInfo      }    }    reserve?: {      auctionCurrency: CurrencyInformation      id: string      endingAt?: string      likelyHasEnded: boolean // If an auction ended but has not been finalized this will be true.      reservePrice?: PricingInfo      tokenId: string      status: 'Pending' | 'Active' | 'Canceled' | 'Finished'      firstBidTime: string      duration: string      expectedEndTimestamp: string      createdAtTimestamp: string      finalizedAtTimestamp: string      currentBid?: {        createdAtTimestamp: string        bidType: 'Active' | 'Refunded' | 'Final'        bidInactivatedAtTimestamp: string        bidInactivatedAtBlockNumber: number        pricing: PricingInfo      }      previousBids: {        createdAtTimestamp: string        bidType: 'Active' | 'Refunded' | 'Final'        bidInactivatedAtTimestamp: string        bidInactivatedAtBlockNumber: number        pricing: PricingInfo      }[]    }    highestBid: {      pricing: PricingInfo      placedBy: string      placedAt: string    }    // Auction type is none if no perpetual market exists and    auctionType: 'reserve' | 'perpetual' | 'none'  }}
export type PricingInfo = {  currency: CurrencyInformation  amount: string // Amount as raw bignumber  prettyAmount: string // Amount as a normalized BigDecimal value  computedValue?: PricingInfoValue // Computed value in USD and ETH (available from Uniswap API call)}
type CurrencyInformation = {  id: string // Blockchain address of currency. If ETH currency, will be 0x0000000000000000000000000000000000000000  name: string // Name of currency  symbol: string // Symbol of currency  decimals: number // Decimals for currency}
type useZNFT = (id: string) => {  currencyLoaded: boolean  error?: string // undefined if no error, string if error  data?: NFTDataType // undefined in error or loading states}

Alternatively, the same information can be fetched using the base MediaFetchAgent for server-side or non-React use:

import { MediaFetchAgent, Networks } from '@zoralabs/nft-hooks'
// Be careful making multiple instances of the fetch agent// Each instance contains a different request cache.const fetchAgent = new MediaFetchAgent(Networks.MAINNET)
// Get result from the serverconst result = await fetchAgent.loadNFTData(  '0x8d04a8c79ceb0889bdd12acdf3fa9d207ed3ff63',  '2')// result type is NFTDataType