Uniswap Foundation Workshop: Dynamic Fee Hook - ETHGlobal Brussels 2024

[Music] so uh we'll start and then hi everyone I'm e I'm one of the co-founders of dynamic uh we'll do is two things oh I need to speak to the microphone right okay uh we'll do two things we will first see a quick demo of dynamic and how it works and then after that uh we will kind of run through how to build your own thing within uh with uh scaffolding eth which is a really really cool thing with Dynamic together kind of run through that so those are kind of do steps I'll run through the demo very quickly and then I'll hand it over to Matt uh to actually run through the rest but the way to think about Dynamic is everything that happens after you click login on a website so dynamic as the name suggests is very Dynamic it can be kind of a more web 3 first type experience right it can actually be a multi-chain so if you're building on bitcoin or salana or evm it can actually work that way or it can be a very web to First experience so not talking about wallets at all just social login email login and everything around that with wallet Creation in the background now it's it's very customizable so you can make it feel exactly like the rest of the product you can kind of do it as an embedded thing you can do it as a popup it's as the name suggests it's very very very Dynamic right it can feel exactly like the rest of your product you don't have to change anything you can change colors themes copy everything uh you can change kind of order of things so you can say hey social login First let's merge these let's split them uh remove the continue button do this fully headless whatever your heart desires you can actually do now the cool thing is with Dynamic you really kind of if you don't have a wallet if the user doesn't have a wallet and you log in it's within a single click it generates a wallet so that's pretty much it that was the entire kind of experience and you got a non-custodial wallet uh the end user can export that wallet at any point but then where it gets really cool is you can start adding things to the profile that was created so in this case I added a couple uh embedded uh a couple third party wallets I can link additional wallets across chains I can kind of you know do things and Link uh kind of different metam mask wallets or I can uh kind of let's let's unlink this one as an example and add a different metam mask wallet so I can add a metam mask wallet pop it up and Link it to the same account so you can start building these really sophisticated experiences uh for user management you can also link additional social login methods right so this user for instance that has multiple login methods has this really cool kind of structure to the user information of a bunch of verified credentials for that user so all the wallets that were connected all the emails that were connected in a single spot now Dynamic takes it a step further and you have this full user dashboard where you can start doing fancy stuff so you can essentially for instance say look if someone logs in with a wallet let me ask them for an email address or let me ask them for additional custom Fields as part of their onboarding or create access lists so you can say uh only folks that log into my site with this specific email or this specific forecaster ID can actually access or kind of get a scope access to that site so for instance um I can let's log out and kind of try to log in with the wallet and if that wallet has access then Dynamic kind of turns from just an authentication tool into kind of a full onboarding platform so in this case I can capture someone's email or social login or anything like that as part of the flow so it's not just authentication but it's onboarding onboarding and ization as well now Dynamic is kind of really again as name suggests Dynamic so you can see it in action in different places so on Magic Eden for instance magic Eden is fully powered by Dynamic so if you log into magic Eden that all uses Dynamic and what you can see they've done is they let you now link your salon wallet your Bitcoin wallet your evm wallet into a single spot you can kind of Link additional wallets very quickly and here this is as you can see this is it looks like Dynamic this is actually Dynamic and so you can mix and match between a headless version of the product or or kind of a a more detailed version uh a good example bracket game which is a social fi type game uh uses Dynamic but just with email or eurocaster uses Dynamic with kind of a forecaster login right so you can actually build different experiences very quickly so if be chain is an example all core be chain apps use Dynamic so there are different kind of versions of how you can implement this and it's all with toggles on the dashboard so it's very very easy to get started and with that I'll probably hand it over to Matt to actually go through uh how to build something very quickly go for a b all right can we see why can we not see there we go there we go okay okay this talk was not titled this but I am going to try and give you some superpowers cuz we were looking last week at what took people the longest to get going with their project and realize it's not actually integrating Dynamic it's not onboarding it's the glue to put everything together if you try to build in your account abstraction layer your chain abstraction layer connecting to all of the wallets to actually verify and sign for those transactions it's not so easy and we don't want you to have to spend time building the basics we want you just build the project so what we did on top is build something called the hackathon starter kit version of scaffold eth this is a community project to help you get going we chose only partners of eth global because we're here for bounties let's be honest we're also here to build something super cool but it involves getting bounties along the way so all of these are partners of eth global all of them have bounties and it allows you to integrate them super super quickly so I'm just going to give you a brief overview of how to set it up you can then copy and paste the code Snippets that you need to to do certain things into your own project or you can use this one so to to be honest I think quite lucky if you're here to see it in action because again the title of the talk is not this I'm sure it will be shared more broadly a bit later but let's give it a go the easiest thing you can do to get started is MPX create Dynamic app you can also clone the repository can give you a QR code but if you do this it's one line you can choose scaffold eth hacker Edition give it oh God I hope how many numbers do I need to go for let's try 15 how many times have I insted this you can take a guess and it's done it cloned the repository it will remove the remote URL so you don't end up pushing to the original with with your hackathon project and that's it you can now follow all of the documentation from the read me which is exactly the same as scaffold eth which by the way he's staying very quiet but there is Austin in the back who helped build scaffold eth so if it's working well cool talk to me and if it's not he's there no worries so all you need to do is yarn we can do that here but I won't because we all know how long that'll take you can run yarn and then you can run two other commands yarn chain will start a local network and yarn start will start your front end and once you have it up and running you'll see something like this so I'm just going to give you a tour of what you get straight out of the box it's all of this stuff like I say it's the glue okay so the first thing is that the Dynamic is there by default it has a default environment ID so you can see this set up you can also add your own environment ID and customize it so let's say we want to log in with metamask let's do it over here we are already logged in and connected to base sapoia now we all know there are a lot of evm networks here and they're all amazing so I tried to add one and then felt like crap they're all amazing so I added them all every single evm Network that's here which has a bounty indeed we all do is present all you have to do to start testing is Click connect and in the code you can now start signing messages signing transactions you can flip over and I'm going to introduce you to the code now here in packages in nextjs you'll see a bunch of things like components and lip so you'll see in Dynamic this is how you can send a transaction you'll see that this is how you can sign up message our docs also have this but it's good to know because it ties up with sign hello world and send some eat to yourself you notice that we also had a local network running so if you're deploying contracts and testing you will be using that hard hat Network most likely so all you have to do is switch to it and it works out of the box you can also not just sign up with a wallet you could sign up with email and get an embedded wallet so people don't have to worry about web 3 exactly the same same flow beyond that there are a few amazing Technologies out there like polygon arbitrum and they have things like orbit orbit means you can deploy your own L2 or an app chain or any kind of rollup you want which is incredible if you're going for something quite deep really cool it actually takes only about 15 minutes to set up one of these chains I tried it with orbit I'll show you over here this is it running you don't need to worry about what it's actually saying but we have a local app chain running it's roll up why am i showing you this because should you want to enable your own network if you're running your own chain here in the networks tab you can see the format these are very easy to find things you can find them for any network on chain list I'm going to uncomment this one let's see if we don't need to reload we don't we're going to connect to our own local running chain and off we go let's sign a message let's send some eth to ourselves I put this warning in just to show you how you can do different ux patterns you can see it in the code we will sign and send just like that it's done if we go to the block Explorer which comes with this local chain this runs on block Scout again another provider of e Global if you go to the blockchain you go to transactions you can inspect your coin transfer so this is all the glue which ties it together all of the code is in here you see in the block Scout lib few few lines copy it over you can start querying your own transactions even more interestingly if you go to the smart wallet tab this is new for this version of scaffold eth safe one of the amazing providers out there I'm huge fan allows you to deploy an AA layer so we'll do it on Bas sapoia all you need to do is click this button and you have a safe account if you want to add the same in your code it's over in I think app safe page not refesh not transfer we have copi to clip cord and up here there is deploying a safe wallet so you can grab that code check it out and not have to worry about any of the setup once you've done that you might want to do a cross-chain transfer chain link who's also out there and is amazing done I think what I'm trying to say is we're all amazing that's pretty much the point of this talk but no I'm just trying to Fair because it's hard to to leave out every every different kind of technology so let's see do we have any balance why don't we fund it from the circle faet this is something you can build into your app if you're building on something and you want to let people get stuff very quickly let's copy our usdc address put it in and what we need to do is move to Bas apoia token sent let's give this a go you can now control this flow as you want we've just kept kept it plain and simple so there are multiple approvals on your safe you could batch up the transactions you could do it in any way you want you can have Pass Key MFA you can have onetime code MFA to your email or you can have no MFA at all and just probably unfair to call it silent sign right but you can just sign without any any process in the back end depends on what you're going for if it's a consumer app you might want to bundle and just allow the transactions through it's a big trust assumption so so take that as you will pass keys are always there for you we now have a transaction initiated successfully as far as I can see and here we can query it on block Scout so that's using the API calls in there amazing so was there anything else that we wanted to show I can leave a few minutes for questions at the end as far as Dynamic goes it's I showed you at active on a few sites but there are many different ways you could implement it you can do it like web 3 native completely web 2 I think Doodles is a reasonable example of that you can do it through telegram you can do it through forecaster there's a full forecaster guide section so in any way you want you should just be able to pick up the SDK and embed it pretty much as we've done here there's also the react native SDK if you want to use that for mobile and you can always browse through the documentation to find anything else so with that said the idea behind it is there's I'm going to show you our prizes uh we have here we're not in London although that was a really fun time here we go so we tried to tie it in and help you build creative interesting stuff the first is for cross chain the second is to abstract away crypto just improve life for people in general but without them knowing they're using crypto it's to get around the fact that there's a you know literal on-ramp in their minds to oh no this is crypto then social fi which can fall under quite a broad bracket but as long as you have a financial incentive to run a social experience or experiment you're in really cool and then the best integration so whatever you combine different Technologies into to do something novel will qualify this is because I really want to have fun thank you Tim for suggesting it but often like we get too far into into the weeds like the technical stuff and this this this but often people just want to have fun ideally in web too right we we all know that we love using crypto for fun like foraster and stuff but if we can use it to have fun for people who know nothing about it that would be absolutely incredible okay I think I'm on time in fact under time last thing we use pimo is the pay master all the transactions are sponsored with gas because it's on a test net you don't need need to create a policy or anything just sign up for pimo get an API key plug it in and you're good to go it's all sponsored if you want to go to main net then you will need your own policy but you can do that on the pimo website if you want support Discord Dynamic Channel or ask any of the partners because most of them know about this what I'm going to try and do next is deploy a chain on polygon cdk and plug this in here but yeah if You' have any questions we've got the booth over there and we'll be around all weekend easy thanks thank you [Applause] sorry hey question hello right nice yes local databas yeah so it's stored on dyamic onws essentially for custom Fields here grab this for a second um essentially on custom fields for any custom field you can do it database so in our docs just search custom information capture and uh there there's like a kit that shows you how you create kind of a custom field input type uh whether you want any regex type validation and you would link that to that wallet correct right to that user account yes that's exactly right you could put multiple you can have them show up during onboarding or show up later on so you have that full so here's the default fields which you can just turn on you can either skip them during onboarding or not and then with custom information capture you can enable whatever Fields you want it's up to you when you ask for them by the way you can ask up front or you can ask like gradually when you're giving value but that would basically save us toate our own to that's exactly right more than that there's so everything user management you can do through Dynamic so there's a meta data field so if you want to store information and you don't want to surface it to the user you can also use that so if you want to store additional information for on the user object you can do that to not just information in the last moment just just on that point as well as linking information you can obviously if you have an embedded wallet you can link an EA and if you're on a single EA you want to for example add your coinbase as well you can do that and because it's fully compatible with smart wallet you can just add that in as well using pass keys so yeah multiple information but also multi- wallet linking as well which is quite cool and uh one more uh cool so two two other important things if you're building in consumer crypto uh and you want after you create your wallet uh there's a concept of transaction MFA you need an approval or pass transacting uh if you want to remove that requirement come to our booth add you to a feature flag remove that so essentially as soon as the user logs in you just click and transact with no additional popups just come to our booth We'll add you to that feature flag and you'll be on your Merry way just create [Music] anxy come with Environ ID and