HandyCon 2024 | Day 2 - Own Your Spaces | Add Your Pages - YouTube
https://www.youtube.com/watch?v=qK6G764Pn7I

Transcript:
(00:03) [Music] all right we're excited for this Nadine it's her first time presenting I think she's been in a community how long have you been in over a handshake now uh since 2021 yeah so a few years it's great to have people you know getting uh to share at at the events and in the community and share some of your things you're working on so we encourage everyone so I'm so happy you reached out to share um and uh pixel tinkerer is your handle or your what's what's that I just made it up for the event because well I
(01:03) in French I say Bri colors the pixel which is the same so I I try a translation and it was Pixel te career but in Discord I'm also Health which is like a magical creature too great great okay I I'm gonna I'll be backstage you can start to share your screen and and share us about your what you're working on I'm so excited to see myself thank you again thank you thank you to to let me present this um so I'm Nadin uh I'm doing crypto and especially anek since 2021 since three years I'm from Quebec
(01:43) and I'll move directly to my presentation because I have so much to present uh I'm sharing the screen the enter screen right now uh my presentation is in three part first I will explain what I means by what I mean by own your space and then I'll give an example uh with a user script in the namebase account and then I'll give another example if I have time with the Bob wallet I can own or space into bub wallet uh okay so uh have you ever dream of introducing new functionalities to your own and Shake wallet or even adding
(02:25) new page to your name base account don't wait for someone else to make it happen add them to your space today so in this development Workshop I will guide you through the technique I've employed over the last three years to manage my portfolio effectively soon I plan to utilize this insight to develop a keyword tagging functionality aing to facilitate the classification of keyword so today we will not do all the keyword tagging functionality but something close I we will try to make a like functionality um well what I means by
(02:59) own your space suppose this is the landscape uh you see from your house you see it through a window so you have this window looking at it and you see the the the landscape through the window can you draw on your side of the window I think if it's your house you can so from your own home home inside the house uh in fact you can so if it's a instead of being a real a real a real window and a real landscape if it's web page that you get from the internet so here the cloud is like the internet and you get copy of
(03:41) the web page that you get into your house into your computer and you display it on your screen um can you change it so it's a copy it's yours so I think we can change it you can then on your side color social media even if uh the Facebook uh founder doesn't like orange and only like blue we can color Facebook orange if we want on your on your site well I still need to go on Facebook to see the family uh you can reorder replace thing in the page like you want and you can also create new page if you use a simple
(04:22) technique that's called how can it be done with user script uh people add something in the the day called griezman key and it was used to tune the website on the client side and um this was a plugin that we installed into a browser that let us write script to change any website on the CL client side so we call this a user script so griezman key doesn't exist anymore but something very similar is existing which is called temper mon key so this is the logo um uh what is the ecosystem of the user script
(04:58) uh today well you can use the plugin Avenue we can also use the dev tool if we are Dev like many of you listening to me are probably um the plugin Avenue Avenue it's good for sharing with a user that are not programmer so temper mon key is a plugin that allow to put many user script in it and a script autor Runner is just another alternative that I'm using today and the dev tool option it's good for us developer it's it's less ergonomic it's it's not user friendly but it worked and we don't need
(05:36) to install anything you can we can just write script directly in the console or even use some snipet in Google Chrome and other browser as well if a user script is ready and final we can distribute it so we can either create a new plugin but it's complicated we need to ask permission it require an approval sometime it it's require to pay money or to pay an inspection that cost a lot of money it's a it's not secure that the plug-in can be distributed and will stay distributed the plugin can be
(06:12) deactivated later and removed from the market we can uh a better idea can be to create a bookmarklet I've seen people uh in the community do that I think the r did it uh to distribute some functionality so the user can accept I have to accept any warning but it's easy to use and we can also use a user script plugin it's maybe the easier solution I guess but the user need to install the the user script and then install the plugin and then install the user script so it need some teaching well anyway um
(06:50) my my sharing today is more how we can transform or tool for our own use uh we can think about uh transforming it for use after uh it's some example of user script for people that have never seen that so that was my script for coloring Facebook uh I was just using uh JavaScript to change the the CSS so the trick was to inspect the page and find the the class the ID of the object that we wanted to change and put the arranging it uh this is another one this one I'm using it right now in in fact this is when I open chat GPT too much in
(07:34) my browser I don't I don't want people to see when I present especially um that I have Chad GPT open so I changed the fav cone in it and it worked so uh it's a it's a small trick also oh this one is a one I use in my pkb account they have so many label category and if uh I click on the small label Eon here for the people that have a pogon account maybe you know that we are all the mener in fact so many people have a pogon account when you click on the label econ here it it appear the list of labels appear but it's vertical
(08:20) and mine was too long for the screen and not very easy to look at it so I just change the CSS so that it's a it's become a block isier like this so this is this one is used with with the with the auto Runner solution here okay so this was the the idea that we can change thing on our side so it's 10 uh the first example I want to give of what we can do with with the wallet with danic wallet is the name base example so I've been using this a lot uh lately uh especially in the the first year but I'm still using it uh so this
(09:12) is how I see the name Bas architecture of course it's not complete I have I don't have access to the server side architecture so I call this a blackbox but what name base uh give us as information is an I so they have an i which is the documented in a GitHub uh pages and we can access this I uh this I can be accessed to way either it can be accessed from the from an external app for for example a react app a web app other app and uh in this case we have to pass through an authentification process and then we can use uh the
(09:53) documented app um or we can or well inside the name base account the web page with the tated user can make directly an AP call through the to the IP without further authentification because the user is already authenticated in the name base account so what I often do is that I just open my browser on the name base page and I run my uh my script um I I use the IP directly there so it's easier for me uh I share my trick with you but please do not abuse I would not be the cause of any problem on the namebase
(10:36) side um you have to know that on their in their G name base have this text where they say that they rain the right to ban your account if you are abusing dip uh don't fear you have to be worn uh at least once before before it happened but uh the trick is in fact to to make sleep to not Aras the server and to make a a sleep between each call and not use it all the time personally I just use it when I look at it personally it's not something running all the time it's not uh a use that is really greater than
(11:18) when I click and click and click in the market uh that's an example of a um an URL a URL that I can use so I have to use the the the browser that uh is ATT tated here so um this is my name base account normally so you see that uh because I'm M skated uh it can go and get all my domain name uh in my account well from the 200 ofset uh uh with the assort direction descending starting with d with a minimum length of 10 I wanted not to show all my domain names so I I use this uh this filter uh that's the one I'm going to
(12:15) use to uh to work with the code um if you want to know more about this IP you can go into G tub like this and look at the I documentation each each part of the IP have its own MD file with its own documentation and you can also inspect the URL in the network Tab and there is in fact more a than less okay um to uh to do my workshop you have to install the pic code Library I will give you the slideshow after so don't no need to screenshot everything I show you and you will also have the video I guess after so this pic Library
(13:02) uh well we can we can uh well I I I put a part on it of it here you have the original here and in my uh in my name Bas account here I have it completely here and what I'm going to do I'm going to put it a copy here in the speaker note so you can just copy here everything and and you will have it so I call it pic code I run this um I have also um some so I have a function that create a div with text a function that sleep a function that call the other library and convert a pic code if it start with exan dash dash so all this code this is a
(14:01) just this is just those five function so I'm going to just execute it here and then that's a another code I'm going to copy past because I don't really have time to type all that today it's just a display so it's just HTML and CSS and it's put it all together to make what I call the portfolio display and in the portfolio we are going to click to like some name and hopefully they will go to the best display so that's the the challenge today so I'm gonna um I'm going to copy
(14:42) this into uh the display so I create a new snipet I call it display here I put this I put also the cses I'm going to increase this and I run so now it's not going to display because the function are not called so we have to uh go uh to go forter in the in the tutorial so now we prepare an app and we prepar the portfolio display so now I'm going to Cod a little bit the app here so I think function app oh bad keyword and this function is going to be able to call all the asnc function also so prepare the portfolio display here
(15:43) and that's it so now it's going to happen so now my my display is ready to uh to display whatever is uh requested in from thep so um I showed the the link to you what it was giving so this is my variable that all that that link so I'm going to put it here I'm going to reduce this so that we see more the code reduce this and the console and if we have some problem um okay we have time to type some code I [Music] guess um what we want to do now is to uh list the name um so what we can do is uh to create the
(16:46) link first so the link plus the parameter um and what I did is that I finish my parameter before seeing what is the offset so I need to add also um some uh some quantity so let's start at zero for example and maybe we can check if the link is okay let message equal to a the fet the link and the data is going to be well if you um when you do this you need to uh transform the data into real Jon well the Jon into real JavaScript object so you do this like this
(17:50) um and the data that you receive from um from name base if you log it you see that in fact your have to go into that domain like this to get the data so we could check that it work like this so it seems to work you see I have some Zed name here so I'm going to wrap this into a function and the function will be able to list any page so it's going to be X time 100 you return the domain and what we need also is to put it I think since it's waiting on something so now we can just call the function uh let domain equal to a
(18:50) wait this name let's see with zero and try the console log here it's working so you see the principle on which it's its base is working I will not have time to type all the code so uh I'll just copy paste my function that show name you see that's a function that do a for Loop into the name and just convert the P code and add it um well first it goes to take the uh the element the HTML element by ID and then then it happened to the uh to the HTML element like this so I'm going to add this to the um to the
(19:44) code and Next Step oh sorry so next step we are going to try this into a loop so this Loop is going to go here inside the H um instead of calling this once with zero I'm calling it many time with offet with page number so I need some variable here some additional variable here so we can put it on the top so you see now that the uh thing display but there is a s issue normally it's supposed to be a little small square around anyway um okay uh let's move forward uh now you want to click the best name I want to
(20:49) click a name and when I click the name it's memorize and it stay somewhere so uh first I have try with unclick but it trigger a security procedure the the message is later in the slideshow so what I did instead is uh to uh attach the click event to the object here in the show name function uh it could have been factorized but uh that's the way it is for the moment so I do this now I can commment this I don't add to the inner HTML I do the append instead just let check if it works it still works yes it
(21:37) works okay um we will want well this function is to choose the best we want when we click on any name to choose it as one of the best so we need this function that say that we choose the best and we will L it so uh well for now I just log and I put the background color pink it's not really working but it's doing something so it show that the function is called okay now I'm going to um I'm going to have to create a local database uh well a local database you have one in your browser it's called
(22:24) thecal storage and it memorize things so what I can do is to um put all this well those are function that save the the an aray uh serialize it in the local storage and deserialize it each time we need it and add them to it so I have an unit function an add function and function to get the data another function to set the data so I'm going to create again a new a new snippet whoops uh this one is going to call it's going to be called data and I'll put all the I don't have time to type it so I'm
(23:12) just copy pasting it I'm so as sham of this but uh now what we can do is call this at least we will do it manually we can in the choose best we can call the fun with um with in fact uh the data that is inside best because when we click CH choose best what we receive is a tag um so it's probably something like um it's probably ler HTML yeah that's it that's inner HTML so when I add best it's best that inner HTML maybe the name should be best tag here so um I have to save run again and now it's going to be saved
(24:11) into my um into my database my into my local storage what I want to do uh now okay it's already integrated we did it what we need to do now is to uh work separate page by your whole path so uh I could say that if it the path is portfolio I'm going to do what we just did but if we go on the other page the best page we are going to show the best so um I'm just going to add this line to the user script here um in the app and then I'm gon to do this if those two if in fact those two hi here so this code go in the first
(25:17) if this code is not tested so what you have to do now to be able to test this code is to really be there at both portfolio which is a 44 pages I have to execute everything again and it works so I saved thing and now I'm going to try uh the best so the best is um so show best okay prepare best best display is here so here we see that we have the best display um this is the loop we separated the page so best a wait L best so is this thing working it seems to be working so it have some that I've listed
(26:27) previously and uh show best which is a function that I've uh I've not coded yet which is here so I'm gon to that's the same and show name but it doesn't put the event and what it does also is if the name is in the best it's going to say okay it's pink so um yeah it's G to just list the best now that's the one that I I previously click on them well I've worked before the demonstration so that's why it worked so that was the first demonstration I have another one yet to show you uh but with
(27:14) this technique we can like name and have what I want to do for me is to uh separate Name by keyword and then send them in various in a separate wallet depending for example I have the blue name and the red name and the blue name go in the blue wallet and the red name go in the red wallet and I can just go in my name list and click and click and click and it's going to be easy to uh work with my wallet like that and not have everything that St in the account okay uh now the bub wallet I'm going to start it here
(27:55) you see the the command to start it is uh npm randev can see here I show it like this those are the command to do the bub wallet installation it's based on um on the glass glasman tutorial and I've added some line because it was not working for me maybe I have I had not the same distribution so this is the technique that work for me those package this node version uh this shortcut the port depend if you work on test Network on the dev network if you do transaction please work on the test network but if you just work on the
(28:41) display like me today it's not uh important this is what well it's not a complete Bob wallet architecture but that's the one that is not classic you see when you have a react application you have a a classic road that have a that are listed in an app that contain component that contain page the page contain the component and here in the Bob wallet architecture we architecture we have this additional thing we have EPC call between the react component and the background if I understand well and the background do RPC CS the known modu
(29:20) um which make the SSD library at work to talk the language of the blockchain but this not views for me today that's just something I had I wanted to show you today I'm just going to work on the display and I'm going to show you how you can add a page into your own bub wallet so the page I'm going to add today is called super bed so if you um oh I just synchronized 30 minute ago you see that it open the bub wallet with the the bug console open and uh well it's going to finish synchronize you see here that I've
(30:05) already added some tests a super template and one with the table so uh I can zip them for you and you can use them as a template and that's what I'm going to do in fact today because we don't have much time when you want to add a page into BB wallet you need first to list it in the new that I means here so that's the sidebar so uh for this uh I'm going to yeah open my guide here so you have to go into a app component and the sidebar is the component that is like the menu so you go here and you just open
(30:55) the index. TS like this you take uh you can remove naving that you don't like and you can add the one that you need so here you see okay I dream to remove this here because I don't have any claim to do so and my dream would be to remove it uh I think it's not uh a problem to remove it here so I just give a demonstration and uh it's going to recompile and you see it already disappear um now what I'm going to do is I'm going to add a new one here which is going to be a super names um the text is going to be super names
(31:59) and the oh there is an error in my in my slideshow okay that's it so the path is the path is supernames the text is supernames that's everything we need to no um oh I can close this now we have this long super names okay now we have to match this with this so uh super names here so this component this protected root is going to go into uh the main app so I have to go into Pages here uh in the app here you go in the index here and you find all the protected root that you can have here and you see my test so
(33:02) super names and super names and we have here to name the component which is super names so this is the text this is the component and this is the path and that's not everything we also have to um like shown here to other copy an existing module uh well domain manager is the one I started with but it's too long for today for today we will start with my template which is just uh this HTML and this CSS I can uh save some time here by just copying it here so my spr template is going to be super names super names uh I don't really need
(34:03) the constant um we need to export the supernames at the end so let it works we also need to import the good Styles sheet supernames and let's see uh superame is not defined oh I forgot one thing in the app here we have to import the component here else it's not going to work so the sprins component from the superame directory so it's going to reload and now we have the superame pages where we can do stuff in it so that's how you can add a page to your bub wallet um now the workshop is to make what they
(34:57) call the love name feature what I'm going to do is I'm going to again copy paste it so that uh we maybe can make it before the end so first of all I create a false name list just to see if I can display uh something inside superame so this is a supername I do instead of doing something I create my false uh name list um um I want in fact to have a a random function that is able to show a table so this is going to be my random function and to be able to do that I also need I forgot to put it it's in the
(35:52) other template I'm going to need I'm going to need need uh the the sportable template here because by the way thank thanks a lot to W uh he he helped me a lot with Bob wet when I started and here the they have made some component easy to use so I just want to make sure I have everything so I add the for the format name but and not the table component so now the table is defined so I have a table of bad name in fact but it shows that it works with this code so now what I want to do is to uh make um a love name components I'm
(36:48) going to go into an existing pages and change it so the pages is a Pages uh with existing Nam so you have to uh find some some name like art print and what I want is that in my art print pages when I go in my manage oh I forgot it in it in my demo okay you you see what it gives I I have this I I've added this code so that it show um Earth where I can click and it memorize uh the art print uh name name into local storage well local storage is not already into the Bob wallet but what we can do is to just install the
(37:37) component so you can just go in the node local storage and you have this component you can just do npm install of this into your command line so uh I just I don't want to close my wallet but what you do is uh so NP npm it's already done so it's not going to do anything not local storage and it install it for you and you can use it like if you were in the browser so here it's three version where how I did the love name um add component in the my domain pages so a first version was to just to the
(38:35) CSS um in the normal CSS file this is the it's theal choice of the programmer so maybe that's the way we should do it if we plan to publish the code and merge uh with the real code but if it's just for you maybe you can try the other way too so another way is to use what we call a style component which require are also to do an npm inst sty of style component and with a style component you can put the CSS directly into the component is it bad is it good it could be a philosophical question and the bad
(39:11) thing is that it separate less the decoration from the content than the other way but the good thing is that the component become become more reusable and react personally I don't like a lot react but react is a lot about reusing the components maybe that for my love name component that was a good idea at least for this one and then I I try a third version where I use um a separate component that contain the style component and that was the love name box and I write I love this in it and then I was very motivated I did not want to use
(39:52) an emoji because I wanted to to have a bigger hurt and play with the color so I found it stal on online to create an art with CSS uh transformation so I added all this code to the her box I created the her box and I just use the tag Earth here and that's what make appear this Earth here so now can just click on the name here and with some twe uh each time I do that it's save in the local storage and I bring down the data of course of the name so that when we click we know in which click on which name we
(40:38) click so with the with props like this like this I don't like context um so now I can just click on the earth we react to the click we say that we love the name yes we love the name so now we can uh just save this into local storage instead of doing a console log and now the love is available everywhere so um I miss I miss line here I will add it to so save the the love but we can see it in the code so we can just search for the uh Pages my domain I forgot to erase it so you have it so the function love this is here so
(41:33) it save into local storage the the name and lat now like I said the love is available in the local storage so it's available everywhere we can go back into our super name pages and get the name uh instead of having the bad get name list function we can replace it uh with this true function so this is a mup and this is the real one and now if I go and superame you see all the name that I Loved Before I did it a lot of time before the presentation so are listed in my superame pages and I could also um ditch the table and go with a
(42:29) display with a a label label light like I did in name base so it show you that uh you can hack into your bub wallet and make it do everything you want and it's very fun to do that um if you have any question don't Tate I I am Health with he on Discord this is my email I will find a way to share with you my show with all the code of the demonstration I hope you liked it uh I like it very much on my on my side um also I just wanted to say that I it's presented to you by do broley which is one of my handshake
(43:12) project you can by proudly name at ana um there is a lot of reference after but that's necessary thank you very much do you have any question that was epic there's lots of there was lots of discuss discussion there was lots of discussion uh in the chat and uh that was intense so I'm so happy you made it like uh it definitely was was worth it and uh you know um is there questions I guess you know I mean I I have some thoughts too but there was people talking about some people are just kind of understanding as for portfolios or you
(43:55) could do you know what are some things you could do with this I guess maybe more on a very high level idea like what are some of the different things you could make yeah you can uh you can do everything you can you can manage your portfolio you can search for name you can but the portfolio is the more pressing issue in my case because they have a name to manage and I want to do it well got it I'm to look at the chat that you told me there's lots of chats and thank yous and uh other input wow thank you yeah so I think others have this
(44:37) problem too of of many names and managing them and displaying them um does anybody have specific questions right now I know it's late and uh I really appreciate your time there's a lot a lot of chat right you're seeing a lot but I'm hoping somebody can pop some at the bottom but but but um but yeah that was a a really great session ER custom looks for name base and sharing a community yeah maybe it could be templates people could share and then like use is that something I think that's what maybe encrypted means yeah
(45:18) that could also be used commercially and to be to uh to improve uh and to give team also to a website it could be G it could be done to any website but I know that name base seems to encourage it with the app so I'm not try to to use it publicly yeah it could be we could have our own Bank of users CRP and use with all the Poplar and Shake site like name base all right so I know it's late for you and never lot and I think Ann was saying in the backstage maybe you could do another session later or we could do
(46:02) more or yeah encrypt is saying we could add chat to name base yeah that that would be great yeah I mean we all a lot of us live inside name base so more features that we as the community could add on top would be really amazing okay any anything else you want to share or how Yeah you mentioned the proudly so that's on inira it's so people can support you by buying a proudly name on CA which is great absolutely absolutely any other links or places or ways people could find you or ask you questions or thank you elf uh
(46:42) I'm elf and into the U handshake Discord I will eventually create a telegram account I another time but for now it's a discard elf uh in name Bas I'm in a boat the girl in a boat and the in the uh in the uh General and Shake uh server it's eelf e l p h e wow okay great and um so this is the last session for today I'm going to do a closing session where we'll go through tomorrow's agenda Nadine and everything and I've yeah I've seen the auctions and in chats so thanks again for sharing with us it's really
(47:24) appreciated thanks to let me share this and have a great day okay great have a great hand everyone section session second I just I just want to uh thanks again everybody that gave help in the Discord especially redf also and everybody okay yes yeah Ric is great we we really appreciate him and others and yeah that's what makes this community sustain itself and grow thank you that's a [Music] wrap