Biconomy 🛠 Building dApps that even grandmas can use - Chirag Titiya

I'm a blockchain engineer at Biconomy and you know, we work on the uh usability side of blockchain applications. Uh And I'm going to you know, talk about like how you can build you know, very simplified apps and uh that improves the uh you know, user experience for your end users uh through you know, different uh products or we'll get into it like the fee abstraction mechanisms or it can be like easy onboarding and you know, even on the security side of things. Uh So, for that we have a ultimate toolkit called Biconomy SDK. So, I'll talk a bit about it in the beginning. And then what I'm going to do is I'll be doing a workshop uh which is you know, like uh from going from a regular dapp to uh you know, a dapp that is using Biconomy SDK.

Uh using like you know, some of the features like uh uh gasless or forward. So, uh we have been into the space for like 3 years and we initially started with uh you know, realizing the usability problems in the space. Uh so, for example, uh first thing was like gasless transactions. So, that was the first product. And we have been you know, uh continuously building for builders so that you can build like better applications or your users can have you know, better experiences when they come to your platform.

And uh you know, there are like lot of uh dapps and they have like you know, come to us and uh told us that they uh you know, it improved like X amount of uh you know, interaction or in terms of user onboarding when they integrate the solutions of Biconomy. So, uh I'll get into the products or even like maybe we can chat later. Uh so, uh so, in in blockchain uh you know, if it has to go on like next rapid growth cycle, uh there there are three things, right? Like one is scalability, one is usability, and another is interoperability. Uh in terms of scalability, we have made a very good progress.

Uh but there are not many dapps which are, you know, like actually usable. So, there is still a lot of friction in terms of uh number of uh user interactions, right? And uh on the interoperability side as well, uh you know, there are like uh multiple chains which are siloed and then you need to like uh bridge your uh funds from one chain to another to do something on another chain. So, uh this is a typical use case where, you know, user wants to like uh for example, I have some funds or some shitcoin on uh let's say uh Avalanche and I want to go and buy an NFT on Polygon. So, I need to go through this entire process like like uh connecting the wallet and changing the RPC.

I need to if it's like completely new chain to my MetaMask or whichever wallet, then I need to like find out the details. And uh first transaction I'm going to do is to get some native tokens because every interaction is like this, you know, checkpoint or where uh you're basically like it's a highway and you're paying taxes, right? Like when we talk about gas. And uh you need to manage uh you know, the lot of other complexities as well in terms of uh you know, failing transactions or bumping up the gas price uh whichever wallet you are on. And that's just your one of the actions which uh could be like, you know, 10 action uh thing, right?

Like that you want to do as a user. So, you go and sign up with a transaction and then uh once you have the token that you want, uh but that's still on like uh the chain uh which is let's say we started with Avalanche or Polygon. And then you need to bridge it to BNB and then, you know, change the RPC again. Then you need to have the native token for that chain. And uh then let's say you're buying an NFT.

Uh so, you do that transaction and then you stake it uh to get some position. So, it's a very, you know, messed up UI and it takes like about 10 to 15 minutes. With Biconomy SDK, you can build like one-click experiences that is cross-chain and even on a particular chain uh within like seconds. So, uh I just want to play a video, I think that speaks better. Uh, let me know if you guys can hear the sound.

All right, thanks. All right. So, so far we have gotten into why of it, right? Uh, one second. All right.

Uh, so now I'll come to, you know, what is uh, Biconomy SDK. So, it's basically, you know, smart contract wallets plus the infrastructure to you know, enable all of these one-click experiences which I just talked about. And uh, it, you know, heavily like uh, utilizes account abstraction that is uh, EIP 4337. And then there are like other mechanisms because it's a smart contract wallet, right? So, you can go wild with it like with signature verifications, uh, different kinds of like fee abstraction.

So, that is the idea like uh, so first of all, account abstraction means that, you know, your account and signer is different. So, you park your assets somewhere else and in order to like initiate transactions, uh, there is a key signing key which you can rotate and you can have like multiple uh, party computation, a lot of things. And uh, what I mean by gas abstraction is that, you know, just the thing which I talked about like you need you do not need to hold native assets. Someone can sponsor gas fees on behalf of you, right? Like in native tokens or even in like ERC-20 tokens.

Or if a dApp does not wish to sponsor, then they can make the user pay within using the assets that they are holding in the smart account. And in terms of chain abstraction, like once you integrate as a dApp, let's say I'm on five different chains. You do not need to you know make users change RPC and everything. So that's the idea and I'll get you know more into more details like you know in terms of architecture. So it's basically like I said there is a relayer, there's a bundler service for account abstraction, there is indexer service, there is a backend node and you know there are several packages within the SDK so you can use all of them at once you know some just some of them.

