Connect your dApp to a hardware

Transcript

[Music] foreign so thanks for joining us today we will present you a little workshop on how to connect a ledger device to a web application so I will quickly introduce you to the different ways of doing it and then we will have a live demo with Kevin and I will go around the room to help you if you need to and we will even provide some Ledger devices in order to run the workshop if you don't have one

if you have yours you can get it get it out and get ready so first as you know we have two Flagship devices the Nano X and the Nano s and Nano S Plus which is just a new version of the Nano s the Nano X as Bluetooth capacity and Nano S and S Plus only USB so basically um when you want to integrate your web app or your desktop app with Ledger you will need to choose a transport method for web apps we have three available options

web hid web USB and web Bluetooth it's worth mentioning that Firefox doesn't support web hiding web USB anymore if you want to do a mobile application we won't be doing it today but it's react native hid and react native Bluetooth libraries they're also there and for the desktop app it's not GS only so not a not a chid and so we will get a small live cutting demo so we will use vit s so Kevin hello everybody leave you the

floor so yeah the goal will be just to show how quickly you can interact with the Nano if you want there is no need I know sometimes you might think that you need some adapters and everything that can be provided by libraries like ethers or or some other things but if you directly want to interact with the Nano from your dap from whatever you're building your wallet or whatever you can already do it very quickly and there is no need for something specific of course if you want to have a better ux um sometimes you will have to write your own code just to make sure that the Nano is in the right State and everything

just to be able to know when when you can launch it and what actually is the the user already doing but for some very quick example you should see that you don't need much to to get started and to get support for for your Nano right away uh okay so we're just going to start by creating a small web project and it's going to be using vid just because it's a bit quick to uh to it's a quick boilerplate to have um so yeah let's start with that [Music] okay so I can just start creating a

project doesn't really matter uh oh it's called HCC I'm going to do a react project because probably if you're a front-end Dev most of the time you're going to work with react uh or actually that's the probably the most common one we're going to do JavaScript just to make it simple I can now go into my uh project and I just gonna need to install a few more libraries so the first one is going to be of course this is going to be an example with ethereum but you can imagine using that with absolutely any Nano app that we have so we're going to install the HW Dash app dash eth which is what we call the app binding and up binding

is literally just a one-one relationship that you can have a one-one interface that you can have with with uh with the Nano app making sure that you can you can just ask the very basic method and and you don't have to understand how it's communicating you don't need to understand much just use the very simple interface that is already in it and we're going to add a few transport layers so I'm going to install a web ble so you can see that it's working with Bluetooth at some point but first we're going to use uh web USB so you just install web USB as a transport and that's going to be provided to the app binding that we installed first so you can just have a very simple interaction

you don't need to think about it again it's just going to instantiate a transporter at some point everything is handled for you you just have to provide it to to their binding and it's going to do everything by itself and I'm going to install ethers I'm just using version 5 for because I'm just more used to do it with it you can install six if you want and buffer because work in a browser context and and at some point we're going to need to to create some some extra strings and it's going to be easier with the buffer with with buffer installed and yeah light precision I'm using the version

6.6.33 for The Binding just because we discovered a bug this morning with power cell Nvidia yes because bundling but yeah don't use the 6.34 right now if you want to use vid it's not going to work for just bundling reasons but anyway let's just install that uh should be pretty quick and once you have that you're basically good to go to do uh all the rest of the workshop hopefully the Wi-Fi is good with us and I have that quickly looks like it it's good maybe not that good

okay um okay so I'm already in a project so now with vid it's pretty easy to run I'll just do npm run Dev and it should provide me a very simple very simple website that I can work on okay so already with that uh okay now nope that's that's my cheating note um we can just open vs code and oop you can see that uh okay let's remove that I can remove everything that I won't use

up I don't need the counter as well I'm just going to import react just in case and we should have a something empty but still usable on that part good so that's the boil date right what I want now is to show you the different things that you can do with the Nano so generally you don't need much uh with that the first thing that you want to do is get an address right that's the first thing that you want to get you want to see if your user is connected and and just to make sure that it is you want to show him his address so to make sure that it's using the right account and

everything so you don't have metamask here you cannot just hope that that you have some provider injected that is going to do the work for you so you need to interact directly with the with the device uh yeah first thing first because again you're working with vit um you will just have to insert a very ugly pulley feeling right here or it's not a policy it's just right away till you have buffer available because at some point we're going to use it I'm just going to paste it here it's it's gonna take just five seconds but don't really mind that that doesn't really matter oh okay so that's just a quick way to have

buffer available uh right away anywhere in the app without you having to really think about it okay let's start so I'm going to need uh to create a button and that button is going to just once you click it it's going to return the address so very simple thing to do okay so now I will just have to create a method that is capable of asking it somewhere and just store the results to be able to display it again pretty simple I'm just going to do the react

part first so you can just skip that if you don't really care and we'll discuss right after about the interaction that you're going to do in the Nano oh all right okay so I have the boilerplate for

