NFTE
Embed NFTs in your website or app
Installation
HTML/JS snippet
Copy/paste into your site and add the contract and tokenId parameters
React
Install with npm i @nfte/react or yarn add @nfte/react
Configuration
HTML/JS snippet - Parameters

?contract=[contract address] - (Required) The NFTs Ethereum contract address

?tokenId=[token ID] - (Required) The NFTs token ID

?darkMode=0 - Enables dark mode for the embed

Example:https://nfte.app/api/embed.js?contract=0x...&tokenId=1&darkMode=0

?disableAutoPlay=0 - Disables autoplaying of video files

Example:https://nfte.app/api/embed.js?contract=0x...&tokenId=1&disableAutoPlay=0

React component - Props

contract=[contract address] String - (Required) The NFTs Ethereum contract address

tokenId=[token ID] String - (Required) The NFTs token ID

darkMode Boolean - Enables dark mode for the embed

className String - CSS class name, this allows using CSS in JS solutions to override styles

style Object - Inline styles that are applied to the top level wrapper element

autoPlay Boolean - If set to false will disable autoplaying of videos. Default: true

Embeds data structure

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.

Creator

Base data - will show the creators contract address

ENS name - will show the creators ENS name if one exists on the address

Platform - will show the creators platform username if a known contract file is found and the getContractData function returns a value forcreatorOf.

Creator URL

Base data - links to the creators address on Etherscan

Platform - links to the creators profile on the platform if a known contract file is found and the getContractData function returns a value forcreatorOfUrl.

Media

Base data - will use the ERC-721 standard image property from the metadata

Platform - will be the URL to the NFT's media file if a known contract file is found and the getContractData function returns a value formediaUrl.

MediaPageURL

Base data - links to the contract address and token ID on Etherscan

Platform - will be the URL to the NFT's page on the platform if a known contract file is found and the getContractData function returns a value formediaPageUrl.

Name

Base data - will use the ERC-721 standard name property from the metadata

Platform - will be the name of the NFT if a known contract file is found. The getContractData function should return a value forname.

Description

Base data - will use the ERC-721 standard description property from the metatdata.

Platform - will be the description of the NFT if a known contract file is found. The getContractData function should return a value fordescription.

Current Owner

Base data - will show the owners contract address

ENS name - will show the owners ENS name if one exists on the address

Platform - will show the owners platform username if a known contract file is found and the getContractData function returns a value forownerOf.

Current Owner URL

Base data - links to the current owners address on Etherscan

Platform - will link to the current owners profile on the platform if a known contract file is found and the getContractData function returns a value forownerOfUrl.

Platform

Base data - will show the ethereum address of the contract that minted the token

Platform - will show the platform name if a known contract file is found and the getContractData function returns a value forplatform.

Platform URL

Base data - links to the contract that minted the token on Etherscan

Platform - will link to platforms homepage if a known contract file is found and the getContractData function returns a value forplatformUrl.

Minted On

Base data - will show the date the token was minted in UTC

Adding a known contract

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.

Currently supported
  • EthBlock.art
  • Foundation
  • Rarible
  • SuperRare
  • Zora
Would like
  • Cryptokitties
  • CryptoPunks
  • ENS

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

2. The contents should be an object that contains the following properties
  • addresses - array (Required) An array containing one of more contract addresses that mint the NFTs for your project
  • abi - string If the contract extends the ERC-721 functionality you should upload the abi here.
  • getContractData - function A function that returns the values used in the embed.

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

Render Props

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}.

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

Self-host endpoint

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.

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.

GitHub

Created by @sammdec