And uh some of the features that you know are exported out is one of that is social login so you can have like MPC support and social logins for you know completely new or not crypto savvy users and just you know give them the EOA address or a signer. Because basically smart contract wallet or this you know whole layer zero which we have built on, it just needs a signer, right? So as long as you have a signer, on top of that there is a smart contract wallet which gets pinned up and this signer will be the controller of the smart account or smart contract wallet. And whenever you want to initiate the transaction, it's always just a signature verification so your end user just signs the message but the fee abstraction happens like within the smart contract wallet. And then there is a relayer or a bundler to poke your wallet because you know contract accounts cannot like initiate transaction on themselves.

So multiple things like you it's you may be already you know aware about like custom signatures schemes and there is also something called concept of modules where basically you can you know, enable a certain module in your smart contract wallet and say that, you know, for example, in no safe. So, the idea comes from safe itself where you can have like daily spend limit module or you can have social recovery module, session keys, etc. So, using this the transaction can go through you know, certain level of different access control and that skips your original signers. So, that's the idea. I'll just quickly skip through it because I want to get into the workshop mainly.

So, this is this is talks about like fee abstraction like gas transactions and the you know, amount of fees that you are going to pay by estimating yourself on like, you know, metamask and then bumping up going through the whole process. The relay is to this job like bumping up and choosing the optimum gas price even in case of like gasless or any other case as well where user is paying. So, let's get into the workshop. So, what I've basically done is uh Let me just open this app. And uh So, there is a version which is you know, very simple boilerplate.

There are other demos which I'll link in in the references at the end of the session. But, basically what this does is 1 second. Yeah. So, I have uh So, here it's first demonstrating the connection from externally owned account. It could be like metamask or any other wallet and there is a smart contract which basically you know, uh So, let's you allow let's you like set a purpose.

So, it's just a string which you set like can be like, you know, capture the flag kind of a thing. But, in order to do that because I wanted to showcase some batching actions as well because there are like multiple clicks, right? Uh So, in the you know, current world So, there is like you know, I deployed a test token as well. So, we are going to be playing with these two contracts. So, this basically when you want to like set a purpose or this string on a state of the contract, you need to pay at least like one token or you can pay more as well.

So, that's the idea but because you are paying this, it's just a polling mechanism, right? Like So, contract will pull so you need to give approval first and then this code is set. So, I'll open the app. Here, I'm logging in with my MetaMask. So, this is the address.

I have some matic and I have some test tokens as well. So, first I'll approve the tokens. So, this is just this is my first transaction. You'll set the gas price then you will wait for it to get confirmed. Yep.

So, once this is done, let's say So, one purpose is like checking out the documentation. So, this is just pretty basic stuff, right? Like so, I did two transactions. I I needed to have like native tokens in matic. So, I'm doing everything on Mumbai right now.

Now, we will start you know, modifying this app by going through by economy documentation. So, let me get into it. All right, two of the transactions got confirmed so we can check like a different code. Okay, this one is failed. Uh so, this is the you know, uh like main entry for the dApps.

And uh where what I'm going to use is there is there are like several packages. I'm going to use social login and uh also showcase like some sort of fee abstraction where we'll be using the gasless flow by account abstraction paymaster. So, you can uh the paymaster I'm I'm going to be using is a verifying paymaster. So, basically as a dApp, you uh you know, register on a dashboard called paymaster as a service where uh you basically uh can whitelist your contracts that, "Okay, these are the methods uh which, you know, I want to sponsor or uh these contracts, right?" And then there can be like other levels of uh checks as well as conditional gasless.

So, as a dApp, you'll need API key. So, we'll get into that. Uh first I'll like, you know, just start and uh start doing the changes here. Uh I have already added some states. Oops.

Uh so, here there is you know, login section which I have left out. And there is an initialized wallet. So, currently I'm initializing or in the uh you know, the demo before that I just initialized with my EOA account. And we'll be making changes here. Uh so, instead of this, we'll be using like a smart contract wallet Uh uh uh and have that context in our application to you know, keep using smart contract wallet for the transactions.

And to give you the overview of this, so basically I had like these two methods, right? Which we just invoked. One is approve and one is like submit this purpose. But we'll be like batching it into just one transaction and instead of paying for gas fee, someone else will sponsor it. And there can be like other ways as well where you can get a fee card from the relayer which is plugged in with the SDK, right?

