Infura & Frontends: Hack with ethers.js, ethLogs & ERC 20's – Michael Godsey

one of guys it's a little early the morning everyone's a in here but uh I've got some inferior members in the audience and then I think I talked to some of you yesterday about coming to this event I'd like to because we have a little smaller audience can take a quick pull the room on what issue project you're working on and what you're interested in hearing about it's the be a bit more in form of a talk basically if there's any specific subjects or things in general I can go into those in more detail or change what's on the slides to talk about something different so really just shout out if there's any questions the this talk is going to be on infra and front ends so some specifics on ethers Jas and how to get eath logs and how to work with the ERC 20 tokens in a front-end environment and my name is Sean Brennan and I'm on the infrared team as the developer relations lead [Music] quick show of hands as far as like who's have some background in JavaScript for 3m development before anyone first time this weekend probably nothing before ok so a couple terms that you hear a lot in this talk and in the future will be a so a client is the software necessary to run a blockchain node and so to sync with the blockchain and to interact with it so that's called a client a node is that instance of a blockchain that's so the theme network probably I was like 10,000 nodes all running the same network in sync with each other and so to do that you have to download the nodes to your local machine with the client but because the theorem Boston has been running so long that takes many hours depending on the different settings you run it with and so if you're just trying to work with the blockchain but you don't run it locally or deal with the hassle of running it locally you can use what's called a provider which is a connection to a blockchain such as aetherium but remotely so and that's defined by a particular URL and so when it's a remote provider it's called a gateway so in fira is a gateway to the theorem you'd use a provider and something I'm going to talk about something called ethers j/s which is a JavaScript library for basically a set of functions and there's two protocols that have already been written for you so when you're interacting with aetherium you can go directly through the client and interact through these like specific JSON RPC calls and set up your application that way or someone's done a lot of the hard work for you already and put all these nice functions into libraries and so ether gjs is one of the I'll show a list of liván later there's a permit for all pretty much all the different languages there's web 3 libraries and basically one of the first things if you're learning about aetherium and want to build a website with it I really I just tell everyone like check out e 2j s and it's a it's a great start so so example this is just from their documentation you can see there's different providers and how to connect with them and so configure is a provider and you just basically sign up on in figure IO and you get a API key and you just plug in that API key to the provider step of ethers and boom like it was really just one step free sign up online you're connected to 3m and you can interact with watching another front-end tool that's really useful it's called meta mask it's a consensus plugin for different web browsers and basically it it's you it's your users connection to the website so it's it's a web 3 provider and you'll see like a lot of different websites that you interact with aetherium they'll ask you to connect your meta mask and you just basically click it type in your password and then you can interact with basically sender send and receive tokens from the website and again like sorry I don't the code might be hard to read there but it's basically a you're creating an ethers provider and yes it would just slot in fira into that another thing i want to talk about is something called blogs and so basically the you know so smart contracts generate logs by firing events so here's a transaction receipt that contains one log entry so basically i wish this was easier to see but a basically has a block hash it has the block number it has the logs and so the the pink text is that's the the address and then the data the next one is the data it's basically a long hexadecimal string that obviously that isn't human readable and so you have to do a little bit more work to get the actual log data out and so these are when you convert that hexadecimal string to a text you get is this more readable can you guys read that this okay so basically this is what a log output looks like you have these index and so this is at the bottom it says that the name is transfer and it's a type of event and so there's still more details to get out of it and so this is actually real transaction data from a the crypto kiddies and so it's called a Kecak hash and that's like the hashing protocol used to get these logs and so it's a transfer event from one address to another and a certain amount and this to decode this log you'll have one more step to do we can decode the data from that transfer event by doing a little coding magic and we get out the type and the name and then this stuff here is really important it's called eath ABI ABI is a term you hear a lot it's called the stands for application binary interface so basically every smart contract has an ABI where you need to know basically on the ethereum blockchain the smart contracts just live as binary right that you can buy all them and they're on the theorem network is binary but they each have an Associated ABI which is a human readable list of all the different functions and function types of that smart contract and so a common thing you have to do is decode that ABI with basically its map so like every API has a specific list of functions and types and so when you decode the ABI you can space it the secret key to know what's going on in a contract and so this is just decoding that and then eventually you can finally read the log it says transfer from one address to another of a certain token type or a token ID and a common thing you'll want to do is set up a website that interacts with users and that user will public through meta mask be sending tokens to you and around transferring and when you when your website back-end wants to react to that you'll be watching the 3-meter network for specific logs so there's what you would do then is set up basically and it's a search through like bloom filters it's called basically if you run a full node like gatha parody or what's inferior has done for you is set it up so you can search the entire blockchain for the specific log events and match them specific topic so you only care about transfers from or to a specific address like a destination address that you control and you'll basically be constantly always listening for new events and that way your front-end can react to them this is an example of so I wish the screen is a bit easier but they say you're running something called eath underscore get logs right here and this is a specific address till the watch for and a specific topics to look for this is a hexadecimal code and it's looking for the entire block chain from the earliest block the latest block and the result of that is on the right and there's basically you get a some data a log index and the topics that are associated with it and then the specific transaction hash which corresponds to one transaction in a block how's that going so far any any questions so far good all right cool all right so switching gears a bit let's go back into our si 20s so I probably heard of these it's basically tokens such as die tether baat basic attention token reputation with auger it's basically there's thousands of them because they correspond to a specific token standard called es e 20 and they're just very easy create with unique rules as far as their distribution and creation and this is an example of the solidity code that governs a very simple it's a piece of the solidity code that just sets the total supply of a my RC 20 token and that's called the get er that returns that value and so typical tokens are maybe less than easily less than a thousand lines of code for a bunch 200 500 can define a full-year C 20 token and so here's a list of all the different web 3 libraries for all the different languages and so if you have specific expertise coming to etherium and like in a different language there's web through libraries like ethers j/s like web through j s in all these different languages and so the javascript is probably what i recommend to start with it has the most users around it and the most community and help out there but there are people building and using libraries for nearly every language there's a so I'm putting all these links on our github out in figure it's a github comm watching for a slash dev rel if you can't read these but these are basically really good resources for beginners or introductions to learn about the the basically how to start hacking and so consensus has put out two excellent guides at the top with in Fira we have a community website for asking any questions we're always online answer them community data and figure I owe there's subreddits are each dev and our aetherium that are really helpful especially for asking questions and getting help we have getter channels that are maybe more advanced as we delve into specific aspects of ethereum there's tens of specific so like aetherium 2.0 like the lighthouse spec proof of stake all these different more in-depth topics where you can get help with and then there's two excellent YouTube channels I'd recommend for starting tap University and free code camp org these are just excellent they've been running short video guides for all these things to learn how to start hacking and there's education at the bottom consensus Academy Coursera and udemy all have excellent actual like certification guides to go through and these are a bit of wall text but basically I've put together like a curated list of tutorials on different aspects of front-end development if there's any probably be available all day to talk in detail about any of these and help out but basically crypto zombies is a fun one it's basically design a game and Lynn solidity open Zeppelin and truffle our excellent opens up and there's a basically recommended smart contracts to work with truffle is a way to deploy your contracts to either the main net test chains or local chess change test chains and to learn more about aetherium logs put some links here i talked about infrared and how we actually index logs off chain and so we can get much better response times and results then if you query your node which is the default and one more page there's guides on angular and react and how to use it with ipfs and ethers jeaious for for a full in-depth guide we have open law it's basically you go through that and it's a complete open law development deck and these final ones there's a in-depth guide on how to build a decentralized read it with react and embark which is really good guide and the final one which actually might do a little hack on later today is a really good guide on how to do a zero knowledge proof so you can actually write the solution contracts and the front end side of it really find those two and as a user I can prove that I'm part of a set or like a part of a set of users without actually showing or saying which user I am so it's a bit of mathematical mathematical magic but this is the best guy to found on it if not interest you and again all these links are at get up calm in for a devrel and then I'll go as far as I can today I think I only have about five minutes left and I want to answer some questions too but probably the best guide I'd recommend for learning how to write a front end it's a this guide here it's builds a 3m web wallet and basically it it's the the full stack so aetherium it works with react and redux there's ascending URC 20 tokens getting the logs using web 3j s so ethers jsn web through jsr fairly equivalent i'd prefer to use ethers j/s but they're both very good and so this is basically you subscribe to a theory events you get the logs and you react on that in the front end and so there's basically this guide here would it uses webpack and the front-end side of JavaScript to just build it and so the full code base is here you can see it builds a home page container with the different tokens you care about and has ways to interact with them including meta masks there's I think oh I'll leave you guys with this specific example so the any front-end is going to need a web 3 provider there's basically this ether dress signer where you'll have when you go to infrared I oh and sign up you get them for your API key and then when in the you put that into the web 3 provider step and that is your connection to a thorium and so you'll basically be when you're doing front of development you can either be writing new silly contracts and new solidity code and put smart contract with blockchain and then create and then create a front-end that interacts with these contracts or if there's already hundreds of good contracts already out there so you can basically forget about a slid a development work off pre-existing tokens and contracts such as die or defy apps and just build purely from the front-end side and so if you do that basically with ethers jeaious you'll put in the smart contract address that you want interact with and its API and from there you just basically build a front-end app that you don't have to write this little code yourself you just put in in figure out as we go up through provider and you interact with the contracts that way I think I've only got a couple minutes left take a probably time for questions here I'll put up the resources here there's any questions about those or where to find out specific information you can ask now or all day in fira is part of consensus and so probably the best consensus resources for beginners is in figure meta mask which is the browser extension consensus Academy has all different guides and from there it's just a wild branching path to find out which part of a thing going to work with and what had to build so there's so the question is why do I prefer ether Jaso verb 3 and there's a couple things ethers deus is a much smaller client as far as like an NPM install there's it has the main difference is how it handles signing likes officially every transaction that is related through in fira has to be signed by basically if I'm interacting with my money and my tokens I have to sign it with my public key right and sign it with my private key excuse me and then that sign message is passed through and so the way ethers in web 3 handle the signing is different and I think ether is better and also just an in general the methods and the code quality and the testing all adds up to be slightly if not significantly better and we have a audience mic now we've got route time for maybe one more question if you have one cool cool thank you for waking up earlier on and again I'll be around all day at the consensus table or the myth X has a booth up there for in-depth smart contract options or coding questions and a good luck event [Music] you