Mastering DApp Development on XDC: WalletConnect, WAGMI Integration, and Enhancing User Experience

foreign [Music] welcome everyone my name is Nick and today we will be the like mastering our development skills around building dubs specifically on the xcc network um so I have been working in as a software engineer for the last 14 years approximately and my first um kind of interaction with a blockchain space overall was in around 2011-12 through one of my mentors the onices inros and today I am the CEO of an artist where research and software development firm based all over the world pretty much um today's presentation will cover those uh for pretty much aspects so give a brief introduction to XTC I will share with you my observations and then we will all together start building a quick web application uh for that you will need your laptop node.js installed and quite some patience so quickly about xdc the existing network was founded and established in 2017. um by a group of individuals which believed strongly in the blockchain technology it's a proof of stake um Network um it is quite fast pretty robust and very cheap and there is a amazing foundation and Community behind the network for making sure that all the developers and community members are very happy within the environment so and now I will share with you some of my observations based on the companies established our company is established the last three years so we have seen quite some dubs on xdc network on flyer Network where we are also building and so on and seemingly there have been quite some problems with those dabs um most of the times we have noticed that because everybody I believe in this room will agree that the onboarding of a user and the user experience in the web free is not the most like easily understandable thing if I showed a flow to my mom she'll probably freak out and not speak to me for a couple of days um so the one thing that I have personally noticed especially in like comparison to more traditional markets is that there is no user flow we do not structure as developers our thoughts we usually go all in and we're like oh this product should have those 100 features all together at the same time and I should just throw them on the interface the user will figure it out because he's smart and so that's usually not the way to go because for quite opposite happens the user doesn't know where to click doesn't know what to do she's not even sure what this thing is doing and then she leaves So based on that we're often giving either too much information or too little information um most probably my mom as I mentioned an example previously doesn't know what is a throughput doesn't care what it is doesn't know what's the gas costs and doesn't care what this way all those little things should not even be of her concern um and usually there's tons of dead ends in user experiences around web free um what does that mean you do one thing the information never refreshed uh you now do not understand what you're supposed to do was the interaction you initially did ever completed uh what did exactly happen and for all those reasons users just lean to your platform and most probably never come back so a very very important tool is the user Journey um it's very important to understand our users and that is probably something that we need to do better um one of the greatest tools of web free is that we have a direct point of communication to our community and for the developers of the previous let's say decade that would be just until like a golden I don't know um shuttle or something because you can do a b testing without doing any assumptions anymore you have a direct feedback of the user to tell you exactly how they felt and what is this about to them so you know Bruce Lee famously said be like water all right which means like listen to people in this case and be ready to make the change not to be opinionated you might be totally wrong about what you're assuming and for that reason it's very very important to create your flow so in today's Workshop we will be building a very simple dap which is gonna allow you uh wrap and unwrap a native currency a native currency is the main currency of the blockchain for example on ethereum is The Ether or if token as most might know and you can use deposit of withdrawal functions so some functions on the blockchain which allow you to create or take back your ethereum with this rap native assets or in short not so [Music] um today we'll see that the user enters a web page and in this case I will in short show you how you can have your application interact with multiple networks instead of just one and then the user needs to select a network on which they are connected to or they want to use the application select a function which they want to perform in this app so they need to choose will they wrap or unwrap and then they can see the balance that they have available to perform that action and they can add an amount that they want to interact with and submit the transaction that action would let them into two possible scenarios the transaction failed or the transaction was successful if the transaction failed we need to show the user an error message and in that case take them back to the step where they add an amount and submittance to the transaction and if the transaction was successful we need to show now to the user the updated balance and to end the flow pretty much to tell them hey your transaction was successful good job you have nothing more to do um yeah there's many steps in this flow as you will see from the code um I hope we will be able to finalize that in the next 20 minutes bully if we will not be I will be right outside the code will be public on GitHub feel free to ask me any questions and to go through that right there um yep so that was our user Journey it is very important when you're building something now that you're in this hackathon to sit down and go through the exact Journey you want to deliver at the end of the hackathon because many times that's how teams kind of fail to focus and lose the deadline and never deliver something actually functional the template that I show is a default template by a tool called figma you can find it online and you can use a figma the figma tool for free as an individual for the next steps and you will need as I said node.js any source code editor we do not discriminate the choice of that a browser and a lot of patience because that's pretty much the main thing that you need to have as a web free developer so be prepared um and now let's go to the fun part right so I will show you some codes but first of all I will ask you some questions so how many of you have actually built a front ends uh decentralized application before so 2 3 4. awesome and how many of you have interacted with what at least one before those dates okay approximately the same amount of people um so awesome today we will use Technologies uh as nexjs uh talents the assess um wag me which is a helper for web free related actions and rainbow kits which allows you to utilize the wallet connect so let me open my editor at this point of time I will simply assume that you have your node.

