Introduction to Ethers.js Playground - Richard Moore (Ricmoo) - [Toronto Ethereum Developers Meetup]

Transcript

perfect yeah okay so rick moo is a dear friend of chain safe he's an og in the toronto ethereum scene he's an avid attendee at the edmtos he last presented here in march he gave a talk on a nifty little gadget called sprinkles on a t which lets you physically display a piece of artwork um i invite everyone to go check out that talk from our youtube especially as we get deeper into nft mania as you heard us talk about earlier in this conversation that's besides the point so many developers in the space when they first onboard into the ecosystem and begin you know exploring around the different tools building the first dapps and just getting familiar with the ecosystem they usually start with one or two mainstay libraries web3js which chainsafe helps maintain

and ethos.js and wouldn't you know it rick moo is a mastermind behind ether's js a complete and compact library for interacting with the ethereum blockchain and its ecosystem evidently rick moore recently launched a new landing page for ether's js as a place to curate all of its tools projects and spotlight anyone that has helped make it all possible so in conjunction with that he developed ether's playground a tool he will be introducing us to today and is meant as a simple gateway for developers to play around with the ethers api so without further ado rick take it away i'll stop my sharing screen and your co-host so you should have permissions thank you so much

by the way if anybody's got projects built on ethers um shoot me an email we can add you to the ethers um how do i full screen this is full screen can people see my screen what's going on there yep we can see your screen okay um yeah please send me an email and like ask there's actually a form i have on github if you want to add your own project to the ethers.org website so um i'm just going to dive in i don't really have a lot i figured it'd be a fairly short presentation um let me uh i need to there we go so i'm just gonna reset the defaults so people can see what they will see if they come to my site if they come to the ethers

playground you know out of the box sorry the the windows that show everyone's images are kind of covering parts of the ui that you need to see okay i think that should be a safe place to put them so um basically it's just a rebel it's nice simple environment for you to try experimenting with ethers playground there's a few new features i've added just the last few days so they're experimental if you want to enable them just yeah at me point the screen doesn't help um go into settings here by clicking this thing uh i recommend turning on autocomplete and turning on password provider if you want to try them out so uh

i don't know where to exactly start i guess the easiest thing you can imagine is if you wanted to create a wallet um you can just create a brand new wallet or you could connect it to by default it gives you a provider connected to homestead so now we can do like get address what is a more important thing to show probably oh we should turn which is more visible dark mode or light mode i feel like a lot of developers care about this i personally use dark mode more now and if you want more screen uh screen real estate you can always click this to close the drawer on the side um the other thing you can do yeah i'm just gonna like start blasting through

stuff and like as i think it up if anyone has any questions suggestions or things they don't know how to do feel free to like you know speak up and suggest things um so basically the library also has the built-in help so you can come in here and see what big number.from takes in you can actually use it directly and it will put in a value for you there and you can enter that it will also let me see if i can find a good example an introduction of what all this oh yes for those who don't know ethers ethers is like a web3 library um it has like a bajillion things in it there's also documentation here

i recently bought the ethers.org um so i'm still in the process of migrating things over to that but there's lots of documentation here but documentation only goes so far a few quick notes about the documentation though is if you look at anything like utilities you'll see a plethora of random stuff here so all these code examples you see they're actually built at generations like when the when i make changes to the documentation it actually runs all the all the code samples and it did so it injected this value in that way we can be sure there's no typos in the code examples which you see all the time you cut and paste the code example it fails to work you know they're going to work because they

worked enough to generate this documentation but this documentation is you know a lot so sometimes people just want to jump in and start messing around with stuff yeah that's kind of what this is for is just to jump in so you could imagine for example i don't know if you can see my cursor but you can use a signing key and then you could for example use random bytes and then you'll see that it automatically inserted it where you were now you can see you want a random 32 bytes the underscore is always equal to the last thing you typed so if you want to assign this to something you can s dot sign digest and then you can do the same

thing utils random bytes 32. now you're signing some random 32 bytes of data um so we actually can't recover this because we don't know what the data was but just to give an example of the type of useful things you can do yeah i don't know how to create a wallet okay so a wallet will oh what's going on there we go so we'll just do literally we'll just create a random wallet um and we'll connect it to the default provider which is connected to homestead now obviously this is a brand new wall we just created so if you do w dot get transaction count it'll be zero

