Fortmatic SDK Bounty Workshop: Build Your Own Smart Contract Wallet – David He & Ian Smith

hi I'm David I mean we're front-end engineers at Fort mattock so we basically build the suite of tools that make it super easy for your developers to on board into the etherium ecosystem yep yeah so today we're gonna talk a little bit about smart contract wallets who here is familiar with smart contract wallets or has worked with smart contract wallets okay I see a couple hands went up yes so what a smart contract wallet is it's a repository of funds that are stored on a smart contract that usually requires sort of multiple consenting parties to make a transaction yeah so we built a very simple example of a smart contract wallet that meets a real-world use case in this case payroll and we just want to tell you a little bit about how the smart contract is a really good way to manage payroll because it's transparent its auditable and its secure and also how our new white-label sdk it 4matic can help make that experience even more seamless so for those of you who don't know about smart contracts we can deploy a smart contract and in our case we've written a constructor for that contract to set whoever deploys to be an admin of that contract and that person can make other people admins as well so we're going to show you how to do that and then we're going to show how both of us will need to approve a transaction to pay out an employee so if you've ever worked with our 4matic SDK before you might know us from this sort of tap widget that you you kind of authentication to to either log yourselves in or to another down right but we've actually been working on a new product that we called the the white labeled SDK that allows you to own the user experience completely and to end and we're hoping that we can use that SDK to sort of drive this point home so rather than jump into the deep technical details of the smart contract it's really quite simple we'll make the code available but we just want to demo it so we've built this dashboard like experience that you might use as a HR professional to manage your payroll and the first step of any dashboard is you need to log in so let's do that sure okay so like I said the login solution is completely white labeled it's a single click sign-on and that locks the user and password lessly and just to clarify on the left side here we have an instance of the dashboard well would be logging into admin one on the right side we'll be logging into admin two so we have this modal that tells us to go check our email we're gonna be able to log in password Lesley with a link that the email sends us and once we click that we're logged in if we go back to the original tab now the modal is gone that's the last of our UI that you'll see the rest of the experience is completely inside of this dashboard so first that we're gonna deploy this payroll contract so behind the scenes I've gone ahead and included the contract api's as well as the PI code itself into the source code of the web app and hooked up the deployment of that smart contract of his button and for those of you who aren't as experienced with smart contracts the contract ABI is how web 3 Jas interprets the interface and allows you to interface with the contract the bytecode is what actually makes the EVM interpret your software and make it work so I'm just gonna go ahead and deploy this contract we have a transaction hash here we're gonna open it up on rincon on the rinkeby ether scan so that we can wait for it to complete there are a few unchanged transactions that we're going to have so if you guys have questions throughout please feel free yep so well yeah so we can see that the smart contract has been deployed but currently it has no funds so let's fund it yep so with that deployed contract address we've hard-coded our web 3 function here to just fund it with 2 eath so we're gonna let that transaction complete and we'll see that the contract has to Eve right so once this transaction finishes we'll see that our newly created smart contract has been funded wish we had the jeopardy theme yeah all right it's done this is refresh that page we should see to Ethan the contract fresh yeah so now my smart contract has been funded so now we're gonna try something else we're gonna log in to the other side of the dashboard this would be admin 2 so in our contract we require at least two consenting parties to pay out an employee so I'm gonna log in now with my email that same modal pops up asking me to check my email and I'm gonna open this link on my phone so I'm greeted with the same UI tells me I'm logging in and I'm logged in little goes away and again from here on out we're just inside of our dashboard UI there's no further modal's no further out external wallet UI that the developer has to worry about okay so the use case is we've deployed a this payment smart contract and funded it with tui and now en is going to try to approve a transact payroll transaction into this employee public address so we're gonna take this transaction hash and watch the transaction complete on rinkeby either scan and it should fail it's gonna fail for us here in a moment and this is a great example of why a smart contract is a great way to audit something like payroll is because the smart contract knows I'm not an admin I'm not allowed to consent to the payout but that can be changed and d8 David here is going to just make me an admin and then we'll try again and it should succeed so all David needs is my public address and since he deployed the contract he's already an administrator so he has the privilege to make me an administrator too so once this transaction finishes Ian will be made a admin in the smart contract wallet she's going to enable me to consent to a payout to an employee cool it went through so let's try that again again all right so we see that this transaction has succeeded but if we go back to our employee address we'll see that it still does not have any funding in it and this is another feature of the smart contract is that it requires multiple consenting parties to approve a transaction before the funds are deposited and since I'm already an admin I'm already approved to basically approve transactions and once we've both consented we'll see that 1/8 should be deposited into the employee account so we're gonna do that now on the first admin side [Music] okay so if i refresh this page I should see an eighth one either so that's a good example of why smart contracts are a great way to handle the type of official work that goes into HR and payroll and also why it's important to have an audit trail and transparency around those types of real world use cases but we also want to show you a more hardened product not just our small short and sweet demo called Ginoza safe so for those of you who are unfamiliar canosa's safe is a very popular smart contract wallet that supports social recovery gasless transactions counterfactual deployments and and all that good stuff I've but the issue with current Canosa safe is that it's encumbered by a lot of sort of external wallet user UI basically in order to connect I need to select from a list of wallet providers and you're taken to an external wallet UI yeah and you gotta kind of have to bounce back and forth between the wallet experience and your own experience the other yeah the other problem with this type of flow is that you're adding a lot of cognitive load to the user to understand wallets how to judge different wallets the merits of each pick a wallet login to it fund it and all of that work is happening outside of the developers control they don't control that UX and depending on the wallet the UX might be different might be better or worse and the users might be confused so if we can take that away it makes it much easier for the user right oh let's look at that same example with our white labelled SDK so I've taken the same yeah I made it okay cool so as you can see the the logging process has been streamlined with our white labeled SDK this modal that we show by the way is optional it contains the very bare minimum that you need to communicate the users what's going on but if you want to control that experience yourself you can present your own modal design it however you like cool so once I've indicated I can I will never see a wall at UI ever again and all Unchained transactions will just be made in the background so you're free to design your user experience however you want I can create a safe and again there's no pop up no wallet we're just operating inside of the experience that Ginoza safe has built for their users that they've optimized for their users to do the actions that they need to do inside of canosa's and you can see that the new safe has been created we can even dog food our own admin portal to fund this Canosa safe I'll show you very [Music] since we've hard-coded our contract just a fund with two 'if we should see two E's pop up in the Ginoza safe here in a moment oh yeah well ah yeah so that's our demo and we'd love to hear any questions you have any questions sorry I missed the beginning on on the intro I was curious on how did they get their 4matic idea that UX onboarding I missed in the beginning what's your D have it this is this is pretty seamless but what was your solution for for onboarding people who don't have any knowledge of this so let me clarify your question you're asking how do we get a 4matic account associated with the Ginoza safe implementation get that address so when you sign into an app for the first time if you don't already have one we'll create one for you and that will stay with you for that application so as well as this demo we have a bounty for anyone who implements 4matic in the white label API I think we have a couple different prizes different levels of prizes yeah a 1000 i top prize we have a fall a second-place 500 I prize and I believe it's 5 or 6 250 die pies 6 250 die prizes it's very easy to get started you just need to call the 4matic constructor and put it right into your web 3 instance so nothing has to change in your code implementation yeah I was just wondering a with when people entered the email address are they able to pull those email addresses that people signed up with down and push them to like MailChimp or something for to create a mailing list so we do offer an SDK endpoint that allows you to see the email address of the currently logged in user we are also working on this admin SDK that allows a developer to see a full list of sort of email addresses that have fed of integrator with you yeah yeah so if you're interested in getting started uh feel free to go to the formatting calm or talk self romantic comm if you want to skip right to the implementation and you know happy hacking [Music]