ENS 🛠️ Improve Web3 UX with ENS

[Music] hey guys uh if you anyone think about hacking first you might want to take this photo Q code because this is a slide uh yeah you this slide itself and then basically it has a bunch of pointers so like I think some of the tools if you want to use uh there's some reference page on that is go H page but best to just do that and use it so I'll just wait for another 10 second oh every is okay still taking okay that's good so welcome welcome to the workshop and so my name is Makoto also known as MTH and my colleague Muhammad also known as T and I I don't know if you guys are pulp collectors uh we have a pulp and the Boost just Pro that we met so just come and say hi just collect or you can just tap this andc card after the talk and uh so today uh yeah I'm going to talk about what is ens and also building on ens but yeah with a slight focus on ux uh as the title says and the price wise uh we yes we may to change a bit but so just keep watching the website to make sure that you still uh fits in the category or like if you are not quite sure come to the Boost to just talk about the idea so we can give a feedback and basically three sections first one is honorable mentions uh which is 4,000 so which is as long as you do any integration and if it's cool we we might pick you that's 4,000 and the best use ofor is basically we have a like there this hack bunch of like Sol developers but there's not many like like you uh front end with like designer so we have our like a h react based uh design system so if you use our tool to build on that uh that also cut uh fits into the price so that's best use of thoring and the last bit which has a biggest pool we might change this because this is the biggest one and it's two brand new but uh it says best use ofl2 is that we recently announced that we created something called evm Gateway which is a generic framework not just to do use for ens but generic framework to be able to Curry data on stored on Layer Two and be able to verify on L1 it's a very specific Niche Layer Two tool sets so like if you are interested in this or if you want to actually hack can like 4K and they just want to improve or other new integration or whatever then you you pay attention to this one uh and I'll go through with ESO use sorry ESO duration level one level two level three okay and so why is actually who doesn't know un that's good so like you know if you type v. is you know where to send there is so that's a basic use case and uh uh just the terminology wise so if you type your name and if Returns the address it's called for resolution that's the most basic use case of ens which you can see many of the wallets you might be using another core component is something called reverse resolution or also known as primary name is that uh when you use uh daps or wallet first thing you do is you you connect uh sorry when you use a app you connect wallets to the system that means system knows which is address you are connected as so when they do that that um that basically look app uh the ens system and checks what ens name is associated with so that Al almost used as your web three identity so that's called a RSE res primary name and a couple of example is like our website like you know Greg and lots of side like have some name like this and the interesting thing is like a some names even have Avatar and this is a use case of the Avatar text record so the ens are generic like dictionary where you can St pretty much any information uh so if you put something called avat text field uh there's many tools which recognizes your avatar and a perfect example is like yeah we we gave away this soal NFC card where you it generates like kind of a you know pop and that one if you hand the the text record Set uh it's been yeah it recognize so this is great use ofns so like some example is like the messaging system uh I don't know which this Nifty CH maybe this one we miss on coinbase chat or like I how many people use podcaster a one no like many people is using but like yeah many social you know like descent ual message uh social network yeah both like forter and the lens they do recognize uh with ens so like you can use it so that kind of stuff so the the again if you create your next social network or something if you use ens as a integral part of identity that again qualify for the hackerson and then next is uh what's the time I just realiz I don't have a okay and so now uh the building on ens and so level one reading ens data such as for resolution reverse resolution again like some of the time like you might not even notice that you actually already did the integration because it's already integrated in higher level of Frameworks stuff such as like a web 3 Model rainbow kit if you use the things it's actually already integrated this the easiest like price qualification you know whatsoever right like if you l in at the web stream model it's already than that however one C which I'll explain and another tool set you might want to use is like is JS or wagi that like they who who use going to use is as JSI for the haon like half of it yeah so again if you're using it great chance you already integrating there's only one cavier that now nowadays there many any Layer Two or other evm chains have a pull price so you guys might actually want to rather than using like you know go or supp testet you might actually use like you know a polygon or other CH which is fine but if you do that and if you use uh web three model or something and then if you come to show our case chances there it's not automatically connected you know doesn't exist on layer to so it doesn't show anything in that case we don't qualify you however if you're using something like wagi uh currently what we you recommend is basically uh if you're using ea uh smart is a different story uh basically you can just even though when you are connecting to uh poly somewhere as a primary uh data chain you basically can have a maintain multiple connection stream so you just connect up and then I think for wag's case you can specify the chain ID per each uh hook so only when you display ens address you can actually points to chain ID one this one line makes the difference where you qualify for the price or not so this is the best takeaway you got so take note and uh so again this is staring design system uh it looks just very clean that like I think this page what display is great but it looks better in the real life but like again like it's a react based design system so like if you want to display like a avat like and then if you don't want to do the stying of like just you know making the round round beta that kind stuff you just use that and again these things I think this uses wag me or VM underneath yeah so it's supported and so up until now for the would you mind yeah uh for the basic one if again if you go to this link uh there's easy start guide to use so that's it and so that's level one I think this one if you do I think most of the time like 70% of ha submiss is all about this doing this but if you want to go deeper uh second level is basically actually writing data into enss such as like you know for example if you want to create your own uh identity and the system and if you want people to update your avat from your system uh you might want to actually update the text record from your adap itself in that case uh basically all the tools I already mentioned doesn't uh inte they are mostly for readon information uh not for the right information uh so in that case we we have our own Library called enjs so I recommend just you use that or uh ens is just like a bunch of smart contract so like you can just go to uh sorry include our smart contract into your project and start working on it uh and we have technical dog and but overall architecture is one of the simplest smart contract to work with that basically we have a gigantic contract called ens registry which stores all your uh name information but instead one moment seconds sorry I keep coughing so is that instead of registry storing everything they basically uh return the address of the so uh contract called resolver which is the one in charge of uh updating the sorry storing the record so if you want to change the logic uh of how you store or where to store are you basically uh create your own res or point to the different kind of res so this is our way of making it upgradeable without you know asking all the wallet to point the new registry and so another thing we get asked for last couple of ha is how to issue subnames to your members so like you know if I have makot is I can actually give name subnames to many different people so you you could use ens as a kind of community membership rather than giving away nft you can give subname as nft and actually we we did a recent integration with something called name wrapper so that if you actually give subname to the Community member that's also nft so you can do you know both things in one shot that made the before issuing subname was a lot easier but with the integration of the name wrapper it got slightly difficult so uh there's a open Pro request for almost one yeah but there's some basic feature of using subname and I think there's lots of way of like you can actually do renting or selling that kind of stuff that this proest has it so feel free to cherry pick it and integrate into your system how many T we have three more minutes to three more minutes okay so eight minutes all together so and Al but again some issue is name is cool but L1 is very expensive in that case you use a gasless one uh soal we have a framework called ccib read and this is there's example called uh of chain uh registration example this one uses key Value Store uh to store data but we have a way using CCI read so that even though people quering on L1 you get the answer from offsite off chain so this one you can use and now level three Gateway which I have to explain in three minutes okay so rather than explaining why it does I just put into the summary in two pages and I will just go through the quick demo and if you're interested I have another 30 different pages that's why I said take a QR code and I'll show QR code later but uh just go through the whole slide and come to me during the ha I can explain later so EV gway is a generic framework to verify layer two data on L1 it's not a messaging framework so we don't send uh data from Layer Two to layer one we only query and reference and we develop it especially because ens majority of use case is look up query purpose yeah quing framework no messaging and we use in conjunction with ccib read which I mentioned at this gasless way and this one he uses offchain some dat base but this one we are building it uh so that we can store the uh data on Layer Two such as optimism arbitrum but yeah uh in more trustless manner which isn't fully ready yet and currently deploying optimis or basic test net but I know that if as long as it's roll up we the frame whole REM uses roll up as a basic constraint construct so there's a bunch of I think there are two chains so you could do uh Fork dcbm Gateway itself and other implementation uh that's also hacking price and how many one minute okay so use case uh I think I'll skip q and well well let's I'll shut up install so use case is basically we are developing s that store ens data on Layer Two and verify on layer one folks from optimism team actually got super excited this idea so he came up with a soal evbm gway start where he created a u kind of NFD platform that you can kind of mint the NFD on layer one so this one is minting and currently it says probably you can't see that on the metad image it says it owns zero Layer Two NFD and sorry owns zero L2 test NFD and owns zero L2 test coins so this is a metadata but it's own all kind of generated on chain and on L2 and and uh what it does is like if you go to know right side uh if you do mean test nft uh it's minting usually it takes uh in the test name you have to wait for 3 to eight minutes and optimism main you have to wait for a few hours but once it's done uh this now says it meta data says oh it now owns one nftd and the cool thing is I think most of NFD as you know metadata is just URL and it could be in ipfs or it could be D date base but in this case you can actually it's actually on I think something like nons sorry nons yeah non NFD the one gets Miss they are I think on chain soal NF metadata NFD where they basically create a generate SVG uh data information so that he actually render the whole thing on chain and what they did is like they basically do that on layer one with the layer two data which is there's all whole example in the next 20 slide which I don't have a time to display so hold on I don't have time to skip 20 slid so I just go straight to the bottom and uh yeah so again this is the QR code if you you came later and if you haven't taken photo uh yeah this one link back to this whole slide so you just read through whole night and if you have any questions please come to see me and Muhammad in our inss Boo and yeah that's it thank thank you do we have time still have time for yeah any questions no okay so ready to hack good luck happy hacking