Gasless Transactions in Web3: A Technical Comparative Guide

[00:00:00]hey what's up everyone and welcome back to another video in today's video we're gonna go over different ways you can create gasless transactions for your web 3 application we're going to go through three different ways you can create gas as transactions to help create a better experience for your web 3 application where you can cover the gas costs for your users this way you can also help create a better experience for those who aren't very familiar with using wallets or being a gas fee we'll first start with a couple relayers with open Zeppelin Defender and economy and then we'll also show you how to create an erc4337 wallet using our smart wallet and our wallet SDK where you can turn on a gasless feature and a pay Master will then take care of the gas for transactions within your application let's first start off by first creating our app and then we'll implement the gases transactions so let's jump under compute and get started so first thing we're going to do let's open up our terminal here let me enlarge this so first thing we'll do is we're going to create an app we're gonna do MPX third web at latest create app and this will allow us to create an app using third web and we're just going to call this a gasless app and we're just going to do this on an evm blockchain and then we'll use next and typescript for this application and this will create us a very simple templated application where we're just going to put in a connect wallet button plus a web 3 button which is a UI component from third web that will allow us to claim an nft once that's done we'll switch into our gas list app here and let's open this up in our code editor and let's just open up our terminal here and run this here so we'll open this up our app so this is the templated code that you get when you create an app with third web you'll see a connect wallet button here that allows us to connect and then we have some links to our portal and templates we're going to get rid of everything except the connect wallet button right now so coming back to here under our Pages folder we're going to head over to the index.tsx file and I'm just going to get rid of everything in between the main tags that way our whatever we add will still be centered within our application so let me just get rid of that but we'll still add a connect wallet that's in here so coming back to our app everything else is taken away we have a connected wallet button so we can connect with our metamask and we can see we have everything right there uh by default we're on the ethereum mainnet we're actually going to use a demo contract that I have just to test this out it is on Mumbai so if you head over to your underscore app.tsx file you have active chain here and you can switch this over to the chain that you're going to be using uh for additional uh chains we do support any evm compatible chain through our third web SDK so you can just um add in your chains with the at third web dev chains here uh you can also go to thirdweb.com chainless to look up how to import and use any of the chains that are EVN compatible but again we're going to be using a Mumbai test net contract here so I'm going to put that there and we're going to get our contract address or actually let's first back in our index.tsx file let's add a web 3 button uh let's just call this a claim n of T here so just put claim uh and our web3 button uh it needs a one a contract address that it's going to interact with which we're going to get in just a moment uh and then we have an action that the button is going to do and in this case on our contract uh we can specify uh what type of contract it is uh we're going to be doing an ERC 721 um but with an ERC 721 we can call the claim book here and we can specify the quantity that we're going to claim from The Collection I'm just going to put one you can also do ERC 1155 you'll have to specify the token ID that you're going to claim first and then the quantity uh if you're doing an ERC 1155 but we're going to do a 721 and let me get my contract address here so you can see that we have a button now on our application uh it's prompting us to switch Network because we're on Mumbai um and you're going to just see this loading here because we haven't set our contract address that it's going to interact with yet but if I come here we have this contract uh it's a contract of 50 nfts you can see here and it's just uh an ERC 721 and this is the different drops right here so so with this one we're going to come back to our app I'm just going to paste that into the contract address so if I come back to my app now right we have a connect wallet button we have a clean and if I hit the claim button right now like a normal web3 application interacting with a wallet I'm gonna have to pay this gas fee right over here in order to claim the nft now if I am let's switch to a wallet that doesn't have any funds in it so let's say I'm connected with this wallet and I want to claim this nft but I don't have the gas to even claim the nft even though it's free um you'll see this and of course we don't have enough Matic to actually claim the nft and this is where gasless transactions can help out especially if you want to put in a transaction that isn't going to cost anything but gas so we'll switch back to our wallet here so the first one that we're going to go over on how to implement uh gases transactions is open blend Defender so we're gonna head on over to their website we'll drop a link for this down in the description below you can sign up for free once you create an account you'll be brought to your admin dashboard and we'll come on over to relay here so we're going to create a relayer and this relayer is going to be where we fund a relayer contract and that contract will then pay for the gas for any transaction that we specify it to cover so we'll create a relayer here we'll name it uh we'll just call this uh gasless demo you'll select the network that you need it for so in this case we need a Mumbai and we'll create that relayer here so once that relayer is created you can see we have a balance of zero right now so we need to fund this relayer with some funds that are going to be used to cover our gas for our transactions you can see that you have your contract address here so we can copy that we can come to any any of our wallets and then we can send some funds over to that so we'll just send one Matic over confirm that and then we'll wait till that transaction goes through uh once it goes through this relayer will be funded with one Matic and that one Matic will be used to cover the gas for the transactions for application so right there you can see our one Matic has been sent over so we now have that balance uh you can always withdraw funds from your relayer as well now we have our relayer but we now need to specify uh what this relayer is what contract this relayer is actually going to cover the gas for so in the left hand navigation here under Auto task we're going to create a new auto task we're going to call this a gases demo again it's going to be a web hook and we're going to select the relayer that we're going to use we're going to be using the gasless demo relayer and that's the relayer that it's going to cover the gas piece from now in this code here um this is open Zeppelin's default code we can actually get rid of that and we have some code here that you can add into your relayer or third web I will link this down in the description below as well but you can just copy that paste it down over here and we can create this Auto task and once that auto tax has been created you'll see this web hook URI here and this is what we're going to need to plug into our application so we'll copy that we'll head back on over to our code editor and we'll come to our underscore app.tsx file now within the third web provider this is where we can turn on our gaslish options so we're going to do SDK options and within our SDK options we can specify that we want to use a gasless and for gases we're going to do open Zeppelin and now with open Zeppelin we can do our relayer URL which we are going to paste in the URI that we got now now for this purpose we're just going to paste it directly in here uh if you are creating an application you may want to store this safer someplace else but for this demo purpose we're just going to paste it right here into our relayer URL and with that you now have gases turned on through open Zeppelin Defender so coming back to our app here let's just refresh this really quick you still have your wallet and your claim button now when you click the claim button you'll be prompted up with a metamask prompt but instead of a transaction where you're paying for gas you're signing a signature um which is going to now allow you to claim the nft while it opens up and Defender takes care of the gas for us so that went through we can come back to our smart contract we now have 27 nfts claimed here we can also come back to our Defender here if we take a look at our relayer and our gas list demo here we can see it covered the gas for a transaction here just a few seconds ago and we are now down to 0.99 Matic and arm balance so that is how you can set up gases transactions with open Zeppelin Defender next we'll set up economy or dichotomy and this one we're gonna head over let me just come back to our code editor here actually uh we're just going to comment out the open Zeppelin part here and we're going to come on over to bichonomy's dashboard we'll link this down in the description below as well so you can sign up or you can sign in with your account I'm going to sign in with my account and then we'll take a look at the dashboard so once you are signed into your dashboard here you can see you'll have all your dapps and everything similar to open Zappa and Defender but let's create a new one so we'll create on the right hand side a register adapt so we're going to call this uh gasless demo here we'll select our Network again uh we'll select uh polygon testnet which is Mumbai so we'll register that and right over here you'll see your dap comes up within your list we'll select the gas list demo now the first thing we need to do here is set up our smart contract so under the tabs we'll go to smart contract we'll select smart contract we'll name our contract here so we'll just call this uh nft collection uh we need to get our smart contract address so this is specifying what contract and we're going to also specify what function within that contract is this going to cover the gas for so come back over to our contract here let's copy that come back and paste it we're going to set this as a trusted forwarder we also need to get the applications ABI so coming back to our dashboard here we can come back to sources all the way down at the bottom we have our ABI here we'll just hit that copy button to copy all of it come back to the economy here and paste that in and once we have again our collection name our collections address we paste in the ABI we can just add that here and you can see we now have that added down here at the bottom next we need to fill up this with gas similar to what we did with open Zeppelin Defender so we'll do Fill gas with this on the minimum deposit is one Matic so we'll do one here we'll say fill me up and we'll confirm and transfer over one Matic and once that goes through you can see uh we now have in our uh gas demo gasless demo we have one Matic right over here and then within our overview tab right over here we have our funding key and we have our API key now before we add this to our application we do need to set up one last thing so under our adapts API here uh we have our dapps API we're going to hit add and we have to add a custom API so here we're going to name what this um what are what function are we going to be paying gas for so in this one here we're going to say claim we're going to select our smart contract that we're covering the gas for here and the method that we're covering so we're covering the claim function here so we're going to hit add and once that has been added this is going to be our API key our API ID here and then we're also going to need our API key right here to set up the gases transactions for our application so coming back to our app here under in our underscore app.tsx file uh again within our SDK options and within gasless we're going to set it up for by economy now and we're going to need our API ID which we'll get uh we're also going to need our API key and then we're going to have to set our deadline uh seconds here which is just going to be the timeout preference for this now let's get our API ID which is going to be this one right here and again same thing uh this for this demo purpose we're just going to paste it right into here um we're going to get where is it overview and get our API key and paste that into right there so now if we come back to our application I'll just refresh this really quick when we hit claim again we're not going to be prompted with a gas Transaction what a signature request so we'll just sign that there and again this is going to claim an nft and we are now covering the gas costs so once this goes through we can check our nft contract so it looks like it went through we'll check our nft contract we now have 28 collected we just claimed another one and that's just another way of setting up gasless transactions now the third and final way we're going to go over is actually using our brand new erc4337 compatible smart wallet where you can actually create your very own smart wallet within your application set up gasless and a pay master are similar to how open Zeppelin Defender and dichotomy take care of the gas will take care of the gas for you we also have a tutorial video for specifically setting up smart wallets we'll drop that down in the description below as well and Link it in this video here but we'll go through it right now the first thing we're going to do is we're going to come on over to our third web home page here we're going to connect our wallet we're going to browse contracts and we're going to scroll down to our smart wallets here and for this tutorial we're just going to do a simple wallet Factory but we'll select that and we'll deploy and we're gonna do the Mumbai Network or chain but you can select whatever Network or chain evm compatible that you need to use we'll select deploy now confirm that transaction there you can sign this message to add it to your dashboard and once that's deployed we're going to need this account Factory address I'm going to open up a new tab up here in our navigation if you hit API Keys we'll also need an API key for your application so over here you just gotta sign a message and then you'll be brought to your API Keys here we'll just create a new API key and you can see we have a new API key here that we can use so now in order to set up a smart wallets to work with our application coming back to our code editor here I'm going to get rid of this SDK options here we're going to do supported wallets I can spell right supported wallets and within supported wallets we are going to add our smart wallet and our smart wallet is going to require a few things so within our smart wallet we are going to need to put our Factory address which we'll grab in a bit we'll also need our third web API key we're going to set our gas list here to true because we do want to cover the gas cost here and we'll need to add our personal wallets here which is going to be the eoa wallet that supports our smart wallet here now we can set up any wallet so let's just say metamask wallet or we can set up another type of wallet which is our local wallet which will create an eoa wallet under the hood for your user all they need to do is Click continue as guest and create a password and that will create a wallet for them and allow them to use our smart wallet so let's get that factory contract address real quick actually we'll just we'll do our API key first since we're already here uh we'll do our Factory contract address so we'll copy that paste that in here and then we will save this now coming back to our application let's sign out here when we connect our wallet we can select smart wallet and again a user can connect their metamask account or if they click this continue as guess they'll be brought to this section here where they can create a guest wallet all they need to do is create a password to encrypt their wallet and create a new one and that will actually create them a guest wallet allow them to use our smart wallet so you can see here of course we don't have any funds because we just created this wallet or you can connect the wallet and use your metamask as the eoa provider as well and you can see here we now have a smart wallet taken care of now again when you use a Smart wallet and you have gasless turned on the gasless transactions or the gas for the transaction is being taken care by the paymaster and in this instance we're using third webs infrastructure for the paymaster and bundler and this only works on test at right now but if you do choose you can set up your own pay master and bundler as well so now that we have that set up we can see here we can hit the claim button we get this little pop-up we'll hit sign and once that goes through we can come back to our contract here we now have 29 nfts claimed and again we covered that gas cost with our smart wallet so there you have it those are three different ways that you can create gasless transactions and gasless experiences for your web3 application by using open Zeppelin Defender by economy or our smart wallet from our wallet SDK which is an erc4337 compatible wallet you can create gasless transactions for your application but again I hope you folks enjoyed this video and you found some value in it if you did give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on tutorial videos just like this and if you folks haven't joined our Discord Community yet and join the amazing community of Builders just like yourself We'll add a link down in the description below if you need any help or you have any questions you can drop them in our Discord and we'll be happy to help you out but again I hope you folks enjoyed this video and until next time see ya foreign [Music]