DAPPCON 2019: Workshop - MetaTransaction-powered (d)Applications w/ Dennison Bertram (OpenZeppelin)

Transcript

all right so my name is Dennison Bertram while you're filling this out and introduce myself and then get started we're basically going to do a workshop today I can explain a bit about meta transactions the gas stations Network what essentially we're trying to solve how we're trying to solve it and then depending on how much time we have I think this should be an hour and a half if I'm not wrong to do I'm hearing - do I hear two and a half hours so we'll see how far we get of course you're always free to asking questions come up after and then we'll go through it hopefully the Wi-Fi works if not I'll talk I'll talk us through and see see how far we get so people have been filling out the

poll short show of hands so I can like move on a bit okay great so meta transaction workshop GSN tools live coding and more I'm Denison Bertram developer advocate at Open Zeppelin we work to build developer tools things to make your life easier so building on etherium can be something we can actually do that's our website we recently rebranded so if you know some of our former products such as Epling or lass our open zeppelin library have audited smart contracts these may have some new names these days but we're still the same company that you know and love so do this first this hopefully will be running in the background while

I'm talking I'm giving us about I like two to one chance that it doesn't work but hopefully does depending on how your internet setup is and how fast it is and if we can all npm install at the same time you don't have to get all of it I think the most important part is if you can get down to this line here that's probably going to be like enough so hopefully we'll then be able to do some live coding together all right so a lot about what we're trying to do here is deal with the user experience that

people are having and something at opens up loans very important to us is the user experience and the developer experience because these two things are intrinsically linked right and as you saw with this poll one of the things that I try to do is I try and collect user feedback and understand how people are using things in the theater ecosystem so this is from one of my research projects where this is actual footage of a new user trying to onboard to adapt right we know this experience it's it tends to be pretty awful especially when you find out about a new bed app in some sort of situation where you can't go get 'if you don't have

access to your coinbase you're on the subway so you know you're not in a position to write down 12 monic words so what is missing here what's missing is the user experience right and the user experience is a major block or for us when we're building apps or apps that people want to actually use right like it doesn't matter how great our idea is if our implementation sucks we're going to be unsuccessful in our attempt to onboard people to our apps so we lose 99% of our new users at the install meta mask step in the signup process right that's I think that's from dapper labs

they did a study about that for crypto kitties out of every 100 people who come to buy a cat 99 of them leave at install meta masks right so if you think about a 99 percent loss rate that's pretty insane you know if you consider how popular crypto kitties was if you consider how popular some of the adapts that we have were at the peak and you imagine that it was only 1% of what people actually wanted you can get an idea a little bit of the scope of disappointment that we gave our user when they came to our applications so part of solving that problem is the onboarding and the gas stations Network Alliance is a group that have worked together to build out meta transactions

meta transactions are a solution to the install meta mask step in onboarding new users right because you need eath to interact with smart contracts it means you actually need kyc you need madam asked you need the 12 words you need the process that goes on in between that right and that is an incredibly huge blocker I think most of you will probably agree Facebook is evil and we hate using OAuth to log in with Facebook but when the opposing choice is you know user name email confirm I know I'm lazy enough that I prefer just to log in with Facebook right like at this point our users attention spans are so short that any amount of friction between them and

your application is too much friction so the gas stations Network alliance it's been built to try and solve this problem we believe meta transactions are the solution to this originally it was conceived by Tabuchi as an idea to help make meta transactions a mainstream thing and we've worked together to actually in our opinion solve this problem so what is the GSN or gas stations network it is the centralized group of real ayres who are paid for relaying transactions pretty simple we have a single audited by opens up them single audited contract for coordinating is to relay hub right and this relay hub has

the same address on every network no matter where you deploy it whether you deploy it on the network you just spun up right now and ganache or on the main net right so this single centralized hub smart contract handles all of the coordination responsible for this DAPs pay for their own transactions right so that means that when you create a smart contract if you want users to interact with a smart contract without paying anything certainly there's a little bit of caveats that will go into down the line on that but the idea is is that the users no longer have to go through that like KYC eath metamath scoop you're taking care of that for them whether it be the first

transaction or all of their transactions right because depending on the type of app maybe your users are so high value to them to you right maybe you have a defy application when your users are trading hundreds of millions of dollars in some sort of token maybe you don't want them to ever deal with the friction of having to let confirm a 15 cent transaction for each step right maybe you want to make it smooth as possible because that customer is too valuable to lose at these unnecessary friction points so what is the solve just saying this a little bit users don't need to interact with your DAP developers do not need to roll their own solution right meta transactions are something you can

build you can go out and build a matter transaction system for your app and of course some apps who have realized this problem earlier have gone out and done this right but if we all are trying to first build our own meta transaction solution before we get to building our own application half of us are never gonna get there and the other half are gonna build something and we'll never sleep well at night because we'll never know if there's a hole in it somewhere right especially when we're dealing with money the system is decentralized as you ah've from taboo key likes to say game theory for the win so there's a set of game theory dynamics that really address a lot of the complicated aspects of having someone else pay for your transactions what this enables for us as