um and actually what we'll do is we'll do here's a quick example that might be useful um we'll do c is equal to new contract i dot token stuff oh by the way tab will always kind of take you to the next unpopulated field so i hit tab and highlighted abi so i feel like this is a common thing people often do balance of address view returns you went people often want to look up the value of whatever provider so again it's connected to mainnet so we now have a brand new contract this is just a

warning because we're yeah don't worry with that um but now we have this contract c that we can use so we can do c dot balance of rickmore.eth to do and so you see that's my die often times you will want to use um format ether to actually put that into their format a format ether works for die because they use the same decimal places now one quick note this is a kind of a new experimental feature as well if you use a weight the keyword anywhere in your um command it switches into expression mode so there's a lot of like tokenizing

going on here like there's like a little built-in javascript parser but basically if you can put it inside an if statement that's an expression so if you use a weight the whole statement must be an expression if you want to use words like return const let that makes it into a statement those can those still work with playground but not if you include a weight and so now when you do this it should show you a much nicer number of course you can also like utils.comify it because sometimes people like to see numbers more friendly but basically these are all just operations available in ethers and this just lets you kind of

try things out so i use this a lot when i'm trying to solve issues like a lot of times people open an issue they say oh ethers has a bug when i do this it fails so with this i can at least put the code in and see what what's failing and realize oh your gas price is being set to zero or um you're missing a parameter because i can kind of just hit the up button tweak the command a little bit and then try it again and that way i kind of get a better idea where the problem is this might be yeah too deep too shallow i'm not sure one feature i added about two hours ago as i was like staring at this thing i was a feature i really wanted to get in

but i wasn't yes i'm very very happy it kind of worked at last minute so if you notice over here one of the things we have is the pass-through provider um the pass-through provider okay i'm gonna rewind one second okay let me explain how all this works so basically we have some front end that's running at javascript and that javascript creates a web worker and that web worker has this two-way communications going back and forth between it and this window so the web worker actually doesn't have access to things like local storage and all that good stuff which means that it's kind of sandbox it's kept in its own memory space that sort of thing and then we can just run eval inside that that container and be sure that you're not tampering with anything

inside the person's real browser so my browser has metamask enabled but normally if this is unchecked so we can do this if you do window dot ethereum dot request something it doesn't really matter what it is because it's blocked like it sends the message to the parent window saying they want to run something on the the the metamask and it gets blocked there so once you enable this the air you get should be well this this area is actually coming from metamask metamask is like i don't know what something is so the first thing you will want to do and i actually have this

cut and paste over here because i don't remember what this is all the time so you'll the first thing you'll want to do is if you're using this is run this command this is just the normal thing you should be used to if you use metamask you run the method eth underscore request accounts and so now my browser for playground.ethers.org has been connected to css connected has been connected to this thing i did it earlier here we can disconnect so you can see i think we can disconnect there we go so now if i try doing yes let me start off as if you were first starting equals new

providers dot web3 provider window dot ethereum okay so this is where most people start off um and s equals maybe i should use longer words we don't know i'm talking about signer equals p dot get signer so now we have a signer which is connected to if you see we try doing standard i got the address it's going to complain because we haven't run this thing yet now if we run this metamask pops up can you see metamask is that okay and then i can click next

connect and now we're back into the world of signer dot get address working again and you can do signer. so now this is actually connected to my metamask everything you type into this is being evaled inside a website web server web worker which is then communicating through the post and on message api to ask the parent to pass these messages along to metamask and metamask is the ones responding so we can get balance and again we probably want to format ether and we want to a weight on that because it's a promise and so ah yes

please note that this is currently connected to roxton i do not actually have 960 000 either um can you show us how how uh how to display what network you're connected to uh yes that's good yes so remember p is our our metamask provider we created so you can just do get network like normal so this is also why autocomplete is still an experimental stage um it's been about three weeks and it's just still got little works that are good times so net good network so you see you're on robston chain id3 the ens address i think i'll stay on this network

