Build Unchained Apps with Avail I Robin Roy

[Music] Hello everyone. Welcome to this uh workshop where I'll be going over you know basically about what you know we're expecting in this hackathon how to start get started building with the wheel uh at ETH online and uh also give you a quick rundown on you know what

uh

hello over yeah just just go ahead I just muted them.

Oh yeah, sorry. Okay, so yeah, I was just uh saying that you know in this workshop we'll just go over what a whale is um and then go over some of the feature sets that we kind of provide and how you can get started building with a whale. Right. So I'm Robin um I work as a developer relations at a whale. You can find me on Twitter over here at robin_rtx.

uh but essentially you know the main idea that we want to kind of uh talk about in this workshop and this hackathon the idea that we want to kind of uh you know bring awareness to is uh how can you build unchained apps right so what do I mean by unchained apps um I'll dive deep into it uh in a in a minute right so uh basically it means that I want you to build apps that you know you just deploy once and then you can scale your app everywhere Okay. Uh as an example, let's actually go through one of the things that I was doing last night, right? Like this was me last night just minding my own business, maybe preparing for this workshop. Um I was also maybe doing a couple of trades u on hyperlquid, right? Um so Hyperlquid great app, great perex.

Um they're a great chain, all of that uh amazing stuff, ecosystem community. But one of the uh you know limiting factors that they have on their main app that they have is that if you want to you know deposit more funds into arbit into hyperlquid you need to have uh you can't just simply do that you need to first have USDC and not only any USDC you need to have USDZ on arbitum right and uh last night I did not have any USD on arbitum and that means I could not deposit more liquidity into hyperlquid for me to use that platform. platform. So, this is my point of view. Uh, naturally, I'm frustrated because now I have to figure out where I've got my USDC on.

Like, I have USDZ. I know I have USDC, but I need to figure out on what chains I have USDC on. And then I have to figure out how to bridge it to arbitrum and then again uh initiate a bridging process to hyperlink. Again, that's like two, three, maybe even more steps that I have to do in order to just be able to trade on a platform or on a chain, right? And that's not great UX.

But hey, wait, I have an idea. This is my shilling moment here. This is my shameless plug where I just say I just need a veil nexus. Um so essentially with a wheel nexus what you are able to do is you get to bypass this uh you know needing to have arbitum USDC. You just need to have USDC anywhere or everywhere.

Uh what Nexus does is it you know finds where you have liquidity. So in this case I've got like 10 USDC across multiple different chains and now I can you know use that on a hyper liquidity. I can deposit that into hyperlquid quite easily without having to do an extra bridging process on a third party platform. I can do it directly on the hyperlquid UI. So I you know put in my 10 USDC which I want.

Uh as you remember I had zero arbit but I had USDC on scroll base opet and so on. So what Nexus is doing here is it's collecting liquidity from multiple different chains where I have liquidity on and then it creates an intent which is then passed on to solvers and they'll provide you the liquidity and uh you know all of that good stuff that you probably already know about intent networks. But essentially the idea is this right? I don't have liquidity on a chain and I want to use an app. How do I do that?

Don't worry about what chain you're on. just use Nexus and Nexus takes care of bringing that bringing that liquidity to you, right? Um and you can obviously see where the sources are coming from, what the fees are, etc. But essentially the lesson is like don't be a noob, use a veil nexus. Um and that's like an experience I think most of us have had like having to bridge you know liquidity from different chains in order to try different apps.

Uh so one thing is clear right like every chain and every app wants liquidity and um how does one usually gain access to it. So as a developer as you a developer how do you actually gain access to liquidity right so the first step is usually um you go to the chain's native bridge so every chain usually like mostly every chain has like a state verified lock and mint bridge uh let's take for example optimism uh auto optimism has its own uh you know native bridge to ethereum uh where you can lock your funds and then it'll mint tokens on the other side again now The problem here is as a developer and as a user is that if your user wants to you know get out of optimism it has a 7-day withdrawal period and that's not ideal. So I mean state five lock and mint bridges are the most secure versions but the UX is very terrible there. You know if you're doing it on Ethereum you have to wait for like around 15 minutes or for the Ethereum transactions to kind of be completely finalized and then wait for the minting process to happen. optimism or any other chain that you're minging on.

Again, not great. It's more it's very secure, but the UX is not great. All right. So then people decide, okay, let's uh you know uh have these liquidity bridges. Let's have people who let's have liquidity on both sides and then you know give it to users as and when they bridge.

