Building Modern dApps in React with web3 react

hi everyone I'm Noah maybe hopefully some of you by this time have a somewhat working back-end and maybe want to start working on a front end something to show the judges show your friends your mom whatever that's kind of what this talk is about it's about how to build adapt super easily that works with meta masks that works with all kinds of you know all the new fancy web 3 providers that some of you may have heard about recently they're coming out you know port is 4matic lezzer treasure laser ledger treasures things like that so yeah I'm just gonna give a brief overview of kind of the state of I guess web 3 and DAP architecture and then we'll dive a little bit into this package that I've built web through react it's not gonna be super silly don't worry but it's just kind of a pattern that I use a lot when I'm building gaps that I found super useful and then hopefully you will too either to use directly or just to kind of get inspiration from as you're building out your your tabs so it just works just not um all right I might just do it like in this view if that's cool cuz it didn't seem to want to go okay so I'm gonna talk about kind of each of the four elements of the title I'm just really briefly so modern we want to build things that are very responsive that feel live that feel connected to a blockchain especially in the environment where you know there's this kind of global network we want to we want to really feel connected as a user of adapt and so that's that's a very important idea that we want to kind of have in the back of our heads um daps again the core of what many of you were probably probably building this weekend it is adapt you know you're connected to a blockchain there's these kind of specific protocols that you have to follow and so like there's there's this kind of framework that we're operating in there's a bunch of tooling and packages around DAPs and so we have we kind of have to pick and choose the appropriate I guess tools for what we're trying to do react I chose to write in this package that I've written for react just because it is kind of the de facto choice among crypto project and among a lot of people for writing kind of really responsive you know stateful front-ends basically and it's it's a uniquely well-suited package for app development because it involved like there's a lot of ways you can kind of programmatically write you know plugins to to the blockchain there's there's no kind of traditional data architecture like in a traditional friend and there's like you know there's a back end and you're making data requests and API is in blah blah but with it with a blockchain you know you're all you're making these requests all from the front end and so there's a lot of kind of there's a lot of ways that react kind of gives you that you can kind of systematize this and make this really kind of systematic and powerful and very extensible and then again web through react this is the thing I've written that we're gonna we're going to talk about a bit at the end here so before diving into that I want to talk briefly about just like again this whole kind of ecosystem of apps and front ends and end block chains and things like that so there's kind of three entities that we can think about in this ecosystem the first is wallets the second is just the blockchain itself and then the third is nodes so wallets are you know a store of a private key that have some some methods that you can call on them basically to sign a message to sign a transaction things like that the etherion blockchain is of course you know I'm not even going to explain that um and then nodes are you know pieces of software that are running in the cloud somewhere that are connected to other nodes other you know their peers that also can kind of read from the blockchain and then and then broadcast to the blockchain and so those connections are represented by these arrows and so the way that communication happens between each of these parties is this thing called the JSON RPC API some of you may have heard of and this is again one of these tooling kind of layers that I mentioned earlier and it's basically just a way to systematically format data in a way that these parties can understand and so wallets there's many many wallets writers right I mentioned them at the beginning meta mask treasure ledger for mattock Portis dapper you know there's all these ones and they all basically at the core just this private key that that can sign data and then there's nodes again there's an fira there's there's like ether scan has nodes there's all kinds of nodes providers and they all can talk to each other because of this kind of systemic method of communication called the RPC API what you can read about online if you want to know more about and then from adapt perspective they're not actually using this RPC API they're using another layer of abstraction which is typically ether such a s or web 3G is I'm sure many of you are familiar with these libraries there's you know probably maybe you're more familiar with the bugs than the actual functionality itself I spend more time debugging web 3 than I do writing it seriously but these are basically ways of offering like human readable functions that actually produce RPC API calls so you know you don't want to call like F underscore get accounts with some like weird parameter lists you just want to call it get account some nice JavaScript function that like returns you what you want and so that's that's what those are those are just abstractions for the RPC API basically okay so this is the kind of the ecosystem this is the last like infrastructure slide so we basically want to write add app that can facilitate data flowing really smoothly and and like cleanly between all of these entities and we want to kind of tie everything together and this really clean kind of bundle um and that's and that's what your DAP really should be and so without further ado let's jump into some code and yeah so we have about 15 minutes left um feel free to stop me at any time if I go too fast too slow whatever you know I want this definitely to be like you know interactive and helpful so I actually meant to delete all of this so yeah yeah sure so is that better yeah ok and maybe I can like hide this or maybe I yeah I'll just make it a little wow that's not gonna work ah well this isn't amazing but we'll make do I'll just make this a bit smaller yeah I mean this is this is ok yeah ok all right so how makes you're gonna real quick delete this sorry um this is like this is cheating you guys can steal my in Fira key if you want it's free you shouldn't you're more than welcome to nice that's that's good I have a friend who's been bitten by that this is a risky I'm worried alright so we're gonna jump in so this is the the package there's some Doc's you know it's on github whatever and I'll just be referring to it kind of periodically as we do things so the first kind of core idea of what through react and adapts is this connector idea so a connector is a piece of code that communicates with your DAP and it it has two kind of core components the wallet component and the node component from earlier right it has a connection to a wallet that can sign things and it has a connection to a data provider like a node provider and so the most obvious of these you know kind of connectors is like injected so when you visit a website with meta mask and injects this web 3 provider into your into your website and so if you want to connect to that you know there's there's a bunch of ways to do it I actually have this fun little thing I don't know how many of you remember this but if you've written a def that works with meta masks you probably have seen through the code before this is literally something that runs every tenth of a second on your website it calls a method on this injected web 3 provider to see if the account that you loaded the page with is what is the account of the you know user has currently selected and so like this is a trash pattern really this is very bad we don't want to be supporting this luckily for us madam ass has updated and they now have they have an event that's emitted every time the user changed account so this is great and so we want to support this but we also don't want to as DAP developers have to like figure out every time meta mask updates something like this and have to like change all of our tooling and so really we should be using again just an abstraction layer and so what a connector is or what my like web through react injected connector is it's just an abstraction layer on top of this meta map logic that we have to write consistently so yeah without further ado let's write that injected connector and like get this little demo hooked up to my you know my meta mask right here so we're gonna scroll down and we're gonna set up this injected connector basically so the first thing I'm going to do is I'm going to import connectors from whether you react very straightforward the next thing is I'm going to import this injected connector I'm gonna like you know get out this injected connector object from the connectors thing and then I'm going to initialize it with some parameters there's more but for now we'll just enforce that the network ID has to be one which is may not sorry so we have this like metamath connector object and now we need to kind of feed this to the basically the interface that is gonna allow this to be stateful and so we need to feed this to react basically so the react can kind of be aware of our connector and and then like you know drill down all the appropriate data into into our components and so what I'm gonna do is I'm just going to export this kind of connectors object and we're going to use that elsewhere in the app I don't think this air is fine okay so that is connectors and now again I'm gonna delete all of this because like sorry I should have done this earlier okay so this is I hope this compiles great so this is a super sorry that was just ignore that so this is just like a super basic boilerplate react app it has this app component it can also render maybe something in another component so if I do this so I'm just gonna set this up super basically so let's have my component say something else fun okay great so we have this yeah we have this little sub component that's rendered here and we have this kind of top-level app component so this is super standard react stuff so now we need to set up again this this provider object that I mentioned earlier and that's what's going to let us react interface with with the library which knows about all of our web 3 stuff so the first thing which is actually ready done up here is I'm going to import this web 3 provider object from web do we react and then I'm going to initialize at the top level of our app so that all this stuff can be sent down appropriately and so I'm gonna do that here I'm going to put this web 3 provider here for connectors I'm going to use that connectors object that we exported from the other file and feed it here and I think it's already imported right here so so that's fine library name I mentioned with react maybe you kind of guessed that I'm maybe not the biggest fan I like ethers yes it's just a really nice well-written JavaScript library type script library that lets you do a lot of the same things as well 3GS and can use that and that's that so I'm gonna delete this now and then close out our web through provider tag and great it seems the same like nothing seems different that's that's great but unfortunately we also don't really have any data yet right like we did this provider set up we have the meta mask thing sitting somewhere but like you know nothing's actually there's no data that's like flowing anywhere so the the last thing we need to do is kind of activate our our component and so the way to do that is there's a couple ways the one we're gonna use is just very very basic we're gonna call this set well in the dock that's different but there's a bunch of methods but this set first valid connector method just takes a bunch of strings and it kind of attempts to activate each connector in turn and so since we only have one we're just gonna try to use meta mask so let's put a button here and say activate meta mask and we click it it does nothing and so if we add this on click method you know we can have this console dot log something may be clicked what I do I didn't wrap this okay great so let's see great now when we click it says clicked and so we actually want to happen is we want this you know connector to activate when we when we click and so what I'm gonna do there is I'm just going to use this kind of global context and so the last piece of what through react is that once you have everything kind of set up in this way there's this kind of context object that you can access anywhere in your app and it has these kind of shared attributes that you care about and so I'm actually going to do this in the sub component in the this component right here because for reasons that are a bit complicated but whatever I'm just gonna have this activation logic be here and so in here I'm going to define this context object which is which I'm getting from this use web through react context hook and so if you don't know about hooks it's just a way to get stateful logic inside of a function component in react it's a new kind of thing that was really suitable months ago if you don't know about it don't worry about it it's it's basically this is just grabbing some some data from from our web 3 provider and so if I just console dot log this concept this context we're going to see that it has these kind of these methods right and these these these attributes and so you know you can see connect the name undefined connector undefined everything's kind of undefined and uninitialized which is very unhelpful but then there's also these functions that you can use and so we're interested in set connector right because we want to activate meta mask and so if I just call context dot set connector here and then feed it I think what did I call it yeah I called it meta mass with a cap M so if I do that when I click it hopefully should act a so let's try it it did not work that's always good [Music] just try this um yeah so it should um oh I see yeah so it actually might only be yeah so let's try this this really should work okay so it's certainly working so let's try okay I'm just going to cheat a little bit sorry live coding is always a little stressful so I always have this and we only have five minutes left you know so okay so I have this little dummy demo honestly this is what you should use as a look boilerplate anyway because this is this works as mine thing didn't work and this is just from the github you can just you can just click on this so what this is it's just a super basic demo so if I click activate injected here oh it works that activated my meta mask and so you can see my account here and you can see the network ID of one and so if I change accounts there's no polling I promise you can see that this updates automatically and you can kind of trigger you can use that account update to trigger updates of you know the account balance of you know all kinds of things if the network ID updates you can use that to reinitialize all your contract objects etc the patterns for that are actually largely like agnostic of web through react left three react is really just this like layer that connects connectors like that you talk to meta mask for example and then the rest of your react app and then once you have this kind of like data flow back and forth of accounts and networks and things like that then you can kind of write patterns and abstractions that that you know that use that data in intelligent ways and so if I want to for example use justin fira as a data layer so that when people land on my page they don't have to have meta masks I can just click to make click activate network here and you see that there's no account right because inferior doesn't have any accounts but now we're going to use you know still one and so it's actually happening here is that there's this data data provider this node connection that we have that we can access and we can call read methods on the blockchain alright we need to check account balances we can check initialize contracts all these things and we can display data to our users without actually having to you know require that they use meta mats immediately loads of page and so this is this is really powerful and something that kind of the best apps are doing these days and is definitely something that I recommend doing I don't have my treasure with me but I could activate my treasure here you know it pops up with the little modal that maybe you guys know if you've seen that wallet connect oh I have it initialized already so if I just sorry I just local storage dot clear here oops okay I broke it sorry whatever I already connected with wallet connect on this site which is why I did that but anyway yeah sorry go so I recently joined Eunice WAP and Eunice pop is actually right now we just migrated three days ago this is now using with react so if you trust UNICEF and you've used that and you feel like that is you know a good pattern then it's yeah you know I guess that's the proof is in the pudding the website works it uses about three react and yeah again what we're super excited about is like if you tried to make a PR against the units off code base like it was very hard and people weren't doing it just because it was you know is a bit of spigot spaghetti code and the good news here is that like all of these little buttons these different patterns of connecting to web three are just little modules they're like they're like 100 lines of code right and they're super extensible super modular and so when there's some really cool new web 3 provider that we all love you don't have to retool your entire tab you can just write a little connector put another button here and then BOOM you're kind of in so yeah I mean it's not you know there's some weird edge cases like I couldn't get the demo working here just like you know there are some like I guess maybe rough things around the edges but the core logic definitely works it's like depth you know it's been tested and kind of like live gaps and I would welcome any and all ideas contributions etc and also I'll be around you know all day today and tomorrow if you have any questions or want you know ideas or help building out filling out your Deb so I think that's it I'm gonna close out the website where you can find all of the info and Doc's that I've been just playing here it's just no sense meister / go through react it's on github so thank you very much [Applause]