useZNFT

Hook to load zNFT and market on-chain information

This hook fetches data found on the blockchain from the given zNFT. The only argument for the hook is the NFT id. To fetch data for zNFTs on other networks, use the NFTFetchConfiguration wrapper component to set the correct network for loading the NFT data. The main types are within the result data.nft object. This object contains the on-chain NFT data itself. The pricing information can be found in data.pricing which corresponds to data on-chain for Zora's perpetual zNFT auctions along with the reserve auction functionality.

import {useZNFT} from "@zoralabs/nft-hooks";

type NFTDataType = {
  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
  },
  
  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
}

// Example with usage:
const {chainNFT, loading} = useZNFT("2");

Alternatively, the same information can be fetched using the base MediaFetchAgentfor 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 server
const result = await fetchAgent.loadZNFTData("2");
// result type is NFTDataType