How to Create an ERC-6551 iFrame

ERC-6551 has already been noted as a groundbreaking Ethereum implementation that gives ERC-721 NFTs their own wallets, allowing them to own tokens, other NFTs, or even interact with other smart contracts.

This gives NFTs a breath of fresh air and layers of interactivity for industries like gaming and music. The only problem is that because the standard is so new, there are not any marketplaces or wallets that can display an ERC-6551 wallet or the assets inside of it.

Thanks to Tokenbound you can use their custom iFrame implementation to display it on your own website, or even through the NFT’s metadata via OpenSea which is what this tutorial will show you how to do.

You will need a little bit of developer experience to launch this project. Tools being used would include a text editor, smart contracts, GitHub, and Vercel to launch the site. Don’t worry, even if you’re a novice this guide should be able to walk you through each step so you can implement it.

Mint an NFT

In some ways this step is optional, but for this tutorial we’ll mint an NFT with the objective of being able to update the token URI (the primary info about the NFT).

This is totally optional because you can use the Token Bound Account iFrame on its own. We’ll be using the animation_url property in the NFT metadata so it’ll show up on marketplaces like OpenSea. We also have a tutorial walking through this process you can view below. If you want, you can click here to open it in a new tab for later.

The first thing we need to do is upload whatever we want our NFT to be to Pinata.

We’ll upload our classic Pinnie.png so we can send it some surprises later 👀. To upload, visit app.pinata.cloud and sign in with your account. If you don’t have an account you can sign up with a free account to start.

After logging in you can upload a file by clicking “Add Files,” then select the file, give it a name if you want, and click “Upload.”

‍

Once the file is uploaded you should see it listed on the files page. You will want to copy the CID and save it for later.

Next we need to make a metadata JSON file that will hold all the information about our NFT. It will look something like this:

{
  "name": "Name of NFT",
  "description": "Description of NFT",
  "external_url": "https://pinata.cloud",
  "image": "ipfs://CID_GOES_HERE"
}

You can copy this and edit it to your liking, but make sure to replace CID_GOES_HERE with the CID of the image you uploaded. You can also edit the file with this Replit template and save the file to your computer from there.

After you have saved it you will want to upload that file to Pinata as well, just like the image. Be sure to copy the CID for that metadata file and save it for later.

Now that our assets are ready we can create our smart contract to mint the NFT. There are a lot of ways to mint an NFT, but for this guide we’ll use a combination of OpenZeppelin and Remix.

Visit OpenZeppelin’s Smart Contracts page to start and you should see a contract builder with some different options. In order to have an NFT that can accept a ERC-6551 Token Bound Account, we need to select ERC-721.

At the top you can give it a Name andToken Symbol, and be sure to leave the Base URI empty. From there you can select which options you would like, and for this guide we’ll select the following:

After you have everything set, click on the “Open in Remix” button.

We’re going to make one small addition to our smart contract. This function will allow us to update the Token URI for a specific NFT. It’s very subjective if this is a good practice or not, but for our application we want to be able to add an animation_url to our NFT metadata later on so our ERC-6551 iFrame will show up on OpenSea.

The importance is that this is in the smart contract for anyone to see, and updates to an NFT are all recorded on chain. With that said you will want to put this function after safeMint.

function setTokenURI(uint256 tokenId, string memory uri) public onlyOwner {
   _setTokenURI(tokenId, uri);
}
}

After adding the function we can go ahead and compile the contract by clicking the “Compile contract” button on the left side. If successful you should see a green check mark on the left side bar for the Solidity Compiler.

Next we will want to navigate to the “Deploy & Run Transactions” tab on the sidebar.

Before we deploy this smart contract, you will want to make sure you have the right wallet with testnet funds and network selected.

Inside the “Deploy & Run Transactions” screen there will be a dropdown menu in the top right to select your environment. Click that and select “Injected Provider — Metamask” (it might be different if you use a different wallet).

Doing so should prompt you to connect your wallet. After that is done you can click the “Deploy” button and sign the transaction with your wallet.

If successful you should see a contract listed under “Deployed Contracts” with a toggle to expand it and see all the different functions.

We’re going to use the safeMint function, and if you click the toggle button for that you will see it takes two arguments: a wallet address the NFT will be sent to, and the Token URI for the NFT. URI stands for “Unified Resource Identifier,” which is exactly what that metadata.json file does that we uploaded to Pinata earlier. To reference it we’ll use the IPFS protocol URI which looks something like this.

When we put our CID in the place holder and combine it with our wallet address, it will look something like this.

After those two fields are filled you can go ahead and click the “Transact” button and it will prompt your wallet for a signature.

If successful you should see a checkmark in the bottom log, and you can visit testnets.opensea.io, connect your wallet there, and see the NFT that was just minted.

Create an ERC-6551 Token Bound Account for your NFT

We won’t go into this step as it’s pretty simple. For a full guide check out either this blog post which is a quick no code solution, or follow the following video that will show you how to deploy ERC-6551 smart contracts yourself for a more technical approach.

In essence you will need to create a Token Bound Account (TBA) for the NFT in question so we can use it in the ERC-6551 iFrame.

It also would be beneficial to send your new TBA some assets like a testnet currency or some NFTs. In our example we’ll send it this fun ERC-1155 NFT of some Pinata clouds.