because i feel safer messing around with not mainnet so i can do things like send transaction for which i can send a transaction to uh signer oh we can use ens so this is on robston so if you use a roxton enos name sorry and so now if we do this oh okay let's see if this works i've got my fingers crossed as much as this so this is actually using the signer that's connected to this is the signer that's from the metamask provider and we're about to try sending a

transaction with it oh actually one thing i didn't point out is uh whenever there's any traffic going between the websocket and the actual front-end provider it shows in gold these like commands that are going back forth over the wire in the future there'll be a little option over here to accept deny accept all that way when you tr when if you just load untrusted code you're kind of getting notified and you get the opportunity to kind of stop it before it starts executing things this is something i plan to use for the uh for my github issues if a person can replicate their bug in an issue and just give me some code i can paste into my browser it'll make it much easier for me to like debug and so you can see all the things that

happen when it's trying to figure out what to um so you don't even have to um type your password to to authorize that send transaction not normally right you have to type it into metamask the first time once it's unlocked to unlock it so every time when you send transaction moves automatically well right and and it'll see you'll you'll get this pop-up still right can you actually see the pop-up on your screen it just crashes away okay i don't know what's going on so for people who aren't me um the meta mask pop-up is still on my screen i think for whatever reason it's not showing up in zoom uh it might be it's probably security reasons it probably shouldn't even flicker on oh i can actually see little one

okay so you can see that part that's interesting maybe it's because it pops up as a separate window either way i can still see it so i am about to click on the confirm button and once i click the confirm button you can see the transaction's been sent and this is a response back and remember my underscore is equal to the last result this was a promise so underscore p i think will give me the actual value so we'll just do this just to make sure that i oh yeah crap so it's interesting that chain iv is new yeah i'm actually a bit concerned with

it as well i'm not sure whether it's metamask at fault or me at fault it's something i was looking at earlier and i need to investigate she's talking about this here this should not be zero this is actually really bad but i almost feel like it's something metamask is doing weird because these transactions are no longer valid on the network or shouldn't say valid these are no longer valid by default deployments of gas so we just sent one e two i sent one way one way okay one way to yeah and i i mean as you can see i can also do something like this b dot get transaction so we'll do it this way t equals and we'll do a weight so we have and so now we have back ours oh so

actually look at that so it is something weird happening with what metamask is returning because the chain id is actually three here if i get the transaction from the network it's three so while the transaction is pending metamask returns a chain id of zero once it's been mined it returns a charity of three i'll bring that up with them later because that isn't really what should be happening but this transaction was now sent i mean we can also probably pull it up here can you still see my screen yes okay and there's the transaction that we just sent i've lost my playground there it is um i don't know what else should i show

what else is it what else is interesting like um basically all the things you can imagine are here you can do chills dot hit escape you can see all the possible methods again this is the more useful thing if you're trying to figure out what methods available um one thing i need to add is keywords like it'd be nice if you were searching for that's interesting there's a question whether you could connect to a local blockchain from this playground so the issue with that is that this playground currently only runs in https and you cannot connect to an http site through https this is something i want to find a better solution to i do not want to just

allow people to connect to playground.ethers.org over a non-secured url but it's definitely something people need to do can um can you actually set it up on metamask connect to a local blockchain and then use this yes that's almost that way lou you're brilliant that's actually a good idea so what you probably can do is come in here i'm not going to mess around with too much but somewhere in these settings you can add like a new network if you added that network to your local host i believe this for some reason i don't know how or why can connect to non-secure local versions and then you can probably go off the races the other thing i've been thinking about

experimenting with is for people who aren't familiar with hosts your hosts file allows you to intercept any domain name resolution on your computer before you get sent to a domain name so we could actually put a hosts file that would link to a local service and what we can do from there is we can actually make up a fake ssl certificate it's not fake it has to be real but a real ssl certificate that's kind of publicly known it's definitely more work to set up the other option you have if you want this type of environment just deploy to your desktop like when i'm when i'm testing i'm not sure if you can see my url

but i just go to localhost 8080 and this is writing the same code you just saw but now you are on an http website and so this can absolutely connect to to localhost and then you can test a local um testnet a local um like a death node maybe can you kind of afraid like high-level pseudo-code how would you oh absolutely sir absolutely um actually i can do more than pseudocode um if i can figure out how to github oh to do that um sure actually let me come over here can people see this window probably oh you can the playground we could see okay but you can't see my desktop no

