Building Chain-Agnostic Dapps With the Okto SDK | Sparsh Agarwal - Okto

[Music] uh hello GM GM GM everyone welcome to the workshop uh this Workshop is all about building chain abstracted dabs using octo SDK so starting with the workshop a little bit about me my name is P I am from the engineering team at octo and I work in the SDK Dev team now what is octo SDK well I like to put it as a onstop and simple to use software kit which helps you build create tabs without even thinking about a lot of complex V three problems like you can also visualize it as a simple chain abstracted embedded wallet but before we start I have a question for you all like why would you use a chain abstracted embedded wallet in your project and I hope by the end of this presentation we all can answer this question together now let's move forward with all the problems so I have a list of a lot of problems that we as uh web 3D AG face regularly uh some of them uh well you might as a developer will also face like if your users go off app to sign transactions like they have to go between apps and wallets again and again to sign a transaction they have to sign multiple transactions uh for example a multichain swap users often want a risk-free embedded experiences across new daps user does not have enough Let's uh liquidity or gas on the desired chain like these all questions are uh things that you as a developer needs to figure out before you can build a app uh what the user goes offline during the interaction what if the users are fragmented across multiple ecosystems right uh you as a developer has to think about this and you also want to offer um uh single one click experiences so how do you do all of those and still uh keep on track right so uh okay so this meme often reminds me of all these problems in web 3 uh there's fire everywhere but we often say it's fine well it should not be uh yeah so how does Oto solve it uh at Oto we have uh infrastructure of DW's ul and dtn it's a general intent resolver so using DW we offer secure friendly and interoperable wallets along with session delegation UL helps us offer you gas abstraction and cross liquidity and dtn uh is a general intent resolver which uh helps you uh do General intents on chains protocols and multiple ecosystems at the same time now what is a dtn dtn or which is short for decentralized wallet network is a MPC cluster which is on abs and has a dollar based policy engine UL all or unified liquidity layer is a 7683 compatible solver Network and dtn decentralized transaction network is again a synchronous generaliz intense solver which can be extended using blocks which is one of its superpowers now uh let's go to the good part so uh we are all hackers here today trying to build something cool uh so what can you build on octos SDK right now so at the hackathon we are offering a lot of different features uh including but not limited to social login using interop embedded wallets session key delegation chain abstructure ecosystem such as evm hyper evm Aptos and Solana uh we do offer uh guest sponsorships uh generalized intent such as token transfer EnV transfer and raw transaction and uh most importantly we offer it in a very great uh developer experiences so we have multiple sdks across platforms we have developer dashboard and adapters for vagi and so I think that's all the slides have so maybe we can move on to the Hands-On session so uh let me just quickly set this up so yep here we go so uh how do you get started on October so uh there's two things you can do first let's go to the Octo dashboard so the dashboard is dashboard. oo. Tac you can just go there you can enter email ID I'm just going to quickly enter my email ID I'm going to log in and it's going to send you an OTP on your email so I'm just quickly going to put it in just a second so yeah I'm on the dashboard so I think I have already logged onto the dashboard but when when you'll come back you'll uh basically what you'll do is you'll go to the AP key section it'll generate uh API keys so here you see two different options one is the client SWA and the client private key the client SWA is your interpr uh um recognition for the chain that octo chain and client private key is how we uh help you access the Octo chain so I have these values already with me but you can just create a new one and you can save that with you now since octo is a multi-chain archit Ure you obviously need some chains right so let's go to the chains and token section and you can enable a lot of chains so right now I have polygon enabled but let's go enable a few more chains so let's say I enable base uh a few test Nets like base testnet and let's say I enable polygon testnet as well so I can go ahead enable those chains These Chains will be enabled and I can also enable some tokens so let's say I enable madic and usdc on polygon Amoy and on base I I go ahead and enable some usdc now uh we support nearly every token out there so if you don't see a custom token that you want to use in the dashboard you can just shoot up a uh quick DM on our Discord Channel or we have a booth right back so you can just come and we'll help you out oh by the way since uh octo this is an octo test net uh you might also need some faucet tokens so octo tokens help uh uh the Octo chain uh operate and help you uh the uh DH apps perform their interactions on the Chain so uh we have a quick to easy to use faucet right in the dashboard just come here click on request credits and the tokens will be deposited into your client so it's that simple I'll just going to cross it for now because I already have some tokens uh by the way we also have guest sponsorship so if your application requires you to sponsor your user transaction on some destination chain let's say polygon you can obviously come here and simply activate it uh it uses standard ERC 4337 sponsorship okay let's go ahead so now we have the API keys and all set up but we still need a project right so uh let's go to the docs so uh the docs is on our website docs. oo. Tech so I'll go there for the purposes of this uh demonstration I'm going to be relying on react but you are free to choose from next year typescript react native and a lot of them so let's choose react quick start if you already have a uh react application setup you can follow our steps to implement octo in it but since I do not I'll just use the uh quick start template so you can click on run template and it will give you a couple of steps using which you can clone a template repository you can install the packages and copy the environment files right so now that all that's done uh let me just quickly copy this I can let's say open my terminal and I can clone it remind me later okay where is my terminal here it is so I can clone it and I can install it but for for the sake of time I have already done that in the behind the scenes so here you go so this is the repository uh don't focus on the red colors we are quickly going to make make them go away so it's the same repository that be clone the only thing that I did is I came to the enem file and I pasted all the values right so what are these values so there are a couple of them uh so the first one is the environment variable which will be sandbox then the next two are the Octo C which we just got from the dashboard and the other next two are for the Google oo so uh uh octo offers you something called the social login so you can offer login via Google to your applications now to uh achieve that uh uh you have to use Google login and Google client uh secret is a simple client key that you can get from GCB portal and it helps you get those tokens now let's move on to some code right so in your react application you must have a root file where you define provider strict mode browser outers everything so and in the same file you can Define octo provider as well so you can simply import the Octo Provider from the Octo SDK and it will ask you for a config the config is nothing but all these three values that we just saw and at the same time you can also give it a Google o Provider from uh SDK as well so by doing that your whole application will have access to all the uh n CDs that we have to offer in Oto uh so that's great now let see how your uh user can actually log in right uh like user needs to login otherwise how he's going to use the app so let's go and see uh the login page now in the login page uh I have some code written here already but we will mainly focus on the Google login part now how to do Google login well it's not that complicated uh uh the Google SDK provides you a single to use uh react component uh you just import it using the from the SDK and you just add it to your uh HTML right just like this it offers it gives you a call back function uh which I have defined right here now we'll come to this call function later but uh how to use octo here so first of all what you're going to do is you're going to uh import the Octo client using the Octo hook since we have already uh used the provider earlier it's as simple as writing use octo and it will give you the Octo client right and let's uh while we are at it let's create a handle authenticate function which takes an ID token now what is an ID token we'll get it to uh little bit later but for now what you can do is simply call octo client use login using oo and provide that ID token and you are good to go the ID token well as we were just discussing comes from the handle Google login function as you can see it will return you something called a credential which is also another name for an ID token just pass it to Oto and the user will be logged in that's good to go now let's see it in action so I'm just going to run a quick command called npm run and we'll just see this so it's going to run on locost 5173 I have that just right here let me just close this right so here's the login screen now as you can see we already have a login using Google Google button if I just click on it boom I get a Google login popup I select the email ID that I want to use and I am logged in now looks like the Wi-Fi is a little slow but that's okay we can get with it so uh this is a uh sample screen that we have created to show you all the capabilities of ooto so here you can see all the Explorer functions such at user accounts user portfolio the chains that the user can interact on on your appap uh for example right now since we enable a lot of chains if I click on it again the Wi-Fi seems to be a little slow yeah here we go so we have the base chain base test net polygon and everything but the the cool thing about octo SDK is while all these features are available to you your user doesn't necessarily need to know this it's all abstracted for me only thing the user needs to know is the user SWA which is right here right so that's all about the Explorer functions but what about actions actions are something that we call as intents in ooto SDK so intents are the actions that your user wants to do so for example if your user wants to do a token transfer an NF transfer or something custom so we offer an intent for each of them now uh instead of showing you it through UI why don't we walk through the code so I'm just going to go back now I have created uh another page called de demo token transfer and I have written uh the some skeleton UI code here but we'll go through the logic uh as we are here right the first task is we need to import the Octo client so as we just saw earlier you just write const okay I'm not sure if I'll be able to do it like this uh const octo client and use okay use ooto and the Octo client will be imported so the Octo client is there now you want to make a transaction how do you do that you come now I have a function which handles the transaction which you can call so I'll just create token transfer function so I'll just import token transfer I'll pass the Octo client that I just imported and I'll pass some parameters now what are these parameters these are some basic intent uh specifi that you have to give so for examp uh sorry so for example it is asking you the token that you want to give so for now I'm going to leave this as empty I'll explain what that means uh and the next one is the uh recipient address now for the demo I already have another wallet that I have created I created earlier so I'm just going to not note down the uh user s SW of that wallet and I'm going to paste it in right uh then what simp we need amount as well so I'm just going to put some arbitrary big number let's say um this um maybe at one more zero I'm not sure what that number means uh like how much that is but we'll see now again uh we also need something called a cip2 ID now this might be a term that not a lot of you might be familiar with so what cip2 id is it's a chain agnostic uh blockchain identifier so instead of calling it polygon or something we have a construct to Define them now you can learn more about them on the docs but for now I'm just going to put in the chain ID of polygon so it's going to be EIP fun 55 colon 137 and by the way you can also see them all here in the UI as well so this is all done and uh for the token that we left out empty right uh so here what you can do is you can actually put the address of the token contract and it will automatically recognize it but since native tokens don't have addresses I left it at empty that means it's a native token now the token transfer intents is created and once it's executed it will return us the intent id so I'll click catch that intent id and uh we can also check this status so let's uh let me do that real quick now I have an intent id that uh the transaction is successful but how do I know that I also need to check the status of it so what we can do is I can create another function which will give me the status of it it's called get order details so again similarly we'll just import that function and pass the ID now what I did here is I got the order details and I set it in a used State hook so that I can use it later and by the way I also need to invoke this function right so I just going to invoke this just like this and the function is invoked and in the handle transfer function as soon as I click the button this should work right so let me just do do that real quick if I go back to the UI and I go to the custom route that just we defined uh demo token transfer as you can see we have the UI here now if I click on token transfer it will in the background create the transfer page load it will get it signed by the dwnn it will put it on chain and once that's done it will also fetch the status using the use status hook now uh we see the order status and we see that it's spending right now I guess uh I should fetch it again but the intent is there now if I want to check if the intent is successful obviously I can refetch the API but for the sake of this demo I'm just to copy this intent id I'm going to go back and in the get order history I can check that the intent should be success uccessful in a bit uh yeah it's still in progress let's give it a couple of seconds hopefully it be [Music] there it offens uh yeah so it's done see it's successful it's uh uh uh successful on the chain and you also get the transition hash of the downstream chain so if I copy it and go on polygon scan I can see that it's successful let me do that real quick polygon scan.

com I can just paste it here and okay I'm not sure what just happened but yeah if you see it a couple second later it might be there maybe the polygon Explorer is not working right oh yeah it's here so the transition is successful and you are good to go so that's uh all about octo SDK but what about uh all the developers who are already familiar with some of the other tools let's say you are a web3 developer who's familiar with vagmi you already lot wrote a lot of code using wagi but and want to offer social login to your users how do you do that so for that we have some we also have a w adapter that we have created so you can simply go to the npm uh sorry our documentation and you can go to uh let me just find it real quick in the react part integrating with wagi so it's a very easy to uh use setup you just install the wagi adapter in your existing code you write three lines which is basically a connector called octo you pass the same values that we passed earlier in our SDK and you're good to go uh as uh you'll get a new button uh new connector called ooto user can click on it they'll be able to do Google login and nothing else uh that's all so yeah that's uh all on the handson conic section uh I think we already covered the vagi adapter at the start of this uh uh session I asked you all a question like why wouldn't you use a chain apped embeded wallets I hope I was able to answer that and what I feel the answer is well why wouldn't you so that's all thank you everyone uh by the way uh our test net is already live and the main is going to be live in couple of months so if you have any questions feel free to drw by our booth and we'll be happy to answer happy building