DAP developers is new business models right we can charge users and tokens to access taps right maybe originally you expect people to pay an eighth but now you want them to paying your native token right maybe you have credits that they use you can pay for doubt transactions from a Treasury you can set up the GSN so that when your users a member of your Dao make a vote maybe they shouldn't need to confirm metamath to make a vote right maybe they shouldn't need to pay 10% to participate in your quorum of voters right why should they the Dow has a million dollars in it why do I to pay 10 cents right now just to vote to make sure that participation stays high right you can set it up so that the payment for these transactions for

interacting with the Dow get paid out of the doubt Treasury okay well we'll get back to this a little bit later because I have my spiel kind of like map down but why you would want to have users pay in their own tokens well maybe your chuck-e-cheese online right and now you don't want people to be dealing with eath right maybe II thright now the gas transactions 3 cents maybe is 15 cents maybe is 50 cents right it's not really cool when you're like playing some sort of online skee-ball game at your chuck-e-cheese online right Chuck you see just don't sue me just because I said yeah right like so maybe you want

to say hey every transaction you make is gonna be 5 cents right or 1 chuck-e-cheese token right so now they pay in tokens and you can deduct them for that on the backend right but also maybe you're not even on main that maybe you're using this meta transaction solution on a side chain alright and you want to have something that you can forward the charge to users so they you're paying for your service in that regard you can accept credit cards for dabs right if you have chuck-e-cheese token maybe you say hey 10 plays cost $10 you can pay with your credit card here you can create a situation where people can't actually withdraw eath right so you don't have to deal with kyc in this situation people can't money launder money through

your app right but you can still charge them for using your application in a way that they're comfortable with and they're familiar with and finally you can onboard users using web 2 technology right you can have an application where people sign up using username and email something people are already comfortable with so this is actual footage of a new developer trying to build a production app on aetherium today you can expect that right so the other half of this question is developer experience like I was saying before you can roll your own meta transaction solution but good luck right we all know how difficult it is to

build these applications because we are the frontrunners right we are we are the first people to be building these types of applications and it's not a smooth process right there's a lot of difficult difficulties that we have to deal with we have to go to stack overflow we have to Google around we have to find our own kind of solutions many of us are doing sort of non-standard hacky things just trying to get to MVP status right now so we can get it out there if we were gonna wait for web 3 to be you know a firebase level experience or any other of these you know mature technology experiences we would be waiting a long time and we won't be those first movers building those applications of the future so how does open Zeppelin come into this

question right and for us it is all about the tools the tools that we use to build on we've been providing for years now the open Zeppelin library of standardized smart contracts which allow you to build complicated financial applications without fear that while you're sleeping at night somebody's gonna re-enter your contract and drain everything right we're taking the same methodology of dealing with how we improve the developer experience and applying it now to GSN to meta transactions so as part of our rebranding we've separated our offerings into three pieces we have contracts which are our library of modular reusable smart contracts which you probably already know our SDK which inherits from Zeppelin OS a tool that

allows you to build upgradeable smart contracts and EVM packages so you can do things like fix your code in production or iterate quickly within a team without having to like redeploy and have new addresses and starter kit starter kits are one of our newest tools which allow you to get started with a production grade base for your application in one command you get a react app you get your opens up one library you get a numerous tools Rimbaud from consensus for your front end all of this bundled into one but let's go through our tools really quickly right now so we have open zeppelin sdk this is a complete CLI that is available today you they could probably you don't have to actually do

this right now but one line you install opens up one CLI you have features such as opens up with transfer balance send transaction call right it's an interactive CLI this sounds pretty simple of course opens up one set in transaction you can also do ozzie for short by the way you don't have to always type opens upload right but if you remember in the past if you deployed a smart contract and you wanted to test it you'd open up your console and you'd be like ok let instance equal my app at this address oh wait doesn't work why not oh you have to wait it let instance equals wait my app at this address great it just returns undefined then you're like okay then I want to make a

transaction in web 3f sent right it was a pain and if you changed your contract you'd have to do it all over again right so doing this simplest thing okay I just want to fund another account you got to go in you have to make the whole transaction now you can do that in one line for me it's been a lifesaver as soon as you try it you'll see that it's a lifesaver of course also in the CLI you can do upgrades contract creation and more this is available today hmm yes yeah you can not only deploy contracts the main nut you can manage your contracts on maintenance you can call your contracts on maintenance you can upgrade your contracts on main it directly from the CLI yes we have a

command opens up when verify that allows you to do that I believe that they are working we have a number of engineers in the room who if there's some particular use case that you want to ask about we can double check but yeah should be working well you know one of the important things to us is that these tools that we're presenting today are available for you to use today right none of what I'm talking about today is a promise in the future something in six months we'll have get really excited about it and never hear about it again everything today is available today open Zeppelin Network this is on the front end well you don't have to actually use it just on the front end but this is a tool that allows you to get your web

three easily inside your projects when we're building GS one of the things we realized is is that once you get on the front end the decision to use meta transactions the decision to use directly the web 3 network is going to be one that's gonna have a lot of complicated code so we simplified this and provide you with a simple tool that gets you your web 3 that you can build your contract instances that you can use meta transactions all in one as you see here there's a small typo it should be web 3 context web 3 contacts as well oops but to use GSN to use meta transactions it's enough to plug your provider into the use web 3 network and send in an object that says GSN true now all of your contract transactions are

