# Tokenbound iFrame

By using an `animation_url` developers may embed a web app as the media for NFTs on [Pyramid](https://pyramid.market/), 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.

{% hint style="success" %}
**Tokenbound** currently provides two ways you can easily integrate iframes into your project `URL` and `Custom`.
{% endhint %}

## 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:

<pre class="language-json"><code class="lang-json">{
  "animation_url": "http://iframe.tbaexplorer.com/nft/&#x3C;nft_contractAddress>/&#x3C;tokenId>/&#x3C;chainId>"
<strong>}
</strong></code></pre>

`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.&#x20;

#### Using the TBA address&#x20;

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:

```json
{
  "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.&#x20;

You can find currently supported chains below:

| Network          | Chain ID    |
| ---------------- | ----------- |
| Starknet Mainnet | SN\_MAIN    |
| Starknet Sepolia | SN\_SEPOLIA |

### URL Example Usage

For NFT:&#x20;

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

For TBA:&#x20;

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

{% hint style="success" %}
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.
{% endhint %}

## 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://..."
```

{% hint style="info" %}
PS: you can use any provider of choice.
{% endhint %}

### Get API url and key&#x20;

#### 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>"
}
```