Superfluid 🛠 Building Real Time Finance Applications on Superfluid - Samuel Flamini

foreign [Applause] [Music] then thanks everybody who who is here uh it's fun to be in Bogota I think I'll be the latam events that I've been to have been great so far by the communities here are excellent um but yeah no I'm excited to get started and talk you guys through superfluid and also show you some examples of how to actually get started with superfluid uh with code right so let's go to building on superfluid at eth Bogota so what is super fluid for those of you that don't know well it is a protocol that enables something we like to call real-time Finance right so the one big way this manifests itself is through something called money streaming right so super fluid enables these money streams which are digital native programmable cash flows that let you stream money with no Capital lockups in a way that is 100 programmable and on chain so at superflu we like to say that the internet is to information what blockchain is to Value right we believe that we're in the very early Innings here of new forms of finance that will bring this old world of Finance into the age of the internet right and one way this manifests itself is through the way that payments work for things that have to do with time right so Services right so if you think about Services businesses right if you're an employee you're kind of in the services business this is business as well with Services the way these work is that they've flown real time from from a provider to a client right Netflix is something you watch in real time your work is something you provide in real time however the issue is that the payments for that value are disconnected from the way they're actually being provided right so you work through an entire month and you get paid at the end of the month right why shouldn't you be getting paid every second so let's dive into money streaming a little bit more right this thing you're seeing there in the bottom right hand corner of the screen is a live money stream right that's eth being streamed on a test net and you can think of these as as continuous payments right we are used to a world of discrete payments what if we could make them continuous right what if we could create this direct link between the service provision and the value transfer in return for that service and the other thing that's cool about this because it's all on chain it uh completely gets rid of any delays on payment risk or any intermediaries because it's all mediated through blockchains and smart contracts so how is money streaming possible well we we built in an evm compatible smart contract framework to make this happen right and it's made up of three pieces right so we'll get into how the heck this thing here is happening in the bottom right hand corner but it takes some building up to it right so these three pieces are super fluid agreements super tokens and the superfluid host contract which brings everything together so what are agreements well these Agreements are peer-to-peer Financial relationships Financial relationships that are open-ended and Perpetual between two accounts right or potentially more than more than two accounts right when I create an agreement to stream you money what's happening is I send a transaction on chain which agrees to stream you a certain number of tokens per second and that amount of tokens that I'm streaming you per second is actually built directly into the token balance so we'll get into how the token balances work in just a moment but what's Happening Here is within the constant flow agreement right which is the main agreement that facilitates all this this money streaming you define that flow rate and money begins flowing immediately in real time from you to the receiver right the sender receiver can be smart contracts but it doesn't matter right you're just executing a transaction and money begins flowing in real time so literally this right here these simple lines of code cfav1.create flow receiver token flow rate will open this money stream right it will create this it in the end as a developer it's quite simple but to understand how it works we've got to go a little deeper right so this is all great right you might understand this concept of an agreement yeah I kind of get that but how are you doing this without calling transfer like every millisecond how is that not how this is working and the way we get around this is by building an extension onto the erc20 standard right so we built an extension out of the Year C20 that comes with all the stuff you're used to approve transfer from symbol all this stuff but the way balances are calculated we'll take into consideration all of the agreements you have outstanding for any given token right so within that balance of function on a super token contract there's another call that's made to something called to a function titled real-time balance of which takes into consideration your real-time balance right and your real-time balance is really just an aggregation of all of the money being streamed to you and all the money you're streaming out to give you a kind of single net flow rate so let's dive into these a little bit more right again UFC 20 compatible plugged into the protocol and what's cool about it is they're usable anywhere in web3 right so we know that interoperability is like super important within this industry so for existing erc20s or even native assets like ethics Matic or other native assets and other chains we've built wrappers right so you can go wrap usdc like actually right now my salary is paid using a wrapped version of usdc called usdcx if you see the X appended to the end of a symbol it just means that it's a super token right it's a wrap version of that existing asset that enables all of the streaming functionality right it's a wrapper super token there's also native super tokens whose supplies 100 streamable so if you know about super fluid you learn about super fluid today and you decide to launch a token you might opt to just deploy it out of the box with all these features so you don't have to wrap anything that's an option too there are several of those out in the wild they have a lot of usage so that's another that's another option but the key thing to keep in mind is this real-time balance right it's an aggregation of all the incoming flows and outgoing flows to create this kind of single number the protocol needs to keep track of to figure out how many tokens you should be sending or receiving every second if anybody else has any questions on that I will stand out there right right outside the door and answer as many questions as you guys have just to make sure we really drill that into your heads because I know it can be kind of weird at first but it is critical to understand if you're gonna if you're gonna interact with super fluid okay the final thing here that's important for understanding how the protocol works is this thing called a super fluid host the superfood host brings this all together it's like the brain of the protocol right so it's made up of some whitelisted agreements again the main one is that constant flow agreement which defines how balances can be changed during using that constant flow formula it also is something you call when you deploy a super token it supports something called batch calls which lets you just batch a bunch of super fluid related operations into a single transaction which is kind of helpful you can do things like open 150 streams and one transaction other crazy stuff like that and then it's also it also serves as a registry for something called a super app right so what is a super app and why is that interesting well the other interesting component of superfood is that it is programmable right you can build contracts that are aware of these streams coming in that have callbacks which can automatically run whenever a contract starts receiving tokens whenever those streams are updated or whenever those streams are deleted right so this opens up all kinds of really interesting connections between smart contracts that forms a really interesting Network that'll show you a visualization of in just a second but to understand these you have to keep in mind that all of these callbacks here this after agreement created thing you see in the bottom right these are called by the superfluid host contract because when you deploy a super app you just register it with that that host contract which is the brain of the protocol right so that the host contract will know hey this contract is a super app is receiving tokens call this function with your arbitrary logic in it to do something else cool right so again there's lots of super apps deployed right now and they all kind of do different things one big one is called Ricochet exchange which allows people to stream funds into a contract and effectively dollar cost average into different assets right so right now I can go DCA from usdc to eth on polygon and all that's happening in real time right so it's just like this this Loop where you have a contract that's receiving funds and sending funds out and and what this looks like when you start stitching things like Ricochet and these other contracts together is this right you get this really crazy network of cash flows where every single green ball there is an account whether it's a smart contractor an eoa and all the connections between them are cash flows right so for you here that are considering building applications on superfluid you have a gigantic network of cash flows to make use of right Point them into new places uh build new things for them to do um and you know we'll try to reward you for it so a quick little aside on the prizes we have 10K in prizes uh this weekend 3K for the best overall project on super fluid a couple of a few two thousand dollar prizes for various purposes like Define best use of superfood and nfts and then we have this thing we call the pool of Honor which is just a poor prize where if you implement superfluid in some capacity we'll throw you some money just don't do things that I've seen where some of you guys just throw a little git commit there at the end and just add a couple lines I'll actually look all right but I just wanted to plug those but all right let's get into the actual building okay uh what do you need to know about before you start actually building on super fluid well you should be made aware of a couple of Dev tools right the first is the super fluid developer console right this makes it really easy to see all these streams etherscan is not quite optimized for this sort of thing yet as you can imagine so we built our own console right makes it easy to manage all this stuff we have a dashboard that lets you create streams and update streams and all this stuff uh in a no code way if that's your thing and we have an SDK right so if you like JavaScript you like typescript you don't know solidity the SDK core is your friend right and I'll show you how to use that in just a second so let's let's build okay and I guess you know what before we before we click away I'll go over what we're going to build the first thing we're going to do is we're just going to interact with some really dead simple front-end examples so this is for you you react fans out there you typescript JavaScript fans out there we'll go to our docs I'll show you where to find these we'll create flows update them using JavaScript all right from there we'll actually go through the process of building a super app in a couple of minutes I got a pre-deployed contract here that will receive incoming streams and send all those incoming streams to the owner of the contract and plot twist the contract is also an nft right so if you trade this contract the cash flow follows it right so it's a really interesting primitive to let you tokenize cash flows which can open up really a lot of really interesting applications in my opinion so first thing I'm going to do is go into our Docs where we have a lot of front-end examples all right so let me let me expand this a little bit here all right so in our docs you guys can if you have computers out you can literally go to this right now docs.super fluid.finance and in developers if you go to constant flow agreement it just says CFA front-end examples super easy to find to create a flow what we do is we import the super fluid SDK over here you can kind of drag this over and see it sometimes on bad internet these don't load great all right we might find an alternative code sandbox this is what we got for now we just set up a simple react app and we have a really dead simple function here where we initialize the SDK using this line Where We call we create this framework object we specify the chain ID you can get this dynamically but I just hard coded to quarterly uh we create a signer we load the super token contract using this diex dot load we're not diax these await sf.load super token line select it that'll load a super token contract object for us and then we'll create a flow so what we do is we just create a really simple operation object using sf.

