<div className="nft-embed"></div>
<script
  async
  src="https://nfte.app/api/embed.js?
  contract={contract address}&tokenId={token ID}">
</script>

<NFTE contract="0x..." tokenId="1"/>

NFTE works in a progressively enhanced way, this means that as long as your token contract is ERC-721 compliant then the embed will work.

However, if the contract that minted the NFT is a known contract in NFTE then extra functionality will be enabled such as deep-linking and displaying the name of the platform it was minted on.

If you would like to learn how to add a known contract skip to the next section.

If you are the owner of a contract that mints NFTs and would like to add enhanced data to NFTE then please create a Pull Request.

1. You should create a Javascript file named after your project or platform in the packages/site/knownContracts folder

3. Import then export the file from the packages/site/knownContracts/index.js file.

4. The next step is to use the getContractData function to get the various pieces of information that are needed, the function contains 2 ethers.js instances, Contract uses the Cloudflare provider and should be used for the majority of functions. ContractHistorical uses an Infura provider and should be used for occassions where past block history is needed. The tokenId is also passed in as a string value. The function should return an object with the following properties.

name - This should be the name of the creation

description - This should resolve to the description if any

ownerOf - This should be the Ethereum address of the current owner of the token

ownerOfUrl - The url that points to the owners profile on the platform

creatorOf - This should be the Ethereum address of the creator of the token

creatorOfUrl - The url that points to the creators profile on the platform

mediaUrl - The url of the media file

mediaPageUrl - The url of the media files page on the platform

mediaMimeType - The mime type of the media file e.g. video/mp4, image/png

platform - The name of the platform

platformUrl - The url to the platforms homepage

blockNumber - The blockNumber when the token was minted

You can see the canonical ERC-721 example here packages/site/utils/getNFTData.js

If you would like more customisation of the embed's UI you can use render props exposed by <NFTE />.

Below is a basic example of how you would create your own embed UI. The render prop passes down an object containing {data, className, style, darkMode, autoPlay}.

<NFTE contract="0x..." tokenId="1">
  {({ data, className, style, darkMode, autoPlay }) => <div>Some customised UI</div>}
</NFTE>

data - is an object containing properties fetched from the endpoint

tokenId - The token ID that represents the current NFT

contract - The ethereum address for the NFT contract

metadata - Object containing the metadata fetched from tokenURI

name - The name of the NFT

description - The description of the NFT if available

ownerOf - A string representing the current owner of the NFT, this could be an address, an ENS name or even a platform specific username

ownerOfUrl - A url pointing to the owners profile or a url to the address found on etherscan

creatorOf - A string representing the creator of the NFT, this could be an address, an ENS name or even a platform specific username

creatorOfUrl - A url pointing to the creators profile or a url to the address found on etherscan

platform - The name of the platform this NFT was minted on if a known contract otherwise it will be the address of the contract

platformUrl - A url of the platforms home or a url to the contract address found on etherscan

mediaUrl - A url representing the canonical media of the NFT

mediaPageUrl - A url of the tokens unique page on the platform or a link to the token on Etherscan

mediaMimeType - A mimetype of the media found at mediaUrl

blockNumber - The block number that this NFT was minted in

timestamp - The unix timestamp when the blockNumber was created

media deprecated - Equivalent of mediaUrl

mintedBy deprecated - Equivalent of platform

mintedByUrl deprecated - Equivalent of platformUrl

className - passed down from the NFTE component

style - a style object passed down from the NFTE component if used

darkMode - a boolean representing if dark mode has been set on the NFTE component, defaults to false

autoPlay - a boolean representing if autoplay has been set on the NFTE component, defaults to true

nfte.app maintains a hosted endpoint that the react component and script tage use by default, but there might be times when you want to host your own endpoint on your own infrastructure using your own provider keys and that's cool.

You can use the @nfte/handler package to add the main data logic to your app. You will need to provide a ethers.js providerinstance that can access current blockchain data for this we recommend using Cloudflares Ethereum gateway and also a historicalProvider that can access the full block history for this we recommend Infura.

You can override the endpoint url used by the NFTE component (@nfte/react) to point to your endpoint. The endpoint should be accessible by GET and the contract and tokenId paramters are expected as query paramaters.

The data object returned from the getData function is what the React component expects from its built in fetch.

import { NFTData } from "@nfte/handler"
          
const provider = new ethers.providers.CloudflareProvider()
const historicalProvider = new ethers.providers.InfuraProvider(
  null,
  process.env.INFURA_PROJECT_ID
)
          
const nftData = new NFTData({ provider, historicalProvider })
const data = await nftData.getData({ contract: '0x...', tokenId: '1' })

You can of course build your own UI and fetch the data however you would like or just skip the NFTE component and use the Embed component and do the fetching of data yourself.