DevTools Summit | Getting started with wagmi - Tom Meagher

foreign [Applause] [Music] up next is Tom and I'm super excited for this talk because Tom is going to talk about walk me this is a been a tool and an SDK that I've been using more and more personally to and I can't wait to uh have Tom share about some of the internals and what's uh possibly next so without further Ado let's walk the town hey everyone super excited um to be here and I'm not yeah talk about getting started with wagme um this is the first time I probably talked about wagon I'm like really excited to share uh how to get started maybe some more advanced details and ways to use library and then talk about sort of what's coming up next on the roadmap um one second I just have some stuff on my screen trying to move the zoom stuff out here um okay uh so yeah I'm Tom um the author of wagged me currently a front engineer at Mir and you can find me on GitHub and Twitter at these handles what we're going to talk about today is we'll make a quick overview of wag me for those aren't familiar um walk through an example of how to get started quickly if you're working on the hackathon or side projects this will be helpful for you and then some Pro tips and things that people aren't always super familiar with when they get started using magni but they'll help save you some money with RPC clients make it easier to develop adapts and move quickly when you're building and then lastly we'll just go through a little sneak peek of a feature that I'm really excited about that should help everyone be more productive um so yeah if you're not familiar with wagley it is a reactbooks library for ethereum um takes a bunch of commonly used functions patches them up into hooks so that way you can use them for a variety of different things initially released this on January 4th of this year and since then it's grown quite a bit a bunch of projects have adopted it from like you know ens foundations as you saw strip crypto a bunch of others and it's been cool to see lately some folks building developer tools on top of wagme so if you've seen rainbow kit connect kit or third webs sdks you know those are all about widening itself is great but what these folks have done is took the library and added their own twists and abstraction on top of it to make it really easy to connect a wallet deploy interact smart contracts and similar things so you should definitely check those out if you're not familiar and yeah I mean it's grown a lot so quite a few good up stars and downloads per now and hopefully we'll keep growing as we add more stuff that people are excited to use and here's some quick links if you want to check it out as I'm discussing or if you want to check it out later doc site we don't have a Discord everything is mostly done asynchronously on the GitHub repo so you can check it out there or follow us on Twitter to get updates so yeah right now Acme has 25 plus hooks dealing with things like wallet connection um ens information interacting with contracts signing data and sending transactions so I just like highlighted a few here use connect is really great and quick way to connect wallets to your application use EMS name is really good for fetching an estimating for an address we have this hook called use contract reads which behind the scenes does multi-call and which will save you a lot of money on your IPC requests and falls back to just regular reading of the gene that using doesn't support multi-call you sign message is useful for assigning basic messages and personal sign but also if you're trying to do anything to sign with ethereum you should check that hook out and then another really cool Hook is use wake for transaction which you can pass a transaction hash to it and it will update the status and the transaction goes from submitted state to the network as it's Mining and then as it's confirmed so that way you can show some updates to your users and we'll talk about that one a little bit later but wagon isn't just about hooks it does actually quite a bit more there's built-in wallet connectors for metamask while I connect coinbase wallet injected wallets these are the most popular covers most of the use cases people have there's been some community-led efforts for additional connectors like gnosis has worked on and has a separate npm package you can install for their connector and it's exciting to see people add more and more so that way if you have different use cases or when different wallets to be supported all you have to do is extend an interface and Implement a few methods and you're good to go there's also quite a bit of caching um and request enhancements that we released a few months ago so this way like if you're you don't have to run into situations where you're spamming your RPC something like Alchemy so you can keep your bills down and make sure stuff is like pretty Snappy and fast for users so if you fetch their enf name once and they come back and reload the page later um they'll they'll automatically be there so you can use it we also do some things where we're able to automatically update data as well as change as blocks your mind and as users switch around and use different networks in your application the other really cool thing that some people have been playing with lately is Magnum has a vanilla.js client so mostly people interact with the react hooks but what you'll see in a moment as we go through the quick start is there's a vanilla.js client you can use which allows you to use wag me in instances where you aren't using react um if you're trying to use it outside of the reacts tree or if you want to use it with a different framework like spelled or view or something like that and another interesting thing that you can check out in the repo is wagme has a full test Suite running against ethereum which uses Anvil behind the scenes to spin it up so if you're interested in testing your dap swag me as a connector which will you can set up to use Anvil or hard hat or something like that just to make sure that when you're deploying things everything out there is working so move on to go through how to get started um with dwagme here so the first thing you want to do is install um wagbean ethers you can do this inside of an existing project or a new project when you're getting set up this example uses PN MP um but you can use npm yarn or anything like that I've set the versions here explicitly so that way you know if you're trying to follow along later you make sure you're using the same version blackmeet hasn't hit 1.0 yet and there's been some API changes over time as we like move to get to 1.0 just so we can make sure the developer experience is getting better and better so if you're following along with this later just make sure you're watching what versions you're on so yeah once you install we'll just create a client this is the vanilla.