Let's have liquidity bridges for user on boarding. And now we have a bunch of those, right? And that's great. Uh and this is a good enough uh solution because now you have uh you know all of these bridging platforms that kind of help you with instant or quick um bridging with the risk being taken up by the liquidity providers on the other side which is also fine but let's take it one step further right like we have intense systems we have solver systems like why not abstract all these chain related complexities uh and just have users, you know, use the app like not care about, you know, the liquidity or like having to bridge uh liquidity, etc. And you can solve all of that, right?

Uh and that's great. And don't get me wrong, like we have solutions for all these different steps. Uh we've got across particle network, wormhole, layer zero, all of these different bridging solutions and they're solving different problems in different implementations, right? But introducing away Nexus right like what is it that we are solving in this was ecosystem of interrop basically you have all these steps and what Nexus kind of allows you to do is kind of bypass all of that right like don't care about any of this stuff as a developer I can just integrate an SDK and it use intents and solvers and all of that again I don't have to know about what what's happening behind the scenes I can just add this SDK onto the front end of my application and instantly I get access to crosschain liquidity for the user it's like onestep transactions and for the developer it is you know build one scale everywhere right so as you can see here we basically connect liquidity from multiple different chains I think we support around 12 chains at this at the moment on mainet itself and basically this is your app which gets liquidity from all of these chains through nexus so again now the question comes like is Nexus just a bridge like are you guys just another bridging solution? Well, no.

Uh I don't want to say it but like traditional bridges like I mentioned already suck. Uh and one of the reasons they also suck is because you have to usually go to a third party platform and you are as a developer you already know this that you lose retention of users when you get them when you force them to go out of platform to do something and that is a big friction point in web two in web two and web 3 which we need to solve right. So when it comes to bridges right the the thing here is in you in most traditional bridges that we have out there today they enable one is to1 actions that is I can choose a source chain I can choose a destination chain and I bridge a one is to1 uh transaction so it's like from chain A to chain B I can send funds which is great um and I don't know what happened there. Okay. So yeah.

So what I mean by this is that now the problem is that if I want to do n like multiple bridging transactions this is n into one is to1 actions that I need to be doing and that is also not ideal. Um so again that means if I have liquidity on like optimism, arbitum and base right and I want to and I want to you know have some funds on polygon for example. Now if I need to do this I need to do three different bridging transactions and that is n into one is to actions which I mean here. So avail is not just a bridge right it is an interoperability toolkit I like to call it where you can build anywhere get and get liquidity from everywhere build your app on whatever chain you like to build it on and get liquidity from everywhere wherever users have liquidity on you don't have to worry about if a user you know if there is liquidity on that particular chain right and uh basically what we kind of enable now is like instead of n times 1 is to1 actions we enable N is to1 actions. So if a user wants uh to get liquidity on a chain B for example and they've got but they don't have enough liquidity they need to bridge it from like ABC then Nexus basically bridges that liquidity instantly like uh using intense and solver systems and you can basically get liquidity from end different chains onto your destination chain and also on top of that you can execute any particular smart contract function on that chain.

So this means like if I want to bridge and supply liquidity on you know put some liquidity into a for example for to earn some APR on top of on top of my USDC I can do that like if a user does not have for example enough liquidity on a chain like Avalanche for example uh but Avalanche USDC has a very high APR which I want to get into and but all of my liquidity is on like different L2s I can use Nexus if a was integrated With Nexus, I could use Nexus to bridge and execute that RV function and it's like a one-click uh almost there there are a couple of clicks involved in allowances and stuff like that but essentially the experience is still 10 times if not 100 times better than what you would do today right so let's take an example of avalanche itself right like Avalanche is an L1 like if it's an L1 I'm not even talking about L2s here right L2s have a lot of liquidity But if you are probably on Avalanche also they have great liquidity as of last I checked they have 2.2 billion uh you know total value locked or you know basically bridge liquidity on avalanche right now and that is a total addressable market for your app. So if you're building an app on a Avalanche your total addressable market at that point is or the liquidity you can get access to is 2.2 billion liquidity uh dollars of liquidity. But the rest of web 3 has around six3 billion dollars worth of liquidity just lying around there which you don't have access to.