cfab1.graveflow pass in a few parameters like the flow rate receiver and super token and then we execute that from our signer okay this is hooked up here it's hooked up to an exposed private key right you don't have to oh like have an unlock private key to do this obviously that's not the preferred way for you to do it it's just really easy because we haven't we have an address with a ton of fake tokens in it and we let you just basically demo this in real time so here I have an address I pasted in I've got an amount here which is our flow rate this thing down here will calculate what that fluid actually is right when you put this number in this is actually in way per second right so it's helpful to have a kind of formula for ux purposes to calculate what this actually is on a per month basis so what I'll do is I'll just click this to create the Stream it should work in just a second all right so we just created a money stream so what I'm going to do is I'm going to plug this address into the console this is the console check it out useful tool if you click home you can see a bunch of streams right on different Networks if I want to click on gwarly I can just paste in the address that I just used to create to send the stream to and we can see that we are receiving some money right so I just created a stream to this address pretty cool right not very much has come in yet that's because it's a pretty small amount right so we created a stream in this you know this in this page we have a few other ways you can do this right so we have at the very bottom a metamask and web3 provider example where you can just use metamask yes question so no one thing you so I'll walk through what I think you mean if you're starting with die and you want to stream money with that die you have to wrap that die to Super token die right so again if you want to if you want simple examples of that again we got more fun examples here uh around let's go to tokens super tokens right we'll walk you through how this works and then we have an example here that's just like the other interactive ones where you can just call the upgrade function to wrap those tokens right that's the only thing you have to do but if you already have those wrapped die in your account no you just call that function and boom you're good make sense cool all right so I won't be late with the point right you can imagine that updating and deleting is very very similar right I won't go into those but that is dead simple creating updating deleting streams in JavaScript right pretty straightforward really easy to integrate with any other projects you're probably working on for more complex example let's get into this tradable cash flow thing right this super app thing and I have a project up here I'll show you where to find this after I'm done we have this in our our main repo I'll Zoom way in hopefully you guys can see that all right but inside of our examples this is inside of our super examples repo we had this tradable cash flow example here okay so this is going to look exactly the same as it does here as it will in that repo I have to we have two contracts and the first one is called this redirect all contract so with the redirect all contract is is it's a super app which means that it allows us to send money into it and then when we send money into it we can execute arbitrary logic in these callbacks to do something right you could have you that something could be anything you want um but in our case what we're going to do is we're just going to send 100 of the value coming into the contract to the owner all right so we have a bunch of stuff set up in the Constructor right we initialize this CFA library to make it really easy to create streams and solidity I won't go too deeply into that right now but the cliff notes is it makes it so that creating a stream in solidity looks a lot like how it did in JavaScript we register the app right so remember that that host contract has a registry of super apps on it so we need to register it and we need to find the callbacks we do and don't want to use right we have docs on this that explain this in much more detail but in essence there are six callbacks that can run right there's a before agreement created and after agreement created before agreement updated after we've been updated and the same for deleted the before will run before the actual logic takes place the after will run after the event takes place okay so we're basically just turning all of the before agreement options into no Ops we're not going to use them right so the only callbacks we're going to use are these after agreement callbacks okay so inside of these right we get a bunch of parameters that the host will call it with and we're going to run a single operation here and that's this update flow operation what's happening in update flow well all we're doing is we're just checking whether or not a stream already exists into the contract and we're handling that situation accordingly right so if there already is a stream coming to the contract and the operation is a delete operation that means we need to not only delete the stream coming into the contract but also delete all the funds coming out of the contract right the 100 of the inflow should equal 100 of the outflow so we're just basically making sure those match in this function right but again the limits here are your creativity you could you could put whatever you want here right this is just a one example the other function here that's useful is this change receiver function this will run every time the token is transferred so if I want to sell this nft this change receiver function will run which will just change who is receiving the flow right so if I sell it we'll take as a parameter here the new receiver which is going to be the person I sold it to that person's not going to receive 100 of the outflow right simple enough and then inside of this tradable cash flow contract it's an nft it's an ERC 721 it inherits from the redirect all contract and then we use this nice little helpful before token transfer hook you guys can find in the open Zeppelin API Docs and we just call that change receiver function in there so I have a pre-deployed version of this let me go to it in just a second and I got a bunch of scripts so we're going to interact with it really fast before we wrap up so I have some scripts let me let me grab this this contract address so we can go look at it this right here will be our tradable cash flow nft address right we can see I've been playing with it I've been sending streams to it and stuff but if I want to create a stream to this nft contract using a script what I can do is I can just call this create flow script all right and what this is doing is it's basically using the same logic we had in our react app we're creating a flow with the script right so we're just doing this in node instead of the uh react version we just saw a bit ago so if I run this using hard hat create flow .js we're going to create a flow from our assigner into the contract on gwarly this should work please internet gods all right yep I think that just worked in a couple of seconds as soon as the transaction propagates and stuff we'll go back and see what just happened inside that nft contract but again if you want we can we can go through the the update examples right instead of it being create we're just calling update and instead of same thing instead of Creator update we're calling delete here right the only difference in these functions is that the the delete function doesn't need a flow rate because there is no flow rate we're just deleting okay so let's refresh this again prayers after the internet God see if it works there we go all right so what we can see let me Zoom way in we can see is my account just created a stream of about 33 tokens per day into the contract right we can see how much has been streamed in and we can see that because again 100 of the flow into the contract is going to go to the owner so if there's basically no net there's no net flow rate for this thing it's just basically coming in and passing it all through to the owner we also have an outflow rate that was automatically created right we did we didn't create that those callback functions created that so it reacted to that operation for the exact same amount right so that they they match right and that's the idea so that that's end to end a super app contract and all of those JavaScript SDK examples right it should get you started hopefully give you some ideas um to wrap things up here I want to walk through like what else you could build right I have a lot of ideas right A lot of people here that are sponsoring will tell you they have lots of ideas that you can you can uh you can you can take and build on but I'll just give you a few right now right one interesting one is a platform for Tok investing our community would like to see this right streaming money is good for investing tokens right you do have to lock the funds up in a contract at first right but you know money is being sent per second right so it's it's pretty useful to be as you're investing people invest on a per second basis and actually receive the money second by second the other one is web 3 native subscriptions right so these are all recurring payments right they're money streams there is no canonical yet there are some great teams we love working on it but there is no canonical web3 native uh subscriptions platform that uses money streams yet you can build that another one is a decentralized advertising protocol where you could effectively turn that nft contract I just showed you into like a billboard space right for banner ads and have all the money streamed into it be sent to the owner of the billboard right you can do interesting things in those callbacks like split the funds too if you want um two other ones are around like lending borrowing and lending uh one of them is a lending protocol that you could use streams to amortize loans so what if I could pay off a loan it with a stream right instead of discrete amounts our hypothesis is that doing that would justify a lower interest rate because the lender is getting the money back faster it's more granular and the final one that's really interesting based on that huge Network I showed you is being able to borrow against an incoming money stream right so there's a lot of people receiving salary streams right now right I'm one of them there's many many others what if I could because that's that's a cash flow it's an Unchained cash flow it's proof of payment what if I could borrow against that right and not have to put up any other collateral that would be really interesting and be the kind of thing that I personally would try out right so there are markets here these are things we've thought through a lot if you guys want to build them come up and say out our booth and I'm happy to help finally like what I want to leave you with is where to start okay like if you leave here and you're curious about super fluid where do I go next all right well the first place is those SDK examples inside of our docs go to our docs constant flow agreement front end examples the second place is our solidity examples repo look up super fluid Finance on GitHub and look for super examples and I'd also recommend YouTube for a lot of tutorials more in-depth stuff and the last thing is a podcast we just launched right so this really doesn't have anything to do directly with super fluid but it is a great resource for technical people like yourself we've interviewed a lot of uh top devs from maker balance or Uma devra leaders like Austin Griffith about like very technical topics right like their favorite gas optimizations how they ship new features how they manage their engineering teams all this stuff we try to pull it out and give you guys the insights so I'd recommend checking it out devs do something on your favorite podcast platform um but yeah that's the last thing I'll I'll plug I'll leave you with that come see what's up at the booth and thank you for being here appreciate it [Applause]