# Hermez: Building on Hermez with Javascript & Go SDKs with Jeff Prestes & Carlos Matallana

- Speakers: [Carlos Matallana](https://streameth.org/speakers/carlos-matallana)
- Channel: [ETH Warsaw](https://streameth.org/eth-warsaw)
- Date: 2021-10-07
- Duration: 1:00:50
- Watch: https://streameth.org/watch/yt-_7u64BmVp5I
- YouTube: https://www.youtube.com/watch?v=_7u64BmVp5I

## Description

BOUNTY LINKS:

Hermez Network:
https://gitcoin.co/issue/hermeznetwork/0xhack/1/100025692 https://gitcoin.co/issue/hermeznetwork/0xhack/2/100025700 https://gitcoin.co/issue/hermeznetwork/0xhack/3/100025693 https://gitcoin.co/issue/hermeznetwork/0xhack/4/100025694

## Transcript

uh hi hackers we're back and with me is carlos matayana from hermes network and i see that jeff prestas is also joining us and they are going to contact the workshop and tell you more about how to build on hermes hi carlos hi uh thank you all for being here um i'm going to present i'm going to perform a workshop and explain how to use hermes djs which is an sdk in order to interact with earmuffs network i'm going to share my screen yeah so the stage is yours okay can you see my screen yes let me check okay we'll press it again sorry okay this is the one okay um okay let's start and we're going to do four scripts with hermsjs in order to learn how to use it these four scripts will consist on setting the proper environment in order to use messages the second one will be to create a wallet the third one will be to make a deposit into the hermet network and the last one will be to do a layer 2 transfer okay in normal network um i assume here that you're a little bit familiar with node.js javascript and npm uh in order to do the workshop i already set up a few things uh previous to the workshop in order to save some time and as you can see here i just import path and which are common libraries use it in node.js i also installed the npm package of perms pjs you can find it here under the umbrella of element network and also since we are going to create some wallets and perform some deposits in ethereum and perform some transfers in layer 2 we need some private keys so in order to load those private keys we are going to use environment variables so i created these environment files in order to load them i will explain one by one those variables the first one is the ethereum node url you may have your own ethereum node in your home i think it's better that you have one but in case that you don't have one please go to infura and get some in your url in order to interact with ethereum the next one would be ethereum private key okay uh this is the freedom private key in order to load the ethereum address on in in order to create the wallet um we're going to define which token are we are going to perform the deposit and transfer uh as we will see later there are several tokens that you can use in urban network and one of them is ether so we are going to use ether and here there are just some configurations uh regarding the amounts that we're going to deposit and we're going to transfer and when we perform the layer 2 transfer when you perform a transfer normally there is the sender and the receiver and here we configure that receiver so this would be these six variables would be needed in order to perform the following scripts that i'm going to make [Music] okay first of all the first thing to do um when working with hermet ggs is to set up an environment okay in order to do that the first thing is load the and vitamin variables which is the ethereum node url okay after that we're going to check um which is the default environment okay for the for hermes djs okay and here as i said at the beginning i import the air materials package and there is inside a section which is the environment and you can get the current you can get the current environment okay okay let's see what is inside this current environment okay you can see here i just locked the ethereum node which is this uh we're going to perform our actions in in the testnet in drinking and the current environment the default environment in elements yes you can see there are some contracators for hermet and without the layer hermeth is the main contract to interact in order to perform deposits and then without the layer i'm not going into the details here but it's in order to perform some exits from the for the lmf network and then we have three more variables with the base ap url url batch explorer and letter scan and the default configuration are set by localhost and e3scan and what we want now is to switch the environment into the environment that we want okay and which environment do we want well it does depend on the provider that we have okay here we have the provider base it on drinkaby and rinkeby has a chain id uh of uh the generator of rinkeby's four okay the chain id of mainnet is one the chain id of girly s5 so with just getting the 1080 from the provider and setting the environment with the chain id it's enough to set up the whole advantages environment simple as that okay um we can do that because uh inside hermesjs and i will show some code here already has a hard-coded all the necessary data in order to work in this change okay in mainnet and rinkeby okay we have the explorer we have the etherscan urls the public base api which is the coordinator url the contracts and so on okay so in order to check that we have currently set up the environment we're going to watch it we're going to set the environment okay through the genet and we're going to get again the current environment okay and we're going to check the change in the environment variables okay we can see here uh the environment for chain id the environment for chain id4 has been set up in armagedds with the correct hermeth smart contract address the withdrawal of the layers smart control cadres the coordinator url which is the base api url batch explorer and the ferroscope okay at the very end is just about three lines of code to set up the environment that you are going to work okay and i'm going to set up one more thing here it's also important which is the provider okay and in order to create wallet in order to perform deposits in order to perform some kind of action than that needs um an ethereum node um you can set it manually or you can set a global variable in nurmages which would be the provider okay um this will save time afterwards in all the scripts because you don't have to put again and again again the the provider if we just set it just once at the very beginning so here i'm i'm setting the provider with the one that i load from the environment variables okay and this is um how we set the environment in elementary schools okay and now let's move forward and see how to create a wallet okay um at the very beginning of the script i'm going to just copy paste the code that i used in the previous script okay just wrote some environment variables in this case i also load the private key which we will use in order to create a wallet i also load uh i set up the environment as you can see there are just four line of codes and it's really easy to do that and one what we're going to do now is to create a wallet okay we have two different wallets in hermes network there is one wall it is the standard wallet and there is another one which is the internal wallet okay the standard wallet uses ethereum address and baby subject address if your mother is for layer one and baby address is for layer two and the internal and internal wallet uh it does only have baby jab jab i'm not going into the details here because the common wall to use will be the standard one which is which uses ethereum address and baby javier padres okay as you can see here which data do we need in order to create a wall so in our case we build what we call it as assignment because in efforts you also work with signers and we just we could use the same work here because designer is the type of wallet that you are going to load since metags is used also on on on front-end side on web apps and you can load signers from private key or you can load signups from from providers such as metamask ledger and so on in that case in when we do an script we perform manuscript the common use case is to load the wallet with the private key in our case we are going to load the wallet with our ethereum private key okay and we build that signer object so armadjs provides a method which is inside the section of ernest wallet which is create wallet from ether account and then we need to provide the ethereum url and the signer which contains the private key just with that we create the element wallet okay we create the from the ethereum private key we create the baby jab jab private key internally and then this wallet could sign message in layer 2 with the baby jab jab of course the wallet does this for you you can check the code internally i will show you if you are interested okay create wallet from mr account um you just you will just sign the here is the code how to derive the baby jab jab private key from the ethereum private key if you're interested please ask questions about it i'm not going into details here but this is important to to notice and here we are creating the the wallet from from ether this uh will return you the mesothelioma address and their methodology their wallet indeed so uh we are taking here their wallet itself and what we're going to do now is to check all the variables that are inside when i say variables i mean um all the properties that are inside dartmouth wallet of course there is a property which is inside there my wallet which is the private key and i'm not going to show that because otherwise you will have my okay and okay let's see what's hinted here nothing is printed okay then we created the earmath wallet and here we can see uh different um properties of the world okay as you can see you can see the public key in different formats okay this is the raw public key and when we say public key we refer to the baby jab jab a key which is the key used for layer 2 transactions and this format here is just the baby job elective cure point uh in its draw in its in this is expressed in x-coordinate and y-coordinate coordinate this is expressed in its compressed way this expression is compressed in hexadecimal and in base 64. and the last property that i wanted to show is the airmeth ethereum address as you can see the methyl romadres is your refilling madras prefixed by f in order to differentiate with ethereum address and as you can see from user's perspective we will use the baby jab jab coded in bay 64 encoding okay and this is done in order to differentiate baby jack from ethereum address okay okay um we have just created a wallet from ethereum account um this method to create wallet is the same method use it in our web app okay exactly the same and the very last thing to do in this script of creating a wallet what we are going to do is to create an account of fertilization okay i'm going to explain why this is important first okay here okay in order there is a different ways to to create an account okay we already have our wallet but in order to create an account inside the ruler uh there is two ways in order to do that the first one is to perform a deposit and we will do that afterwards and the second one is to receive some transfer in layer two okay if you are the receiver on soft of some transfer inside dermat network um an account will be created for you okay so um in order to do that okay in order the coordinator could create a wallet i an account for you and in order to do that and we need to create a message okay and send it to the coordinator okay let me check just one thing okay sorry and here i'm going to run this script again and see that the coordinator doesn't have um our message of for creating an account okay as you can see here there is no account message for our hermet ethereum address so what we are going to do is now to set to create this account authoritative message message and send it to the coordinator okay in order to do that i'm going to explain uh these lines of code in order to do that we are going to create this account authoritation message which is a signature okay and then we are going to send through http this signature to the coordinator okay through this method pause create account authorization okay this method meets that your messages your address your baby jab jab public key and of course the signal okay so we're going to send this message to the coordinator and this message the utility of this message is to when you receive some tokens in airmen and you don't have already an account this account will be created for you so let's run the script and see if the message has been centered well to the coordinator as we can see here status okay status text okay um okay so let's check no let's check if this uh message has been sent well let's run the script again and then when we call this gate create authorization which is asking mainly the coordinator if it has already the message and well the answer now now the coordinator will have the message as we can see here for the f for this method theorem address has already an account authorization perfect so let's move forward to the next action which will be the deposit this is an important one of course the deposit will create an account for you in the roll up okay in order to do that i'm going to again copy paste some previous code that they did just in order to save time here basically with this just 10 lines of code i have just set up the environment i and i have just created the error meth wallet okay so this 10 line of code are the summary of the set environment and create one of the scripts okay and here we are going to load more environment variables which are the token symbol and the amount deposit and the first thing that i want to show now is because at the very beginning i said there could be some tokens uh inside hermes so what we're going to see here is to get some information from the coordinator in order to see which tokens are available on hermet okay and in order to do that i have just i just query the coordinator with the get tokens function and then here i will get all the tokens that are available inside them [Music] okay we can see here okay there is a list of tokens the first one is ether with their symbol decimals usd value um ermest token companiosity swap chain link of course this is a wrinkly but in mainnet we have more tokens in order that you can create an account for those tokens inside network and just to clean up a little with the code i have just these all these tokens i have just filtered these tokens to match the token symbol that we have set it up in the in the environment okay so finally we just have the token information regarding the token simple that we want in that case would be ether let's run the script to see if it works properly if it displays just only the ether informations perfect and the question now is which data we are missing in order to perform a deposit and of course that data one of the most important data to perform on deposit is the amount how much we are going to deposit into earnings and this amount has some particularity which is that we use our own code and code format okay and we call it this format aerometh compressed amount okay again you can check the error method compressed amount code inside msjs we are not going into the details here but basically it has a fixed bit size format which is 40 bits it's based on the floating standard floating point coding code but with a little bit uh changes over there and the question is why we use our own format it's because it's 40 bits and as you may know on on the crypto space most of the token has 18 decimals so in order how many bits do you need in order to code a really large begin so you probably need maybe 60 70 80 bits so in that case we save a lot of space and we save a lot of data okay in order to do that uh it's really easy just in sight and message yes we have prepared some functions in order to do this encoding code of the amount but what i'm going to do here is just convert the amount deposit okay which is a string basically it's a just a string and i will add the decimals of the token in that case is ether which is 18 decimal we're going to see here for the sake of clarity i will put it in in native [Music] and we're going to also show how the amount compressor looks like okay you can see that the quantity that we want to deposit on hermet will be exactly this 0.042 ether and his equivalent in uh in element compress amount will be well this value here okay i will remove those consoles okay and the last thing to do of course would be to perform a deposit okay we have all the necessary data in order to perform a deposit so we are going to perform one in order to do that msgs provide just a transaction section which has a deposit and basically the data that we need to provide okay is that how much are we going to deposit into hermes which is which is our air methodium address the token information as you can see here this is the baby tab job compressed in hexadecimal because we only use the hexadecimal uh baby jab jab to interact with the smart contract because it's cheapest because we don't need to compare to base64 inside solidity and of course we need to provide the sign which contains the private key okay um i want to put focus on the deposit is an interaction with the hermet smart contract okay that's why we need the signer that's why we need the ethereum private key okay and behind element.js we use the library ethers it's a very well known library in the ethereum ecosystem and this library when you perform some transactions to the smart contract it returns you the transaction object we can say which contains the transaction hash and in order to wait for the transaction to be mined we can use the weight function here and then we will get the the receipt so let's execute and let's perform a deposit in in nurmet of course it will take a little bit because the transaction needs to be minute on the video i guess that in drinking wee it will remind it quite soon well okay it's already mined but because uh we have the receive there is the transaction received over there and you may wonder that okay this is beautiful but it may not you need more things to do because you need to take care of gas limits and gas prices so i will show you very briefly how this deposit looks like okay there are an optional parameters inside the the in the deposit function okay that we didn't i didn't use it here because we are in drinkability but if you are in mainnet you may want to set up your own gas limit and your own gas multiplier okay that's very important when working on mainnet okay and gas multiplier means a multiplier of the standard gas price okay so if you want to accelerate your transaction you will set up a gas multiplier of two maybe three if you want to use the standard gas price and you will set up cash multiplier one if you want a very low to use a pretty low gas price you will set up at 0.5 for example okay perfect so we have just performed a deposit into roll rolap and the deposit will create an account in the relapse for us okay and in order once you perform the deposit which is an ethereum transaction until this deposit is processed an account is created for you and you need to wait a few minutes okay why is that because the coordinator needs to forge batches in order to create your account okay and i have done this same deposit yesterday with another account so i will switch now because we don't want to wait here a lot of time so i will switch to an account that i already have uh [Music] an account deposit created inside the lab in order to move forward for the transfer okay in order to perform a transfer of course you need an account created on the lab and this is what we are going to do right now as i did in the in the deposit script i'm going to copy paste the code that we use in the deposit script as well okay just load environment vial and environment variables set up environment provider and create wallet perfect so one one thing that is important to mention for layer 2 transactions okay hermes djs provides uh an ability to track these transactions in what we call a transaction pool okay so from the client perspective from the user's perspective we have a transaction pool locally which track which is the transaction that you have performed which is which are the transactions that have already been processed which are the pending ones and this is mainly to set up the nones of the transactions automatically okay if you don't want to care about the nons when performing a layer 2 transaction you just have to initialize the transaction pool and that's it you don't need to do anything else um just to give you an example like metamask handle these nons for you okay you perform a transaction the transaction spending and if you perform another transaction the second transaction will have uh non-incremented by one okay this is a logic uh inside the metamask so this kind of logic we implemented as well in element.js we provide this ability and in order to use it you need to initialize the transaction pool first okay i will just copy paste again because the code is almost the same as we used previously in the deposit here we just set up again the token to be transferred and the setup the amount to be transferred between accounts okay and what we are going to do now as i mentioned previously in order to perform a layer 2 transaction you need to know which account do you have inside the roll up okay so what i'm going to show here is how to retrieve that data because you may know your ethereum address and that's it but you may not know your account internally in the lab so in order to retrieve those information it's as simple as that just ask the coordinator okay about which accounts does this ethereum address has okay and let's print that information um answer okay as we can see here um as i mentioned previously this is an account that i made some deposits yesterday there is one field important field here which is the account index okay this account index is the account that identifies you uniquely inside the lab okay and this account index is f ethereum and this number okay it is 369. perfect so it's very important because one ethereum address could have a lot a lot of accounts okay one of the three madras could have an account in ether which is the account that i have here but also i could have another account with uni with hermeth with usdt and so on okay so what i'm going to do now is again just for clarity just for clarity to filter those accounts into the one that we are going to use which is the account with ether and i'm going to show the information as well perfect okay that's we just filter all the accounts into the one that we want by the token symbol then the question now is which data do we need in order to perform a layer 2 transaction so basically not just the neural network in probably in all the blockchains you just need the sender from the receiver to the amount that you want to send and um the fee that you want to send okay so here we have the from which i will take from the account information here we have the receiver okay which is an ethereum address our air methyl address okay that i set up in the environment files we already have the amount compressed in order to be sent so the missing the missing uh variable here is the fee okay and what we're going to do is to compute the fee that we're going to use in order to do that uh we're going to ask the coordinator which fee is the recommended fee okay as it works with uh the video um if you put a very low fee your transaction okay will will last a lot of minutes in order to be mined and if you put one thousand dollars your transaction will be managed instantly in hermet network it happens the same okay but we're lucky because we can ask the coordinator which is the recommended fee okay and here i'm just computing the fee in in ethereum how much ethereum do we need in order to send the l2 transactions i'm going to execute that in order to see how many fee do i need to pay okay in that case the necessary fee in order to send a transaction into the coordinator and be processed almost instantly will be 0.000 14 and so on so we have the last missing parameter here so what we are going to do now is to generate and send and layer to transaction okay and as i mentioned previously this uh which fields do we need in order to perform this transaction is the from this is the account index that mentioned previously which will be the receiver which is the parameter that i set up in the environment file the amount and the feed and that's it okay this is a very simple layer two transaction of course there are more complex fields inside the layer 2 transaction but the most simple transaction will be this one and here we are just sending the transaction to the coordinator and we just pass the trans the transaction object we need to provide their meth wallet because this transaction is in layer 2 so we need to sign it with the baby jab jab private key which is inside the helmet wallet and the token information and okay let's send the transaction to the coordinator and see the response okay so the transaction has been sent correctly to the coordinator the transaction is in the coordinator pool uh the coordinator sends us that he has received the transaction correctly and here it's important to notice this id okay here which is the transaction id okay it's similar to the transaction hashing in the theory i mean you can take this transaction id go to the batch explorer that we have for testnet and check it over there how the transaction is going okay if it's spending if it's forget forging and so on and the that would be all that will be the fourth steps to use ernest ggs um if there are more more utilities and capabilities of of element.js this is just a very basic usage of hermetjs if you have any question please ask at the end of this workshop or we are in discord you can ask over there and now i'm going to stop to my presentation my workshop and then jeff will continue to some examples but rather of using javascript and normal djs he will use a go language in order to perform those examples thank you you very much carlos for the all the explanations i think carlos was very uh was excellent did an excellent job explaining all details all the steps for uh how to use hermes however before to get started with go i would like to ask to the attendees except from mario and others uh any others my my teammate from hermes uh if is there any goal developer in the audience if you could say a message in our chat just to to know our all other attendees are javascript developers torsion just started with golem okay i think only only thurston is the okay oh great okay so uh so i first think i will be happy you know to show us an example where i've created let me i'm gonna share my screen uh just a second see how i do this share screen okay are you could you say if you are able to see my screen yes thank you carlos so uh i'm gonna write down here uh the example i just published in my github just i go [Music] so you guys can see the code i've created some examples is is here uh because in order to save time i will i have created the script and publishing github this way any any one of you not only torsten but other developers can go there and see some examples i dare to call it an sdk but to be honest to all of you this is not an sdk yet i actually is a collection of examples right and uh as i have participated over several hackathons before what i did here is an example that you can you know very dirty a hackathon style code you know just you to have the so because in general hackathon we don't have much time to code so we make the get things done so that's where you're gonna see here that basically as the protocol is the same is much much in terms of the process it's much much closer to what cardozo have explained it so the first you need to okay also carlos has shared his example in uh in our chat here so i will maybe the screen is recorded so i'm gonna i'm gonna share the the cardo's code as well uh oh my goodness a lot of screens here okay there we go so carlos carlos code is here so later i will a good example great color so later you create a 0x hack maybe dash go maybe you put the publish here to the our our examples so so anyway you that are javascript developer you can use the colors examples but if you are go developer you can use here some examples in this github repository basically what what you should do first of all you need to you need to have and okay so first you need to have you need to connect to ms to ms ms's smart contract in here in go so what do we use i create an example like a rms client in this arms client you include here your custom ethereum client so carlos has used in fura but i have my own uh a video note but here you can put the your in through in future credentials you define here then using geth so uh go with freedom client that you can find here is official official client so we use the same library of ethereum then we start and now so here i is is hard coded but you can get from the from the cards example the if the ethereum address of hermes contract okay the rms roll up contract so you can get the information when you're from here you get the coordinators addresses that carlos have mentioned in his in his presentation so and here i also added a http client to the to this this airmis client then we can use in our example here so now we know what is the boot the the the coordinator we can send the transactions and also we are connected to hermes contracts here so so you see here is a method that you can get the boot coordinator and other uh other information then we start here and at the par the the party that we need to create or at least to get the account the accounts data so as um as cuddles have uh have mentioned it so using the same library that go after use you put the your private key you generate from the private key your public ethereum public key and your your ethereal address and from it uh here you can have the the the message that you need to sign here in a line in 82 in order to what in order to create your baby jab jab private key as we can see here so i here i have opened the the box uh the in the javascript the the scanners have shown the the these steps are encapsulated so here you go i just open it up so of course you can uh you can encapsulate in a method to do to do it for you just i have open and here just you know the details the how to create how is an uh hermes account is created so after you have your private key then you can you can uh this function here generates uh a baby jab jab account for you as kalos has shown so there are few steps you can you do in order to compress and later encode the the the account and account name in base is 64 format in order to be to be used uh by the users and here is the ass prefix uh that differentiated the iams accounts from a standard ethereum account or any other blockchain okay so getting back here and with that we have here uh and for a step that gets the from the the coordinator you get the your account information so as i already have the affiliate account the the phillium public account we you can call this method account get account info what it does is basically what the what card is having mentioned it it goes to this end point and queries there it case that so for instance if you want to know all the details of our api you can visit api.hermes.network you can see here uh a very detailed very detailed ms network api so so here you have a very good explanation how to call uh what information you're going to receive from our endpoints okay so with this after get the uh our the account information you now you can see here a code that you can get the compare if the others you have locally is the same of the address that you get from the server and here we create our baby jab jab wallet as carlos have described it and a few few minutes ago so you have the baby jump jump private key your public key your baby jab jab address and also your athenian address then now we this section we go to the part of the token transfers so in matter of time i will skip the part from create account so in this example the the airms accounts are already created okay so in order to process the l2 transfers so the we create a variable here say which item do you want to transfer so i want to transfer air miss tokens so i got so i when i pull the account information from the the from the coordinator it gave me details from from uh ms account so i can have several ms accounts so one account for amy stoke is another for eighth year another for usdc for example so in this four we get the account details specifically for the ms talking account just a matter of understanding just you to know what i'm talking about so here i have an example so you can see here i don't you have the account account for instance is an array so i have a two account two account details one for hermes another one for ether so in this uh in this specifically piece of code i get the account details from the from the foreign account for armies they are defined the the the the the account index the the account number of my recipient i define the amount is uh in go is just a big hint i fill up the uh this pull out to strict that is the same extract that we use in hermes hermes node in our coordinator software so this is the the the destination the recipient the recipient account in in ethereum format i this is the part that it was impossible i signed the transaction so i use the babe jab jab private key inside the transaction i include the signature and the request and the here i measure i generated the json file and here you can see i had the actual coordinator so this i create a url that i'm going to to to to post to the transaction so here is just another um here's another https uh sorry http post request method in go so for you is if you are a go user you're very familiar with this section nothing new here then you're here you you get the receipt of the receipt of the transaction so let's try to to run this of course wish me luck because you know as is any demo you know so we need to look to see if it it runs i in just a matter of to help you that you're going to receive i included a lot of logs you know to be clear what the the the example is doing step by step okay so this is the good part you see the item already existed because i already sent this transaction before to to this person uh and for the same signature so let's change here the value i'm gonna put the another number here nine okay i'm gonna save it let's read it again so why it takes a little bit because it's connecting to the feeding network in this case i'm going to use the in my case it's going worley the athenian test network so for it to get the the data from the smart contract from the smart contact i go to the coordinator so that's why it takes a little bit longer so let's see this is the transaction id and as you we as we can see here oh let me add it here okay we can pull the information from the our transaction pool so we have here uh there's actual pull endpoint i paste here so i can see here the the details of the transaction that is waiting for it be forget in our network so as we is as we are running out of time so i would like to thank you for for watching our presentation and uh i would like to open for your questions thank you very much so uh maybe torstein or any other attendee if you wanted to ask a question in the our our chat feel free to do so okay so i think uh carlos have done a very good job explaining it gave a very good explanation so no questions i think the the everything is clear of course uh carlos i are now and other another uh arms team members are in we are in uh in the discord channel inanimas in uh the events channel and uh there's a group called hermes so you can anytime you want you can write a message over there and ask us questions uh yeah thanks a lot guys for the workshop and as jeff mentioned we'll be hanging out at discord and we can answer any questions but you might have most of the people will probably watch this recording on youtube so if you have any questions you'll find the link in the descriptions to our discord where we'll be waiting for you uh thanks a lot jeff thanks a lot carlos and yeah we'll see you on discord see you there bye bye see you thank you all bye