But with Nexus you basically cover the entire web 3 liquidity right like I I I hope I kind of explain like you I hope you get the picture of what I'm trying to say right if you're building an app launch for example your total addressable market is just 2.2 2 billion but if you build with Nexus it does not matter you still get access to the uh to the rest of web 3 liquidity that's the power of Nexus that we kind of do and this kind of enables for app developers to now not have multi-chain deployments or and monitoring and all of that you can have you know seamless UI experiences and abstract away the concept of chain uh chainsome users uh now as a developer I know you guys are more interested will be more interested in like you know how can I kind uses and I'll just go over some of the functions that we have uh the methods that we have with the Nexus SDK. Um and this is what right now what I'm showing you on screen is the headless or the core SDK. So we've got a bridge function where you can just define uh so once you've got once you initialize the SDK you can just call SDK.bridge bridge I just put in the parameters of like token the amount and the destination chain ID or basically the destination chain and you can also simulate it first.

So if you want to see the intent beforehand and if you want to maybe do some UI magic to like show what the sources are, what the fees are going to look like and all of that, you can first simulate the action and then once you are satisfied with the result, you can uh you know do the actual transaction. Right? when you simulate if there's an error with something that you've done like how you've built the uh transaction here or if there is like not enough allowances or not enough uh you know liquidity or insufficient balances the simulation would kind of uh you know tell that to you like it will highlight it to you and you'll get to know that beforehand and so you can kind of warn the user on the UI right so bridging very simple you move liquidity from any number of chains to a destination chain onto your own wallet. Transfer is similar concept. You move the query from n number of chains to a destination chain.

But the only difference here is now you can specify a recipient. So like now you can now the amount that is being transferred will be transferred to an external wallet which you define in your function here. Again you can simulate it uh beforehand and then executed. when it comes to bridge and execute uh what I mean so like I said before right you can bridge liquidity from any number of chains to the destination chain and then execute a smart contract function. So I as you can see here I have a bridge function here and then I also have an execute uh you know object here.

So for bridging I want to bridge you know USDC the amount is like thousand uh to a chain ID in this case is one that is ethereum. Um and then I want to also define what I want to execute here, right? Like execute uh SDK.benexecute. So I define what the contract address is.

So I can so I might have deployed a contract for my application. I need to define what the contract API uh is. I can call now I can just give what the function name is going to be and then put in the function parameters that is required to call the function. And boom. Now I can basically call smart contracts from the chain that I've deployed on but still bridge in liquidity from anywhere.

And that is kind of the power that Nexus kind of provides you. Uh again you can again also simulate all of this the bridge there's a bridge simulation to check if the bridging will work. There's an execute simulation that kind of shows if the execution that means if the execution uh works as intended. So if there is something wrong with your contract uh address or like maybe the function of if it's if it's reverting the simulation will let you know and that is also a powerful thing that you can use beforehand right and then finally we've got something called a swaps. So if you again this is uh only on mainet and uh not particularly in scope for the hackathon itself but if you would like to use it uh you know we're happy to see you use it.

Basically these are crosschain swaps that you can use. Uh there are two ways to use it. One is an exact in exact out uh swap that is basically uh exact in swap. You specify exactly what the input amount is. So if I want to have if I want to exactly input like 100 USDC and I want to get out maybe uh you know wrapped ETH on the other side um then uh like whatever input I put based on that only the output is going to be given to me uh and like the the fees are basically deducted from that uh output value.

Whereas when it comes to like an exact out swap, you specify the exact output amount that you want and then the input will be a variable input that is then uh you know calculated based on the output exact output that you want. Uh and this is a pretty chill concept as this is a very cool concept to do crosschain swaps. You can get you can swap tokens from any chain to any other chain and get any other token at the end of it. So this is also something pretty cool. Um I'll again go through the docs and stuff like that as well uh pretty soon here.

Um but again if you are like the these are all from the like core headless SDK which which means you'll have to write your own UI components to kind of work with it. But as a hackathon and as a developer who probably do not want to you know waste their time on writing out UI complex complex UI uh and like write everything from scratch. We have ready to use React widgets. So if you're using like a React or NextJS app or whatever it is, you can drop in a React React widgets which basically are these readyto use uh UI components that you can kind of uh use for all of the different functions. So you can do the transfer, do the bridge, do the bridge and execute all of that is available uh for you in the using Nexus widgets.

And again, but the problem with these uh so these are not customizable. These are like as is. If you want to have customizable UI, if you're using shad CN, we've got shad CN elements as well. So uh you can go to elements.n nexus.

pro.org. I'll show you a demo real soon. But essentially uh if you're using shad if you want to use shad scene components uh you you know we have all of those elements also ready for you and these are customizable so you can add your own branding and colors and all of that which is also really cool. Um in terms of prizes that we are offering at ETH online uh we've got three bounties.

