🛠️ 0 to Hyperdrive in 30 minutes - ETHGlobal San Francisco 2024

[Music] so basically it's just converting variable rates from staking protocols or lending protocols into fixed rates and there's a bunch of cool things that you can do with hyperdrive so for example you can fix a borrow position so if you have a like let's say you're borrowing $10,000 on a and you're going to have some kind of variable uh rate of interest that you have to pay um if you purchase a short on hyperdrive for the same amount of dollars uh it's actually going to lock you into a fixed rate because as the interest rate goes up on a you're going to be earning more money on the short and if the interest rate went down on a you're going to be earning less money so it actually ends up being the case that uh the fixed rate that you paid to open your short position is the only interest you have to pay over the course of the term so that's just one example of kind of the magic of fixed rates um we're really excited to get see what you guys come up with over the course of the hackathon and you know come by the Del booth and we'll we'll kind of share ideas about how we could how we could build cool stuff um so if you go to the GitHub delve Tech um you're going to see our open source hyperdrive repo this is where the smart contracts live we also created a hyperdrive solidity starter repo um so this is just kind of like a a repo that you can use to get a primer on how to integrate with the smart contracts using solidity um so I'll try to keep things relatively quick if there's questions uh we can talk about how to use this later but it's just a a normal Foundry repo um you know we have some instructions here about how to how to build and use it um and it just includes a simple hello world example so what this hello world does is it just opens a long position on hyperdrive and then logs some data about it um and if you run our hello world test which you can do with uh Forge test VV this is all in the read me um it's actually going to run uh this example on a live pool that we have set up on mainnet uh which is the STI pool um so that's just kind of a nice way to get started you know you'll know that you're actually able to open along um we're like over the course of the haathon will also spin up uh opening a short and adding liquidity so in the event that you need to use any of those Primitives uh for what you're building you know you'll have this example set up and and we can help you kind of add custom features to it um but yeah that's pretty much it on the solidity side like I said you know look at our GitHub look at our bounties and uh come to the Dell booth and we're happy to help you um with any and all of this so I'm going to pass it to Danny um and he's going to talk a little bit about building front ends with hyperdrive hey everyone uh my name is Danny I am the lead frontend developer here at Del um and uh like Alex mentioned um I just want to walk you through our hyperdrive starter monor repo uh so if you're interested in building front ends uh and I'm just kind of curious how many of you have built a front end a web 3 front end of any kind maybe used VM or wag me or react uh this will probably look familiar to to some of you um but I want to just yeah walk you through this a little bit and then also show you the existing frontend hyperdrive to maybe kind of solidify some of these Concepts that Alex mentioned about the Longs and the shorts um so before maybe jumping into the starter repo uh I want to show off the hyperdrive front end that we have today um and uh and like Alex mentioned we've got different pools on hyperdrive where you can open up a fixed rate or a variable rate position um so a good good example here would be maybe the Lidos Ste pool and in the lios Ste pool uh you can see that if I were to spend one eth in this pool then I would receive about 1.1 and some change eth at mature and you can see that it matures on the 18th of April um so I can just kind of buy this position uh hold it in my wallet come back in 6 months and I'll have earned effectively about 3% on my eth um and this is really great uh because it's kind of a set it in foret it yield position um if the fixed rate changes over time you're locked in you already bought uh you already bought your long um and as far as a counter party for this uh which is a really great question we got at our booth so definitely come by if you have questions and uh we'll be happy to answer them uh the counterparty to this would be the short side of the market um and so if you are interested in uh variable rates uh instead of the fixed rates you could open a short and in this example let's say I want to earn yield on 1 E worth of uh deposit into Lio then I only have to pay 015 uh eth for that exposure so you can see that over time the Longs and the shorts kind of work together uh and create uh trading volume in this pool and uh depending on how much liquidity is in the pool that will determine the size of the long or the side size of the short that you can open um the third side of the market because this is an amm um this is going to be the supply side so if you are interested and depositing into Lio um you could kind of use uh hyperdrive as a sort of a surrogate for depositing into Lio because when you deposit your eth into hyperdrive uh as liquidity you will effectively be earning the Lio steth rate on your on your deposit and you're going to also earn trading fees whenever uh users open Longs and shorts so uh it's kind of a way to boost your exposure to Lio simp simply uh by being an LP on hyperdrive so there's some really cool market dynamics uh that you can um explore with both the Longs shorts and then as a sort of a long-term position being an LP on hyperdrive uh you'll notice that uh the Longs and the shorts have maturities so they will they will expire at a certain point and then you can close those positions uh whereas if you're an LP on hyperdrive you can just sort of set it and forget it and as more people open Longs and shorts you know again this being a six-month pool uh you don't have to do anything about rolling over your liquidity or any type of stuff like that as an LP it's pretty pretty straightforward uh and it'll feel a lot like just depositing in Lio um so so this is the front end that we built for hyperdrive um and I want to now uh spend some time talking about the starter repo that we wrote uh to kind of just give you a head start you're not obligated to use this if you're interested in building on hyperdrive if you have a stack that you prefer um but I want to just kind of run you through this a little bit uh this is using turbo repo uh which is a a way to structure uh it's really nice for front ends because you can have apps and packages living in the same repo um turbo repo is uh made by versel and their docks are fantastic so uh don't want to spend too much time on that but here in the readme and we'll jump into vs code here in a moment um here in the readme uh we've got some some links here for you so uh like I mentioned if you if you want to uh build your own project from scratch not use this as your boiler plate um we've got the solidity starter repo linked here we've got um the front end that I just showed you that entire uh front end is open source so if uh if you see something that you you know want to use uh but that isn't yet in the starter repo you're welcome to just go snatch our our react hooks or whatever it is uh happy to happy to help you uh uh uh crib off of the the official frontend repo um then we've also got the contract abis this will be things you're familiar with especially if you use tools like VM and wagy or ethers um you can just npm install or abis you don't have to go hunt them down on ether scan or anything um and then we've got this app config package uh this is going to be where we keep all of our static metadata so if you've ever like gone through and had to make an RPC call for decimals and name and symbol uh that is all captured in the app config it is just a giant Json object you're welcome to console log it um and see see all the good information that's in there and kind of save save your uh your Alchemy bill um and then we've got a fixo math Library um you're welcome to use whatever one you prefer but this is one that we use in the in the hyperdrive official front end um so if you need to multiply you know the the Longs by their Fiat price you know to show that to your users uh this is a is a great great library for that um and then we've got our hyperdrive SDK which we'll see here in a minute um as well as VM bindings for that SDK um if any of you have ever uh used uh sdks as a front-end developer uh a lot of them go stale or they end up like with an outdated version of a web 3 Library so there's uh there's a really great uh way that we've uh architected this so that you can write your own bindings uh and in this case since VM kind of has the lon share of uh of of usage for front end uh we've gone ahead and already written VM bindings for the SDK um so so that's kind of uh just kind of walk you through the read me now I want to jump into vs code real quick and just kind of walk you through uh what we've got here um available to you out of the box um can y'all see that all right in the back cool okay so real fast we have a package here called core um the the configs here you probably won't need to touch those uh but here if you're interested in building some sort of developer tool like a library or your own SDK um we've gone ahead and created a simple little package that it already has a build script it's it's got typescript included um and it's an empty index file at the moment uh but if you want like I said to build just an mpm package on hyperdrive um this could this could maybe give you you know a six-hour head start on bootstrapping a typescript project um uh but I think more interesting here is going to be this front end that I mentioned um so just to kind of scroll through the package Json real quick got s some basic uh V scripts uh or vit if you're an anglophone um and and uh we've got react query you know some uh those packages that I mentioned we'll look at those in a second uh rainbow kit uh if you've ever used scaffold eth a lot of this stack is going to be similar to that um and I would definitely suggest going to Austin Griffith's talk on scaffold eth um he's a he's a really great resource um Daisy UI is a component Library you're welcome to use whichever one you like but this one's nice and lightweight it's also written with Tailwind so if you're familiar with Tailwind uh as a component Library um it'll it'll speed you up uh and then since uh vit does not have it's unlike nextjs it doesn't have its own router we've gone ahead and included a tan stacked router for you if you're building a a front end and you're going to have multiple Pages um and again the the docs for for all these libraries are extremely uh uh detailed um uh I think that's about it that's what I need to cover here as far as what you get out of the box um so I want to go ahead and just jump into the folder structure here um and so here in the source directory uh we've got our network uh just to start so we've already created the query client for you we've already created the wag me client for you um we are deployed on multiple chains so if you want to build on the ethereum main net pools uh that's what this one's going to come with out of the box uh if you do want to build on the nosis Chain pools or the Linea or the the base pools that we've got uh you'll just want to add your own transports and RPC URLs uh to this wagm config uh that might save you just a little bit of time um and then we do have a EnV here um with the mainnet RPC URL uh if you want to integrate wallet connect you'll need a project ID um and that's pretty much what you need to just get started um I've already gone ahead and done that before uh before we started so let's go ahead and just run this and then we'll break down the code a little bit um and uh and uh set you loose so um this is the example front end app I made it ugly so you can make it pretty um and right now we're reading uh some information from uh the contracts we're reading some of the information from that app config package that I mentioned um so right now there's 17 pools deployed across four chains and then uh the first pool in that list is that Ste pool that we sh that we just looked at um and we can see that in in real time we've got some data coming from the SDK uh around the tvl of this pool um so I want to just walk through real quickly uh we've got about one or two minutes left um here in the SDK folder uh we've gone ahead and uh added a get read hyperdrive and a get read WR hyperdrive you shouldn't need to edit these you can just just call them in your hooks um and then here in the UI directory uh we've got our main. TSX this will look very familiar for anyone who's uh done front end but right here that's where our code is going to live and the rest is just going to be package code um and so here in the home view uh this is what you just saw um not going to go through all this jsx but I do want to walk through some of these hooks just real quickly um all of this is documented so feel free to read uh read the comments here um but for that tvl number I got to do a speedrun here for this tvl number we have a used tvl hook and that's calling that get read hyperdrive and then from there you can call get present value um which is going to give you that total value uh uh number that we saw in the front end um so this read hyperdrive is worth exploring uh this is the entirety of the SDK um in a single class so if we were to look at all the other goodies that we can uh ask the smart contracts you can you can for example get fixed APR that might be a good one if you want to see what the the fixed rate is for the Longs uh you can make your own custom hook that calls get fixed APR um and uh bunch of other bunch of other goodies in here if you want to build a portfolio you can grab a user's positions um and uh you know build build that front end um so I think I got to call it here but uh again if you want to come by the booth we can chat about this nerd out about uh front-end development um would love to would love to talk to you so uh yeah thank you [Music]