Manifold's new ERC-6551 Widget

Introducing our new display and interaction widget for ERC-6551 Token Bound Accounts (TBAs)

We recently announced our collaboration with FEWOCiOUS for the FewoWorld Dressing Room. The FewoWorld Dressing Room is one of the first major projects to leverage the new ERC-6551 standard that we coauthored alongside the Future Primitive team.

In this post, we’ll dive into what ERC-6551 is, how it works, and the new ERC-6551 display widget we build for end users to create novel custom experiences on top of the standard.

What is ERC-6551?

This past year, our cofounder Wilkins and engineer Paul coauthored the ERC-6551 standard alongside the Future Primitive team. We believe that the next era of NFTs will be more dynamic and have more complex functionalities across gaming, finance, identity, and more - 6551 is an attempt at realizing this vision.

ERC-6551 is a new token standard that enables NFTs to control their own smart contract accounts - also called tokenbound accounts, or TBAs. TBA addresses are deterministically linked to any NFT on Ethereum, and anyone can retroactively deploy a 6551 TBA to a token.

With a deployed tokenbound account, the NFT can now do anything a regular wallet can: it can execute transactions, hold other NFTs, hold ETH and ERC-20s, and more.

To-date, NFTs have primarily been viewed through the lens of objects, to be owned by individuals and end users on Ethereum. With TBAs, NFTs can become their own identities and actors, leveraging the flexibility and ability of smart contract wallets.

How does it work?

There’s several parameters that make up an ERC-6551 tokenbound account. We can define them as follows:

• implementation: The implementation address is the address of the contract for a given ERC-6551 implementation. While Tokenbound has deployed their own standard implementation, anybody can deploy another 6551 implementation with custom functionality. For example, we have deployed an implementation that allows the deployer of the tokenbound account to control whether transfers in or out of the account are allowed.

• chainID: This is the chain ID of the network that the TBA is deployed on.

• tokenContract: This is the contract address for the NFT.

• tokenID: This is the tokenID for the NFT.

• salt: an arbitrary additional input used to generate further randomness in the TBA.

These five parameters create a deterministic, unique address for the tokenbound account of any ERC-721 on any EVM chain. Anybody can deploy an ERC-6551 account for any NFT with full backwards-compatibility, using the singleton ERC-6551 registry contract.

Because the address is deterministic based on these five parameters, this also means that NFTs and other tokens can be sent to the 6551 address before the smart contract wallet is deployed. Once the account is deployed, the NFT will have control over any assets sent to its address prior to deployment.

Manifold’s 6551 Display Widget

“NFTs that own other NFTs” is a simple primitive, but it has nearly infinite potential applications across gaming, finance, identity, community, and more.

While the 6551 standard and contracts have been out in public for a while now, we noticed that there were still barriers to creating powerful user-facing applications with ERC-6551. Namely, there wasn’t an easy way to deploy new tokenbound accounts or actually do unique things with them outside of the primary tokenbound.org website. Developers still lack the infrastructure to build rich and dynamic applications using ERC-6551.

We set out to solve this problem by building a widget that provides maximum flexibility and customizability to end users. Following the architecture of our existing Connect, Campaign, and Marketplace widgets, the 6551 display widget allows users to easily:

• Deploy new tokenbound accounts. With our widget, developers don’t need to create a custom frontend for interacting with the 6551 frontend to deploy new accounts for NFTs. The widget contains a built-in “Activate” button that will work dynamically based on the parameters specified in the data props.

• Transfer tokens. The widget contains two transfer flows:

  • A “transfer in” modal that allows users to see all the assets in their own wallet, which they can then transfer to the 6551 wallet.

  • A “View details” modal for any NFT owned by the TBA. Users can then transfer that NFT outside of the TBA, to any address of their choice.

• Customize styles. Every element on the widget has a unique class structure, allowing developers to customize CSS however they choose - fonts, colors, spacing, and more.

• Choose from multiple structures. The display widget comes with two default layouts for displaying the 6551 token and its owned assets. The Photo Album layout uses a Gallery-like display for users to browse all the different tokens owned by the TBA. The Backpack layout shows the parent token image on the left, with all the owned assets sorted on the right.

Using our display widget, developers can now create unique sites and applications that allow users to read and write to state around the 6551 NFT.

Custom Callbacks

The widget also provides several custom callbacks function for developers to configure, which will allow the 6551 widget to execute functionality native to your use case or application.

Token Filter

Developers can specify token filters for which tokens appear as owned by the Fewo. In the standard 6551 implementation, any asset can be transferred into a tokenbound account. However, as a developer, you probably only care about certain assets in your ecosystem that are relevant to the application. You also may want to explicitly exclude things like spam airdrops.

The widget allows you to specify a TokenFilter prop that will only show certain tokens owned by the account, maintaining relevancy for end users.

On Populate

The On Populate callback allows developers to define a function that is ran when the widget loads. For example, in the Dressing Room, we use this to highlight which tokens are currently equipped by the Fewo. If you want to have some similar functionality based on the actions relevant to your app, the On Populate call back will allow you to do so.

Call to Action

Lastly, the Call to Action callback lets you call an asynchronous function when the call to action button is clicked. This will allow you to execute new actions defined by your application - for Fewos, this is how equipping and rendering works. FewoWorld calls the equip function on the FewoWorld rendering engine, which changes the image and properties of the Fewo based on the selected items.

FewoWorld Dressing Room

The FewoWorld dressing room is an example of an application that leverages all the features of the display widget to its full extent. Let’s take a look:

First, the FewoWorld widget uses the “Backpack” display, which shows the core NFT image on the left, with all the assets owned by the NFTs on the right.

Users can also set a custom onPopulate function to categorize which NFTs to display, and categorize into groups. In this example, we defined a custom function that allows the Fewo to only display tokens that have been designated as equippable items, and also categorize into the different types of wearables (Accessories and Holdables so far).

Clicking the “Add items” button allows users to see other tokens that are in their own wallet, that they can then seamlessly transfer into the wallet of the tokenbound account (in this case, the Fewos).

Most notably, we also defined a custom call-to-action function for doing the equipping action that makes Fewos special. In the case of Fewos, we call a function on our rendering server that changes the image of the Fewos based on the items in the backpack that the user has selected. For other applications, developers can define any custom actions that users can take after selecting items in the backpack. The widget currently supports a primary and secondary CTA, though Fewos just uses the primary CTA currently to call the render function.

Lastly, every single element in the backpack has custom classes to help with styling. Developers can inspect the DOM to see which elements have which classes, and style accordingly in their apps. All text visible on the widget is customizable as well, via props defined in the widget imports. FewoWorld was able to alter the widget styling to leverage custom fonts, colors, spacing, gradients, and more.

Getting Started with our 6551 Widget

If you’re a developer interested in leveraging ERC-6551 for your app or site, reach out on our forum here. You can also access the full widget documentation. We’d love to hear more about what you’re interested in building with 6551 and how we might be able to support your use case.