Superfluid 🛠 How to Build a Money Streaming App on Superfluid - Samuel Flamini

[Applause] [Music] all right hello everyone it's uh very nice to be here as always heath global did an amazing job with uh this venue and thing so props to them um but yeah we will be talking through superfluid today so i'm my name's sam i help lead developer experience it's super fluid and i'm going to show you how a superfluid works and how you can use it to build money streaming applications so what is superfluid well superfluid is a protocol which enables something we like to call real-time finance so real-time finance enables you to amongst other things stream money with no capital lockups in a way that's 100 percent programmable and unchained all right so what does this mean well money streaming is this idea of taking any recurring transaction and instead of setting it in discrete lump sum intervals i can define a what's called a flow rate and send you a certain amount of tokens per second and that money just trickles to your account in real time right so it's a really really cool opportunity to bring recurring payments into web3 natively and what it does is it creates this really cool link between the value you provide and the value you get in return for that right so if i'm an employee and i go into my job and i clock in at work right in a lot of cases what i'm doing is i am working and then i'm waiting two weeks to a month to actually get my paycheck what if i could clock in and every single second that i'm providing value i got value in exchange via something like a money stream right and what this kind of thing does is it enables you to send money with no delays there's no unpayment risk right for every second you work you get paid uh and there's also no intermediaries because it's all done on chain and we live in a world with with at least less intermediaries here in web3 so the protocol is it's not a layer 1 right it's not anything like that it's not a roll up this is a smart contract framework that is made for the evm although eventually it will be probably chain agnostic and environment agnostic and what it does it allows you to create these open-ended agreements between two accounts right so what you do when you create a money stream is you engage in a kind of agreement right so i can opt to send you uh one token per second right and as soon as i've done that i've sent an on-chain transaction which says that now my balance is going to be decremented by one token per second and yours is going to go up by one token per second right so this is really cool for a lot of reasons but what's really interesting about it is that these tokens that enable this right can have really interesting ways that their balances can be changed in accordance with those agreements right so we in order to actually make this happen right this is pretty innovative like in order for you to actually send money on a per second basis normally a lot of you are probably thinking all right am i going to have to call it something calling transfer every single second to make this happen and that's not the case right we built this additional token type which is plugged directly into super fluid protocol and is compatible with many of the other features you use to with tokens right so we inherit all of the standard erc20 methods um and you can use them anywhere in web3 right so we have we have two types one type of super token is one that's just deployed out of the box as a super token right so this this is one that you know maybe you deploy it tomorrow and you know the super super tuning is you know sorry a super token exists um so you don't want to deploy a wrapper around an existing token um we also have wrappers right because we know that composability is so important so you can wrap die you can wrap eth you can wrap usdc as a super token and be able to use it anywhere else in web3 so these agreements that i mentioned right these are these connections between two accounts and what they do is they allow you to calculate something called a real time balance on that super token so on the super token itself what you can get is based on like how many money streams you have outgoing at this given point in time we can calculate what your net flow rate is right so use the example earlier where i am sending out one token per second and someone else in the audience is receiving one token per second we can calculate your net flow as whatever that is when you combine all the different money streams you're sending receiving at once right so if we have that right we also have the block.timestamp value which is changing for us every single new block so what we can do is anytime you want to create a new money stream or do something else with your super tokens we just calculate all right how many tokens you have in this moment before we perform that next state changing operation and everything shakes out properly given the accounting that happens in the token if you have any questions about how that works specifically i'll be standing right over there after the talk we can get into the details but the thing you need to understand is we're kind of we're doing this by hacking the the block.timestamp value to move money effectively for us right it's pretty cool the other cool thing about this is that because it's a smart contract framework there are a lot of things we built into it to make it programmable right so you can uh provide like an access control layer so that there's something that's very similar to erc20 approve methods so i can grant you the ability to open streams on my behalf and we also have these things called super apps which you see here down in the middle that are these cash flow aware smart contracts that can react to specific events so if i send a stream into a contract it can react and then do something for me right one example we'll go through later on we'll actually get into some code will be one that can take in a stream and the second that it starts receiving those tokens can redirect those tokens to wherever the owner of that contract is so these superfluid apps are again very important in terms of painting the picture of the potential of what superfluid can offer right you can put anything you want inside those callbacks not just like open a stream form you can do anything else and what this does is it allows you to chain all of these different operations together and form a crazy network of cash flows right so this is super fluid right now as it's deployed on polygon with each individual node representing an account and all the connections between nodes representing cash flows right so all of the the teams that are building products on top of superfluid are participating in this giant network of cash flows i'm actually impressed that it rendered properly because this is a lot of information but it's really cool and what you can do if you build on superfluid this weekend is build an application that plugs into this giant network of cash flows right so you can grow this network and you can also um tap into it right in terms of your user base so with that being said let's talk through prizes at east mexico and we'll get into some actual tactical building stuff right so again if you want to go take advantage of the network i just showed you there are some opportunities here we have 10k worth of prizes and usd um one for the best overall project one around d5 and then some other general prizes here as well if you have any questions on them please feel free to come up with and we can and we can uh clarify them for you um and yeah so in terms of building on us there's a couple of things you want to know about one of those things will be our developer console we'll use this in a little bit um to just see the effect of creating money streams and deploying cash flow we're smart contracts we also have a dashboard that's really cool if you come up to our booth you'll see we have this huge tv monitor that will show balance taking up in real time so if you want to see how that works right and even get a stream yourself you can come up to our booth and we can show you and then we also have an sdk that i'll make use of here in a demo in just a second but this is really useful because it allows you to interact with the protocol without using any solidity at all right as long as you know typescript or javascript and most udevs here you probably have at least dabbled in it if you're here you can open streams just a few lines of code using that sdk so let's build what i'll do here is i'll share my screen in just a second but i want to give an overview of one of the applications i want to walk through briefly to give you an idea of how simple this can be to create smart contracts that interact with our protocol so we're going to create this thing called a money router right so it's going to allow you to manually send a money stream into a contract and then manually call a function on the contract to send a stream out of that contract to an address you choose right this is it's going to look a little bit like this right one of those super apps i showed you earlier which can take streams and automatically send them out it's just going to be a little bit less fun because it's not going to be automatic i'll show you in a little bit an example of a contract that can automatically the second it takes in a money stream send it out but we'll get into some of the more advanced class stuff in just a second so you can find all of these examples if you want inside of our repository here and make sure you guys can see this but instead of our repo we have a super examples uh folder and what you can do is you can actually just plug in and fork some of these things this weekend if you want to build a superfluid related project all of these we try to make them so they have really really good documentation good comments if you have any questions about them we'll be here but the the example we'll be using first is just this money streaming intro example so you're welcome to come back here you can fork this repo if you want and uh and follow along if you'd like or just try it later but if i pull it up here i'll go to the contract itself and make sure you guys can see it zoom in just a little bit to me just a little bit more we have some boilerplate here up top right where i'm importing a bunch of contracts and what i'm doing is i'm using this library called the cfav1 library to allow me to open a stream and solidity in one to three lines of code a piece right so it's fairly simple so once i have this all set up in the in the constructor right i have some state variables that i declare up here but in the constructor what i'm doing is i just deploy or i guess i instantiate this this library here and from there we can actually get into this contract and use it to start opening up streams so there are a few key functions we'll use there's some access control stuff here up top that i won't really go into today but the key functions that matter here are one sending a lump sum into a contract you might want to just send like a lump amount of a token into the contract so we have a function that's going to let you do that on the contract itself we have a function that's going to let you create a flow into the contract and then we have another function that's going to update that flow into the contract or delete that flow into the contract and now that we have streams going into the contract we need to also send streams from the contract right so i have the same exact three functions but coming from the contract so what i'll do is i'll fill in some of these functions just to give you an idea of the simplicity here inside the let's go to the create flow into contract example inside this all i have to do is call cfav1.createflow by operator and pass in the sender the receiver the token meaning the super token i want to use and the flow rate right so very simple literally one line of code and i can create a stream into the contract in terms of creating a stream out of the contract right it looks almost exactly the same but there's no buy operator thing here right and the reason why we have to use this buy operator bit in the create flow into contract function is that once i create a stream into the contract like if i were to pass in uh like the message.sender being like the contract itself that's not going to work because even though i'm calling this contract or i'm calling this function on the contract the actual message that sender on that function call is going to be the contract itself right so this is just tracing the value of message.

