Superfluid 🛠 Build a Money Streaming Dapp in 20 Minutes

[Applause] [Music] thank you guys for all being here what's up guys um today we'll go through what super fluid is and and then we'll walk through building a money streaming application i'm one of the just well-known ethereum test nets so first and foremost what is superfluid so superfluid is a protocol which enables real-time finance so what that means we allow you to build digital native programmable cash flows and this includes things like streaming money with no capital lock-ups in a way that is 100 programmable and on-chain so one thing we we think about a lot in in this broader ecosystem right we think we're all building this internet of value right so what we believe is that the internet is to information what blockchain is to value right and and one place that we're trying to add to add value in this area is in real time finance right so in the traditional financial world when you provide a service to somebody i provide the service and a lot of times that service is decoupled from the payment that i receive from for that service right so if i provide a service to you as an employee at your company i get paid maybe once a month when in reality i'm providing value every single day that i work for every single hour that i work so why shouldn't you be paid for every single second that you're working right or if i'm providing a valuable service like on netflix or i'm providing computational services like aws why shouldn't i be getting paid every single second the service is being provided right so that's one thing that we we really help with and we really focus on so the way that this manifests itself is through money streaming so a money stream is a continuous payment that's native to web3 right so any recurring payment you can think of you can turn it into a money stream and send it on a second by second basis so these are like a connection between two existing accounts be it an eoa or a smart contract address where instead of deciding hey look i'm going to send you 1000 usdc per month and send it in a single transaction once a month i can instead take that amount divided essentially amongst the number of seconds in that time period and the money will flow from my account into your account in real time just like what you're seeing right here this is actually directly from our dashboard we have like a stream details page you can pull up to see the stream flowing in real time and this is an actual live money stream sending real money from one account to another right now so it's very cool stuff so how does this work right well we built a protocol to enable this and it's made up of three high-level parts we'll go through them at a high level um right now and then go through how to actually build money streams using solidity and also using our sdk in a couple of minutes so the the protocol is really made up of three high like i said high level parts the first is the superfluid host contract which serves as a kind of like brain for the protocol right so things are plugged into the host contract and that helps to enable everything to kind of work together and the other two are agreements and super tokens so an agreement is a peer-to-peer financial relationship that defines how your token balance can change in real time so the most commonly used agreement within super fluid is called the constant flow agreement which allows me to send you money linearly through time so i agree to send you a certain number of tokens per second and those tokens are just transferred to you per second so that's cool in theory but again how does that work right so many of you are probably used to sending native assets and also transferring your c20 tokens if you're going to go back here and send money on a per second basis like this right how is this happening right to you if you're only used to your c20 transfers you'd have to hit transfer every single second that wouldn't be feasible so what we built is an extension onto the erc20 standard that enables this real-time balance to be calculated every second so this this new standard is called the super token right and like i said it's it's an extension of the erc20 standard so it is compatible with erc20s all of the the standard transfer and approval mechanisms that you're used to are all on super token contracts there are just extra features on these super tokens that plug them into those agreements that can modify balances in really custom and unique ways right like the the money streaming so like i said these are plugged directly into the superfluid protocol they're usable anywhere in web3 and we have two separate kinds of super tokens you can use so one type is a native super token which just has no underlying address right this is just deployed directly as a super token the other is a wrapper contract right so i mentioned it's usable anywhere in web3 the reason for that is that we allow you to wrap any existing either native asset or erc20 token as a super token so that you can use it in other places as well right so that we wanted to value interoperability because that's so important to our space and wrapper contracts let you do that so again how does this real time balance actually work though right so usually that's not quite enough to to sell you on the fact that this actually is working in the way you think it's working and the idea here is what happens with these agreements is you define like i said a number of tokens you want to send per second right so all i have to do is send a single transaction to say all right i'm going to send fran for example one token per second right what we can do there is calculate the amount of time that's passed before you make another state changing operation and always have this accounting in place that can make sure that you you're only performing a new state changing operation with tokens that are in your balance right so this is all made up of like what we call a static balance so just a token sitting in your wallet and a dynamic balance which is made up of something called a net flow which just which is uh is is taken as the the number of tokens either being sent to you or sent from your account every single second right so that's the idea if you have any more questions on that feel free to just find me this weekend and we can we can walk through it it's okay we've gone through agreements super tokens real time balances how about programmability right so you guys are all builders you want to make cool stuff money streaming is cool but you can do additional things with money streams that allow for lots of automation and really interesting applications so you can build something called a super app which is what we'll walk through in a couple of minutes that allows you to implement callbacks that can react to events that are taken along with that that individual contract right so let's say that you have a contract you deploy that's a super app and you send a stream into that contract that stream can run any arbitrary logic as soon as the stream is is created into that contract right so the contract is able to react to these different actions and the reason why this is able to happen is that it's all plugged in back to that host contract that i went that i mentioned at the beginning right so you register a super app with the host contract which is able to then call these callbacks and react to specific events that are happening with superfluid so again i went through this a little bit super apps these are reactive smart contracts we'll go a little bit a little bit deeper into this in a couple of minutes but what this does is allows any of you here to build applications that are connecting cash flows together and building a really cool network so we expect to see is an explosion of these network cash flows right so this is a live depiction of a bunch of superfluid streams that are on polygon right now this is a this is a live network this is a fast growing network and all of you here have the opportunity to build things that grow this network and uh ideally help connect cash flows in a really interesting way so we see a network effect starting to to emerge here and we're very excited about it so yeah i'm i'm impressed that this this worked with within the keynote presentation i was a little worried it wasn't going to buffer but we got it okay so that's the high level of how to build on superfluid let's get into a more tactical example so the before we get into a contract we'll walk through together i do want to highlight a couple of developer tools that we've built we really care about developer experience it's hard to build good developer experience around technical products like this but we do put a lot of effort into it and this this is really what a lot of my day-to-day is is built around so one tool we'll go through is the superfluid developer console that lets you see you know any streams that are associated with your accounts it'll let you check super token balances it's just a really useful tool overall we also have a dashboard that lets you create update or delete streams with without writing any code at all it's just a good thing if you want to open a stream to a friend to try it out you can go to the dashboard and and test that live there we're deploying a new v2 of our dashboard very soon which is even cooler than the dashboard we have here but i just wanted to still mention it because it is important and the final thing you need to be aware of is that we have built some what i think are pretty good sdks that lets you if you just know javascript or typescript and aren't maybe great with solidity yet you can still interact with superfluid just using your sdks so we'll use that in in just a second but just wanted to highlight those three things so let's build okay what are we going to build we're going to build a tradable cash flow contract so what's the tradable cash flow the tradable cash flow is a super app so it can react to these super fluid events and implement it it does implement callbacks which react to these events and do something and what it's going to do is send 100 of the inflows to the contract to the owner of the contract and the contract is tradable because it's an nft so this actually mirrors some real world financial assets for example if you have subscriptions there are companies out there that let you go get revenue based financing against those subscriptions so this is a kind of web3 native version of that or maybe you can tokenize a subscription revenue and sell it maybe you can model them together and sell it we're not going to get into any of the more advanced futuristic things here today but we are going to talk through the primitive of how this works so i'm going to zoom out here and i'll show you where you can get this exact example code in our repo and then we'll just kind of walk through it together i'll show you how we can write some scripts to interact with the contract itself and we can we can move from there so i might have to zoom in quite a bit here because i chose to i chose to mirror but hang on let's zoom in here here's our repo it's just super fluid finance protocol model repo and it's in our examples folder you can fork it right here you can fork it just from the main branch if you'd like and this is our examples folder we're going to go into the tradable cash flow section and the contracts are going to be working with are going to be in here we'll step through these these two contracts in just a second but i do also want to highlight that we have some scripts here too the user sdk so you can go into the scripts folder and we're going to create update and delete a flow here in real time together using our sdk as well so you can see all this and follow along if you like in this section of our repo we also have the console up in a separate tab which we'll show in a second but this is really really going to be useful for us when showing you how the streams are being created updated and deleted in real time okay let's get into some code so i i have a a cloned version of that repo right here let me zoom in quite a bit you guys see that okay thumbs up good okay exit out of this clear up some space okay so we have this tradable cash flow contract and and what is this right so one we know it's an nft it's tradable so it's going to inherit from the erc 721 standard it's also going to inherit from this redirect all contract which has a lot of this super fluid automation on that on that contract we'll we'll step through that in just a second but in the constructor what it's doing is it's number one minting an nft to the owner that we pass that's gonna be the first argument to our constructor it's also going to take a name and symbol standard erc 721 stuff and then it's also going to going to take a the address of the superfluid host and it's going to take in the address of a super token right so we're going to we're going to keep this confined to only working with one token but you could make this generalized and work with any super token you like okay and remember the the host contract is that what i compared it to is the the over like the brain of the protocol right so you will a lot of times when you're building on super fluid need to pass in the host address to be able to initialize our libraries and access other things within the protocol as well okay the only other piece of logic that i am implementing inside of the tradable cash flow contract itself is this before token transfer hook this is actually straight from the the open zeppelin api or on erc721 if you guys don't know you can also implement hooks and and things you could run automatically when you transfer nfts this is one of those things so before the token's transferred we're going to override the logic here only take the the address that it's being sent to and we're going to call this change receiver function and pass that address in here okay so what this is going to do is anytime i transfer the nft i want the cash flows that are coming out of the nft to go to the new owner right the cash flow should follow the nft right makes sense so let's go into this redirect all contract because this has the meat of the logic so what's happening here is i'm just importing a lot of the super fluid stuff we need for working with the protocol the big one that i'm i'm importing is the cfa library this is going to make it really really easy for us to create update and delete streams in solidity with really just a line of code it abstracts some of the lower level stuff away and ideally makes it much easier for you we also import from this super we also import this this super app base contract which will make this a super app right and the reason why that's important is because we need this to have that those reactive elements to it we need to be able to implement the callbacks that will run on certain events that's the idea there so at the top of this contract we are going to initialize the library using this syntax here so using the using four stuff that you're probably used to with importing libraries and then what we do inside the constructor is pass in the superfluid host address that token we want to use and then the receiver which is just going to double as the owner of the nft it's gonna be the initial owner that the nft is minted to so we run a couple of checks here to make sure we're not passing in the zero address for any of these things we assign these variables like we should we get the we we initialize the cfa library as the cfav1 lib variable and this final thing we do here is register the super app contract with that superfluid host contract so this lets the superfluid host know hey look there's a new super app being deployed call these call these callbacks on this contract whenever these events happen right and by default there are six different callbacks that will run one is the before agreement created another is the after agreement created and then there's the same thing is mirrored for after agreement is updated and after agreement is terminated right so there's a maximum of six callbacks you can implement we a lot of times we'll usually see just the after agreement created callbacks being being implemented what you do to specify which callbacks you want to run is just you you specify that there are certain there are certain callbacks i don't want to run right so these are all no ops here so we're not going to do any of the before stuff the before agreement created stuff is useful in the in the case where maybe i want to reject a stream coming into the contract if it's below a certain amount maybe i want there to be like a minimum amount sent into the contract maybe it's a subscription of some kind it's got to be a minimum i could do that kind of stuff in the before if i wanted to so that's the setup the first thing i'll show is the this current this uh not current this change receiver function and then i'll get into the redirection of cash flows so remember what's important with the the change receiver is that we delete the streams going to the old owner and we create a stream to the new owner that's the idea right we need to make sure that the cash flows are just following the nft to the new owner so we have a nice little getter function to get the current receiver see who it is and if i scroll down we have the change receiver okay so we run a couple checks at the top and then we check what the outflow rate is to the current owner using this logic here right so all we have to do is call this git flow function and we can get information about the flow one of the parameters that's returned is what the flow rate is we can check what that is if it's greater than zero meaning that there's something that exists we'll just delete that flow using this one line of code and create a new flow to the new receiver right so simple enough deleting creating a new now let's get into the the automation stuff right this is the the most important stuff you'll see at the bottom we have a few of these callbacks that are implemented one is the after agreement created another is the after game and updated and the final one is the after agreement terminated we run this update outflow function in each of them so let's step through let's step through that function because it's going to be very important for this app okay so the update outflow function what it's going to do is it's going to check what the net flow rate is of the app and it's also going to check what the outflow rate is of the app so the first thing we'll see is okay does does the inflow rate now equal zero right if the inflow rate now equals zero it means that the flow that was being sent into this contract was deleted so if that was deleted what that means we need to also delete the stream going to the owner because there's no cash flows left right so we'll run this deletion okay the next thing we'll do is check if the outflow rate is not equal to zero so if there's already a pre-existing outflow and it's not equal to zero now it means that we need to update the flow because it means that the flow coming into the contract was changed so we'll update it and make sure that the flow rate coming in just matches the flow rate coming out that's all finally if none of those two things are true it means that there's no there was no stream that was existing into the contract yet so if there's no stream coming into the contract yet what we need to do is just open a stream to the owner of the nft right simple enough right the creation case the update case and the deletion case and all of that will run automatically whenever a stream is created into the contract and then when that stream again is updated and then when it's deleted so let's deploy this and test it live so what i've done is i'm using the hard hat deploy library which is a convenient way to deploy contracts you can also use the standard hard hat scripts but i have the the hardhat deploy library all set up here so i have this all set for the guerrilla testnet just like this and what i can do is just run mpx hard hat deploy and we'll do this on like i said go early it'll compile here i believe in just a second and then it will deploy for us all right so compiled successfully deploying any second now um so when this deploys what we'll do is we'll take this here we go we have our address we'll take this and then we'll write some scripts to send money into the contract update that stream and then delete that stream and just check to make sure that the contract is doing what we want it to do right so it's been deployed let me just copy this address and i'll go into our create flow script okay so we're going to use our sdk now to create a flow in javascript to show you i mean we've already shown you how you can create streams using solidity we can do the same thing in javascript and the process looks very very similar okay so here in the create flow script i'm just going to add the address to this variable that i have preset and what we're doing here is just initializing the sdk using this framework.create syntax here we're passing in the chain id we want to use in our case we're going to use the query testnet so it's the chain id is five we're also going to just make sure that we have the url we want to use in my case i have an environment variable set up within an alchemy url which is just going to allow me to deploy to to guerli and we're also going to do is we're just going to set up a signer here which basically just mirrors what an ethers signer is i could also just use ethers.getsigners and it would give me a signer that i can use as well so we have those things set up right we have a signer we have the superfluid framework which allows us to use the sdk now what i need to do is get the address of the token that we want to use and then create the stream so the first thing i need to do is get the address of the token in our case we're using diex this is the address that i passed in when i deployed the contract saying this was the accepted token i wanted to use for this contract so i'll use this to get the token you can just load it by symbol which is pretty cool on testnets we put a little f in front of the the tokens that have been deployed there just to denote that it's fake money and not real money so it's not real gotta be careful with that and then here what we do is we we create the operation we want to execute and then we execute it right and we sign the message with designer so here in this case we are going to create a flow using this this year so sf.cfav1 we pass in the receiver which is the address of the tradable cash flow we're sending money into this contract we pass in the address of the token which i can get through calling the address of this and we pass in a flow rate as a string and this is just the number of tokens i want to send per second right this is going to be a pretty small amount because it's all denominated in way but it is some amount so let's let's send the stream into the contract here by running our script okay [Music] and then what i'm going to do actually first is go to the contract address on the superfluid console so like i said the console is very very useful for these kinds of operations the second the stream transaction propagates i'll be able to just search this address more easily because it will automatically pop up in the console so give me a second here here we go and we can see here that there's two streams now in relation to this contract we just created a stream and then remember that the expectation is that 100 of that stream value is sent out of that contract immediately right and that's what's happening right money's being streamed in and money's being streamed out in the same amount right so it's that simple now you have a tradable cash flow contract you can do the same thing and have the scaffolding for a really really interesting project this weekend if you fork this i could go through and update the flow and delete the flow but i think that would be a little bit tedious at this point because it is basically just the same thing the syntax is just slightly different in the sdk but that's the idea right if i were to trade this nft the cash flows are just going to follow the nft holder and yeah that's that's one very very powerful thing you can build on superfluid so if you have any questions on this please feel free to let me know i'll go back into in the keynote and just kind of finish out our presentation but i'd love to engage with any of you guys on this if you're interested so cool let's go back in and we'll wrap this up okay so we we left off on the tradable cash flow explaining it a little bit another thing i want to talk through is this program called superfluid reactor so what we really value with superfluid is becoming a developer platform that's part of our strategy here we want to integrate with existing web3 product projects that are used widely but also help you take whatever you're building to the next level so if you're if you're aspiring to be an entrepreneur in the space or just build a really valuable project that's maybe open source we want to talk to you right we just rolled out a program called superfluid reactor that you know the entire goal is that right we want to find people like yourself to launch and if if you get into the to the program there's an application process but if you get into the program we'll provide the best mentorship we have we will help you raise money we will connect you to other talent in the space we will help you find your first thousand users we allocate a lot of time to this so we'd love to help you we've had some success stories already in a less formalized way i mean the reactor program is very new but we've had protocols like ricochet exchange which is a dollar cost averaging application um come through our system we help them quite a bit to get lots of users and get off the ground another is a protocol called huma finance that's allowing people like some of the the people at superfluid and maybe in this room to borrow money against their their salary stream or earn passive yield using their salary stream and we've also had a protocol for web3 native subscriptions called stripe also come through our program who just raised a 2.5 million dollar pre-seed round a couple of months ago so lots of lots of success stories and we'd love for you guys to also be your own success stories if you'd like that's it for today if you want to get in touch you can find us this weekend i'll probably pull an all-nighter or two this weekend so if you're going to sleep here i might also end up crashing here we'll see um you can find me on twitter at s4m85 and in discord it's sam f superfluid so if you're interested in superfluid please feel free to reach out if you have any web 3 questions more broadly let me know and i'm happy to chat through anything and yeah appreciate all of your time today thank you