🖼️Tokenbound iFrame

By using an animation_url developers may embed a web app as the media for NFTs on Pyramid, and other platforms. This allows users to view detailed information about the tokenbound account (TBA) associated with the respective NFTs directly within the marketplace interface.

This basic iframe implementation lets users explore their NFT's tokenbound accounts and view information such as:

• Contents of the NFT's tokenbound account: ERC-721, ERC-1155, and ERC-20 tokens

• Lock status of the TBA (locked or unlocked) . A locked state allows users to confidently purchase an NFT, knowing that none of the contents of the TBA will be transferred during the course of the purchase transaction.

Tokenbound currently provides two ways you can easily integrate iframes into your project URL and Custom.

URL Implementation

The URL method is recommended for NFT projects using static images for their artwork, and wish to display their NFT's Tokenbound account. This method requires updating the animation_url of your NFT's metadata to match this pattern in two ways:

Using the NFT address

This method is useful when you don't know the address of your Tokenbound Account (TBA). Here's how to use it:

{
  "animation_url": "http://iframe.tbaexplorer.com/nft/<nft_contractAddress>/<tokenId>/<chainId>"
}

nft_contractAddress: the contract address of the NFT collection you wish to display. tokenId: the token ID of the individual NFT to be rendered in the iframe.

chainId: the network chainID.

Using the TBA address

This method is applicable when you know the TBA address and don't need to specify the token ID. Here's how to use it:

{
  "animation_url": "http://iframe.tbaexplorer.com/tba/<tba_contractAddress>/<chainId>"
}

contractAddress: the contract address of the TBA you wish to display. chainId: the network chainID.

You can find currently supported chains below:

Network	Chain ID
Starknet Mainnet	SN_MAIN
Starknet Sepolia	SN_SEPOLIA

URL Example Usage

For NFT:

https://iframe.tbaexplorer.com/nft/0x05dbdedc203e92749e2e746e2d40a768d966bd243df04a6b712e222bc040a9af/685438/sn_main

For TBA:

https://iframe.tbaexplorer.com/tba/0x1933c6ca00a910b236b26ece2e294f04d3db686b89e3c4a5458ea828c63e6de/sn_main

This iframe implementation relies on Ark Project's indexer to render the NFT's media. If your project uses a custom API to render the NFT's media, use the custom implementation below.

Custom Implementation

Fork and clone the iframe repo

git clone https://github.com/horuslabsio/tokenbound-iframe

Setup environment variables

cat .env.example > .env.local

Create an Alchemy account and API key

Navigate to https://dashboard.alchemy.com/ and create an API key , if you don't already have one.

Alchemy is used as a JSON-RPC provider to interact with the blockchain.

Update your environment variables with your Alchemy key

NEXT_PUBLIC_ALCHEMY_KEY="<alchemy_key>"NEXT_PUBLIC_PROVIDER_ENDPOINT="https://..."

PS: you can use any provider of choice.

Get API url and key

ARK API key (replace with any API of choice)

Navigate to https://arkproject.dev/ and create an API key which is being used as an indexer

NEXT_PUBLIC_ARK_API_KEY=<your_ark_api_key>

ARK API URL

You would also need the API URL in your .env

NEXT_PUBLIC_ARK_MAINNET_API=https://api.arkproject.dev/v1

Using your custom api endpoint to fetch your NFT's media

The application expects the endpoint to be: string | string[], where the string is a url link to your NFT's assets. It should dynamically have a route for each tokenId.

For example the NEXT_PUBLIC_NFT_ENDPOINT env variable is https://nft-api.com/nft. The application will then take the tokenId from the URL and make a fetch to that endpoint: https://nft-api.com/nft/<tokenId>.

...NEXT_PUBLIC_NFT_ENDPOINT="..."

Host your application

Host your application on a service provider of your choice and set your metadata server with that host.

{
  "animation_url": "http://iframe.tbaexplorer.com/nft/<contractAddress>/<tokenId>/<chainId>"
}