everything I just need to say that on click I'm going to use the get address uh and now I just need to import uh two of the libs that we're discussing at the at the beginning when I was talking about the the dependencies so the first one is what I call the up binding so direct connection that you can have with with the Nano but also the transport that I want to use so let's import that okay now I just need to instantiate

everything uh of course we have some a single weight that we'll need uh I will just create the transport first okay and I'm just going to say I think it's transport create if I'm not mistaken okay and now oh maybe uh okay I don't know if it's oh it's a promise so just need to await that to wait that and then I'm gonna use

um I'm gonna create I'm just going to rename it with something else uh yep he typing with one hand is hard so I'm going to have an upbinding which is going to be also going to wait um no sorry it's going to be a new eth app where you provide the transport and you have basically everything you need just by doing that as soon as gonna I'm gonna click you're going to have Chrome

asking you do you want to connect to this USB device blah blah blah blah and if I was using a ble a Bluetooth it would just ask me exactly the same thing pair my device and everything so not much to do now I just need to interact with it and say yeah give me the address for uh some very specific derivation path that I want to use um and I'm going to get it from my cheat sheet up because I don't want to mess it up um and yeah I can just say now that I want to do I want to use the binding and use the get address method with

the derivation pass that I was using just before and I'm going to save it with the setter that I just before and if I didn't do anything wrong we should already be good just for that let's try and is my Nano connected it's not that's the wrong Nano thanks

so I was as I was saying you don't really know in which state the Nano is when you want to interact with it here I'm assuming that you either explain to the user that he has to open the ether map on on the device but you can also there is uh it's not available yet in a very nice state but we have something in preparation called the devices Decay that is going to help you uh just move the user from the dashboard the place where you have all your apps to a very specific app and verifying that it does everything correctly so you don't have to do it manually but some some very good wallets like Kepler is already doing that work so it's already doable without uh without all of that so I'm

just going to open the the Nano app and you can already see that I have my Nanos plus right away that is available so I can just say yes connect and of course I broke something because that wouldn't be uh that would be nice otherwise oh yeah I know what it's not returning exactly that it's returning yes it's returning an object let me just change that quickly nope

okay now it should work all right so very quickly I was able without doing anything you don't have to do any magic you can just you just have to provide the right transport provide it to the to the the instance of the The Binding that you have and it's doing all the work for you now let's see if I can sign something like sign a message I don't want to assign something too complicated I just want to verify like if I was connecting on on open CER whatever platform you want to verify the user you can already do that directly with the Nano app [Music] and okay so oh not really readable okay

so I'm just going to do exactly the same bowler plate as I was doing before uh this is going to be a copy paste basically hopefully you can still hear what I'm saying yep so basically just making the sign button yep and it's going to call the derivation

pass and that's it nope okay so I'm uh okay I need to import buffer because in the wheat context it's not happy with it just import it no you don't want to okay I'm gonna do it manually then okay um and I just have to set the message

with the result and you will have something like the value of r and the value of s and the value of V which is a number so you need to parse it manually uh and we should be good should be a set message signature here and last copy paste and I think we should be good so I created a very simple message it would be a the signature of an eip191 in this case so the kind of thing that you you're always doing Without Really

knowing why just you authenticate on many dabs today and if I click on sign a message of course you cannot see it because you're too far but on my device right now I have exactly the same thing being being written hello from SEC and I can sign it and yes I already got the signature from from that so now if we want to just verify that it's working correctly I'm not going to type it directly I'm just going to copy paste from from from the the other project that I made but you have a very simple way of doing an easy recovery just to make sure that that the the address is correct and you

can verify that the message was good so its name verified address not recovered but it's the same yep let me verify that everything oh nope

that was not the right message um it's splitting the signature that we had before with ethers you can just keep RS and V if you prefer doesn't really change anything and I'm using the the method provided by ethers just to use the verified message so again oh nope missed something yeah what did I not close I'm probably missing a div somewhere yes yes

okay let's try again so I have exactly the same address I had before I'm just going to sign my message and when I'm gonna click verify my message is supposed to take exactly the same signature do an easy recover it's going to provide the public key and the public key is then transforming to an address so you get to verify if it's fitting with the with the signature and it didn't work so I broke something again ethers is not defined yes copy pasting is bad doing all over again

signing remove that and verify and the address is the same so if you were to create a notification a notification for for your depth that's very easy you don't really need again metamask core or everything to do it for you you can just do it right away you don't need to wait for your support of any any wallet so that's for assigned personal message so for 191 we also have two different methods if you want to verify EAP 712 one which is uh what we call blind signs so you don't really know what you're assigning it's just you know some buffers that at the end of the day

that you're signing you don't really know what we have but there is also another method that is really just taking as an input the full message and Ledger is providing some services for Clear signing so it's Ledger is going to sign some payloads that we are going to provide to the Nano so we can verify uh specifically that the structure of the data it's going to be capable of renaming some some fields and and you're going to have something that is actually readable by a human and not with 10 000 clicks with an EAP 712 if you want so that's also possible you can find everything on the dev

