project screenshot 1
project screenshot 2
project screenshot 3
project screenshot 4
project screenshot 5
project screenshot 6

Supersub

Supersubs are superfluid and tradable Subscriptions that unlock more exclusive content the longer they run.

Supersub

Created At

ETHOnline 2022

Winner of

🏊‍♂️ Superfluid — Pool Prize

Project Description

To understand what Supersubs (Super Subscriptions) are, let’s compare them to subscriptions we know.

Regular subscriptions are paid monthly for a fixed amount. Every subscriber gets access to the same content, and there is no differentiation if you just subscribed or have been a subscriber for years. With regular subscriptions, content providers cannot reward long-term subscribers. Also, the subscription does not become more valuable to subscribers the longer they have it.

Supersubs are a new form of the Subscription Model. They are subscriptions to so-called Substations.

You can compare a substation to a content feed where the owner of the substation can post text, videos, images, or even files. This feed is categorized into tiers. The higher the tier, the more exclusive and alpha the content. Anyone can create a substation: DAOs, content creators, artists, or any individual who has anything interesting to share.

When you subscribe to a Substation, you get issued a Supersub with the following attributes. Instead of monthly payment as a “burst,” the payment flows every second (gas free!). This means the Substation owner receives revenue every second instead of waiting for the monthly payout. Supersubs also track how much you paid to a Substation. The more you already paid, the higher the tier of your Supersub becomes, which grants you access to more exclusive content. In other words, your Supersub becomes more valuable as it becomes the entry ticket to more exclusive content. Because Substations are tier-based, you can decide how much you are willing to pay. If you pay more, you’ll reach higher tiers faster. If you want to pause the subscription, you can do so anytime, and the tier level remains on your Supersub. Because Supersubs are ERC-721 Tokens (NFTs), you can trade them on markets like Opensea. So if you have a highly valuable Supersub that has been active for years, you can sell it for a lot of cash. Or, if you want to start your subscription at a higher tier, you can buy a Supersub from someone else.

How it's Made

To start the Project, I tried out Scaffold Eth for the first time. It took a bit of time to get used to a new boilerplate, but it saved time setting everything up in the end.

The first step was to create the Smart Contract, which is the on-chain backbone of Supersub. The contract is built with the Superfluid Protocol and would not have been possible without it. For Supersub, there was only one contract necessary: a Superapp + ERC-721. The contract tracks how much was already paid by the subscriber, what tier the Supersub (subscription) is, and manages everything that needs to happen on changing flows (e.g., user unsubscribes => pause supersub) The examples provided by the Superfluid Docs were a great help, so the contract (+ tests, of course) was finished within a few days.

I decided to deploy the contract to Polygon as it has wide adoption across all projects and protocols. This wide adoption gave me the confidence I won’t run into any compatibility issues because the protocol I want to use would not support the chosen chain. Also, low gas fees are king and crucial to scaling your app. Sidenote: Every substation needs to deploy its own Supersub Contract.

When the contract was ready, I implemented a simple, un-designed prototype to get the front-end functionality around subscribing working. (Subscribe, List Subs of the user, tracking flow rates to Substation, etc.) I used Superfluid SDK to fetch the data regarding Flows. The Front-End was smooth sailing as I used my familiar stack of NextJS, Typescript, and React.

Next, I had to decide where to host the content of substations and how to encrypt it for access control. Because I was already familiar with IPFS, I used web3.storage This was a good decision since it made storing and fetching IPFS data easier than the other services I used before. Another benefit was that I stored a w3name instead of a CID in the Supersub contract. This made it possible to update the Substations data without updating the contract. Also, the web3.storage website was an excellent tool for quickly uploading files to IPFS if there was a need to. (Like demo files of a substation post)

To ensure the publicly (decentrally) stored data is secure from prying eyes that should not have access I used Lit Protocol. Lit lets you encrypt and decrypt data based on an on-chain condition. When encrypting data, Lit issues you an encrypted symmetric key that you can store along with the encrypted data on IPFS. When a user wants access to the data, they send the encrypted symmetric key to LIT which verifies if the user fulfills an on-chain condition and returns the decrypted key, which lets the user decrypt the data and view the content of the feed. Lit only takes care of the key management. I also used Lit Protocol for route gating the individual substations with a JWT. Like encrypting data, the user sends a request to Lit and gets JWT issued in case they pass the on-chain criteria.

For example, accessing the substation page for “oxdog station,” the user requires an active Supersub of oxdog station to get the JWT that grants access to the route. To view “tier 2 feed,” the user's supersub needs to be tier 2 or higher to encrypt and see the content.

After the prototype fully worked, it was time to design and make the front end more aesthetic. For that, I used Tailwindcss and headless UI.

With everything ready to go, I prepared some demo substations you can now subscribe to when trying out the demo.

What I'm especially proud of is that the project turned out as I initially imagined it. All the used technologies work in tandem as I want them to and seeing that is really satisfying after 3 weeks of coding.

background image mobile

Join the mailing list

Get the latest news and updates