automatically meta transaction enabled using the GSN network that's all you have to do you don't have to change the rest of your code everything works as expected of course is some additional things to help you out here on that object that you create you have your accounts your network ID your neck word name your provider name live is your web 3 and connected is a boolean which tells you true when everything's been set up so now you can simply just wait to hear connected true and you know your app is ready to go you also have subscriptions that allow you to do things that when the network ID changes you can reload your interface you can do whatever you want to do so it's very easy and this is available for you to use today gas stations network open Zeppelin

contracts right this is what you already know the the opens up and library audited smart contracts but we have upgraded it we have added GSN support now to make your smart contract meta transaction capable all you do is inherit from GSN recipient and your contract with the addition of this function accept relayed call is now met a transaction enabled that's all it takes to make your contract smart meta transaction capable this of course is available today it's available right now yeah for for existing contracts that you

have already deployed you will have to think about what you want to do to make them at a transaction enabled capable so if you use DEP Lindros previously you could upgrade your contract if you haven't you'll have to think about either migrating or creating another solution where you perhaps have like a contract in between that speaks directly to your contract and that one is met a transaction enabled that's something that a lot of people will be dealing with for already deployed contracts and you can talk to us about the different solutions that might be applicable to enable that sort of transition of course testing is very important so we have launched for you.open zeppelin GSN helpers right meta transactions are

complicated we're making them simple for an easy for you to use but they are difficult under the hood right so what we've done is we've built out a tool of GSN helpers that allow you to be able to test these things right so in one line of code you can deploy a relay hub you can run a relay err you can register your relay in the relay hub and you can fund your recipient contracts in this example that I have here for you this is in code so you can use this in mocha you can use this in chai you can use this in whatever JavaScript testing framework you're using but also there's a CLI so you can do this directly from the command line if you want you can deploy your relay hubs you can run real ayres these things this tool set is available

for you to use today and of course the opens up on starter kits right so you can build your DAP today this is as easy as you you install the CLI and then you can unpack your starter kit and we have a starter kit now which is GSN enabled and that means that you'll have a meta transaction capable DAP right out-of-the-box of course we don't stop there we have a number of web tools for you as well the open zeppelin GSN relay tool this allows you to see through a convenient web interface on the opens up on site the real ayres that are listed I think it'll also be on the GSN site

find out the link for you I don't have it here right now basically you can list all the available relays that are currently registered and you can access them and see details about them especially if you're running a relay or relay there's also a tool for adapts right one of the things that you'll need to do is you'll have to put up a balance to pay for the transactions that people are using your DAP for so we have a convenient tool for you that allows you to top-up your balance directly from this interface so you could just use meta mask if you're on the go or whatever like mobile browser that you have this shows rinkeby but it's also live on maintenance nuts I think we're live on all the networks all the things all right med

transactions GSN and user onboarding before we do that though let's just check in to our poll really quickly find out who is been using it all right so have you used meta transactions our workshop survey so two people have said yes nine people have said no of course that's not really true because this is a meta transaction powered application so all of you have used meta transactions and what's great about that is is that you didn't know you were using the etherium network when you did it some of

you did it from your phones some of you used it from your desktop but you made live transactions on rinkeby using an application without even knowing you were using a blockchain application right a lot of our applications today are like crypto this blockchain that the users don't give up what it's running on right they just want it to work so this is an application using our tools I built last Saturday in between a couple of our meetings in just a couple hours time right it was really simple to do and it's that easy to do for your application as well and that's the kind of user onboarding we want to see right the ability to talk to a roomful of people have them use the application and there's zero friction in that if any of

you did any of you open the console while it was while you were using it maybe we'll just do that right now to see this is the live demo parts and now something's definitely gonna break but if I just click yes you'll see here we send the transactions we get a lot of the data back from the real Ayres that it goes out to you get the I'm sure you guys are like logging into now but you can go ahead and see that that's what's happening under the hood but of course it never even occurred to you so go back who thinks that's cool show hands right thank you uh so let me go back to presenting mode so we've gone through a

little bit of this already what med transactions are in essence it's other people paying the gas costs or in this case the DAP developer paying for the gas cost to run the application they're useful for the reasons that we've already seen you can create these web to like experiences and completely abstract away the fact that we're using blockchain from the user GSN the gas stations Alliance gas stations Network the group is called the gas stations Network Alliance that's a group around standardizing this right like meta transactions do not belong to open Zeppelin we were building the tools for it but if you have a company and you want to join the Alliance you're welcome to join the alliance this isn't gonna work

unless it's standard right this is something that we all need to know how to use it needs to be open so that we could all build these kinds of experiences there's no lock in on this so now we'll go through the anatomy of GSM transaction introducing the tools but uh we already did that and then code oh we already did that that alright so at the base level and we're gonna get a little bit deeper in this we can do like different levels also if you have really tricky questions we have a bunch of our engineers and team in the room so we'll probably be able to answer anything but your traditional transaction workflow of course you have your users they make transactions to aetherium and the meta

transaction flow you have users which make a request to relay and the relayer makes it transcends the transaction to the a--there of an hour all right so let's walk through it our participants in this some animation we have users pink crabs we have a contract we have a relayer and we have the relay hub right so the user of course is anyone who's using your app your contract is your smart contract that's meta transaction enabled the relayer is the individual the the relayer that actually sends the transaction to the network and the relay hub is the singleton smart contract that is on the network that

you're interacting with that coordinates all this alright so step one your contract your contract if you wrote it you have to deposit funds in the relay hub to pay for your transactions basically that's like topping up your contract because the way it's been designed you don't have to store money in your smart contract and that's really important right because the moment you start storing money in your smart contract you have to take a whole different level of like cautiousness about how you're writing your code so in this the the funds are stored on the relay hub and whenever transactions are made it's deducted from your contracts balance on the relay hub when you

deposit it also essentially registers your contract their 1a the relayer now deposits stake in the relay hub to register as a relay right so if you want to be a relay ER and anyone can be a relay er you first have to put up some sort of like collateral in case you do something nefarious right there has to be something to punish you if you try and mess with the network so in that case what you do is you deposit some amount of funds on the relay hub as your active registering but it also acts as the guarantee that you're going to behave well because the way the system is set up is if you behave poorly someone else can slash you and they get your stake I like steak

okay step to the front end right in this case the user is gonna represent the application on the front end right so the the application gets a list of real ayres from the relay hub how that works this is when you do registering you deposit the stake in the relay hub it emits an event saying hey this is a new relay and this is the conditions that the relay is gonna like do business under so the front end gets a list of all these relays and then chooses which relayer wants to do business with right and it's actually up to you to choose who you want to do business with right they'll be in the future I'm sure thousands of real Ayres and you can choose any one of them or if you're running a relay you can choose your own so step two the user gets a list of the

real ayres from the relay hub step 3 user selects a relay and sends it a transaction request right so when they go click on counter increment by one I'm gonna use you as the relay er here I want to increment this by one you take it you wrap it up you do some things that we'll talk about and then you submit it to the network step 4 the relay checks the relay hub to see if the contract will pay for it right and this is an important part of the coordination if I were just to say hey process my transaction you'd be like yeah that's great but are you gonna pay me right the relay hub makes sure you get paid as a relay so when it checks the relay Hub and checks

this function accepts relay to call basically your contract says yeah I'll pay for this transaction right like I know this guy's cool I'll pay for it right and at that point the relay irnos no matter what happens now on from this step forward they're getting paid for doing the work will you pay for this transaction no related is nothing goes our i/o whatever yes continues on the flow so once approved once once it says yeah the contract is gonna pay for this transaction the transaction is made through the relay hub right so the user goes to the relay er to the relay hub - aetherium right so you make the call through the relay out step six

relayer sends back a signed transaction to the user right and think about this for a moment I say hey you're gonna send this transaction for me right you like me right okay I'll send your transaction it's sent but the front end doesn't know it's been sent right like has it been sent so what we do in this case is is that the relayer signs the transaction and sends it to the network but it also takes the signed transaction and sends it back to the user right because now the user has a signed transaction a valid aetherium transaction in their

hand and that means if maybe yeah I signed the transaction and that I turned off my relay or went to sleep it means I can now send this transaction directly to the etherium network myself it's a valid transaction the real errors gonna end up paying the gas for it it's good and that's very important because it's the only way the front end knows that its transaction is gonna get processed so step five a will go back to five once approved step five a the relayer receives payment from the relay hub all right so now the relay er gets paid for having done this work it's easy there's a lot of steps in that right but it's something that we've abstracted so you

don't have to directly deal with it but of course if you want to get your hands dirty feel free so this is the corner this is a topic that comes up a lot and there are a number of different ways to deal with spam transactions so in building the the GSN and the whole meta transaction system there are a number of attacks that are laid out in the original AIP that was written by Tabuchi there are a number of highly critical ones that are already taking care of and that's something that you don't have to worry about thanks to the design and the auditing process things like spam transactions depending on the type of spam transaction we believe aren't a huge issue and the reason why is is that if you're running a relay er first of

all we believe that you should probably be a professional right so we're people running real ayres do have to be a little bit smart you can be bad earned on one transaction right like someone could implement some sort of accepts relayed call or whatever that somehow tricks the relayer into paying for something that they're not gonna get refunded for it's possible but your job is a relayer then is to basically keep track of who burns you and never process transactions for them again so the same way that the front end gets to choose who the relayer is the real Ayres also get to choose who they want to do business with right so if I see that you just burned me I lose right but I lose the cost of gas transaction

right so in this case maybe it's 50 Cent's maybe it's a dollar but you can do that to me only once right so the idea is is that the spam attacks actually don't scale because if you were gonna spam the entire network every relayer would lose maybe like 10 cents right but you would have to to continue this attack you would have to deploy a new contract right and there's no financial gain for you with accepts or with the exception of like this idea that maybe you can like make transactions unavailable for the real Ayres and then run your own like more profitable real air but the reality is is that that attack doesn't seem to scale and we're certainly like looking forward to see if someone tries that but in the worst-case scenario you as a relay err lose the gas cost of one

transaction right what we expect to happen going forward is we expect that there are going to be professional real Ayres who kind of work like credit card companies in a way where they essentially have this idea of like who is a reliable person to do to do business with right we also expect that large applications will probably have their own network of real layers or they'll have service level agreements with particularly layers and get a special pricing right so the real Ayres generally will say like ah you know we'll take 80% of the actual gas cost as like our fee right well maybe you can have a service level agreement with someone and say hey my transactions do it for like five cents so there are the possibility of spam attacks but in no way does that ever affect the user

experience and it doesn't scale and at the max it only costs real ayres the cost of one transaction but it's a good question valid question difficult what you certainly could write like if you if you are thinking hey my app is huge I'm Instagram on theory am I have a billion people using it why am i paying other people to process my transactions sure run your own relay right absolutely you could run your own network of real layers right that's not a problem what the network of real ayres is for in this case is that for everyone else is running adapt and doesn't want to also

have to run a relay right because running a relay is kind of right running a credit-card processing facility right so it is a professionals job in and of itself you can certainly do it right and if you have the infrastructure and you want to save that money and it's worth it to you absolutely but if you're not if you just have a simple app you get all the reliability of you know having an entire team that just sits in watching you know the relay server 24/7 without needing to actually do that right because this this decentralized network of relays are always available for you so as long as you're ok with it whatever you know the the fee the relay errs are asking for doing the transactions you have high confidence that there's always a relay

er available to you so why do the work sure sure sure that's not our focus right now but certainly if you are capable technically capable of running a relay er you're technically capable of using our tools to help build that relay for you yeah any other questions so basically these are the options that are configurable so as a relayer you can have your max gas price that you're

willing to pay so in this case maybe you're really worried about spam attacks and you know you're okay with losing ten cents on a gas transaction but you're not okay with paying a dollar or two dollars to have the transaction go through and get burned right so you can adjust that on your north side as a relayer you also have the ability to configure these things on the front end right so that the gasp question is how much are you willing to pay right you as the the front end can never be like screwed more than you expected be the so you set what your maximum is and

you're not going to get charged for more than that right yes yeah this is all verified on chain there's a and there's actually some tools that help you in your smart contract to determine those things let's see where we are okay let's code so this is the the riskiest part of this presentation so first of all I don't know how well the Wi-Fi is working so just to get a backup take a picture of this we're basically going to be following along more or less the QuickStart but here are two links so keep them a candy at your side I'll

probably be switching back and forth between them a lot of these tools are new so I don't actually know all the commands off the top of my head we recently changed them so just write this down have it handy take a picture you can use this to like go through it as well uh yeah I think this video is gonna be published online I think they're recording it I personally don't know I think yes but I'm just in the video I don't want alright so setting the system up right there are generally three different parts right one relates to the

relays so you need to deploy a relay hub you need to run a relay err and then you need to stake in the relay hub right this is for real Ayres for contracts you need to enable meta transactions in your contract and then you need to deposit to pay for transactions in the relay out number three is you have to incorporate the GSM provider in your front end so that your front end is aware of meta transactions all right so let's set up our GSN environment we'll deploy the relay hub run relay and stake in the relay hub so you can follow along with this I'll do a little bit of typing

on screen I know that's kind of like sometimes annoying but basically you can install the GSN helpers which hopefully you managed to do earlier and then you're going to run a local blockchain and then you're going to run a relay err for your platform right so that command MPX oszi GSN and run relayer will actually go out and download the binary that's compatible with your environment run a relay err deploy a relay hub if one doesn't already exist on your local blockchain and then deposit a stake for your relayer so maybe I'm gonna try and like split-screen this and show it to

you at the same time yeah um we are becoming a bit more opinionated and that's mostly because we have so many pieces moving pieces now on our side that we need to begin to control a bit more the entire environment we still I think at the moment use truffle for tests but otherwise besides ganache now open Zeppelin SDK just uses a soul C compiler

directly we have our own format for your project which is compatible with truffle so generally no we're still using truffle for tests but we're trying to move everything into our own ecosystem simply because you know once you have the matter of transactions one C of the upgrades one C of all these pieces it's hard to make sure they all work together properly without controlling the stack I mean I don't think we're so opinionated correct me if I'm wrong I don't think we're so opinionated that you can't all right like if you're in love with one of these tools you know GS n helpers will work with trough all the network

provider on the front end of course that'll work with truffle because it's not really like connected using the open Zeppelin library of contracts to make your contract met a transaction capable that'll still work of truffle so you you'll lose the ability to do the upgrades for example the upgradable smart contracts and you won't have well I mean you could be running both at the same time honestly I certainly like the the SDK to CLI the ability to like do transactions directly in the browser directly from the command line it's pretty dope so you know it's up to you we're not so opinionated that you can't keep developing the way that you already do is anyone type this in so I'll just give you an example right here

so let me run uh hold on let me make that way bigger that that's okay right right so it's running a nice really quickly all right fantastic open another window now when to do P I have to go into a project [Music] MPX run the relay I might have to install it first say yeah okay yeah install open Zeppelin nap GS and helpers

I hear that is it working not working over here let me take a picture of all you because there's so many today I'm gonna do this while we're still installing awesome definitely well I mean you know keep track of what you're doing there's

actually my second workshop this week we had a workshop earlier this week at a talk earlier this week so hopefully by the end of this week people will definitely know meta transactions actually we have a kind of funny story we presented earlier in the week and then for the die happy hour of a built a production app using our tools and the GSN on main net and we didn't even know about it and they were running it until they actually burn through all the money on the relay our because we didn't know all right so let's try this again MPX o z GSN run relay relay so in one command as you see here we've run a relay err

from my platform we've deployed a relay hub - Ganesh and we have staked our relay in the relay hub that was really easy right so if you're developing and you want to like figure this out that one command has done all of it it's pretty cool pretty cool alright so now we have a relay running so smart contract writing the contract and enabling GSN so this is kind of a tricky less fun part so I'll see if I code along with you or just sort of show you and explain it because if I code I'm gonna be like quiet while

I'm typing and doing typos this is pretty simple so we start out with a smart contract that looks like this we all know these favorite contracts counter right now to enable GSN to to make it met a transaction capable we simply install the open Zeppelin contracts aetherium package right which you're free to do if you if you were following along earlier you probably already did it if not in your project do this then we create new contract code which I'll go to right now to show you what that looks like all right so before this is your code right contract counter public value function

increase that's it now for the second step oops make this smaller oh we don't need that right now okay so this is still our counter contract up here we import from the GSN recipient contract right now we inherit it counter is GSA and recipient and we include this function right here accept relayed call and this is the most basic function that you need to have included to make your contract meta transaction capable in this case we are simply

returning this function approved relay call and this essentially returns I think the returns the integer zero which means everything's okay we're going to pay for it but it's in this function that you would write your logic to determine am I going to pay for this call all right that seems like an easy question but actually that could depending on app your application be something you really need to spend time thinking about right because you need to figure out how are you gonna identify your user who you're willing to pay for what transactions you're willing to pay for maybe you're willing to pay for the login transaction but you're not willing to pay for the send emoji transaction right so it's inside the body of this

function that you're going to make the decision whether or not you're going to pay for this call but we give you help for that right so here you get the address of the relay you get the address from who's actually sending it the call dated what are they trying to call your transaction fee that they're paying the gas price the gas limit the nonce of the transaction the approval data if you want to send some and the max possible charge which I believe there's a question over here about like how much are you gonna end up getting charged right so we give you that information that'll get sent in and then you can use that to help make some decisions and then if you want to pay for it you approve relay called and if you don't want to pay for it you return a reject

relayed call so yeah we just went through this step really call yeah it should return to zero as an integer so there are some advanced features that we have here which maybe you've been thinking about right like let's say we just had accept relayed call you could say okay I got $100 in the relay Hub I'm gonna accept this related call it's gonna be $100 and you you saw and you do it and you're like yeah we'll do it and then you take your money out really quickly before the transactions finished right and then you screw them so we have some hooks here pre relayed call and

post relayed call to both help you deal with this but also to help you deal with some other interesting circumstances right let's say before we were talking about paying in tokens all right so let's say you want to charge your users died for paying for their transactions right let's say you just have a service where whatever you want to call you know yeah we use an identity contract wallet so now you can call any function on the theorem we'll pay for all your calls but transactions are gonna cost you 25 cents a pop right well charging them 25 cents a pop and 'if it's gonna be pretty tricky because the price of eath is gonna constantly be different you're gonna deal with a lot of pain so let's say you just want to call charge them and die so in the pre relayed call what

you would do is you would already move the die that you want from them out of their account into yours to hold it so they don't transfer it out then you do the accept relayed call figure out you know are they gonna accept it yes and then in the post relayed call you can figure out how much did this transaction cost and then refund them the difference right so let's say you're gonna accept payment and Ethan you're like okay you know I'm just gonna withdraw ten bucks from you just to be care sure however much it's gonna cost the transaction cost one dollar and then you return them nine all right but you can do other things here in the brew really called post relayed call right that's up to you and these are tools to help you decide better who you want to pay for what sort

of actions you want to have happen when you pay for these things maybe post relayed call you know you only get ten transactions paid for you sort of increment announced and how many transactions are willing to pay for these type of things right so these give you additional tools to do things before and after the transaction happens and the charge is made also a side note and this is very relevant for the the gentleman who asked if we could use our existing contracts there's a catch there we cannot use the the solidity very yes I was shaking their head like yeah you can't use message sender and we can't use message sender because of course

it's not the user sending the transaction right it's not the user it's the relay so message sender is always going to return the address of the relay er because it's the relay er signing these transactions so we have two helper functions message sender message data which will always return the real message sender and the real message data and what that means is everywhere in your contracts we would normally use message sender you instead use underscore message sender and when it is the user it returns like for example let's say the user actually uses meta mask and cause the contract right it'll return the user and let's say the user uses the relay relay err uses meta

transactions it'll also return the address of the user alright so in these cases you do need to modify your contract with that regards that's important to keep in mind so to deploy the contract you just use open Zeppelin create so let me let me go back to having an actual project open sure sure sure uh which one did you want this one you mean right right so let me go back up to the gist link those that one that yeah it should be this one here right okay let me make this big over

here all right that is running I mean the workshop staff oh so let me open this up envious code no actually that's not I'll stay here for now can you enough to read the terminal side presenting okay so she's gonna all right so I'm gonna go into our contracts LS contracts and we have this counter sole right so let's take a look at it no nothing in there all right type tit

wrong CD contracts sorry right so this is a little bit more here because this is this is from the starter kit the GSN starter kit so we have everything already in but just comment it out so that you can make the change yourself so I'm not gonna do anything here you can continue using the code that you actually have but so let let's just show you how easy this is to deploy so instead of I'm gonna type opens up one but you can type a Z for short open zeppelin create alright so you can still use truffle truffle clearly still here

hanging out right so this is the CLI right this is the tool that allows you to do this a lot easier like just the whole deploying workflow can people can see that generally i feel like it's hard for you over here but over here we can see it's not too bright so you pick a contract to instantiate counter you pick a network and this is defined by your network JS file or your truffle config file if you have it there both will work I'm gonna choose development oh sorry I first have to in it the project so I'll do open Zeppelin in it this is also it easy yeah mmm-hmm can you see the oh the

command for unpacking it sure sure sure where is that we covered a lot of stuff okay you should be able to do oh that's the manual one you think you can do did you do this before okay so you can say you can stay on this one if you want so basically the the GSN package is this but already done for you the the starter kit but the starter kit

would be I'm okay mmhmm yeah what do you mean right yeah so what I what I did here is I did oszi create before actually did open Zeppelin in it I haven't created the project actually so we can do this along together basically I typed open Zeppelin in it actually let me cancel out this and do that again for you so open are you are you in the workshop folder that you

created earlier okay let me close this one in the workshop from the first slide okay so we're an open Zeppelin in it and this is at the yeah thank you alright so workshop tap open Zeppelin in it and this will create for us our project so you choose a name of your project I mean as you starter kit GSN project version I'm gonna just do one project is

initialized right that's pretty easy so now again let's look at our folders here so I'm just gonna open up contracts again CD contracts so you can see that allas we have counter which we already have made from before this is the code that's in it this should be close to the gist it's probably not gonna be exactly it but uh that should be fine for now we've made a few changes in the past week so some things are a little bit different we'll just correct them as we go along so let me close this and as per your a specific question let me pull up the command that

you need if you just want to yeah this is the command I think you're looking for right here so if you missed doing the stuff at the beginning you can also run open as long as you have the CLI here installed let me zoom out as long as you have the CLI installed you can do opens up on unpack starter kit GSN and that's actually gonna give you everything alright and that might actually be easier so you don't have to like retype things later okay hmm does not exist

right sorry here let's do a new one yeah I think that only works with next though is this correct well opens up one backslash starter-kit GSN yeah okay so this should work if you can give that a shot for for oh just try that we just changed some things so let

me open a new window feel the fur Oh without leading at okay so without this leading at sign in the next version which we haven't pushed yet you just do unpack GSN it's working working for

others maybe do this this will be the most up-to-date version of the workshop that we're going through so if you do this will be all on the same page so do it I shall do it with you actually oh let's make a new directory okay yeah test test workshop CDE test test workshop right okay so make a new directory because you're probably in

your Documents folder and there's already stuff there and then do open Zeppelin unpack opens up one back slash starter dash kit GSN download the kit yeah let's do this we'll all be on the same no not working for you live demos most people don't have it working right what downloading okay anyone else alright mine is downloading too let's see how long it takes let's see how much time we have left how much time do we have 15 minutes left okay so I'm gonna go back in anyway show you give you

overview so here we we just saw that we have the counter contract right so now we're going to create it these tools are really great because they're interactive right so we don't have to know the precise like layout of our project we don't have to know the precise name of things it'll actually prompt us if I had more contracts in my contract folder it would actually give me the list of all the other contracts so in this case we only have one so I'm choosing counter pick a network development the count the contractors has been deployed do I want to call a function on the instance after creating it if you would choose yes it would give you the different options that you have right so

that means when you're deploying something because in upgradeable smart contracts we don't use constructors it's necessary to call a function if you want to set it up so we give you the ability to call a function at the moment that you deploy it this case I'm just gonna choose increase counter by time all right so and that sets everything up creates a contract instance and returns the intro and returns the instance so in this case now we can do oszi call oszi is the short for open zeppelin pick a network development counter get counter yeah right so nice it's not a big number we didn't return to you a big number object

we returns you what it actually is I didn't say you said it so then you do see send transaction development counter increase counter it's due by 22 transaction successful um keen to bug that fails but we'll put that on list but if it's something you're interested in well you know bump it up the priority

list Josie call again development counter to counter 32 right pretty easy so now let's see how our great-great the who's kit has downloaded the GSN kits still going still going mind downloaded all right well wait a minute in the meantime though I'm going to open this up we'll go through this right so this is the starter kit experience for GSN and for all the starter kits is you basically oh the downline okay so we're getting there is you basically do this a command you unpack the starter kit and everything you need to get started is already there in this case now we

already have our ganache running because I have it running from up here right we already initialized what we have to initialize here so let's follow through so I would go open Zeppelin init app this creates our project version 1.02 it's a project nationalize okay so now we can check it out this is what gets unpacked and when we do the starter kit and unpacks you can go to contracts and see what comes in the GS n there's nothing here actually Oh No else so we have to counter again that like before nano counter that's what we saw before all right okay so also what we have of

course is the react app so let's open another window I'm just getting my directory right here cuz I'm bad with my shortcuts and now see this let me zoom in see this client folder we'll go to the client npm run start and that'll start up the front end for us which i do not know why that's weird so as soon as that starts we'll see it

pop up I'm gonna maybe go a little bit faster because we only have a couple minutes good right this pops up and this will actually give you it's kind of like a basic format for you to get started so you can start playing with it right away so let me go back in here just first off right so what we're going to do here is we are going to see open Zeppelin create we're gonna create that counter contract again counter development call a function in this case yes we do want to call a function I believe because I

think we want to call initialize maybe actually I didn't see the okay so this that's the initial instance let me go back to a react app here and in this case we are using meta mass just because we're doing development oh sorry not really I want to do localhost share address all right let me deploy actually we already deployed it are on let me check you have to upgrade it first okay okay

so what do I need to do to upgrade it first okay hold on that so I'm just uncommenting the stuff that's commented out do I need to uncomment this okay so what we're doing is in the contract that we have that's in the GSN file you actually need to uncomment the stuff that has been commented out to get started oops but not that I think that looks good we want

to enable these other functions except the relayed call the central a hub address right we need that as well so let's go back and because we are doing it live will do is it still up grader update oh great update do you oh the update so now actually what we're going to do is we're going to upgrade that contract that we already deployed and we've undeclared identifier do we not have C does that make sense

okay so basically add the wrong counter contract line at the top so we'll go back and update it again hopefully it should work this time development we're gonna upgrade all instances if you notice this is pretty easy way to be able to upgrade your contracts right so that's upgraded so now it should work and now we update it to be GC incapable but it doesn't know where Jesus have pointed out whether I have to call this

method and you're gonna use this occy method called send transaction yeah so essentially what what we have to do is we have to tell our contract where the relay hub is even though dress is the same everywhere is still important to tell it because you could be using another address and that'll be this function initialize or the set relay okay set relay help address in this case you'll notice actually the event was emitted which is nice so we don't have debugging but we do have emit events so we go back now we also have a made to make slight modification to the

source code but madam as a battery provider to GCN provider uncomment all the lines that you from line 20 to one line no sorry from 927 to line 32 this is how you declare but free provider for GSN basically we specify a lot of Ganesh

address and then the G same properties we said deaf through to to set that in development mode and we also said assign T which is in memory key which will be used to sign our transaction but it doesn't need to have any balance right and that's actually important thing because the user still has a key pair all right but this key pair is no longer important it no longer holds Eve but you do need it to sign the message that sent to the relay so in this case we have another useful tool that comes out of the opens up a network package calls use ephemeral key right and this generates the key pair that you can then store in

local storage you can store in a back-end database or you can just use it for now and throw it away later but that's very important right because here when we use GSN we're sending in the sign key saying this is what we're going to use to sign that is so that you don't need to use meta mask at all right if you did if your users do have many masks but you still want them to use meta transactions you don't need this sign key and instead of what will happen when you try to make a transaction is meta masks will still pop up but rather than needing eath it'll pop up a request to actually sign a message so I think we can show just before that we also have to command line 34 because this is how you get them at a mask for instance but we don't need it

anymore because they're gonna use the G same it's now safe and fine right so we've reloaded here we have to fund the contract if you remember that step our contract has to have a balance on the relay hub let's go back we're just gonna copy paste that that's the the GSN helpers oszi GSN fun recipient you have - that's recipient and then the address of the contract simple should be funded now we refresh this now you can see that we have a balance right so to increase the counter let me click it and we've inclusive right so we're interacting

directly with your ganash contract right now so if we go in the inspector you can see what's sort of happening here a bit more so let's go in I'll add something if we get rid of sign key increase counter by one that still works I need your hard refresh why does it work not sure why it still works normally it should pop up meta mask we might be cashing it I'll figure that out later for you anyway normally

that's what you would do and the sign key gets stored for you but to show you a little bit more of what's happening here console.log really quickly or we're out of time completely right so to peel apart this object to look into it better here are your list of accounts right this is your web 3 this is your network ID this is the name of your network this is a polling basically that's how we continue to like get updates this is our provider name normally you would see meta masks here in this case because we

see GSN we know that it's now met a transaction enabled and that's very useful so this is what you would use as your object to get everything that you normally need so if you remember from your front-end development normally we'd use that like utils file called get web 3 and it has a lot of different like if statements in it now you really only need this line if we comment this out again and then instead we re-enable this one use web 3 injected and we go back hopefully doesn't just magically work and we'll see the difference oh because it all right ignore that actually sorry 33 all right so we're missing something

there but we're not gonna get into that so it's 12 workshops supposed to be finished please we know we didn't finish entirely with this so come up to us and ask us any questions we have that photo that you took in the earlier on that show the two walkthroughs that'll give you a complete overview of how to do this step-by-step documentation on the website you'll be able to actually see how to build that from scratch so you can build the front end you can build your contracts you can build the matter transactions