So, in that case user pays. You can also show in the UI that okay, these are the options like X amount of USDC, Y amount of USDT, whichever tokens relayer supports. So, that is part of like other demos as well. So, I'll shortly link the video over there. So, coming back here, basically we'll be like changing the you know, way login happens.

So, I'm going to start with the social login package from the SDK. Let me just comment out a few more things. All right. So, yeah. First we need to import you know, some up packages from Biconomy SDK.

But first I'll start with social login. So, for that you import web3auth. So, I'll just do yarn at And for like rest of the things, I'm just going to keep following the documentation, so you get an idea like which thing goes where. So, we'll write this here. So, this package gives you like all the types used within the SDK.

So. And the main entry point of the package, which is going to be used mostly, is the smart account. So, uh we'll go with the social login. By the time, I'll also install other things. Okay.

So, it says that you need to initialize the wallet. So, I'll come here. I'll remove this stuff. Not getting the UI provider. And uh since we are on Mumbai, I'll just change the chain ID.

So, after this, we'll set the context. All right. And here and log in. We need to show wallet. So, if there is no login context, then uh if there is no provider, then basically I want to uh you know, pop up the uh model for showing the wallet.

So, this is basically tells you that, you know, what is the EOA that you want to select, whether it is going to be like social login or is it going to be MetaMask also because you can uh set up on top of MetaMask as well. So, this is my login context .showWallet. So, I've done this part. Now, the next thing is uh let me make sure I installed all the packages.

Should be in my node modules already. Yeah. So, now uh I'll go to this references section and we will, you know, install uh smart account package and then uh you know, write the uh wallet connection. So, coming back here, uh after uh you know, here we can like, you know, log the EOA address, like what is it is going to be generated using like social login or it can be like your EOA address as well. Uh now, I will just, you know, like set the So, we'll follow this connect wallet for uh you know, uh get like creating an instance of a smart account and then initializing it.

And if you notice, this wallet provider now becomes the uh provider which is coming from Web3Auth. So, for the options, I think it's easier to copy from here. So what we're doing here is we're creating an instance of a smart account and I'm passing the wallet provider which we got from of you know our current login context and then these are the options like by default you know SDK backend node will use the default values like in terms of supported network IDs but you can change these values and for the network config if you want to use gasless transaction through the paymaster dashboard then you need to like provide a DApp API key. So the dashboard looks you know somewhat like this you go to a DApp and you copy the API key. Currently we're only supporting testnet for gasless transactions and for when user you know pays any asset in the tokens you can also do one like multiple mainnets.

So now we have an instance of smart account and you know you can log the address of the smart contract wallet like going to be my address and let me just set it to something. All right so we have set wallet provider and smart account address. Now you can also go and uh you know since that is like if you want to also check like what are the transactions so far on the smart contract wallet or if you need to like you know get the balances you can use the balances endpoint which will you know fetch the balance from the SDK. So this gives you you can also get like USD value across all the supported chains which you have passed. Or you can also get like token amounts, right?

So, if you need to show to the user in some form of widget, right? Because once you go from like EOA to using a smart contract wallet, that becomes your primary identity, right? So, all the funds like you can query like which NFTs are there, which tokens are there. And uh once this is done uh so, we are ready to, you know, do the transactions basically. So, what I'm going to do here is let me comment out some stuff here as well.

So, I'll shortly get into the demo of you know, this working. And when you initialize smart account uh you know, if you're uh using like webpack greater than five, then you you know, might run into some issues. So, we have added you know, proper like documentation to like you know, make your way through it. So, I have done with the logout and uh So, yeah. Now, we are not going to need these things anymore.

So, I'll just start implementing in this uh here where we will do like, you know, batching of both of these transactions. So, let me copy what we are doing before for approve. And now, we don't need the EOA address anymore. And we'll create uh transaction array. So, basically we are following, you know, batching transaction docs from here.

I use the API key, which is like, you know, shared across the apps on testnet, but you can spin one using the dashboard backend, as well. And so, once I've done this, I also need to set up like some watchers. So, basically like once you get the transaction hash, you do not need to like go to any external service like blocknet to do, you know, see what happened with the transaction on my smart contract wallet. So, you will get the you know, all the you can attach the listener, basically, using the emitter, which is the smart account class itself in the SDK. So, that goes in the login section.

Once these stuff has been done, so you get the events like, you know, transaction hash has been generated, and you also get the event when it gets mined, or even when relay or resubmit the transaction, and, you know, the hash gets changed, right? So, you get all the updates, and then you can even get the receipt and show to the user directly what happened. So, and this has to be, you know, created before you send any transaction, so that it starts listening like what's happening on this. Now, coming back to my implementation, so I just want to create like an array. So, basically whatever you want to batch, you can just keep adding the transactions, right?