sender within your individual calls but here what we can do before we actually make this call is use our acl features which allow us to provide access to a different account to open a stream on my behalf right so this is just like an erc20 approve where i can allow somebody else to create a stream for me right it's fairly simple and we'll go through a script that shows you how to do that as well okay so we have that function i'm just going to copy this over to the update example and it'll be almost the same exact thing except i'm just going to change it from create to update so that's pretty pretty simple there and i will do the same thing for this example right so instead of just create i'm going to change this to update and it's pretty simple i just have to make sure that the flow actually exists right if i try to update a float doesn't exist that'd be kind of nonsensical and it's going to revert but if i update the flow with a new flow rate itself it'll work okay so i'm going to leave it there for now there's going to be some functions here we're not going to implement just for the sake of time i don't want to be too redundant for you guys but what i'll do is i'll just deploy this contract using our little deploy script here we'll do this live which is always fun because it means i might have to debug live but hopefully not so this is deploying and while this deploys i want to show you a couple of other useful tools right so i mentioned this thing called the superfluid console this allows you to just search an address and see everything that's going on with that address so if i copy and paste in an address that i'm going to use quite often here which is just this one it'll pop up on every network it's being used on and i can track everything that's happening with it right so i can see all of the dive that's flowing on testnet this is all fake money guys don't worry this is this is fake um but you can see all the money streams that i've created you can see the tokens that i hold right it's a really really useful tool so if you're building something on superfluid this weekend i highly recommend you check it out we also have dark mode we know everybody likes dark mode so that's another plus but if i go back into the s code here looks like we had a little compilation fill bit here see i told you we got a debug live this is what we love let's go back in here yeah i think i just forgot to save let's redo that so as soon as this deploys we'll be able to create a stream into this contract itself same thing here let's figure this one out new flow right there we go see we make mistakes too guys all right so i have this this is deploying for us all right we have another one which is always also fun looks like i did the same thing here just for the other the other example all right same thing let's pass in new flow rate and we're a little bit ahead of schedule on time so we should be okay there we go all right so this is compiled and then the second this deploys what we'll be able to do is send funds into the contract itself and then open a stream from that contract to a different address okay this is just loading for me alrighty gotta love alchemy with the the rpc all right i do have a backup example here which is something i'm glad i prepped but the goal here will be as soon as this is deployed all right it looks like it did just deploy as soon as this is deployed we'll be able to create a flow into this contract and then ultimately create a flow out of the contract right so first i'm going to approve a token send into the contract okay so we'll go here into this token approval function i'll send this transaction here so instead of deploy i'm just going to approve this token approval just like that so i've just passed in this address of the contract and then here what i'm doing for the approval is i'm just calling approve on the diax contract so this is just going to approve this diax token right that's just just which is successful this is going to give the approval on the dax token such that i can then send money using this function call here so do the same thing where i'm just going to pass in the contract address to this one so we'll send a lump sum into the contract alrighty and then i can run this script here okay paste that so now we're going to send some money into the contract and in just a second we'll be able to see this money also inside of the console right so as soon as it receives funds i'll be able to search it just like i was able to search this address and we'll be able to see that this now has some super fake die tokens okay so let's make sure that approved all right we just successfully sent funds to the money writer contract and up that's not what we want to do we want to paste in the address of this contract okay so i'll paste this in cut this off and in just a second this should show up for me but now that we've done that what we can do is now create our stream into the contract as soon as we use this acl approval bit so remember this acl feature allows me to approve someone else to open a stream on my behalf okay so in this case i'm just going to approve the money router contract itself to open a stream on my behalf okay so we're gonna create a flow into the contract using this script i'll paste it in just right here as the address and then what we do is we use the superfluid sdk i guess we got to go to the acl feature first so what we'll do is we'll use the superfluid sdk to approve the money router contract to spend some tokens for us right so this is just called update update flow operator permissions we pass in the address of the money router we specify the super token we want to use and then we give it a flow rate allowance right so this is just the amount of tokens we can create in terms of flows sending out per month all right so this is what this amount correlates to this looks like a very big number when in reality it's just the number of way we're going to send per second okay and this permissions value will just grant all permissions right there's a there's like a bit map value here you can look up in our docs if you give it a one it's just gonna give you the create permissions in the case of a seven you get all the permissions right so you can do anything you want all right so let's load this again so it can show up when when we're back here but let's call this acl feature grant that access and then create the stream from the contract or into the contract from us okay so let's call this function here using this script all right so we'll run this acl approval this is just going to offer our approval and then the second we're done with this we're just going to call the create flow in the contract function on the contract itself and then because the only two values it takes if i search createflow in the contract it's just going to take a token at a flow rate and then it's going to handle the rest for me in here i can just pass the token i want to use the flow rate and i'm good to go i'll be streaming money alrighty so this is all set up properly and then i'll run this one so the second this loads we'll be able to see money take tricking tick uh being sent in real time into the contract all right so this is the contract itself see there we go it's popped up on gwerly we can see it has a balance of 500 tokens right so we've been able to send that lump sum amount so it's sitting on 500 tokens and then the moment this one actually finishes we'll be able to see that money being sent in real time okay just a second here some other features here that might be relevant in terms of checking out like protocol level stuff or the subgraph right so what you can do is write custom subgraph queries inline which is pretty awesome uh we use this quite often for just like looking up internal data ourselves and playing around the subgraph people ask us like how they can get specific types of data within their applications and usually the best place to go for this is this uh subgraph explorer console right you can just use this to pretty easily just salute different data you want to get look up specific things you can use events so i highly recommend using this as a as a place to get data within your applications all right so it looks like this transaction is hanging for me which is no fun but in the end the goal of what we're trying to do here and this is what will happen as soon as we have this propagate is to get something that looks a lot like this right so this is an example i prep beforehand just in case we had transactions not processed fast enough for us on stage and what we can see here is we originally had a balance of 500 but then we sent streams from the contract or send streams into the contract i'm sorry and when we did that we created a flow that is going to send the equivalent of 33 tokens per day or about a thousand tokens per month and we have about six tokens that have been streamed from the time that i opened this to right now so money is flowing real time in this example and this is the end result of what this function will do is as soon as it uh it actually goes through okay so that's the like the manual example right that's manually sending a stream into the contract and if we wanted to we could just call the create flow from contract function to send streams from the contract in a manual way right this is something you guys can all do very easily but what we also want to show you how to do is create these programmable applications where you can do things automatically right like let's say that i want to send a stream into a contract and have it automatically the second it gets funds send a stream out of the contract right and where this becomes really interesting i'll go back to my slides here is in the case of like tokenized cash flows or revenue-based financing right so there's a contract that we use for the base of a lot of our examples called the tradable cash flow that can receive streams and send them out but the other cool thing is that it's also an nft right so you can imagine let's say i'm a business let's say i'm a subscription-based business and i have one of you in the audience paying me for a sas subscription what happens in the web 2 world is a lot of people that run sas businesses will raise new rounds of financing all based on existing revenue right it's just revenue-based financing right instead of having to loot themselves and sell a portion of their company to raise more money what they'll do is they'll say okay financial markets i'm having somebody pay me 1 000 a month for my sas subscription instead of me taking this money and waiting to get an additional thousand dollars every single month why don't you pay me 11 000 now and i'll redirect the entire subscription value to you so you make twelve thousand dollars throughout the year and gain a one thousand dollar profit right that's a simplified example and there's obviously going to be other things that underwrite that that transaction but what if we could bring that exact same model into web3 and that's what the tradable cash flow does right it lets us tokenize these cash flows and plugs them directly into d5 so again sending streams into the contract the streams are automatically routed to the owner of the contract and each time the contract is traded all of those cash flows go to the new owner right so you guys could do really creative things with this where maybe you split a small portion off as a fee to somebody else or add additional crazy features into it as well but i'll show you how we actually can can build this in just a few minutes so again back in this super examples folder if you go to the tradable cash flow example you can fork this yourself and start playing around but this one is pretty simple to set up and i won't go as in detail as i did with the the last contract because transactions seem to be taking a little while to actually go through but what i'll do is i'll walk you through the key functions on it so you guys can go in and take a look yourself so if we go to the tradable cash flow contract here we can see that it's really really simple right all it's doing is it's deploying an nft right so this this contract is inheriting from an nft contract and it's inheriting from this redirect all contract too which this redirect all contract has all the cool functionality in it and i'll go through that in just a second but it deploys an nft here with a name and a symbol and mints one of them to the owner of this of this contract right that's it really simple the nft stuff is all the stuff you guys are used to but the new stuff is all in this redirect all contract so the only interesting thing we have here on the nft contract is we use this before token transfer hook this is a hook you can use you can actually see in the open zeppelin interface for the erc721 standard but you guys can just call this change receiver function inside of the before token transfer bit to make sure that before the the token itself is actually transferred if it's ever sent that all the streams are deleted to the existing owner and sent to the new owner so if we go into the redirect all contract which is again where all the cool logic takes place we're doing all this super fluid stuff here up top we're importing all this boiler plates we've got some events we declare you guys can use we're using the cfa library to make it really simple to open streams we had some stuff in the constructor we also initialized the library here just like i showed in the last example but then what we do is we do something called a registering the app with the superfluid protocol right so what this register app bit does is it will allow the super host contract which is like the brain of the superfluid protocol to call these specific functions each time a like one of these operations takes place so all you have to do is deploy this contract and send a stream into it and one of these functions one of these callbacks will run for you instantly so it's called the after in the case of a stream being created in the contract it's called the after agreement created contract function and this logic inside of here will run automatically for you right so it's it's being called by the superfluid protocol and inside of this you can do whatever you want so in the case of the update outflow function let's go to it here what we're doing the simplified way to explain what's happening here is we're just checking the current state of the contract itself right if no stream yet exists in the contract what we're going to do is look at how much money is coming into the contract and then we're going to create a stream of equal amounts to the owner right that happens down here in this create flow example if there's a stream already existing into the contract and the stream was updated right what we can do is just make sure that it's updated so that it mirrors the amount coming in and we need to make sure that amount equals the amount going out and in the case of a deletion all we need to do is delete all the streams going out of the contract right so pretty simple right simple like if-then statements to get this really cool functionality and then in the case of the changing of receiver again this is just going to be called each time that the the token itself is actually transferred what we do is we check who is the current receiver all right that receiver should no longer be receiving these streams so we delete them right here and then we need to create streams to the new receiver so we can see who the new receiver is and we can create a stream to them equal to the exact same amount that was being sent to the old owner right so it just matches up and again this is all here you guys can fork this using your own applications make it better i'm sure there's gas golfing opportunities in here if you're so inclined uh feel free to go crazy but that's the idea there right so in the case of this contract it's going to receive tokens and send them out automatically so that the balance of the contract is always zero but the owner has this asset that is now a tokenized cash flow so again highly recommend you check that out but to wrap up here today there's a couple of things i want to mention right the first of them is this thing called superfluid reactor so there are quite a few teams including some of the logos i show i've shown here that have built pretty good traction or raised money building a project on top of superfluid right and the superfluid reactor program who is also kind of spearheaded by yao here in the back she'll have a soleil tag you'll see her as solei in discord she's helped lead this but what we've done with the reactor is formalize some of the help we provided to projects like yours that might build this weekend and if you guys want to raise money we'll provide coaching on how to raise money if you guys want help shaping your idea we do that as well if you guys want technical review technical help we can do that too so again it's something i just want to plug briefly because we do really value our developer community in our ecosystem and i think that you should know that if you are considering building on superfluid you have resources the final thing i'll leave you with is uh something kind of fun that i'll plug really briefly it's a it's a podcast we just launched yesterday called devs do something so our first episode was with rahul sutherland from connex the cto of connext and the the methodology behind this was again we really valued developers we looked around at all the podcasts out there and there aren't that many like really highly technical web3 podcasts there's a lot of really great content out there but we want to go super deep so with rahul for example we went deep into like how they do uh design and like actually launch new features at conext we went behind these scenes and how they approach security and testing we walked through like literally like their github actions and stuff so if you're interested in some tech alpha i highly recommend you you check out the devs do something podcast and and give it a listen and also recommend people you'd like to have on it so that's it for me today sorry we had some of those transactions not not work live on on stage but uh i hope you guys consider doing something with superfluid and if you have any questions please feel free to find me in the hallway over there thank you