Let's fix our developer experience - Miguel Palhas

foreign [Music] developer experience something that I've been building for the past couple of months because kind of as a side project um so first of all even though it started as a side project I need to thank the my employee light shift capital and also people from visual that were helping me along the way and giving me time and resources to to be able to do this kind of thing so with that out of the way uh let me get to it so I come from a web development backgrounds uh this is kind of an illustration of one of the the most important Concepts I learned there about the this red green refactor cycle and about the the feedback loops that you the quick feedback loops that you need to get in order to do good tdd uh just by the show events who here uh I'm assuming most people here are hackers of some sort either experience Junior seniors it doesn't matter okay good uh so yeah I learned a lot a lot of stuff like this from web developments I used to work in uh Ruby on Rails Elixir then uh rest more towards the end and all of those ecosystems had something in common that I don't really find in ethereum about the developer developer experience which is that the tools are usually a lot nicer to use especially for beginners if you're an expert and you can read evm bites codes at breakfast you it's probably not not a pain for you but for beginners or for people that are like on the sidelines of ethereum like front-end developers that don't write smart contracts but still need to interact with them uh there's a lot of things that I found along the way that um small small things that kind of build up and make the experience a bit painful for me to build and for even to teach new cameras in space and uh the way it started the way I started this whole research and work was actually something kind of stupid uh I'm not sure if anyone depending on what you use what what you do for a living if you recognize any of the the the issues on either of these screenshots so yeah I use a lot uh yeah metamask for development often I'm writing smart contracts and doing some front-end work at the same time and I use Anvil or ganache or that sort of thing I already learned from speaking at people here in at hackathon that a lot of people don't use local Nets that just deployed to sepoli or guardly and so on which just it's just an increase that feedback loop and make it harder to to iterate on stuff but yeah so on the first the first thing is I think the the biggest pain in the butt for me which is when when I'm iterating on Smart contracts and the UI at the same time I'm gonna do some some quick fix on Smart contracts going back to the wide testing the transaction again and it doesn't work why because to redeploy the smart contract I needed to restart and will trigger the redeploy metamask doesn't know that it still tries to submit transaction within the nonce from the the state it had before it doesn't know that it should go back to zero I need to go to the settings reset that manually that's it's a small thing that's bothered me like ever uh 10 times a minute when I'm doing some some quick change and then the other is something that happens if I close my browser on my laptop and then I open it back up and I start metamask but it was connected to angel angel is not live anymore and metamask doesn't even let me input the password and I sometimes I need to start the envel just to get metamask going uh yeah so these are two small things that kind of started me after this I I literally went into the metamask code base I started reading maybe I could fix these things with a small pull request that was kind of naive because the metamask code base is too big uh and with a lot of hands involved it's not like I was going to learn how to to touch it to touch on it in a couple days but then I got to learn how metamask works I ended up uh it was kind of magic for me the way the extension would communicate to the pages and I end up learning a lot about how that worked that's mainly on EIP 1193 which specifies a lot of the how window.3 Works how the web page connects to to the browser and vice versa there's a lot of other IPS for other parts of the RPC API but this is one of the main ones and through this research and talking with other people and brainstorming we I kind of remember the a few other bigger paints I guess or not paints but things that's a kind of technical depth that there's reasons for those things to be the way they are but they still could be improved so for example on metamask you're connected to One account to one chain when I'm developing what I would want ideally is if it's on localhost I want to use my test account for mnemonic if I'm on a on a regular website connected to mainnet maybe I want to use my real wallet but on metamask I need to switch between the two back and forth if I'm developing it switches globally to my development account and same thing for Network I'm either connected to Anvil or to mainnets I can't be connected to both depending on which app website I'm working on there's security reasons there's scalability reasons for these things to exist but still they're paying for for our side and the main thing after reading this EIP and noticing and others and noticing how it's a bit not not necessarily incomplete but it's all uh maybe a bit updated in some things it was built mostly by metamask for metamask because it was it's what existed at the time and as a result they then iterated and implemented some new endpoints that are actually not part of the RPC and then Raven kit rainbow kit comes in and depends on those endpoints so the spec is no longer being followed uh fully which means that you don't actually get to connect with an EIP compatible wallets you just get a connected metamask button that assumes that window ethereum is metamask when in reality it should just be a generic uh a generic thing so other than metamask just a quick rundown of some of the tooling that I use and this is by no means exhaustive but a lot of the things that I use day-to-day so Foundry does a lot of a lot of great things it allows me to yeah impersonate accounts great farts snapshots and a lot of cool stuff of course see the skin to maybe browse for for live smart contracts and interact with dvis tenderly if I want to simulate some transactions then there's this impersonated XYZ which I think a lot of people don't know but it's really cool it creates a fake wallet connect connection and it allows you to see any mainnet websites as if you were vitalik or in any other lesson ethereum you are obviously you can sign transactions you still don't have the private key but you can see the UI States and interact with the site as if it were someone else for QA for debugging this is really useful then there's public databases public apis that you can use to feed uh information like the ethereum database signatures denim signatures database sorry uh what are these things have in common so a lot of these things are either CLI tools um that you kind of need uh if you don't if you're not a real actually a solidity developer but more of this kind of front-end developer maybe you're not aware of those tools or you don't know how to use them properly others are web tools that exist online and that are connected to live Nets only so if you're running your local stuff on Anvil for fast development Cycles you don't have access to those like tenderly and impersonator for example and so all this research and all these small frustrations and talking to other people it led me to ironically to this thing where I was I'm frustrated with the current standard so I decided to build my own and right now the the way that that's materialized is that I ended up not fixing metamask but essentially building my own wallet as I was learning how metamask uh was working that communication between the tabs and the extension and so on I noticed a few other things that could be improved at least for developers that's the thing I'm focusing on right now making the development experience uh a lot better but there are some things that at least in theory could be useful for for users as well so what's this iron wallets so right now it's an attempt at being a drop in metamask replacement uh what this means is that there's still an extension the the iron wallet itself is a desktop app but there's still an extension to handle that communication but the extension just says that their ideally don't interact with it it's dropping in the sense that any site that has a connected metamask button the website will think that it's interacting with metamask because it supports the exact same RPC um RPC API and so on uh so it should it should just work smoothly of course still work in Providence no promises uh and the main things I was focusing at the start was just the developer experience so first of all it's Anvil aware it knows if you're connected to an anvil nodes uh if you're just developing something and in that case it does some additional things already first of all that non-swiss thing that I was talking about earlier it doesn't happen at least on Anvil because it detects that Anvil was restarted it rethinks uh all the states uh right away I'm going to show that in a minute uh also because this is it right now targeting just developments I don't care about passwords or encryption just using the test mnemonic the one that's usually publicly available of course it's not safe for real private keys but the advantage is that I don't get that annoying pop-up every time I need to do a transaction if I'm testing a smart contract I don't need to worry about checking what the gas fees are or rechecking my transaction and I just want to click things fast and and iterate quickly um and then some built-in Dev tooling which is yeah more genetic but these are these are the things that I'm working on right now I'm going to work in the future and that actually I'm here in the hackathon uh trying to do some some of those uh and yeah and maybe some some of these will materialize into an actual wallet for end users but right now that's not anywhere near my radar so things that I'm thinking about both for developers and for users that could be useful in that I'm uh this these are work in progress not yet supported but in the works so first of all it doesn't have to be restricted to a single chain a single account at a time uh I'm able to keep track of which Tabs are connected to the extension and allow the the user or the developer to configure which tabs it wants connected to to which chain based on maybe the the domain name maybe maybe I want local loss to Anvil and everything else to minute something like that some rules around that being able to use multiple mnemonics instead of being recycled to just one or if you're like me you have like five Chrome profiles with five different private keys uh transaction simulation and inspection because I mentioned standardly and impersonator those things you can do on use on mainnet but locally you have Anvil but you can use anvil on Foundry tests or to the CLI you there's no way to write at least that I'm aware of right now to use it in a wall That's the as a a non-evm solidity developer I would say uh smart contact interaction so if you're interacting with smart contacts it's usually very useful to have some kind of a built-in the other scan contracts page for reading and writing smart contracts without having to implement the UI for for each one of those yourself because those things are there's an API we can just problematically build a UI around that and then this may be just my opinion but the fact that it's not sandbox to a browser also makes this uh a lot more beneficial there's access to a lot a lot of other features of the of the the operating system that can be useful uh opens up a lot of doors about where where can we start a private key in what format maybe in multiple formats maybe they're in the cloud or in some some other external device and then this again pet event probably a very Niche thing but I use a tiling window manager and those metamask pop-ups on my computer just just mess up my my entire workspace maybe but maybe that's that's just me so yeah now demo time if it works if I can get to that screen no okay this is very hacky yeah I can't clone the mirror the screen here so this is what I'll have to do so what I have here that's a generic uh nft collection thing that I implemented just to implemented a long time ago just to test things out uh it's running that as a yeah it's an xjs app it's all running locally with Anvil and so on this is the wallet that's also running locally but it's yeah so desktop app it's not an extension even though yeah as I said there's an extension so yeah I need to refresh this program okay so there we go so just to prove that it's working this is the current UI for the wallet where you have the same thing as metamask like a account selection Network selection it propagates that to all the tabs but already because you don't on metamask every time you do that through websites the metamask to confirm and etc etc right now I don't care about that so it just switches automatically there's also this connection stab which shows which Tabs are connected to it which you can see it updates in real time the work that's not yet done is to be able to select some of these tabs or by domain or something like that and overrides which network those are connected to um and yeah and I can submit transactions and because this is Anvil and because this is uh doesn't have that whole confirmation screen it's still estimating the gas but that's all unable you can see that just the fact that I'm clicking things and I'm literally minting nfts uh a lot a lot faster than I would with metamaskins and other wallets and the other nice thing about it is that now if I come here and I restart the the server that's server Foundry all the stack that's powering that website and I restarted now in metamask this would be the moment where the nonce wouldn't allow me to just mince but here that all works right off the bat yeah again we can see transactions here right now no more details we all it's also tracking balances of both eats and the rc20 right now that doesn't exist the contracts tab is where that those interactions uh that I mentioned through the API will be but yeah but this [Music] um this is why it's not I'm not married to this it's just your basic Tailwind UI so I'm the initial Focus was to get this to to this state where it's already kind of useful or useful if you're just developing contracts and just need a wallet to submit transactions and none of those none of those fancy features just the speed and now we have this hackathon and in the future it's where I'm going to be working on all those other development nice features that I that I mentioned before and because I think I went pretty fast so I have time for questions I guess yep so you're saying you you have both metamask and wallet connects and sometimes the page you're using gets confused about which of the two it's it's supposed to use okay yeah you sign up with wallet connect and then ethers things it's supposed to go to metamask so I never I never had that use case myself so I don't know what specific bug that is uh but I I did come across not in either JS but once in rainbow kit and some other sdks there's some specific nuances about how they connect to to the wallet where they kind of uh yeah as I said before they assume that if window.etheroom is there then it's metamask and if it's not mathematically we'll get confused about it as well uh about wallet connect yeah I don't know I would have to try it but it's probably something worth checking out and fixing somewhere so you shouldn't be making a dab for iron wallet you should be making an app for an EIP 1193 compatible wallet in theory so yeah right now uh probably this probably there's some component of the spec that I haven't implemented that I missed it's but the the idea is that this would uh either completely implement the spec without uh without adding any additional endpoints that you will rely on it's just all the RPC endpoints that are specced out if some if there's some limitation in those that makes makes some feature not work correctly and maybe metamask and wallet connect both to something that is not part of the spec then it should be part of the spec essentially you shouldn't whatever depth you create shouldn't be tied to a specific wallet it should be tied to those specs and every wallet should should Implement those so yes that's it like thank you