um let me i have to switch screens one second i need to find zoom zoom where are you um so i'm gonna stop sharing and i'm gonna reshare uh we'll just pick a window hopefully there's nothing secret in this window can you see how much time do you have oh yeah how much time is left by the way uh you can take maybe like 10 more minutes let's say perfect yep um i definitely won't be more than that for me i have inside my downloads you can see your terminal right perfect that's why i want you to see yep so basically i have like a run test chain which this creates a whole new

test chain out of the wazoo actually maybe which window are you seeing i'm seeing the nanostatic styles.css okay let's find that one okay so downloads so i'm going to run and so now we are connected i have no idea this is going to work this is just like a quick test to see if this theory works so you started a ganache so this is this is no this isn't actually this is actually guest but running in dev node dev mode so now i'm going to launch zoom again stop screen sharing screen share the browser again if i can

find it so now if i do p equals new providers again this may not work but i hope it will it really should localhost thank you thank you unsupported uh oh of course this is jason rpc provider oh p dot get network good not detect network i'm not fully confident this is working i don't know why it went though

does anybody have ideas on why it might not work it should just be like a normal connection p dot connection uh well we can try util stop fetch your okay i'll look more into that why that's not working but if you run this locally you should absolutely be able to do this i don't know it's not right now but i will fix that and push changes up so it will work are you sure the uh port is eighty five forty uh that's a good is it is it because you're using the pass-through provider

oh sorry um this should be skipping the password provider entirely i would think um well let's take a look at my no tests maybe blue has a point i'm running on the wrong uh i don't see any so the other option is let me just do one more quick check mayor had said it might be its get default provider that default provider should work as well but that will just call this basically um ethers.getdefault.com

so this should be the same what does it say network error one second let me just check make sure local provider yeah i'm not sure why this isn't working but i will figure it out and i will make sure that this does work because i mean testing on a local network is definitely something people want to do somebody asked for the playground uh yes although i haven't pushed this latest blob up that has a pass-through provider but yes it's currently available it's basically i'll share the link as well

wait what browser can you see are you seeing this page okay so if you go to github git yeah i didn't really plan ethers io so it's this website and so this is all all the code here i'll push the latest version uh up like i said the the pass-through provider was done like two hours ago so it's uh it's still very experimental was there anything else i needed to show that's interesting contracts balance of wallets

i mean basically anytime you have like one of the reasons i use this is like people often send me a big long i'm saying oh my transaction doesn't work why i can just come in here and i can paste their like raw transaction here and then i can see oh the gas price is zero this is why it wasn't accepted the nonce is wrong um it's just useful because this is a place that i can basically paste untrusted code i'm not afraid they're exploiting something in node that's going to open up my file system and send my uh my password my sc password file or whatever so someone asking some samples of how to use some of the utility functions converting string to bytes to stream sure so uh if you want to arrayify something

and you have like a string like that you can use arrayify um if you want to go the other direction keep mine u equals so now we've got that so now we can use utils utils dot utils dot hex lifi and one thing i should point out is a lot of these things that are very common to use like hexafi and array of eye are actually available at the root as well [Music] i mean to you jfk code points hello

and we can put a weird symbol in here and so it converts it get your code points you can see the h-e-l-l some not surrogate pair but some weird utf-8 character um oh one more thing to point out is if you have auto if auto complete enabled hitting escape will bring up so basically it will usually only show you this help if there's fewer that there's eight or fewer possibilities if there's a lot of possibilities you can escape to force them to show up and you can always hit escape to dismiss it so this shows you all the different

util commands that are available and what is coming is i eventually want like this get address to have a similar appearance to something like this so it'll actually give you help in line with most of these already have that in built into the the javascript as i've got a way to expose it yet but you get this nice little help blob that's a concise little man page type of what each one of these things will do is there any other interesting commands to show off any more questions yeah um i think uh eric had a question um earlier in the presentation okay