portal if if that's something that you're interested about um but yeah very simple again you were able to sign that now uh we were talking I was discussing about um about clear signing uh let's see for transaction uh because signing a message is cool but generally that's not the only one that's not the only thing that you want to do you also want to do uh signing uh very basic transactions and most of the time the value of the Nano is to provide you more information that and verifiable information on the device specifically for tokens nfts etc etc so I'm gonna give a very quick example again where I'm going to show you that

everything on the Nano can be very uh the creating a near C20 token transaction transfer uh it's going to be very quick and on the Nano if you're doing that with yours as well uh either at home or or here you should be able to have every everything written clearly on the Nano saying yes you are trying to transfer usdc this is the exact amount we already know the decimals we already know everything that we need to know to make sure that once you're reaching the signature and you're validating it everything that you saw was uh what you were signing uh directly contrary to a Big Blob of data and generally you don't

really know what you're doing this is more information that can be provided to your users so it's actually way better uh experience for them making sure that when they are trying to transfer your nft your token and everything they will know for sure that nobody tampered with the data at some point the gold data is the the right one it is the the right contract and everything that that's a very important step and we're gonna do it again very quickly uh to to just show you how easy it can be yeah so I'm going to take a very simple

transaction that I already prepared because I don't talk call data natively uh but yeah it should be a very simple transaction for usdc at this point foreign

with the right nouns and everything then you just would have to broadcast it for it to be valid you don't risk anything by signing here because you are not broadcasting anything and my nouns is incorrect everything is incorrect cost price is not good so even if you want to try you don't risk anything you don't even need to be on on test net just to do that as long as you don't broadcast uh the signature and and you don't integrate it into um into the real transaction serialize it and everything nothing is going to happen just don't show it to anyone if if you don't want to have bad surprises [Music]

okay so I have everything I need I think uh so we also will have that as a dependency right now I need to now discuss with the binding and you can use a new method that we add uh that we added just not so long ago that is doing everything at once usually you were forced to have two different methods the first one were was calling The Ledger Services it's not a great name but but that that is vague enough so it can contain everything but the goal of this call was generally to contextualize uh your your uh your transaction so it's very difficult from from just a

serialized transaction to understand what it's doing exactly and the goal of this goal is to look through a bunch of of um of backends basically where we pre-signed as Ledger some some data that you can be that will be verified on the Nano directly uh through the the private through the public key sorry that is inside of the Nano uh that ledger is sign exactly yes this is the contract for usdc this is the parameters etc etc so we are providing a bunch of stuff uh in advance so at this point the only thing that you need is to make sure that okay I will verify that uh the recipient is is the usdc contract and if

so I will check the the selector of my cold data to make sure that yes uh this is exactly what you were doing you are doing a transfer of usdc uh and and I can provide that information to the Nano right away now you have uh all-in-one method that is called clear sign transaction where you can just provide the serialized data already and it's going to do the work for you [Music] okay so not much more information to

provide like you can see I need the duration path so we already have that the variable derivation path my string as an X as an extra string okay so I'm just going to provide that I think ethers is always prefixing with the ox and we don't need that so we're just going to remove the two First characters foreign and then I need to provide a resolution config so it's just if you have uh the information already of yes I know that on my dab the only thing that I'm doing is uh ERC transfer you don't need to try to contextualize a transaction for

being maybe an nft transfer maybe an interaction with a specific depth that we also could assign etc etc so you can already already say yes I know that it's only you only need to verify if it's an erc20 transaction and that's the only thing that I will want to close down at this point so it's just a very simple object yep where I can just say please try to verify if it's and you're 20 transfer and we should be good and then I can do exactly the same thing as I was doing right here concatenating all the signatures

oh nope set set this and my last copy paste yep and I call that Percy signature okay and if I didn't mess up like the

three times before that should be asking me n minor just locked itself so I need to unlock it first and now and like I was saying this before you cannot see it because it's very small but I have way more information on my Nano right now it's showing usdc 0.0001 I know that it's a transfer because it's telling me the address that I'm sending it to so the real recipient not not the contract address I know the fees I set a gas price to zero so max V

will be zero as well and I can just accept it and if I accept I now have the signature already there so it's again no you don't need to reinvent anything everything is already provided through the app binding and and you can already just um use it right away with probably better ux than if you were using metamask I know people are more used to to to use it because sometimes it's it's you know it feels like like a safe space uh but you can actually provide more than than metamask is doing because metamask is not up to date most of the time with with this Library um and the end result is that you only get half of the feature that we are

adding um I don't know if we have more time nope we don't have more time so you could also do the same thing with nft transfer we we are capable of doing exactly the same thing the only thing that you would have to change uh here is just say yes this should be nft you can provide Everything at Once if you don't know because most of the dapping and wallets don't know exactly the context they're they're having so you can just pick whatever you want and we are also providing very soon it's already available in the live but you should be able to use it right away that if if you are smart enough but we also have the support for domains so we're already capable of assigning ens with

that only for now only for normal transfers or coin transfer ether transfer and erc20 not for nfts but for everything else it's already available and that's it and that's it thank you so much Kevin [Applause] [Music] [Music]