bpierre/use-nft

🍮 React hook to fetch metadata from any NFT.

useNft() allows to access the metadata of any NFT (EIP 721, EIP 1155 and more) on the Ethereum blockchain.

Install

npm install --save use-nft

Usage

useNft() uses a concept of “fetchers”, in order to provide different ways to retrieve data from Ethereum. If you use the Ethers in your app, using ethersFetcher() is recommended. Otherwise you can use ethereumFetcher(), which only requires a standard Ethereum provider, like the one provided by MetaMask.

import { getDefaultProvider } from "ethers"
import { NftProvider, useNft } from "use-nft"

// We are using the "ethers" fetcher here.
const ethersConfig = {
  provider: getDefaultProvider("homestead"),
}

// Alternatively, you can use the "ethereum" fetcher. Note
// that we are using window.ethereum here (injected by wallets
// like MetaMask), but any standard Ethereum provider would work.
// const fetcher = ["ethereum", { ethereum }]

// Wrap your app with <NftProvider />.
function App() {
  return (
    <NftProvider fetcher={["ethers", ethersConfig]}>
      <Nft />
    </NftProvider>
  )
}

// useNft() is now ready to be used in your app. Pass
// the NFT contract and token ID to fetch the metadata.
function Nft() {
  const { loading, error, nft } = useNft(
    "0xd07dc4262bcdbf85190c01c996b4c06a461d2430",
    "90473"
  )

  // nft.loading is true during load.
  if (loading) return <>Loading…</>

  // nft.error is an Error instance in case of error.
  if (error || !nft) return <>Error.</>

  // You can now display the NFT metadata.
  return (
    <section>
      <h1>{nft.name}</h1>
      <img src={nft.image} alt="" />
      <p>{nft.description}</p>
      <p>Owner: {nft.owner}</p>
      <p>Metadata URL: {nft.metadataUrl}</p>
    </section>
  )
}

API

useNft(contract, tokenId)

The useNft() hook requires two arguments: the NFT contract address, and its token ID.

The returned value is an object containing information about the loading state:

const { status, loading, error, reload, nft } = useNft(
  "0xd07dc4262bcdbf85190c01c996b4c06a461d2430",
  "90473"
)

// one of "error", "loading" and "done"
status

// same as status === "loading"
loading

// undefined or Error instance when status === "error"
error

// call this function to retry in case of error
reload

// nft is undefined when status !== "done"
nft

// name of the NFT (or empty string)
nft.name

// description of the NFT (or empty string)
nft.description

// image / media URL of the NFT (or empty string)
nft.image

// the type of media: "image", "video" or "unknown"
nft.imageType

// current owner of the NFT (or empty string)
nft.owner

// url of the json containing the NFT's metadata
nft.metadataUrl

// the raw NFT metadata, or null if non applicable
nft.rawData

As TypeScript type:

type NftResult = {
  status: "error" | "loading" | "done"
  loading: boolean
  reload: () => void
  error?: Error
  nft?: {
    description: string
    image: string
    imageType: "image" | "video" | "unknown"
    name: string
    owner: string
    metadataUrl?: string
    rawData: Record<string, unknown> | null
  }
}

<NftProvider />

NftProvider requires a prop to be passed: fetcher. It can take a declaration for the embedded fetchers, or you can alternatively pass a custom fetcher.

fetcher

With Ethers.js

Make sure to add either ethers or @ethersproject/contracts to your app:

npm install --save ethers

Then:

<NftProvider fetcher={["ethers", { provider }]} />

Where provider is a provider from the Ethers library (not to be mistaken with standard Ethereum providers).

With an Ethereum provider

<NftProvider fetcher={["ethereum", { ethereum }]} />

Where ethereum is a standard Ethereum provider.

Custom fetcher

A fetcher is an object implementing the Fetcher type:

type Fetcher<Config> = {
  config: Config
  fetchNft: (contractAddress: string, tokenId: string) => Promise<NftMetadata>
}
type NftMetadata = {
  name: string
  description: string
  image: string
}

See the implementation of the Ethers and Ethereum fetchers for more details.

ipfsUrl

A function that allows to define the IPFS gateway (defaults to https://ipfs.io/).

Default value:

function ipfsUrl(cid, path = "") {
  return `https://ipfs.io/ipfs/${cid}${path}`
}

imageProxy

Allows to proxy the image URL. This is useful to optimize (compress / resize) the raw NFT images by passing the URL to a service.

Default value:

function imageProxy(url, metadata) {
  return url
}

jsonProxy

Allows to proxy the JSON URL. This is useful to get around the CORS limitations of certain NFT services.

Default value:

function jsonProxy(url) {
  return url
}

FetchWrapper

FetchWrapper is a class that allows to use the library with other frontend libraries than React, or with NodeJS. Unlike the useNft() hook, FetchWrapper#fetchNft() does not retry, cache, or do anything else than attempting to fetch the NFT data once.

import { FetchWrapper } from "use-nft"

Pass the fetcher declaration to the FetchWrapper and call the fetchNft function to retreive the NFT data.

// See the documentation for <NftProvider /> fetcher prop
const fetcher = ["ethers", { provider: ethers.getDefaultProvider() }]

const fetchWrapper = new FetchWrapper(fetcher)

// You can also pass options to the constructor (same as the <NftProvider /> props):
// const fetchWrapper = new FetchWrapper(fetcher, {
//   ipfsUrl: (cid, path) => `…`,
//   imageProxy: (url) => `…`,
//   jsonProxy: (url) => `…`,
// })

const result = await fetchWrapper.fetchNft(
  "0xd07dc4262bcdbf85190c01c996b4c06a461d2430",
  "90473"
)

The fetchNft() function returns a promise which resolves to an NftMetadata object.

Supported NFT formats

Any standard NFT (EIP 721 or EIP 1155) is, in theory supported by useNft(). In practice, some adjustments are needed to support some NFT formats, either because their implementation doesn’t follow the specification or because some parts of the specifications can be interpreted in different ways.

This table keeps track of the NFT minting services that have been tested with useNft() and the adaptations needed.

NFT minting service	Supported	Specific adaptations done by useNft()
AITO	Yes
Async Art	Yes
Clovers	Yes
CryptoKitties	Yes	Non standard NFT, dedicated mechanism.
CryptoPunks	Yes	Non standard NFT, dedicated mechanism.
Cryptovoxels	Yes
Decentraland	Yes	Estate and parcels are fetched from The Graph. Wearables are fetched as standard NFTs.
Foundation	Yes
JOYWORLD	Yes
KnownOrigin	Yes
MakersPlace	Yes	Incorrect JSON format (uses imageUrl instead of image).
Meebits	Yes	CORS restricted, requires a JSON proxy to be set (see jsonProxy).
MoonCats	Yes	Non standard NFT, dedicated mechanism.
Nifty Gateway	Yes	Incorrect metadata URL.
OpenSea	Yes	Incorrect metadata URL.
Portion.io	Yes	Non-standard JSON format.
Rarible	Yes
SuperRare	Yes
Uniswap V3	Yes
Zora	Yes

License

MIT

Special Thanks 🙏

Thanks to ImageKit.io for supporting the project by providing a free plan.