he he says he hasn't written the dap in years web3.js and ethers seems to do very similar things on the surface how do people decide when to use one versus the other is one more catered to certain classes of developers so i mean obviously i'm incredibly biased um i would say so for me ethers is definitely a more opinionated library um i go out of my way to make sure there's a lot of i i enforce a lot of safety that that web3js does not it i don't want people making silly mistakes and so as a result sometimes there are people saying like oh web3

does this but why i can't do that i think they came up recently is um in ethers this is an invalid address dot dot dot dot you can imagine having a capital x i just enforced has to be a lowercase x that sort of thing um as an example of some of the things that web3js used to do i think it does not do the same more but there was a function called shaw three if you passed in a string like this sorry that's a bad example if you pass in a string like this it would compute the hash of that string converted to utf-8 bytes if you pass in a string that looked like this it would actually

take the hash of two bytes the bytes of 0x12 it would automatically convert this into hex for you and so that means that if you do this you're actually computing the hash of two bytes whereas if you did the hash of if you did this uh a b f p the p would be detected as making the string no longer valid for a hex string and therefore this hash is four bytes this hash is two so i mean there's just things like that that that people are trying to yes guessing that's the best thing i'll say ethers never guesses if it's not 100 explicit what the user meant to do

but i mean like you said they're both very similar they both do a lot of the same things there's huge overlap between them um i mean i wrote ethers because i had some issues with with web3 at the time yeah i don't want to speak ill of well three but i obviously use ethers for everything the other thing in mind is that i write ethers for me like it it happens to be useful for other people so i make it available but ethers is something that i use each and every day for a random assortment of things and so i just if you have a a lot of reasons why a lot of features exist in ethers is because at some point i needed that feature so i added it yeah

that's how far i feel free ask clarifying questions but that's right eric oh sorry you can finish oh yeah oh uh um eric did you have a follow-up question to that nope okay um i i just i know wyatt is here and he's on the on the web 3js maintenance team um and you know like i i believe we are doing like a rewrite to a version 4x something so hopefully like a lot of these a lot of these like annoying things about web3.js gets fixed i don't know why you have an opinion on that but oh and i will allow participants to unmute themselves okay um

antonio uh has a comment it looks like ether ether's js has higher test coverage uh and then merits oh go ahead as i say it might also have more documentation i'm not sure what web3's stage of documentation is these days keep mine that when i wrote ethers like this was like 2013 so web 3 was also still very new and so gotcha and then merit asks uh can you also use ethers for our websocket providers yep absolutely so if you want to you there's providers i mean you can also use the like inferior for example offers a get websocket provider

i need to new this oh no i don't aha and so now you have a websocket provider right here connected to ws websocket and you can do your normal get oh we can't see you can't see what i see the command line otherwise it's not auto completing right now but you can so this is a websocket provider everything's happening over websocket there's like there's other ones like alchemy has them as well but yeah sorry i'm done nice i like i love um when our speakers they dive into the code so thank you for that um i guess like i just had

two more questions for you um and i'm trying to ask like more different questions so if it doesn't really apply then feel free to just say pass but sure sure um we start off with a more of an icebreaker question so what is an absurd habit that you have just before getting into a deep coding session as a developer for example but for example um before i get into a potentially deep conversation or an involving meeting or deep writing session um i like to sit down close my eyes and you know meditate for about 10 minutes in the darkness in complete silence so that is there an absurd habit that you use as a developer to give you an edge i don't know i mean i'm sure they're i'm

sure there's something random i do a lot of strange things lou what strange things i do you like to sing i sing a lot that's true but i mean that's just a normal thing but absolutely i'm sitting all the time i'll also be singing my code like now i'm typing and if that provider is not working like you know like that sort of like i mean i don't know whether it gives me an edge but it certainly makes a lot of noise for people who are in the room uh yeah i mean i might write a i do a lot of like small prototypey things like if there's a thing i don't know if it's gonna work i'll but again that's i feel that's relevant i don't have any i can't imagine you know what i'm gonna do i'm gonna film myself next time i sit down to code