The first is a general track where we want you to use you know a way access dk to build any any kind of unch unchained apps. The second track is more in line with defy or payments related um uh applications. So if you're building any defy or payments related apps uh with the way nexs you'll be eligible to win these uh when it comes to and then the final one is developer feedback. So as you're building this out, you will you might have come across some problems or you might not have you might have liked some things, you might have not liked some things. Uh you might have looked at our docs, you might think that some things are missing here, some things are not.

And if you have any feedback that you would like to give us, you know, this is the bounty. This is a very easy bounty for you to probably score some prizes. Uh score some prize. uh you basically have to create like a feedback.mmd file uh in your repository when you submit and uh you can just give us some feedback and if we think it is very substantial or good enough feedback you'll be eligible to win uh this uh track and again we've got all of these resources the talks there are starter templates for nextjs and v uh for white uh we've got the l links to shad scene and UI elements the nexus score and UI widget references there's a cheat sheet that we provided and also project ideas if you're interested in that.

So all of that is available in the ETH global prizes page itself. So check that out. And then on top of that uh we also do our uh you know for this hackathon for Ethon line we are doing weekly hacker offer hacker office hours on the avail discord. So if you want to join in uh you know share your ideas, brainstorm a bit, maybe validate your ideas or like if you're coming across any bugs and you want to you know you want to get some direct help and want to fix it uh you can join our weekly office hours. Um and also there's a cool thing we also provide po apps.

Uh so as you join so like we hosted one last Saturday we'll be hosting one this Saturday. The more sessions you join you collect more po apps and uh we'll at the end of it all like at the end of the hackdong we'll do a raffle and the more po apps you have the higher chances you have to win an exclusive merch box uh which will ship directly to your doorstep. Um so all of that all of the information I'll put it in this uh in the ETH global discord as well so that you can register online. Um I think I can share a link also. Uh but I'll share it in the chat as well.

Um because last time it was pretty cool. We had like a bunch of people joining and minted this po app as well. Um so what can I build? I can build anything related to Dexes, crosschain swaps, uh you know, yield aggregators, universal deposits for your apps, tipping clients, if you're building a social media related use case, um you know, games where you know liquidity is needed, payment solutions, stable coin solutions, uh liquidity consolidators for OTC desks, etc. There's like it's limitless on what you can build.

It's just how creative you can get. Whatever that, you know, needs liquidity can be used to uh to be built on uh Nexus. Um also, so yeah, I mean I'll just also go through the docs. Uh meanwhile, if you have any questions, please do put it in the chat and I will uh go over it. Let me also drop in the uh yeah, let me drop in the link to the office hours that I was mentioning.

Uh if you want to register for that, I've put it in the chat. Um but regardless, I mean just to give you an overview from the docs as well, right? Like if where when you first go to docs.avail product.org, you will be met with a page like this.

the the page the the the the part that will be most interesting for you would be on this side of the page aail nexus or you can go to the top here called Nexus uh you can read more about exactly what we're doing and like all of the conceptual stuff here uh but as a developer this is how you can get started right so like if you want to use the headless SDK you can install it like this and if you want to use the Nexus widgets you can install it like is um for quick start um we have given you different ways if you're using the core version this is how you initialize the SDK if you're using the widgets this is how you would initialize the SDK uh there is two ways if you want to manual initialization this is when like for example if you're using the widgets and you want to get unified balances before uh even initializing the widgets itself you can do a manual initialization that means uh you would call use nexus from Nexus widgets and then uh using that you would initialize uh the SDK as here uh one caveat we have with the SDK is that you would need a web3 provider or like an EIP193 provider to initialize the SDK. So that's what you can see here. So in order to initialize the SDK you need to put in a you you need to pass in a provider uh that is your wallet provider. Um so how you would do that I've got an example right here. So again again in the docs itself more examples with nexus SDK we have a barebones initialization tutorial which you can follow directly end to end if you want to set up a basic NexJS project with uh you know basic wallet provider.

So this is how you would initialize uh yes. So when I want to connect my wallet, I need a EIP1193 compatible wallet. Um in this case, if I want to just use the injected provider, usually Metam Mask in this case, uh you can just call window. Ethereum and then um uh basically kind of uh initialize the SDK. Um and if not uh yeah okay yeah so here it is.

Yeah. So with windowethereum uh you would uh get the injected provider and then you would pass that on to initialize uh the provider over here we're using helper function. Initialize the provider is actually being called here where you would call SDK.initialize. So this is the actual SDK function.

