Create Gasless Transaction with Circle's Web3 Services - ETHGlobal London 2024

[Music] yeah okay so my name is Blessing uh I'm senior devor for seu uh I'm based here in London and I've been working with C almost one year now so today I'm going to work you guys through how to create gasless transaction with cires web through services and kind of talk about how that weaves into what you are going to be the project you going to be building for the circle bound and I'm going to show you a quick demo on how to create that as well so in case I don't have time to take questions I'll be right outside after the presentation and we could chat for question or you could also come to the boot uh I'll be there all day today tomorrow so I'll be happy to take your questions as well uh all right jump to it uh put together this uh stock diagram to sort of explain to you the circle technology stack and that would help you think through how to build uh your project for the Bounty prices uh if if you start from the base you see all the blockchain networks that usdc is on and that's uh you could have your evm compatible uh blockchain on top on that and then on top of it you've got the stable coin protocols uh you've got usdc you've got URC and you've got cctp uh if if you're familiar with cctp show show your hands wave your hand oh okay amazing so you've got cctp and to just explain really quickly what cctp does cctp let you move usdc across chain uh opening up liquidity and helping against the liquidity fragmentation because you could send from one chain to the other chain if you're yes this is on one chain you could send to the other chain and then on top of that you've got the web three services which is kind of like the circle's new uh product offering that offers apis where you can embed wallets that's programmable wallet and then where you can build deploy and manage smart contract that's the smart contract platform and we've made it so easy by just with the with a single API call you're going to be deploying and meaning your nfts and also below that you've got the gas station which let you sponsor Network gas fees for your users thankfully uh the first presentation already kind of give us the technical details of account account abstraction now I'm coming to show you kind of like the demo of how you can send usdc from one wallet to another wallet sponsoring the gas fee so and on top of that is your application that you're going to build during this aaton so you can kind of see how the old Circle Technology stock connect together to basically serve your business offering and the application that you're going to build during this aaton so uh I've put together a quick demo and this demo I'm going to show you how to easily use uh the learning platform that we've prepared at C to create uh gasless transaction and this learning platform helps you learn how to either work with a user controlled programmable wallet uh programmable wallet is divided into two you've got the user controlled programmable wallet you've got the developer controll programmable wallet and then with user control programmable wallet I'm just going to show you if in a very few steps how you can easily use that uh so the first we've got about seven steps here and this the end of this step is that you're going to create your first transaction and uh transaction will be from one wallet to another wallet all gasless so the first thing you you're going to do right here is to get your API key and to get your API key you go to the uh console the so this is the console it's console. secu.com and then all you need to do is go to the API key section click on create API key and when you click on create API key you just put in an API key name so let's put AR London and uh so with that I can easily create a standard API key and this I can just copy this API key and that's what I'm going to use to show you how to interact with the apis pretty much easily and then uh be able to send your uh gasless transaction so I've copied this uh for the purpose of this demo I'm just going to keep it in this Google Docs so that I have access to it but if you go back to the platform uh The Next Step where you are going to basically use your user control programmable wallet is is to acquire What's called the app ID so the app ID it is a recognizer that sort of identify your application or your your application that you essentially building in the circle platform so with the you've got the API cuse uh sample code that you can just copy and interact within your application as you ask right so you can just copy this but this platform is built so that you can interact and test out how all this thing kind of works so I put in my API key here and then I'll if the execute but and that would give me my app ID so with my app ID I can copy it again and just put it in this dock so that we can have access to it in case you need it so I sort of uh I I'll close this so that it doesn't get in the way so I've acquired my app ID uh the next step to do is to create and initialize the user so for example if you're building a mobile or web application once your user signs up the next thing you will do is uh grant them a wallet that they can use to transact on your platform and that's what the next step is going to go over and I'm going to show you examples of snippet API CES that you can just copy the code and just test it out in your application so all you need to do right here is create a new user so uh to go through a quick steps of what entailed creating a new user you create a user you acquire session token and then you initialize the user apologies if I'm working super fast is because of time but I'm I'm around to to chat a bit more after after this but essentially what you need right here is that to initialize your user your user needs a way to be able to you need a way to be able to identify your user and that's where the user ID comes in and I'm just going to generate a quick user ID right here using this example platform and then I'm just going to put that in right here and that's the user ID so you could embed the code into your application where your user get a particular user ID so I'm going to use uh matage Mumbai blockchain and that would give me my user so you can see right here that the response I got back is a user token encryption key and then a challenge ID more on challenge ID in a bit I'm going to tell you more about challenge ID so uh the important reason why you need challenge ID is that uh you need to be able to interact uh you need your user you need a way for your user to be able to interact with your application and then you need to be able to grant that securely so they need to complete what's called a all in a way that uh if your user was to send um usdc from one wallet to another wallet you need to be able to know that it's your user it's not any other person so that's why you you would add a challenge and we're going to basically create a challenge and we're going to complete a challenge so with this snipet it's been filled with the user token the encryption key and the challenge ID that we retrieve in the previous step I'm just going to click the execute button right here and what you see right here is kind of like how you would offer this offering to to your user when they want to create a transaction or when they want to create an account on your platform they need to create their own pin and with that all you need to do is set a pin I'm going to create a pin right here uh for the purpose of this demo and I'll uh enter the pin again uh so you can see that we're already presenting a sort of like a web tool interface that almost everyone is familiar with and to his point in the previous uh topic you can just walk down the street of London and then you can let your user transact on chain without even realizing that they're using on uh onchain operations so I I've created my pain next thing is set a recovery question in case your user forget a question forgets the pin you can set up a question so I'm just going to put in random answers so let's put in London for this uh let's put this London so I differentiate them I'm going to put in favorite sports team I'm going to put in uh Manchester uh and then I'll put in CT right so let's complete that so your user they've got their recovery questions and they can easily retrieve their pin in case it's forgotten so this is kind of like the last step where you give them to say they agree and you continue and the challenge has been successful so you can your user can go onto the platform to transact send money from one usdc to another uh send one usdc from one wallet to another wallet right so once that's complete let's check the wallet status uh and to check the wallet status you need the user ID because that's the user ID that indicates the user so you hit the execute button and you can see right here that we've got our wallet address and then we've got a particular blockchain and you can see what's written SCA that's the smart contract account that is assigned to the user meaning that you can send gasless transaction uh sponsoring the gas easily so I'm just going to copy this information and I'll put that in this document right I'm kind of working through all this really fast and I'll copy the address because we need to use the address to send transaction shortly so I'll copy the address and then I'll put that uh so yeah so we need a wallet ID right I'll copy the wallet ID right here and the reason why you need the wallet ID is that this platform is built in a way that would offer you 10 usdc 10 test net usdc for you to sort of interact and understand how to use the platform so I put in the wallet ID here and H the execute button and you can see that we've sent you 10 usdc so that you can play with that testnet usdc and transact right so in the next step uh I'll sort of initiate a transaction and to initiate a transaction we're just going to send from one address to another address so that you can see how to create your first gasless transaction so um these are API sample codes we've got developer documentations and videos as well that you can watch to understand how to build with this uh more deeply so we're going to send two usdc from one from this address to to the same address just to test out okay that's the wrong thing let me just copy the address right here and right so we need the token ID um sort of for okay yeah we need to get the token ID right here so we've gotten the token ID and you can see that this is a usdc token this is the matage token you can see that it's zero so we're not even using that to pay for gas right so all I need to do is copy to token ID right here and then I'll take take it down right here token ID and I'll go back and copy the address and then uh I put that in right a destination address and let's send to usdc right so if the execute button and the transaction has been created uh the user needs to complete a challenge so that we verify that it's the real user that is using your application so I'll H the execute button and remember the password we set in the previous step we're just going to that right in here and in case your user forget the P they can easily get that with the recovery question and you can see that challenge has been successfully completed uh let's go back to the console uh and you can see all the transaction that was created you can see that I sent to usdc from this wallet to the other wallet right and that's completed and if you click on one if you open it you can see the transaction fee you can see the user up as you can see all the necessary information and that's how you create your first gasless transaction using Circle web3 Services uh platform so uh I'm I'm at time now but I'll walk you through the next uh thing that you need to know which is the price pool information that you need to be able to partake in this aaton so if you come to Circle price information you can see a lot more about this but then I'll just quickly walk through it we have four pools of uh of of the aaton prizes all you can see right the first one is the crossb payment which is the best application for any payment infrastructure peer-to-peer where where it facilitat International transfers across countries and you can connect that to reward uh reward use cases such as using the smart contract platform to Mint nft which grants other users kind of like uh access to get discount from other uh from other businesses so you can sort of connect this transaction with reward use cases but the gist of it is that you must do all this uh information for you to be to win $2,000 and the next price pool is dollar access what that means is that you create a mobile web application that gives your user access to usdc or USD and that sort of opens up our Global access with the digital dollar and gives them Financial stability we've included a couple of examples and also recommended um tools that you are expected to use and this is are the qualification requirements that you need to be able to qualify to win the price and the third one is the crypto capital Market which let you trade with usdc give people loans with usdc and the important thing is that all this must be built with the cirle product that technology stack that I showed you when I started this presentation think through that and that would help you understand how to build and the last one is the best imagined use case we have a lot of people that have met here that want to build with uh with the F foraster to social media web three a lot of people want to build AI use cases and we have a one of examples right here the cctp for cross chain essentially new application that it's not common it's what people already talking about account abstraction it's going to help us uh with user experience uh with the user experience challenge in web in the future just really nice imagin use case that is so special with all the CLE web3 Services uh the first price gets $2,500 and the second price is $1,500 and you can see right here we have the resources that you need to be able to learn we have videos we have documentation we have the Lear platform that would essentially teach you how to build with circle and then you feel a survey as you're about to submit because the feedback is also part of the important criteria for you to be able to win and this is the survey link right and that's the price pull information I just want to leave this with you that remember that at the out of every line of code lies the potential to change the world so as you build with this aaton I in invite you to uh build with passion and I wish you guys all the best thank you for the presentation uh so I'll hang around if you have more questions but I think okay three okay yes I I'll take one yeah uh is it possible yeah it doesn't work oh it doesn't you work yeah is it possible to get more to ask to more blockchains uh than just Avalanche and polygon for example Bas uh so that's the thing we're working on more more blockchain but for now this is what we support and we'll share more announcements when we go live on other blockchains okay yeah but it's it's it's Al it's on the road map we're extending this to more blockchain so if it's not here on your blockchain of choice we would announce uh in the future cuz we're working on a road map so it's not available for for hakon right say again for the hakon we don't have them yes for the web3 services we've only got that on uh e on polygon right but for the araton it's not yet available one more question good uh thank you guys thank you everyone was really nice coming here thank you [Music]