Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

danielibel-use-nft

Package Overview
Dependencies
Maintainers
1
Versions
7
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

danielibel-use-nft

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

  • 0.10.8
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

npm version bundle size License

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 serviceSupportedSpecific adaptations done by useNft()
AITOYes
Async ArtYes
CloversYes
CryptoKittiesYesNon standard NFT, dedicated mechanism.
CryptoPunksYesNon standard NFT, dedicated mechanism.
CryptovoxelsYes
Decentraland YesEstate and parcels are fetched from The Graph. Wearables are fetched as standard NFTs.
FoundationYes
JOYWORLDYes
KnownOriginYes
MakersPlaceYesIncorrect JSON format (uses imageUrl instead of image).
MeebitsYesCORS restricted, requires a JSON proxy to be set (see jsonProxy).
MoonCatsYesNon standard NFT, dedicated mechanism.
Nifty GatewayYesIncorrect metadata URL.
OpenSeaYesIncorrect metadata URL.
Portion.ioYesNon-standard JSON format.
RaribleYes
SuperRareYes
Uniswap V3Yes
ZoraYes

License

MIT

Special Thanks 🙏

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

ImageKit

Keywords

FAQs

Package last updated on 03 Dec 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc