Technical Introduction to the Safe Apps SDK - Richard Meissner

all right moving on in the schedule here we're going to go to gnosis and we're going to talk about uh gnosis safe sdk so richard you're here there you are yes good to see you how are you i'm fine thanks a little bit cold in germany right now but sets that yeah it's uh come to denver if that would be that easy right now yeah yeah it wouldn't be but you're sort of in denver virtually right now so we're gonna go ahead and give you the stage cool thank you hey and welcome everyone i want to give a short introduction to the gnosis safe apps sdk and our related bounty so i think we already had a presentation like a couple days ago from one of my colleagues about our bounties and our one of our bounties is very centered around the gnosis safe apps and therefore we want to give a short introduction and show you how to get started with it and reuse your existing code to write a simple save app or whatever safe if you want to write for the bounty so i think the first thing i just wanted to show exactly like what are safe apps so um for those who don't know so the gnosis safe is a multi-signature wallet where it's a contract-based wallet where you can manage your assets this is a rinky b version that i hope everybody can see and yeah there you can set up multiple owners that then together or like actually it can be also multiple keys of this of one person that together and these key together manage the safe and you can use them obviously integrating multi-signature wallets like meter mask into different apps is a little bit tricky therefore one of the ways that we are currently using it is that we allow that you can basically write small apps or small decentralized apps that can be used within the interface so one of our very straightforward examples like this transaction builder where you can basically just perform like you can build together transactions and that can be sent over your multi oops wrong tab multi-cent and actually here we could even like take advantage of some of the um features of the multisend contract and we can actually also batch together transactional multiple into one as you can see here we could then send multiple yeah and today we want to see how can you write your own save app and how can you take advantage of the smart contract features of this and can get started so as a very simple example we we want to start with a with a react app and we would assume like i want to get started on the use case that you have written a decentralized react app that you just want to migrate or where you at least want to copy quite some of your code so for this we i took a very simple example for a react app where basically allows me to connect my account it just then does some fetching in the background and then it shows me for all kinds of tokens and spenders the allowance so these are all the allowances that i have set on rinkeby i think most of us are used to this that i don't know if you use uni swap you have to set really high allowances so that the uniform contract can make use of this and so most of us have set up some of these allowances for some contracts and not sure if everybody is aware of their own announces and you can basically click the reset button and then you can reset it and you see the nice i'm not sure if you i hope you see the nice meta mask pop up where you can um then see actually what we're doing here is we set the permission to zero back to zero so that these allowances are not cannot be arbitrarily used by other apps so this is all nice and cool but this is also like first of all don't judge my design this is um just very bare bone example app but um yeah so if you would now want to use this with our save this would be very tricky and actually and to like here also if you want to use it with an eoa right if you want to reset all of our allowances we need to click one after each other sign a transaction it's in it so for the small example i i'm going to take this save app so we have this save app running here this is it's our react development environment running here and i want to convert this very simple one page save a decentralized app into a saver so for the sake of this demo everything is in in one source code file which you probably should not do if you write real production code but for this one it will be enough and the first thing that i want to do is like quickly check what we're actually doing in our save so the the big first magic that we do is the code that actually loads what balances are active right so we we are using ethers to create our interfaces and to trigger our interactions with rpc nodes so we use um here we build together an event filter that queries all the events via a provider which is based on our window.theorem instance normally you probably would use something like onboard.js and this instance like is cradled at the very beginning so once we have all the events we filter regroup check that we get all the combinations of um tokens to addresses and then check for which of these addresses is where we at some point set an allowance do we still have an allowance set right so this is basically going through all of these events querying the allowance and setting the amounts then we render these allowances array that we render this out it's just a very simple script right we we iterate through our allowances render token spend and allowance and on click you can reset the allowance so to convert this to a save app like we want to hopefully make this as easy as possible because this should allow you if you write the hackers on to write to take existing code and just bring it into the um safe universe basically and yeah i have some sheet notes in my in my readme and the first thing which for a safe app is required that actually we provide some information in our manifesto json so this information that we provide there so it's a name a description a url and i can pass these are the information that will be shown in our overview so we have our name and the icon and we actually also have the description right and if you click on it we should see somewhere oh that might not have been the best example might load a while we should see somewhere where this app was coming from oh actually we should show also i think this is one of the features that we're coming that we also show the url of the developers that have developed this application so the first thing that we're going to do is we have the name we have a description stand web let's call it allowance manager and we need a url obviously we take our bounty url oops and we need i can pass just gonna check our existing icons which currently is the nice react app example icon so the next thing that is also very important which we already did is that actually use react rewired because if you want to test it locally to include the save up into an iframe this requires that the course so the cross origin research resource sharing headers are correctly set and by default um the react setup the react development server service doesn't do that so we're actually using react rewired to get it started so now if we kill this and we aren't start again so i have our oh and another actually another part is we need to use https because if we want to use we want to test it with our real web interface and since the rear web interface uses https it doesn't allow downgrading so this is a security feature so that it's not possible to hijack your https connection or downgrade your https connection to a lower security standard so now that we these are the very first steps so now we should be able to at least add our save app into the safe app into the gnosis safe interface but we will see that it will not work yet or it will like it will still try to connect to my meter mask wallet instead to actually my safe that i want to use so we will see already now it shows allowances managers i have to accept this and yeah i can get ready and you will see this and but yeah as you will see this is still related to my meter mask wallet so if i disconnect my meter mask wallet and reload the frame you will see that we oh meter masters allows that normally we at least what we should see is that we don't have access to our leg to the address of our wave so i think a simple way to show this also would be that we can say we add and let's we're gonna output our owner as a wallet address uh just connect address and set connected address here we say okay once we load our allowances we're just gonna call it set connected address oops and runners it up but we're going to speed this up now yeah and we see that it's not safe so what we can do now is actually we have some helper libraries that allow us to reuse most of our code so the first library is the save apps react sdk which allows us to handle most of the connection magic between the web interface and the save app so if we take a look at if we take a look at the save apps sdk we can see that we provide a safe provider and by using the safe provider we can anywhere in our reactor just use the safe called the use safe apps sdk hook and then access all the functionality of the save so let's add provider and we gonna also use safe hook and to replace our magic where we connect to the metamask wallet to connect to our safe so we're going to remove all this one we're going to remove this one and say here then that we want to load the safe info and then we return the address of the connected safe that's one too much so now when we refresh it should already you should already see that the connected address should switch over to our safe if it would work which it doesn't oh yes there was a copy paste so obviously we want to use the save as provider here and then we reload our app and then we see okay this time we actually see the allowances for still is the case is that actually if i disable my meter mask we will see that we will not be able to load this this information because suddenly our provider which is based on our window instance is actually not available anymore so now what before what we had to do is like everybody or every safe app would have to ship their own http http provider so that uses the json rpc endpoint for example infor and but that would also mean they all have to ship their own infor key to avoid this we actually allow that the save apps can use the or can channel the rpc request through our web interface and make use of the read at least for recalls of the of our ethereum provider of our web interface so for this we will use our library called the ethers um provider so this is right now a very simple abstraction around this whole or that encapsulates all this into the simple esos provider so that we can easily reuse all our code that is based on essays so if we take a look here and that will be as easy as importing the safe apps this provider and then we can make use of it by instantiating it so in our methods where we build our provider we replace this to use a safe and sdk and now our save app should start oh yeah we need to comment this out and now we can see that it starts working again and then we can get our allowances again so now we also have to adjust our reset allowances because actually this provider is based on a json rpc provider it actually doesn't have a signer so we have to switch this out so how do we send transaction and obviously or not obviously we can use the sdk to send transaction but right now it's not possible that we can just drop like replace or reuse the normal eso's contract syntax so we have to start using we have to encode our calls ourselves for this we use sdk and there we have it transactions a sub package where we can call send on the send method takes an object that has two parameters one is an area of transactions and one is advanced arguments that are further described in our safe apps sdk which you might have to use if you perform very complex transactions that are hard to estimate because certain dependencies are either not up to date yet on state and therefore you can like similar to a gas limit on a normal transaction you can also here provide a hint on how much gas should be provided for these transactions so but for our use case now right now for the simple examples we just provide a an array of transactions and each transactions in these areas there's a two value which is zero here because we do a contract call and data our two is the token because we want to reset allowances on the token address and our data is is a proof call like encoded so we can use the interface for our ese 20 token that we already used to fetch the events and can just encode the data using an ethers so then splendor and set to zero and this should be all that is required to make this app work again so now if we set if we click reset oh there we see that we trigger on transaction and this transaction calls the reset method so when we now perform this we will see that now i have to enable meter mask again else i have no wallet that can execute my transactions for the safe so let's connect to this account and then we can submit the transaction now we might have to retrigger this now so but okay before i show this um the other feature that we actually want to do right like what would be nice is that we can have a button which is like a reset all so let's let's add our ui since you know we have five more minutes more or less and i just want to outline how easily it's possible to actually batch the transactions so we have spend which is reset all and we pass in our allowances so let's copy our logic for resetting one allowance call it reset all allowances as a parameter we take an area of allowances and what we do now is we we have to build our transactions area so we actually build it the same way as here um but based on each single allowance here so what we actually can do is we just call we take our allowances area a map these every single allowance to have to a transaction so what we want to do here is for each allowance that we have we take the allowance token and the loan spender and then can use it so let's reload this oops our app guys lost that is not that nice let's edit it again so as we can see here now we have the reset we could submit this which will um trigger a meter mass transaction that would then execute the save transactions or actually what we can do now is we have our reset all button which will actually create for each of our allowances um a transaction that will reset the allowance so if we now submit this we only only takes one transaction and all our allowances will be reset that are related to the safe so hopefully this see how fast so now we can see that we should get a new transaction here hopefully in a second it also shows the transaction hash but here we can now see that we had multiple allowance events these are the these three are allowances event where we set our allowances back to zero and if we actually go to our actually now our also the interface decodes these transactions as where we set the allowance to zero if we go to the back to the app um we will see that there will actually be no more allowances displayed so converting an existing app to an existing react app or reusing a lot of code from the existing app is very simple and it's very easy to write new apps that leverage and the safe diagnosis safe interface and therefore allow you to interact with the wide user or the big user base and the big funds or it's a big pool of assets that are stored in the saves and provide users with additional functionality obviously not everybody uses react and therefore actually our save apps sdk why we provide helper um sdks for the react site and it's possible to use it without react for example the save apps essays provider that we have shown it's not required to use react to use it and it's also also safe apps sdk itself um it doesn't require that you use react it's a pure javascript sdk that can be used you can find more information on our docs there where we also link the the different sdks and provide some simple tutorials and some introductions and you can find other introduction videos and talks that allow you that show you how to get started yes i think that would be all when it comes to the safe apps and it says if there are any questions let me know if you have any questions later we are present in the virtual booth and you can also reach us on our discord channel where we are happy to answer any questions that you have well let's see richard i don't know if we have any questions jonathan can you tell us if we do i guess not jonathan a negative is good well i guess not richard so uh thank you so much for the introduction in fact um i've got three projects now that i'm using gnosis safe with so um we've seen some really uh impressive milestones from value storage in notes of safe so i mean i think it's a fabulous alternative to some of the other kind of components that have been out there we're using it ourselves so congrats on the good work and thank you for the presentation thank you very much and i hope that somebody comes up with a very nice hackerson project from east denver that allows you to leverage the funds that are inside the safes even more absolutely we look forward to seeing it too then i wish you a nice evening morning actually morning for you evening for everybody was on the european side and enjoy east denver and get hacking are you playing are you gonna i know it's i know it's like in the middle of the night possibly for you but are you gonna play poker tonight or no probably not since i am a little bit outside and i have to take care of my kids since most of the heaters are closed in germany it wouldn't be open right now anyways but yeah um maybe i turn in but it doesn't look like it right now sadly i would love to i would love to play poker well tell the rest of the team we said hello and uh we'll see you very soon thank you have a nice evening have a nice day yeah