js client I was talking about earlier um the only option that you need to provide out of the box is the provider which is just an ethers JS provider magnesium is built on top of ethers and so by supplying a provider here you make sure the login client can connect to the network and the other thing that I've added here is auto connects true most people probably want to set this on what this does is allows whenever someone refreshes your app if they're connected with their wallet before the refresh or they come back later they'll make sure that the connection is restored um so that way they don't have to sign back in when they reload the page so yeah you create your client and then you grab your app and a context provider um so you just import acne config which react contacts provider pass the client there and then you're good to go you can just start using the hooks um like I said before there's a bunch of them here's two of them as an example say we have a profile component let me run want to render out the connected wallet address and also optionally it will fetch the ens email one address is defined so yeah it's pretty easy to get started and most people should be able to add this in to a new app right away and if you have an existing app something like web3 react or used app it shouldn't be that hard to migrate over so here are some Pro tips on to walk through the first one is setting a chain aware provider so what this means is before you can see we just had a static provider added here get default providers and ethers method which has a whole bunch of RPC providers behind it and sets it up so it's automatically on mainnet and what you want to do is make sure your provider is initialized with a chain ID and so the create client provider function has a chain ID argument that then you can pass into your providers that way like if you're connected to one chain let's say being that and then you switch to optimism the underlying provider which Wagner uses to fetch and update data well then be on the right Network so yeah in this example I'm using Alchemy provider just passing it the training ID and now that's stream aware and it's good to go and what this means is when you're using hooks here by default so I'm using this use contract retouch by default this will read on the cheating that the wallet is connected to but you can also set it to read from a specific Gene if you want so this is only going to be making requests for a mainnet so it's set to tune ID one uh the next Pro tip here is for configuring chains so uh it ends up becoming if you have a multi-chain app it becomes unwieldy to in your provider function when you're creating your client to like make sure that you're using the right providers for certain genes so like for example uh in this in this case for mainnet I'm trying to use alchemy for optimism when trying to use infuria and for optimism for early I'm trying to use alchemy again and this is like a super contrived example but sometimes you do want to use different providers for different chains either an RPC provider doesn't support the chain that you're using right now or you want to use different a different RPC provider maybe a different API key for an RPC provider for like a test Network or something like that so you could you know go about doing this and sort of the way that I have out here you probably clean it up a bit but instead of that we created this API called configure genes and what this allows you to do is specify a list of chains that you want to use ahead of time so in this case mainnet optimism optimism girly and then a list of RPC providers that you want to use and what's great about this is a couple things one it spits out all the genes that you passed in a provider object and websock provider what it actually does is it takes the RPC providers you've listed out and it creates them in like a fallback ether's provider so that way let's say Alchemy goes down then it will fall back to the public RPC provider so this is really good because sometimes you know RBC providers go down inferior will go down and you can fall back to Alchemy or vice versa and it will set this all up for you all you have to do is put them in order that you want them to be used inside of the second argument of configured genes and then like I said instead of having like a provider a websocket provider function block where you're having to list out a whole bunch of different cases here you use path through results directly there and similarly you can take the genes that is spit out from configure genes and pass it to any connectors that you're trying to set up so in one go here I'm able to set up metamask set up my provider and websocket provider and all I do is call a function telling it how I want it to be set up that's configuring chance so another tip that touches a little bit on react and can help with performance in your application is using account callbacks um this usually count as a hook that shows the current address the connector and some other like flags on whether or not you're connected and something that a lot of people commonly do is if they want to check to see whether someone's logged in or logged out of their wallet's connected or disconnected and how that state changes they'll just use a effect from reacts and they'll manage all this on their own which if these these can start piling up you could have like you know a bunch of these in your app if you're trying to constantly inspect whether someone's connected or not but what you can actually do instead is use account has these built in to them so there's on account and on disconnect and whenever these fire off um whenever these change you'll be able to use use that data instead of having to manually track this on your own so is pretty useful one to get started with the last project that I want to go over is transaction life cycle so likely if you're doing something in your app once you've connected your wallet you might want to be sending off transactions in ethereum network and so this sort of follows three steps the first is preparing your transaction what this allows you to do is set up the request you're going to be making maybe you know you have some arguments that you want to have set up you have like a minting site or something and what this allows you to do is once the user hits like mint by preparing the transaction you've already done some of the computation ahead of time of what the wallet is going to receive so that way on the second steps in transaction you'll see it prompt right away and so you'll be able to confirm and submit that to the network um and then last year once you've sent your transaction network uh you can wait for the transaction um I was talking about this a little bit earlier with the use weight for a transaction hook which allows you to sort of watch as the transaction is mining uh maybe show like a view on etherscan or even block Explorer link while that's happening and then once it's succeeded you can show a link to um the blocked Explorer show confirmation state that type of thing so what this sort of looks like is you use the used pair contract right hook here you pass in and address your contract the contract interface so here's a basic example of mint uh function name and then if that function has arguments you can pass this into so what this will do is once this component nft loads it will take this data formatted into request which can then be sent off to the network using use contract right so this just takes that config that's returned and then once the user clicks mint presses the mint button right will send it off to the network and then as it relates to waiting for the transaction to confirm what you can do is use wafer transaction hook and it takes a half um from use contract rights data and then you can use as loading success Flags along with some additional information that isn't pictured here to show some different states to users of your application so that's sort of like the steps that you want to walk through when you're doing this you want to prepare the transaction you want to send it to the network and then you can optionally but probably best practice from ux perspective make sure you're showing the status of the transaction whether it's loading if it's exceeded or if it's failed um so lastly here I wanted to go over a quick sneak peek of something that I'm really excited about I think it's going to make it a lot easier for folks to work on their apps make sure it's everything is more safe and easier to get started uh working with contracts so what this is is some ebi type inference there's great tools out there one of them type Gene which you can use to generate types at compile time um yeah it's your CLI tool you can use based on your ebis uh but something that's coming to acne soon is the ability to uh just use the typescript compiler to automatically um provide like static typing for your different contract ones so this is using use contract read but you can imagine the same Concepts being extended to use contract right and all the other contract interaction hooks so here's an example I have this ABI here which has two functions one that is owner of one that is balance has some inputs and outputs associated with them each um and then you can see that use contract read you know takes in a function name and some arguments as well and this is all actually typed right now so if I you know misspelled owner of what happens here is I get some feedback from typescripts that says owner up is not assignable to and then it tells me the correct ones so I can change it back here Works similarly well for arguments so if I made this a string instead of a number um then I get some feedback too you know if I just to show you that this actually is working if I change this um to string then it is valid um if I change this to an address you can see here that it doesn't follow like the address format um so that doesn't work um and then similarly like you know one of the greatest things about typescript is the the autocomplete that you can get in development so you can see here that all my function names are Auto completed um if I'm working on arguments here you can see that these are typed as well with the library we're using here to um which we wrote for the specific case and we'll be open sourcing as well it works for a lot of complex types too and there's like 100 um coverage here of the API spec so like if we changed um we change let's say we change this input value here to a tuple type just do this on the Fly real quick um which just follows the API specs so we can grab let's just grab this we'll grab an address here and we'll grab actually let's grab owner what we see here is components of forgot a comma all right so now uh this function needs to have a tuple as an input so we see here that um all right these are both the same so let's change this to token ID to make it you and 256. all right so now we see that the arguments need to be owner and token ID so we can go ahead um and add those in so owner and token ID and we're good to go and so this this works um even on the arguments inside here the type difference and also we can have like deeply nested tuples um another cool thing if we switch this over to balance of we have fixed support for um fix length arrays so I can make this input an address of fixed length derived two so I can add in here um I only have one address so you know it says requires to addresses so now if I add in another one if I added too many you know it gets mad at you so all the same stuff and then other cool stuff here is the response type data is also typed so if I change um balance here to an array and you can see that the data here is an array of uh like a number or big end return type so yeah that's um the API type member and stuff super excited for this to come out it's going to be a great way for people to add end-to-end type safety to their ethereum applications um and yeah it works for overloads follows the contract DBI spec all these good things um oh yeah yeah and then type safety for contract interactions make it really easy this way you don't end up deploying a change where you've misspelled the function name or sent an argument in the incorrect format covers the entire API spec with typescripts there's a open library that we wrote for this that would be open source so you can use it in your own apps you don't have to just use it with black me and uh supports yeah more complex types like fixed length arrays tuples with keys um addresses any combination of these things um also supports function overloads stuff like that so yeah you can keep on the lookout for that um very excited hopefully we'll be releasing that soon and lastly I just want to say thanks to Global um yeah it's pretty awesome that y'all are doing this and then also huge shout out to family and context to regard to uh the GitHub sponsors for wag me and then lastly if you're interested on bitcoin and gr15 kicks off next week so you can go to agony.sh.getcoin if you want to support or check out what's going on for that and that's it thanks for uh tuning in amazing well thank you so much Tom and uh this was great it's a pretty amazing uh preview on catch the article please that'll save all of us a lot of time um my obvious question is uh when um yeah exactly um yeah probably not going to commit to a certain deadline but yeah definitely looking forward to getting this out as fast as possible yeah okay so in the next two to three months amazing um and and maybe another one will be that uh obviously uh the library has become such a kind of Rapid sort of uh integration into a lot of the new apps recently uh I'm curious like what are some of the most common uh questions that you get in terms of feature support requests or or just kind of patterns that you would like people sort of take away uh given that everything is still um largely malleable how should people think about using the library in terms of best practices or things that you may consider in the future or would not concern the future and just getting some clarity around that would be great yeah totally yeah I mean the first thing I'll say is just because everything is still so early as it relates to the library there's still you know stuff we're figuring out um edge cases people might run into and so I would encourage anyone that's using the library and runs into an issue or it feels like something is like a little bit of a sharp edge to like drop a note in like the GitHub discussions or create an issue just because like we take the feedback to heart and really want to make things very good another thing is a lot of people like want specific hooks for things that you can actually already do with like the contract related hooks so people want to hook for like reading nft balances or like you know setting a token allowance you can actually already do these things maybe it's not as quite as obvious but if you just pass in an ebi and a contract address you can just know call functioning go redhead I think once we have the type inference it's going to make it a lot easier for people to get started with those things so yeah sorry I feel like uh no that makes a lot of sense yeah I feel like the the abstraction here is like the hoax piece not the ability right and the fact that you get to use it easily is kind of the the aim um with the reactants totally and then one other thing I'll mention too is like we like this is all starting with react and we're definitely very focused on react um right now just to sort of like get to a certain amount of coverage that we need so that's like really really good tool for everyone but definitely have plans in the future I think if anyone's been paying attention to what um react query and that stuff has been happening there they've switched you know to being a framework agnostic um definitely something we're very interested in we have like a vanilla.js core which the react package uses but it'd be great to be able to support other Frameworks in the future like view or spelled um so yeah keep on lookout for that nothing soon but yeah well the the teaser is good enough this is uh this is exciting um well I appreciate this and uh I'm really happy that you're able to kind of talk about the library for the first time here and uh it seems like a lot of what's gonna happen uh in the future is probably closer related to our next talk which is Rick moo and uh given uh you're gonna get a preview of what's going to be possible to meet those V6 uh you may want to stick around and also listen to what uh what he's up to so thank you so much Tom