something and then i'll be able to point out better the the oddities maybe i stand on my head and don't even realize it or uh i was just trying to ask like a like a more like out of left field question but i do appreciate i would love to hear you sing when you're coding i feel like that would be hilarious i'll celebrate it'll be nfts like yeah um and eric comments uh rick doesn't want to spill the beans on how to be a 100x dove uh i don't think it's going to matter like what i'm really looking forward to is in the next like 10 years for all of our jobs we completely obsoleted because ai's are like

i can rate that and yeah i mean if i can give any help to people i guess my one piece of advice would be like suffer like when you when you have like that bug and it takes you like i've i've talked with this before but like i think the important thing for like that 100x i don't know 100x is the right word um but yes for that type of thing i feel like the problem is when you have have an issue to like sometimes you have a i guess i'll describe anecdotally basically you have this bug and it takes you like a week to solve and you're just like frustrated and it ended up being something so simple and so stupid and you think yourself man i wasted a week like trying to solve this simple bug i hear this all the time from the developers and i

really need to point out that that suffering was learning that week that week that you dove down like an entire day figuring how course works you learned so much about cores and that's going to save you time on the next thing you have that ends up being actually course related i mean this bug having nothing to do with coors does not mean you did not learn that suffering that anguish that every night you're going with like almost a headache because you're like man it's been three days and i'm still no closer and you finally find the bug was a missing semicolon it doesn't matter that missing missing semicolon forced you to solve and learn so many things and i'm sure you see this all the time you have a bug in your code and you're you're just frustrated and you're going through your code going through your code going

through your code and you find something and you're like this is definitely a bug this is causing problems and you fix it because it was a bug but you still have your problem like re-analyzing your coat so you just fixed another bug that you would fit down the road if you're lucky the worst thing you want is a bug you never find that's just like catastrophic and and disheartening but you can imagine basically suffering suffering is the key like there's so many people they get they get stuck on a little problem and they reach out and they're like oh i have a question i'm fine with asking questions that's personally fine but try to solve it yourself first and suffer a little like you you learn so much in that like suffering stage of like

almost wanting to cry because it's just why is this not working it really really should work it's four lines of code and i've read over 16 000 times the server's down like you know it's uh so i mean i guess that's my one piece of advice for becoming the the nx for some arbitrary and that's you know greater than one yes so yeah okay there you go got to be a glutton for punishment um uh amirad asks uh how do you get to be so responsive on uh github issues i mean honestly iphone man i just love having my phone i

wake up in the morning i spend the first like hour like fiddling around on it like answering questions yeah well in this exactly like like it's such a great time because you don't feel like getting up yet but you can lie in bed and feel like you're being constructive and working um but that's actually one thing with the ethers playground i've really enjoyed sometimes i've been able to answer questions in bed because i've been able to fire up this rebel environment and type in the thing they they said oh this isn't working something's wrong with ethers and i can type it in at either a there's nothing wrong with ethers and there's a typo in their code but i was able to test it in my bed or b i spring from my bed to see what's the matter because like

there is actually some bug in ethers that's that's freaking me out because this shouldn't be happening so the playground also helps me help you by letting me stay in bed longer and figure some of these things out and exactly be more responsive nice amazing um yeah eric comments when ai's take our job in five years you can be a motivational speaker and then ken says uh you need to make ethers playground mobile friendly then smiley face i absolutely mobile friendly is definitely on the the docket because it is right now it inserts extra new lines after you type in a command like it's it works enough like if you're really dedicated to take something without going to bed

it works but it's definitely much easier to like like crawl to your laptop and um but on the side note i also expect ais to take motivational speaker jobs as well um they're going to eat us all man it's wonderful so so it's really the the solar punch vision i'm hoping we're like we're just all like prancing around making art and being creative and ai just does everything else i mean it's hard to even imagine what it's going to be like because creativity also seems like something the ais can do better at if they can true if they can produce a two-hour movie in 16 seconds it'll be able to produce movies far faster than any human will ever be able to consume them it will be a wonderful and strange and

terrible world i can't wait cool all right well um thank you again for your talk um love the deep dive into the code um for those of you who want to check out playground it's a playground.ethers.org thank you rick for getting that domain and then um and documentation for ethers is docs.ethers dot io so that's great or anything to me tweet at me whatever you want to do i'm always around so yeah perfect and yeah definitely yeah you know send rank a message in the chat box or ask more questions there