This tutorial uses some helper functions as well. Um, but yeah, I mean you can kind of do that. But if you're using something like Rainbow Kit or Prevy or anything else, uh basically you know Wagme related uh wallets um you can you know once you set up your wallet and all of that good stuff um you can just uh basically if it's a Bogme powered wallet uh which Rainbow Kit is for example uh you know you can just call the use account you can get the connector and once you get the connector you can uh call the get provider method. method here which will give you the provider and using the provider you can initialize the Nex SDK right and once that is done it is you know pretty much easy after that you are able to access all of the Nexus functionalities including the get unified balance so the get unified balance is uh basically a function that kind of gives uh you returns you all of the user assets across all of the different chains I'll show you how that looks like in a second But essentially this is how you know what you would get returned. Uh and again all of the transfer bridge bridge execute everything is there already in the docs here even for the nexus widgets.

So I'm not going to go deep into all of that right now. Um what I would probably go here is let me actually uh actually show you a quick demo on on how all of this would look like in a in a demo app. Right? So let me just disconnect my wallet here. So I have a demo app built out already here.

Um so again if you want this uh demo app for any reason I can share it with you as well uh the in the in the ETH global discord later on. Uh but essentially over here what I'm doing is I have the option to go between mainet and test net. I'm going to pick mainet for now. I'm going to connect my wallet and I'm going to connect it and uh so as you can see here the experience is I'm going to connect my wallet and onload right now on uh as soon as the wallet is connected and on load it asks me to initialize the SDK and this is why we need the provider so I'm going to sign in to confirm. Hi, sorry to jump in while we're waiting for this one.

I'm just want to keep you reminded of the time. Uh we're going a little bit over which is okay. There's some questions in the chat as well. So we could like wrap this up in the next two three minutes. That would be ideal.

Thank you.

Yep. Yep. Yep. I'll just do it really quickly then.

Cool. Uh so I mean yeah so in the demo you can see here basically what's happening is I'm calling the unified balances. Um so there's two ways you can think of it. There's a get unified balances for all tokens which will give me you know all of the tokens and all of the networks I have my balances on in this case a USDC on these networks ETH on these if I want to just get for a single token I can do I can do a call for that as well that means I'll filter it for just a single token I can then use the Nexus widgets to kind of you know bridge or transfer USDC anywhere to anywhere uh and the cool feature here is I can also So supply USDC from anywhere to a. So I'll just do a quick demo on that.

Right now I have like one USDC on base market uh you know supplied but I have only two USDC on base left. Um what I can do here is let me just actually go ahead and uh check here in the bridge and execute button. Uh I don't know if you can see my screen here. Let me just really quickly share my screen again. Can you see my screen?

Yeah.

Yep.

Okay. Yeah. So I would move this up. Yeah. Okay.

So uh on my IDE you can see that uh basically this is the bridge and execute function. It is calling contract address which is the uh supply. This is the contract address of the base market. Um and what I would be doing here is essentially let me actually go and check if this is the correct one. Yes, a 3 base.

Yeah. Okay. It is the correct address. So I've already configured it to use uh a base market. As you can remember I have only like two USDC on base but I've got like four on open m and arbitrum each.

So what if I say that I want to do like a USDC it will what's happening right now is it is simulating the bridge and execute function for me maybe if I inspect element I can show you the all right apparently it's not logging it but okay that's fine. Uh, all right. So, as you can see here, basically it's simulating the action here. Uh, it shows me where I'm going to get the sources and all of that. Um, and I can just start the transaction.

Right now, it is only bridging six USDC uh to base because I have two USDC on base already. So, I input an amount of eight. So, it is basically calculating how much I need to bridge. And it should Oh, okay. Something happened there.

Let me try that again. Meanwhile, I will take some questions or that people have asked.

Uh what is the question that we have? Could someone read it out for me if possible?

Uh sure. Um like first question was you're doing N to one actions which was answered. Yes, you do. Um, is the liquidity for swaps provided by availus their users or where does liquidity come from from Kevin L?

We're working we're working with some DEX aggregators for that. So uh that's where the liquidity is coming from essentially.

Okay, perfect. Another one uh how efficient is Nexus in terms of gas time and security? uh gas it is gasless. Uh time it depends on the solvers actually like uh if you've got enough uh you know liquidity on the solver side it should be really quick. Um so it depends on that there's some issue I guess it is because of some gas issues that I'm facing here probably because of network connectivity that I'm having but that's fine.

Um we will move on from that. Um but essentially yeah I mean the gas gas uh the gas itself it's gasless. Um and in terms of speed it depends on the solvers itself. So uh yeah.

Okay.

But usually takes around like 10 to 15 seconds maybe uh maybe even lesser. [Music]