Create the ERC-6551 iFrame

Since this is such a new standard for NFTs there aren’t really any marketplaces that will be able to show and render if an NFT has a Token Bound Account or if that account has any assets. That’s where the ERC-6551 iFrame comes into play.

A way around this problem of not being able to show off TBAs is to use the `animation_url` property in the NFT metadata standards. Just like how we can provide an image link for an NFT, with the animation_url we can use a link to a video, an audio file, or even a whole application.

Pinata has mentioned these possibilites before with the concept of App NFTs, and in a way the ERC-6551 will let you implement an app into your NFT to give it enhanced display powers.

Setting up your iFrame will be pretty simple. We’ll be using GitHub and Vercel to deploy this iFrame, but feel free to use the repo in whatever services or frameworks you feel comfortable with.

The first thing you will need is an Alchemy API key. You can get this by visiting Alchemy.com and signing up for a free account. Once you are signed in you will want to visit the Apps page by clicking on the left sidebar, then click on “Create New App.”

From there you will want to select the blockchain and network you want to use. For this one we can simply do the Ethereum blockchain using the Göerli testnet, give it a name and description, and click “Create App.”

Once created you will want to click on the “API Key” button from the app dashboard and keep it somewhere safe.

Now that we have our API key we can start preparing the iFrame. Visit the Tokenbound iFrame repo on GitHub and fork it with your own account.

Once it’s forked you can head over to Vercel. If you don’t already have an account you can create a free one and connect your GitHub account. From the main screen you will want to click “Add new…” and select “Project.”

If your GitHub is connected you should see your fork of the Tokenbound iFrame listed where you can select “Import.”

Before you deploy, you will want to paste in a few important environment variables, including the API keys you received earlier. In the repo there is an .env.example file that has the following information.

NEXT_PUBLIC_ALCHEMY_KEY=
NEXT_PUBLIC_ALCHEMY_KEY_POLYGON=
NEXT_PUBLIC_PROVIDER_ENDPOINT=
NEXT_PUBLIC_CHAIN_ID=1
NEXT_PUBLIC_TOKENBOUND_ADDRESS=0x02101dfB77FDE026414827Fdc604ddAF224F0921
NEXT_PUBLIC_IMPLEMENTATION_ADDRESS=0x2d25602551487c3f3354dd80d76d54383a243358
NEXT_PUBLIC_SALT=0
NEXT_PUBLIC_MAX_TOKEN_ID=15000
NEXT_PUBLIC_NXYZ_API_KEY=
NEXT_PUBLIC_NXYZ_ENDPOINT="https://api.n.xyz/api/v1"
#CUSTOM IMPLENTATION
NEXT_PUBLIC_NFT_ENDPOINT=
SENTRY_AUTH_TOKEN=

The only one you need to worry about is the the NEXT_PUBLIC_ALCHEMY_KEY.Paste in the API keys, and the beauty of Vercel is you can copy the whole .env file contents, click on the “Environment Variables” tab, select the first row, and just paste.

It will automatically fill out all the details from the file so you don’t have to go back and forth. Once that’s done you can hit “Deploy.”

After its complete you will see a dashboard with the URL of the project. With it you can start trying out the iFrame by simply following this pattern:

https://vercel-deployment-url.vercel.app/<contractAddress>/<tokenId>/<<chainId><chainId>

The subdomain of your Vercel app will depend on what you set it as or what it automatically gave you, but feel free to customize it or use a custom domain to match your project branding.

To use it just add on the contract address for the NFT you minted earlier, the token ID, and the chain ID which in this case will be 5 for Göerli. The result should look something like this.

https://iframe-tokenbound.vercel.app/0x6a5c1bd3301ce086972bbbb7e1fd2220c4832437/33/5

Update Token URI

Now that we have an app running our ERC-6551 iFrame, we can add it into our NFT metadata. For this step you will want to open that metadata.json file again and add a new line called `animation_url` like so.

{
  "name": "Name of NFT",
  "description": "Description of NFT",
  "external_url": "https://pinata.cloud",
  "image": "ipfs://CID_GOES_HERE",
  "animation_url": "https://iframe-tokenbound.vercel.app/0x6a5c1bd3301ce086972bbbb7e1fd2220c4832437/33/5"
}

You will want to upload this new updated metadata CID to Pinata just like you did before and you will receive a new CID.

Take that CID and go back to the smart contract in Remix, and look for that custom function we made called `setTokenURI.` It’s really simple, all we need to do is provide the token ID for the NFT that we’re going to update, and then provide the new CID for the metadata.json file.

Go ahead and submit the transaction and sign it with your wallet, and if successful we should be all set.

Now you can go back to OpenSea and request them to update the metadata, which will cause them to reindex that particular NFT smart contract. After a few minutes it should update and show the ERC-6551 iFrame instead of just the NFT image!

That wraps up this guide on how to use ERC-6551 iFrames, but it’s truly only the beginning. By using the basics in the iFrame you could build out your own applications that interact with Token Bound Accounts, like a game that has an NFT character with an interactive inventory, or a music album with multi media inside of it.

Now it’s your turn! Grab your Pinata account and give this tutorial a try. We’re excited to see what developers will create with this new Ethereum standard!

‍