SKALE Have your cake and eat it too

tell this talk is have-your-cake- and-eat-it-too and we wanted to do it something a little different instead of going deep into talking about consensus or cryptography or like really deep engineering we really wanted to change the talk up and kind of put on a play which i think is very relevant for a hackathon like here but to help guide you through understanding like the end user and how you can really win by creating great gaps that have really good usability and so we're gonna showcase that flow in terms of the end user and how you can really win with scale by having your cake and eat it too so it's gonna be a little bit different at the top because we're gonna put on a play and that play is gonna be the setting of a hackathon and I had just run into Christine a very talented engineer Christine like should we form a team sure I think that'll be a fabulous idea awesome because you're the engineer I know a lot about product or the end user I've never used like blockchain systems so I'm gonna be like blockchain crypto agnostic you know so maybe we can work together to make something for people like me that don't really want to go the crypto rabbit hole but still need to use apps do you centralize apps well you know I think for people like you and everyone else I have a sweet tooth and I love cake so I want to build something around cake all right so cake is great I think that's a good starting point people love sugar people love desserts I think end users can really wrap their heads around like some sort of cape cake app I love to cook and bake so maybe we could do something around like recipes you know what do you think like something the recipes and cake make this sort of the decentralized fashion could we we do something there what do you think I think that's a good idea and I was by the scale booth and they had these prototyping pads so I already started to jot down some ideas do you wanna see it let's check it out all right so the prototyping pad that they gave me looks like this and I thought about my cake recipe so I'm thinking what we'll do is first think about who's going to do it our team obviously it's us too but we might need two more so anyone that has suggestions or ideas during this talk let us know but then some of the ideas that we have are that this application needs to be able to accept ingredients think of them as assets but I need to store them somewhere and place these on the blockchain because we're at a blockchain event but then I want to use tools that people are familiar with meta mass blockchain rinkeby and I need to develop all this absolutely they smart contracts got it what do you think okay I like that I mean let's keep it decentralized let's keep it censorship resistant you know I might have a secret carrot cake recipe that's someone like Facebook or some huge corporation might want to take and centralize and control that recipe and get rinse from it so let's make this carrot recipe or whatever recipes I create I want it to be available to everyone so if we can keep that with you end-user I think let's let's go with this let's check it out so why don't you walk me through the contract that you built ah maybe you let's start there good point so if we start there let me go over to my code here and if I go into the contracts what you'll see here is I have this bakery contract and it does one thing essentially it has two content contracts in here bakery and cake and the bakery contract is actually creating a new contract on the blockchain so every time I store a recipe a new contract is created for that through this conference got it excellent okay my conception like a contract within the contract awesome cool can you walk me through the react integration yeah absolutely but before doing that how about I show you the UI so I can show you what users are expecting to see and then we'll walk through the color okay sounds good okay so here's my UI it's pretty basic essentially what I'm doing as well as allowing the end users to be able to add ingredients and then click on make a cake which connects to that contract that I showed you so what that looks like here is let's say I add a few ingredients eggs flour and milk you want to pick the last one you can't really do much of those ingredients so maybe let's pick fruit all right so we'll do fruit I have my metamath connected to rink be here as you can see and so I had to download that as an end user now if I click on this make a cake what it's doing is it's connecting to the blockchain here rinkie Network and I'm confirmed that transaction but one of the things that's happening and I've been struggling with this is that it takes a really long time for the transaction to come back so I'm not sure if this is the application that I want to develop out long term because of this experience yeah like is your new application fail is there a Wi-Fi issue is there some other bug like as the end user and like what is happening here and now I'm given this like ugly fruitcake and I don't really like fruitcake to me the end user like one to be delivered fruitcake is not a good user experience but also like clicking meta mask clicking you know waiting for this amount of time like I'm wondering what's wrong with this application it doesn't feel like an application I'm used to it doesn't and I'm with you there so I've done some research and I discovered these API based wallet so I started to tinker with because we're at a hackathon so why not so I'm gonna show you in the code what that looks like and then I'll walk you through the new UI that uses that so here I am I'm gonna go back to my code let's closed a few things here the first thing I'm going to do yeah before doing that though let's turn on meta mask here so I'm going to switch to my skill chain and that scale chain was given to me by some representatives here in discord so here if I copy this HTTP what I'm able to do is then go within my code go to truffle and then they said it should be pretty easy to implement this so a few of you have already seen this yesterday but what this looks like is I'm gonna put in scale at that endpoint clean it up and then copy this rinky integration give it a new name and just like that I have to go up and running here got it so instead of rinkeby we're actually transferring over to the skill network and trying to see what advantages we have to the end user from using the skill network exactly exactly so if I switch over the next thing I have to do is just simply deploy it using truffle now I won't bore you I've run this today because I've already run it but I want to show you what this looks like essentially all I have to do is change network to scale and then I'm up and running so when I go back to the application here what I'm able to do is simply change meta Basques to use scale and then run the Internet let's run this again to see whether or not that speeds up the transactions so I'm going to add in the ingredients but this time I'm gonna pick pick cheese and let's see what comes up so it's the same process as before I'm running on meta mass I click confirm but it's now using the scale blockchain and back-end so now we have a cheese cake awesome this is a much better experience it's like I didn't have to there was no waiting like in rinkeby it was like near instant as soon as you clicked the confirmation button yes it was like boom got my cheesecake so I feel like this is a lot closer to like more of a feel of an app with just that speed that's great yeah but if you can do a lot more here i think i think with the moving fast with scale maybe if we remove the extra friction point for the end user with having to download meta mask this is that's not a good user experience i want to have to go to adapt and then only be able to use it after i download something else that's not how you usually interact with most applications today yeah like when i log on a facebook or whatever else i don't have to give use the Fox icon and there's this little pop-up and maybe it's trying to spam me like hidden user like this is a different experience so yeah let's see what else we can do so what that looks like here if I go back in the code again I'm going to show you how to implement that so I have these reducers where I group together all of my web three instances and you can see under playing around here a lot I've tried Biscay which is another API based wallet I'm trying ports is here but right now it's connected to rinkeby so let's switch that to scale and all that portress requires is that I pass the endpoint and the DAP ID that fortress gives to me in order to make this connection but I still have to connect it to a button that a user would touch on the actual application like a login most people are familiar with something like that so what this looks like here in the code if I switch over here I'm gonna go down to the user login features login button login actions and here I'm just calling Fortis on login which will return back a wallet address that they've created for them now that wallet address I can then use for certain things within those web 3 interactions but here all this is doing is giving me a better way to be able to control or handle the private keys for end users so showing with what you what this looks like in production if we go over here I'm gonna go ahead and refresh my screen and let's try that again so it's using scale I'm gonna click on this login button and what you'll notice is that I didn't have to download something else in order to make this work it just works so Fortis now has this wallet that is bringing in and you can see that I have a little bit of money in here I'm gonna go ahead and close that out and let's go through this process again but we're going to add the same ingredients and see what comes out so just like before I don't have to confirm that transaction but instead if I was interested in the gas fees or anything else what's going on or just gives me the option to stop the transaction if I don't want it to continue but for everyday users that simply just want to use that they can just do that without having to do another interaction nice nice this is like much more familiar to me there's no Fox icon or chrome plug-in it's it's a button just like any other that's in the navbar that I can use to login I use my email address I can log out it allows me the window that in case I accidentally click the button that I can revert or at least like stop that transaction so it gives me that pause period if I accidentally wanted to create that cake I can stop it yeah this is much more familiar to me this is great but still it's like can we take this thing if you need any further I think we can so I feel like for some applications out there they really don't need that user interaction at all so for those you can actually manage the keys for the user and just simply sign it in the backend web 3 gives you all the tools to do that via just signing transactions so if you want to see what that looks like let's go to the code here and I'm gonna switch over to the component that's managing all of these cake transactions it's going on so here if I scroll down to the function where I have I'm scale turned on one of the things you'll notice here is that I'm still able to use truffle because that's of tool that I'm familiar with but I can then just switch the web 3 and have it get the transaction count which is the nuts that I'll need to be able to create this raw transaction so then in the end sign the transaction for that user and then send that off so the users don't have to click or notice anything is changing on the front-end so so you show you what that looks like over here let's refresh the screen and go through what that would look like so I just wanted to test that out so I'm not sure if I want to commit to that model but I'm gonna turn this on here and that will activate that function let's go ahead and add some new ingredients here but I'm tired of just adding the same ingredients let's try something else by using fowl stewards and I didn't tell you about this because I wanted to be a surprise but file stores is a feature that Scalf has that allows us to add new ingredients here and use it directly on the page Wow yeah so if I were to add in a new ingredient let's just choose chocolate here what you're seeing is just being added to the blockchain here now as it's being added scale is now replicating that the blockchain and so then you're able to then download that file and use it within your code or just download it directly to the browser iTunes use it within my code so here I now have the option to choose chocolate and wait for it to be downloaded from the blockchain but once that down what happens I'm able to then display that image for that end user here now if I click on make a cake because I'm signing that transaction for the user it happens in their real time so we've really transitioned from making adapt for more like an app that's awesome so one it's like now given tiramisu which is like the ultimate experience my favorite cake so one I didn't have to click anything it was all sort of seamless and automatic I felt much more like it now we're able to access a way to store new data that the smart contract can access in a decentralized fashion using the scale file storage and this is amazing like I feel like this is a seamless experience that I need to access my cake recipes alright so can you tell me more about how you integrated file storage absolutely so here if I go to the developer documentation one of the things you'll notice is that there's a section for file storage and you can access the NPM package directly if you would like but both of them pretty much has the same information where you're able to see how easy it is get up and running with scale on file storage instead of having to create a server that you would then have to connect to ipfs if you were planning on using that solution you can simply use a beautifully packaged NPM library to then use methods for uploading your files showing your files downloading your files or deleting them and only the person that owns that file can delete that file in the end but you can share it out for other users within the network to view awesome that's great yeah do you thing else do you want to add well I didn't want to add something else because I'm using scowl I do want to make sure that we're actually going after these bounties and I think we have a good view space to do that so scale told me they have five bounties on each for five hundred and died and then one for one thousand died so are you still with me add more people let's do it let's add some more people so come join our team if you have more questions we'll have desserts and cake by our booth any questions yeah I do so every example that we built for our hackathons you can access from our github so the github is accessible from our documentation too and there you'll see the make a cake the rock-paper-scissors one from yesterday and others yeah absolutely it's separate storage so it's an all-inclusive solution that if you're deploying doubts onto skill side-chains so you can also access the scale API to use the file storage on your scale side-chain you are you French the HD wallet within my truffle file here so this is for deploying the smart contracts and essentially I'm just passing in the private key and the scale endpoint and the private key I just have stored into you know an environment file so that way no one still is my fake eath it's given back to us by truffle so I'm using the truffle HD provider oh well thanks for coming come by our booth to talk more and enjoy some cake that we have [Applause]