Like I'm just doing very simple stuff, but it could be like, let's say, you're doing a swap, and then for that swap you will require approval. Once you get the, you know, two tokens from the swap, then you want to, let's say, provide liquidity on some liquidity pool, and then you get an NFT, then you want to stake that NFT, you know, move that liquidity to some other chain. So, all of this can be like combined as a batch transaction. Now, I'll copy my second interaction, which is uh setting this purpose. So, I'll just take um to this point.

Let's push this. Okay, so now we are ready to dispatch this transaction through the relay. So let's say response and all of these APIs are available on smart account instance. So what I'm going to do is I want to send a batch of transaction and that has to be gasless. Like there are other methods.

So if you notice here and even if you you know go to the documentation you get let's say send transaction is there but you can like let's say prepare refund transaction batch which basically creates transaction payload in which the user itself will refund and no one is sponsoring for the gas fees. So for this we are going to go with this here and the array which I just created is going to be part of it. And let me comment out some other stuff which is just like my it will show my EOA account and my smart contract wallet account as well. Yeah. All right and let me just replace so that everything is consistent.

So now this demo gets updated and we can do several transactions maybe using social login or even like using my MetaMask. Cool. So here I'm getting two options. Let's choose social login. So I need to open my Gmail.

So, it is you know, constructing the private key using the web3 out network. And now this is my EOA address which has been you know, just spin up like it says a public private key pair which I'm going to use for signing. And this is my smart contract a wallet address which is you know, created by Biconomy ticker. And these wallets are you know, counterfactual wallet address so it does not need to be deployed. So, if you check on Mumbai explorer it says an account, right?

So, you can send funds to it. It's a contract for me because I already done some transactions, but if it's a new user it's just an account. You can send you know, assets if it was up it is supposed to pay like to the relay within the same transaction. Otherwise I it just create it just gets created as a first you know, section of the batch which will you know, go through. So, here you know, it's just one click so where basically this guy needs to have some tokens which we use for like you know, previous interaction.

And then you just do like one click. So, maybe I can do from other ways as well like you know, let me connect my MetaMask. So, here my EOA becomes this guy. It already has some tokens and my smart contract wallet address also changes which has been you know, spin up on top of this. You can do this and like you know, browser extensions as well you know, a lot of like tooling like MetaMask snaps provided so you can show in a widget kind of a view.

Now, let me check if or we can just send some tokens. Let me just check quickly. Cool. So, I already have some eaten tokens, and minimum amount is one. So, this is my fee token, and this is the contract we are going to interact with directly, right?

Now, let's come here, and maybe let's say something like start integration. So, in this case, this guy just needs to, you know, sign a message, and then the transaction will go through on this smart account. It will go through the account abstraction entry point, and it will utilize the paymaster, which is, you know, associated with this dab API key, which we just added in the smart account config. And, as you can see why I have wrote those listeners is that, you know, it is subscribing on the transaction ID we receive from the relayer, and you get all the updates. So, we get that, you know, this transaction hash got mined.

So, let's check this on Mumbai. Cool. So, I paid two Indian tokens. Before that, I did approval of two tokens, and I also managed to change the state on the contract. So, the set purpose is there, and now we go back to the contract.

The state changes, and everything is just one click, and someone has sponsored for your gas fees. So, you can do for your this for your end users, or they can also pay in ERC-20 tokens using the account abstraction flow as well, and using like, you know, there are some methods in the wallet itself, which allows you to do that. And, anyone can, if you go through the docs, you can also plug in like your custom paymaster in the gasless section. So, that's possible as well. If you guys are, you know, building these kind of like custom contracts.

So, that was it for the demo from my side. Uh And yeah, I have just added some resources or links. Uh so, there are other examples. What we did is that uh one of the products is uh Hyphen, which is a cross-chain bridge. So, we forked that and uh you know, added the Biconomy SDK support to it.

So, you can, you know, go here, uh play with it, toggle and uh do gasless transactions or the transaction where user pays uh in whichever tokens they're, let's say, providing liquidity in, right? So, that's the thing. All right. Cool. Yeah, more than stuff.

Uh Cool. I think I'll open to questions for 2 minutes. Uh and if you guys are hacking, just have fun and, you know, check out the prizes using SDK. You can, like, you know, apply for Biconomy track or uh Ethereum Foundation track and uh you know, uh build and have fun.