js set up and that you have your vs code open I will actually give you a couple of minutes to achieve that now as I said I will make sure that I will put all this content online so don't worry if you miss something and go on in on your own base so make sure that you are not trying to Brown after me and one very important aspect Feel Free at any point of time to interrupt me and ask a question that's very important for everybody to know that we're all following and it's like there is no reason to be shy we all did something for the first time and that's how we all learned so to start with we will create a new next up the commands to do that is npx creates next up at latest and I will name this application youth global hackathon and now it will ask me several questions would I like to use subscript with this project I definitely would he explains yes definitely Talon CSS now this is something that I personally usually choose not to I personally write most of my CSS myself but you know that's something that is up to you would you like this project to use SRC directory yes now for the upper router because there is more documentation online on this solution I will choose no right now so anybody who's watching online or yourselves would be able to find more material online and would you like to customize the default Alliance for the Imports no and this will now given that we're connected to the internet and yes we are uh install all the needed um tools and dependencies for our application to be able to run okay and that was indeed successful and now I can run my application by running npm around devs oh that is not true I'm sorry I will need to open actually so right now I am in my computers Repository and now I will need to open the project that I created wherever I created it uh should be yes right here so I'll open this folder with the vs codes yes I trust the authors and now I can run npm run devs all right by running this I can check in my um browser that I can see the screen right here so our next JS application has been successfully installed and now we need to install all the other tools that we potentially will need to interact with web3 right so the tools that we will need as we said previously are rainbow kits wag me and one thing that we will barely use but it is needed under the food is VM so those modules help again from the developers to interact much easier with um with the blockchain most of times the biggest problem that both myself and most people that I worked with uh had is the ability to refresh pretty much the data without initiating extra functions in our code so this is something that wag me solves great time and wallet connects is or rainbow kids in this case is something that allows us to let the user connect with any wallet they have they might have a ledger they might have a metamask they might have a rainbow wallet um so they wouldn't need to care about the exacts of which wallets they need to use so now that we have everything installed you will be able to see all the code base here and our main folder that we will care about is the SRC folder most of our changes will be done here and to start with I will open the apps underscore apps dot TSX file which is the main file where everything starts so everything that I have on my application um it is going through this file in order to be run I will add import pretty much the style from rainbow kids so it's at rainbow kit me slash rainbow kit slash styles.css and then what I need to do is I need to set up the wagme configurations I need to set up the rainbow kit provider and I need to make sure that I will say tell my app which are the networks that I wanted to be connected to so let's start one by one so first of all we need to get the rainbow kids to import the rainbow kits into the application so that is done by import rainbow kit provider um so they get default wallets is not really necessary here and then we will also need config chains and wagmin config chains functionalities added here so you can see that I imported those three functions here if you're wondering where did I found those I found those by Googling rainbow kits and on the website of rainbow kit there is a view instruction website if you want to use your copy paste those additions it's it's the easiest way um so now I have a mass of the needed functionalities or modules imported now as I said I will need to import the network which we will be connecting to and a provider a provider is almost like an API Handler I would say which is allowing us to connect to the blockchain as an API so there are several types of providers in this case I will show you the public provider functionality but there is also the Alchemy provider if you're connecting to the ethereum network you most probably want to use the Alchemy provider because it's much much more reliable so I have imported all the functionalities that I need at this moment and now I'll start writing my components so now we know that the application the only thing that it does is returning any component that is passed so it's through its pages and in this case I want to configure my chains so the way to do that is a function from log main configure chains and that returns to us and object with the an object or Barry of the chains and the public clients um now from there on we will need to create the connectors which is something that the wallet connect uses in order to understand which provider and which chains were connected to and for this one you would need to find an application ID a project ID to be more fair the project ID can be found on the wallet connect clouds website where you need to create an account with an email and a passport you do not need to connect any wallet and so on and last but not least we need to create the wagmi config um in this case to Auto connects to use the connectors from the above and to use the public clients as the client for the the blockchain so now all of our setup is done we can see that there is no errors right now as the lender works and once I will add here the two last um bits which is the wallet what may config and to the Wagner config that's on config equals Wagner config from writable and this closing statement right here is wrong so this is perfect and now I need to add the rainbow kit provider to uh to our application and I can do that by adding this function and this needs to know now uh which chains we're using and you can identify that by the variable which we defined here named chains now this looks very straightforward and this is what you would go to a point if you would have followed the Rainbow Kids configuration setup now there is a tiny problems here that if you will actually run this code it will not work and I can actually show that to you although there are no errors whatsoever on the code base if I will try to run this this is what I will get which is not what the rainbow kit websites is telling me unfortunately sorry rainbow get no offense but what I'm trying to say is that this is happening all the time in the blockchain space and you need to be ready for that that's why the patience um in our case I have found this morning what was wrong and what happens pretty much is that nexjs is running it says server size rendering that type of um framework what it does it's rendering what it has to pretty much create the UI by itself in the on the server and then it only is serving what it rendered already to the user uh at the time that it's rendering it doesn't has have the fs module which is the file system module for uh JavaScript and that is why this thing breaks so now I need to give to the config some kind of fallback for what is happening if the file system is not available at the time but I was actually loading my code and now that I added that fallback you will be able to see that once I refresh this page it will work right um now that is a job for all of us to do uh in the space when we find an issue like that most times we need to open a GitHub issue we need to talk to a bunch of developers until like several weeks later we'll be able to solve our problem so now that we have um the wallet connects application set up because I have quite a small amount of time I will rest this quite a bit so right now what I need to do is I need to add a um button which will allow me to connect my wallets and then I need to create a form which will wrap and unwrap um my native currency so I have pasted from the repository which is live this piece of code which is Tiny really it is changing the title on the uh top left and on the top right it is adding a button which says connect wallet right and now if we'll go to this website we'll see that how easy it was to connect to other connect wallets um button if I click the button it allows me to choose from a selection of wallets very simple for any user it even tells the user how to get a wallet if they don't have one and then since I do not have installed on this particular window of my browser metamask I can choose wallet connect and I can scan this QR code and I can connect with my phone for example and use it through there but for now um I will actually open it on a wallet which I have in my task uh which is the wallet right here and as you can see I'm already connected but I'm not connected to the ethereum network so I can disconnect and I can connect again once I connect again it will automatically prompt me to switch to the ethereum network and once I'm on the ethereum network I have my UI updated with all the information needed now that is pretty cool and I am also able to show the chain status so if the user switches to the wrong Network they can see exactly that they're on the wrong Network which is pretty cool but now let's actually dive deeper into some actual functions so in this case I will create a new folder which will be called components in order to have our code base a bit cleaner and I will create a new component which is called form into this folder this component oops this component will be a quite complex component in this case and it will do quite some things so starting from the from the top were importing quite some functions from wagme an ABI if you state some functions from VM some Spinners and notifications uh pretty much Library so what do we do one thing that we do is we're asking for the developer to provide the type of transaction will be will it be a wrap or an unwrap transaction into props and then the user can set the action also from outside of this components now I will really quick install the remaining um to uh dependencies and I will show you exactly how it looks or I will not really depends so I installed the react Spinners which will allow us to identify our loading States and I am also installing this little notifications Library so the idea is symbol that when a user clicks a button there is a spinner coming up if the transaction is successful the user should see a notification coming to his screen right um some very very simple things use contract to prepare rights very important function this helps you to prepare the transaction before the user clicks any button and that will allow you to make sure that there is no issues with either some mods that you're doing on the front end or some other kind of you know malicious behavior that's the your user can do you can disable it to Theme by saying when is this function enabled or not and you can also um provides a um watch so there is a watch function which you can set as true um which I will set in the seconds what does it do it allows the user to see in real time what is exactly happening with his balances and um anything around his screen so I will add the form components here and as you can understand here it will tell me to import it and I will also add the states which is the action awesome and now there is something missing here which is the ABI so the API is something very very important and it's something that you and your fellow back-end developers or smart contract developers however you would like to call them um are very you will have to find the common language on this one um the ABI is almost something like a API documents if you wish the ABI tells exactly to the programmer which functions are available for Sim to access through the blockchain and it's definitely not an dot ABI file it's a Json file um and now that I have added that here you can see dot slash constant slash Abi awesome um and now we have this piece of codes which in our case should work but it doesn't let's see what's going on around here and if somebody needs to ah yeah and I know what's happening here so the application tells us that it doesn't know what exactly is the use notification why is this happening is because we added a module which we haven't defined in the specifications of the application once I do add this property right here which is a notifications provider it will allow me to render my application and now I can see this exact UI right um it is a pretty simple UI shows me the balance that I have on it and I can wrap or unwrap based on what I want to do but obviously those functions are right now based on my codes pretty hard coded so the next step of what I need to do is to add the chain on which actually those functions are available and this is something very very important as not quite documented I would say uh so you can add custom definitions of custom chains uh in this case I have added several Networks and you can see that I have to provide quite some information what does this mean is that if what me or wallet connect or anybody is not providing me that specific Network or is providing me that specific network but RPC the RPC sucks and I want to use our own internal RPC I can go ahead and override every single definition that there is for even for ethereum right and I can use my custom definitions with my custom Networks to do that I need to create this little object here and then obviously to export it from this file and now in place of mainnet right here I can go and I can see xdc minute right and it will bring it from the file that I just created and now you can see that I'm connected to the wrong Network although it is bringing me the data from that network if I would go and switch from here you can see that I just connected to the XC Network I can wrap one xzc uh you can see here the white dot spinning which is our spinner if I reject it it goes back to the default States I can confirm it you can see that the wheel is spinning before because the transaction has not been confirmed to the blockchain has not gone to the blockchain now that it's it went there um our balances should updates and our inputs went to blank um I have been informed that we are out of time so this is the last thing that I'm gonna unfortunately show you and that is the fact that as you can see this my balances were not updated and that is something extremely important for our users so in wagme which this is by the way for the website for wagmi uh one of the one of the functions that I used is use contract reads what use contract freeze or use contract 3 does it allows the user to read a specific points in in a smart contract this allows you to listen to updates on every single block so what you should really do is to either use listener or use the watch function which allows you to literally watch for any changes on the blockchain that way you you don't need to refetch and you do not need to pretty much do anything from there on I am very sorry that I wasn't able to show you uh everything that I wanted again I will be right outside we can go through in-depth specific functionalities and functions would be very happy to help you during the hackathon and good luck everyone for whatever you want to build