Build and Deploy a Web 3.0 Cryptocurrency Exchange Decentralized Application

hi there and welcome to a project video where you'll build and deploy a modern web3 decentralized application with a stunning design metamask pairing live smart contract data fetching and most importantly the ability to create your own erc20 tokens and much more uniswap is the best web3d app that you can currently find on youtube this is the perfect video to fully understand how web 3 smart contracts and unit swap work behind the scenes by building this single web application with me you can finally wrap your head around web3 and smart contracts there are many tutorials out there that are hard to understand they jump between many technologies and are almost impossible to follow today you'll learn how to develop a professional and a fully functional uniswap clone using the most in demand technologies today and also deploy to the internet so that you can share it with your friends employers and put it on your portfolio you might be wondering what are the prerequisites for building such a fantastic website besides a little react knowledge needed this course is entirely beginner friendly we're going to start simple and then move to more complex topics as we go i'll explain every step of the way from creating the folder on your desktop all the way to deploying the smart contracts as well as the application itself to the internet alongside building this phenomenal application you'll also learn react functional components and their reusability react file and folder structure we'll use custom hooks and utility functions to manage the state of our application you'll learn to create compile and deploy your own smart contracts to the blockchain you'll achieve mastery using tailwind and make the app responsive on all devices and most importantly you'll learn how to use crank crank is a graphical and intuitive ide that allows us to compile and deploy our smart contracts in my opinion this is the best way to truly understand how web3 and smart contracts work it has a graphical interface where you can visually track how the code is being executed by looking at its flow that's incredibly useful as if you think about it you never really see the flow of your code in your regular code editor therefore crank makes it incredibly simple to understand how smart contracts truly work behind the scenes crank is new and it has the potential to become a faster way of coding it also makes it easier to understand other people's code you're going to see that today in action because we're going to build on top of the original uniswap's code base if this video reaches 20 000 likes i'm recording another web3 decentralized application video so smash that like button with that said let me give you a quick demo of how our uniswap 2.0 works you'll be greeted with this beautiful screen that asks you to connect to your wallet so let's do just that after clicking the connect wallet button a wild metamask notification appears we can click next and then connect as soon as we are connected we can immediately start swapping tokens now there's a couple of things happening here first of all we have jsm gold and jsm silver tokens how cool is that you'll be able to create your own erc20 tokens on the ethereum network another cool thing is that we're live fetching the data from the blockchain if we try to convert 100 gold to let's do silver you can notice that both balances change but more importantly the actual amount of jsm silver we'll be getting after the swap is live fetched from the blockchain and displayed right here it works just like the real uni swap now usually a swap is a two-step process so first we have to approve the swap but since i've done before now we're just ready to immediately swap it so let's click this swap button a new metamask notification appears and we can click confirm this process usually takes just a couple of seconds and there we go once it is done we can see swap executed successfully and the balance has changed and this application is also fully mobile responsive it works perfectly on all mobile devices as well as tablets and of course desktop what i've just showed you might seem simple but trust me there's a lot of blockchain and web3 logic happening behind the scenes and i strongly believe that building this app is the best way to truly understand how web3 and smart contracts work excellent with that said there's just one more important announcement i want to share with you before we dive into the project since this is a web3 heavy project-based video i've also prepared for you two entirely free web 3 resources one is a comprehensive web3 roadmap and the other is a solidity cheat sheet the link to download these resources entirely for free is in the description on top of that i've also created a web 3.0 course in which you'll build an entire fully functional nft marketplace this 10 hour course dives into everything you need to know about solidity web 3 and smart contracts also since you're watching this video by using the link in the description you're gonna get a special discount code that's going to automatically be applied for you during checkout this groundbreaking project will impress your potential employers making gsmastery.pro the only source of knowledge needed to land your dream high paying web3 job that you can enjoy for many years to come with that said let's dive right into today's video to start building our own version of uniswap believe it or not we're going to build it on top of uniswap's original source code we'll be using the uniswap v2 core as well as the uniswap v2 periphery to build it each one of these repositories has three smart contracts and every one of these smart contracts has a lot of code but here's the thing we won't have to modify these smart contracts directly as that would be quite hard without having immense skill in solidity development instead crank will abstract the most critical functionalities from these smart contracts and allow us to build on top of them to download crank click the link down in the description you'll be created with their website and then you can simply click the download button to download it for your own operating system that process is going to take just a minute so i'll see you right inside of crank once you load up crank and open up your first empty project you'll be greeted with a screen that looks something like this to get started let's go ahead and rename our project to something like workspace uniswap underscore clone great now let me provide you a really quick intro to some basic crank functionalities the two circles that you can see on your screen right now are called nodes every node can have an output as this one has right there and they can also have inputs crank also has a huge library with hundreds of different nodes that you can access simply by clicking this plus icon on top left it's going to open up and as you can see there's notes for absolutely everything there are notes to sync some kind of data to split it to repeat it anything you can think of it's going to be there we even have some simple logger nodes you're going to learn how to use a lot of these throughout this video now we were talking about those smart contracts from unit swap so let's search for unit swap and as you can see there are a lot of nodes which directly correspond to that now in this case we first want to compile a smart contract so let's add uniswap compile to the search and there you can see a factory compiler and a router compiler let's go ahead and drag and drop those nodes right here then we'll want to deploy these contracts so let's search for uniswap deploy and luckily there is a factory deployer which we're going to put right here next to the factory compiler and there is the router deployer which we can put right here now let's make some room between the start and the end so we have a lot of space to work with now it's simple to see that we have two different pairs of notes we have the factory compiler right here and also the factory deployer and we also have the router compiler and the router deployer now you can hover over the factory compiler and drag its compiled factory contract over to the factory contract off the factory deployer there we go so simply drag and drop it you can also repeat the process for our factory compiler and factory deployer every node in crank needs at least one input or one signal to start working in this case the starting signal will be the whole start of our contract compile and deployment process which is the green node on the left side so simply drag the start to the input signal of the factory compiler on the other hand a factory deployer can have a couple of inputs it has a fee setter address which is optional and it also has a config to create the config we can create a crank store so let's simply search for store and what it can do is explained right here stores data and sends it via the data when read so simply put crank store saves variables and any other data now we can click on the data part of the store and in here we can enter some values but the question is how can we know what has to go into this config right here well let's click it and here is one great thing that crank provides it's highly focused on types in here we can see the type of the config object so we know exactly what we have to pass let's go ahead and copy it go back to the data part of the store and paste it there now there's going to be one more thing we can add to it and that is going to be network we'll be working with an ethereum test net called gurley so let's type it out right here and now let's replace those strings to simply empty strings which will be able to populate soon enough with real data and since this is json we have to remove the last comma there we go so now we have our store but the question is where are we going to get the data needed for this config object as we always do in javascript mastery i'm going to teach you how to get all of the values required to properly compile and deploy a smart contract so let's start with that right away first we have to get meta mask metamask is the most popular crypto wallet out there and if you want to work in web3 space you'll need it sooner or later so in case you don't have it already you can simply click download for your browser that's going to bring you to the store of your browser and then simply click add in just a couple of seconds you'll be redirected to this page with this cute fox and you can also pin the extension to the top right of your browser now let's get start with setting up metamask to get started we have to agree and then we have to create a new wallet you have to choose a secure password 8 characters minimum and agree to the terms now this is a really important part and i will suggest you to watch this two minute video teaching you how to properly store your secret recovery phrase when working with web3 cryptocurrencies and wallets the secret recovery phrase is the master key it is the most important thing there is not your password so make sure to properly store it somewhere safe now let's click next in here you'll be given a series of words you have to reveal them and then copy them in some kind of a notepad or on a paper using a pen once you do that you can enter them one by one right here in my case it was sued we also had gym there and so on of course you need to do this on your end for your own words and congratulations now you have your own crypto wallet we can see that we are right now on the ethereum mainnet you want to click that part on top right and then click show and hide test networks that's going to bring you to the settings and make sure to toggle it on now let's go back and let's switch it to the girly test network this is crucial once you do that you'll see your own ethereum wallet right in your metamask and we'll be able to use this soon enough and immediately we can copy the address right here to clipboard go back to crank and simply paste it right here under account address now for these two other values we'll have to use another great website and that website is called alchemy alchemy is a web3 development platform we're going to compile and deploy all of our smart contracts using crank but alchemy is going to allow us to actually deploy them to the blockchain so you can either click login or click get started for free you can then sign up using google or enter your information below since i already had an account it brought me straight to my dashboard if you're creating a new account it's going to ask you a series of questions simply click next to most of them select ethereum as your blockchain and then at the end when it asks you how did you hear about us feel free to put javascript mastery in there you can choose a free version there is going to be a prompt to enter payment details but you can select skip for now so this process is entirely free which is great and then at the end when it asks you how did you hear about us feel free to put javascript mastery there with that said once you're done with that form you'll be redirected to your own dashboard there you'll be able to see a demo application as well as the javascript mastery or your name app right there but what we want to do is to create a new app the name of our app can be uniswap clone now we're going to be on the ethereum chain but the network is going to be girly there is also a wrinkabyte test network but you can see it's getting deprecated and on javascript mastery we always teach you how to use the latest and the most in demand technologies so let's go for gurley and with that said we recently released a huge web 3 course teaching you how to build your own nft marketplace to master solidity smart contracts blockchain development nexjs and much more so if you like the video you're watching right now and if you'd want to build your own full stack nfd marketplace where you can explore different nfts see your nfts and create nfts then this is the course for you just be watching this video you're immediately getting a big discount the link is going to be down in the description with that said let's go back to alchemy and let's create our great application it's going to be created instantaneously and we can immediately click view key there we have the api key as well as our https address so let's copy one by one starting with the api key we can paste it right here under private key and one more time returning to alchemy we can copy the https address and we can paste it right here under the provider url now you might already know that this right here is private information private keys account addresses and provider urls which all contain your data it's usually not advisable to simply put it in an object and store it right there we will use this method for development purposes to speed things up but the recommended approach of course is to store this data in environment variables and in crank it is incredibly simple simply search for environment and you can see a node that says environment variables getter with fallback so it is incredibly simple to get a lot of different variables from your file system where it is entirely safe and this was a cool thing we just explored about crank whatever you need you can simply search the node library for it and you'll immediately get the nodes that are going to help you with whatever you're doing great with that said we can now quickly get back to our browser more specifically to our metamask account if you close this page no worries you can simply click the meta mask extension and there also you can copy your account address once you copy it you can go to girlyfaucet.com the link is also going to be down in the description this right here is a faucet a faucet fills up your test girly ethereum and we'll need some test ethereum to compile and deploy our smart contracts so make sure you're logged in with alchemy and then simply paste your wallet address and click send me some ethereum great so this will almost immediately send you your ethereum and you'll be able to see it right there and there we go i got it immediately sometimes this does take a bit more time but no worries because we have more important things to do and those things are of course back in crank so by the time while we finish creating the compilation and deployment of these smart contracts we'll have our ethereum so no worries there great so now that we have our store we can drag it right there and we can connect the data part of that store to config of the factory deployer great now when it comes to the outputs of the factory deployer we have events error and confirmation let's look at what events say let's click it and as you can see multiplex events interesting and we can see the type there i don't really know what that is so what did we learn we just use the node library let's go ahead and search for multiplexed or just multiplex events and we can see a multiplexed event logger that seems like a good candidate so let's simply put it here and let's connect it for the error let's search for a logger node and we want the logger with message so let's also drag and drop it and we can connect the error to the data part of that node and when it comes to the message we can click it and add the value that can be something simple like factory deployment compilation error there we go and finally we don't yet know what we'll get as the confirmation from the factory deployer so let's simply log it out we already have one log node right here on the right side of our screen so let's just bring it here and let's connect the confirmation to it now it's getting a bit crowded over here so we can group related nodes by holding shift and then clicking on the factory compiler and factory deployer then right click and click group nodes now we can go to the instance of that group and then we can rename it to something like compile and deploy factory great and we can do the same thing for our router compiler and router deployer so let's simply hold shift click them right click group nodes and let's call this that's going to be compile and deploy router there we go now we have a bit of a cleaner working environment we can also rename the store to something more meaningful so click it go to its instance and let's call it config and as we said every node needs a starting signal and that's the same for config as well so we can connect the start to the read part of the config there we go so now we have the start.config and that config is getting into decompile and deploy factory which is now a node group we've done a lot of work and finally it's time to see the output so let's click the play icon on the top right of the screen to start it you can also use a shortcut ctrl or command r and believe it or not crank is now installing mpm dependencies behind the scenes so let's give it a moment once the project starts running you can see these green lines showing you how our code is being executed as you can see almost everything turned green besides our compile and deploy factory it's red so it means that we have an error there so if something goes wrong how would you debug things in crank well the debugging process is genuinely fun and satisfying to do in crank through a graphical user interface we can literally see how our code is being executed which is never the case in just plain code so how you debug things in crank is you dive deeper into your components to figure out what's happening so let's double click the compile and deploy factory you can see everything works but there's an error there so if you hover over it it says error during execution inside please drill in for details so one more time let's go inside of it and the right here we have the deploy factory contract if we hover it says again drill down for details and in here we have a node that is red and if you hover over it it says private key must be 32 bytes long great so that gave us a lot of info something is wrong with our private key and also while doing this you'll learn how to debug things in crank how simple it is but also how to dive deeper into components now if you want to go back you simply use these breadcrumbs at the top of the screen and you can see how everything is being abstracted away that's exactly what i meant at the start of the video when i said that we won't have to literally create or write or add to that uniswap smart contract great let's go back and now we can look into our config go to the data and notice right here that i provided the wrong private key this here should be 32 bytes and the key that we should have provided was the one from the metamask account so open up your extension click those three dots right there and then go to account details there you can see export private key click that you'll have to enter your meta mask password and you're gonna get your private key and of course never disclose this to anybody so let's copy it and let's paste it right there for a private key great so now we know that everything is right and i'm not gonna really have any real funds on this account so i'm showing this on video but of course if you're working with some real cryptocurrencies never ever show your private key to anyone now as i mentioned the shortcut to rerun the application is control or command r or simply press the play icon on top right you can see it's being executed project running and the green line went all over to the event logger which means that our code so far works the output window that you can see on the bottom left of your screen is quite useful we can check what's happening here we get the transaction hash and then we also get the number of confirmations but even more important than that is that we can right click any connection for example this one and we can see the traffic so right click show traffic and there we go you can see exactly what data is flowing to this logger right there isn't that crazy so again this is quite useful when you're debugging as well in this case we just wanted to see what is being passed to our log but we don't really have to use it so we can right click it and disable this node we can also see what we're getting to this log down there by showing the traffic and you can see it's counting some kind of confirmations what is really cool is that what you can see right there on the bottom left of your screen inside of the output is the real message coming from the blockchain after a factory contract has been deployed before we can say for sure that our deployment succeeded we need to wait for 24 confirmations right now we are just at 7. that is a long time but we already have the contract address that we can check on etherscan you can copy this transaction hash right there and then you can go to girly.etherscan.io or you can click the link in the description as well and then paste that transaction hash and search for it again make sure that you are on the girly test net ether scan so that's gurley.etherscan.io and you can see a successful status if you head to the from address you can see that we have a successful content creation we just deployed a smart contract in a couple of minutes without writing a single line of code i think you can already see how powerful crank is but we're just getting started on the top left of the screen you can click activity and then we can get back to editing mode and we can also close the output now we're getting back to the editing part you can now double click on our compile and deploy factory to open it up click the plus icon on the top left and search for contract deployment waiter we need to wait for the confirmation to finish so this will come in handy so let's simply take it and then put it right here below we can see that it is expecting a confirmation which we already have so simply drag and drop it from the factory deployer and it also expects a number required so click it usually it is set to 24 by default but for development purposes to make it a bit quicker let's switch it to two for now now instead of sending the confirmation from the previous node as we have been doing so far let's delete that connection rename the confirmation output to contract address change the data type to string and then connect the output from the contract address to this input right there perfect so now it's actually waiting for the confirmation to finish and then it's sending the address of the deployed smart contract isn't that cool to go a level up back to the workspace simply use the breadcrumbs on top of the screen now let's pull our config a bit down and let's also pull the event and the error to the top of the screen right here because they're not that important for now we saw what's coming through and we can also delete the longer node by right clicking it and then clicking delete great so now notice how we are going from left to right we have the config we're doing the compile and deploy factory and now we're gonna keep going to the right side as our code executes and now we can continue with the second step which is working with the compile and deploy router you can go into it by double clicking let's start again from left to right we can see that our router compiler takes in a factory init hash as its input in the sidebar let's search for init code hash and then drag and drop the node right here connect its output to the router compiler's input and let's move this a bit to the right now looking at the router deployer it needs a factory address w-e-t-h which is short for rap ethereum it needs a config and it needs the router contract we already know the factory address will come from the first step so we can create a new input on our node group called factory address so right here it's currently in but name it factory address and it's going to be of a type string we can also add a couple more inputs the first one being the factory abi so that's going to be factory abi and finally we're going to pass in the config right here as well these are all the parameters that will be passing to this node group now let's connect the factory address and the abi to the init code pair because it's expecting them so that's going to be the factory address and also the factory abi now where are we going to get the web3 provider url from well if you think about it our config is an object that contains many properties for now we just need one the provider url so to retrieve it let's search for an item getter property or rather a node there we go item getter it says that this node retrieves an item from the specified index but we want to get this one not retrieving by index by rather retrieving by its key so let's drag and drop it and then it's accepting a dictionary which is simply an object so let's pass the config as the dictionary and as the key we can pass a string of provider url there we go we can rename that item getter to get provider url and we can connect its output value to the final remaining input in the init code pair hash requester so value into that right there there we go so it's getting a bit complicated but it's easy to follow along if you just follow the inputs and follow everything from left to right the way we're passing things we're just making sure that all the required inputs have something in them so let's expand everything by dragging it a bit more to the right just to give ourselves some more space there we go so this is looking much better and as you can notice the router deployer also asks for some parameters that we already have so let's connect the factory address which we're getting from the input right there and also connect our config which we're also getting from the inputs there we go so now everything is looking good and the last thing we need is a w e t h address or a wrapped ethereum address we can get it again by going to our node library and then we can search for w-e-t-h and drag and drop the w-e-t-h addresses notice that it only has one input which is the network if you remember correctly we have stored the network in the config object so let's try to get the access to it by now you should be able to do that independently as we've already learned how to get one specific property from an object so let's just duplicate the item getter this one right there by right clicking it and then clicking duplicate we can put it above we can pass the config as the dictionary and the key this time is going to be network and we can also change the name to something like let's do get network to stay consistent with our naming great so now we have the network as well and we can simply connect it to the input of the weth addresses finally we can connect the address all the way to the router so now everything is filled in great all the nodes seem to be happy they're getting what they need now the last thing we need to do is repeat the process we've done before get the contract deployment waiter from the search so that's going to be contract deployment waiter there we go let's put it right there let's connect the confirmation to it and let's set the number required to 2. finally it spits out the contract address so what we can do is add a couple of outputs to the right side of our node group so we can click right there the main output will be the router address so router address of a type string then we need to spit out the router abi as well we're gonna also have the events as well as the error the error can actually come from two places from the router compiler which we have here and also from the router deployer so let's grab both of these and bring them to the error there we go the abi will be a part of a router compiler inside an object so we first have to get the item getter let's duplicate the one we already have which is going to be this one get network duplicate name it something like get abi key like this connect the compiled router to it to the dictionary part and add the key simply as a b i in a string finally its value can go to the end under the router api the last two steps are to connect the router address which is coming from the contract deployment waiter and also to connect the events which are coming from the router deployer there we go so now all of the outputs have proper values and also all of our inputs are connected as well so this is how our node looks like now let's go one level above by clicking on the workspace in the top middle of the screen as you can see everything we've been working on so far is inside of this little node group all right now let's figure out which values we must pass to our router first one is going to be the factory address which is coming from the factory node this contract address might not be the best name so let's rename it to factory address instead there we go so now we can clearly see that we need to connect those two we also have to pass the config so let's put it a bit down and let's simply connect it and the last thing we need is a factory api we can get it by double-clicking the factory node search for an item getter dictionary so that's going to be item getter dictionary there we go retrieves an item value by its key we used it a couple of times so far let's drag and drop it right there now from the factory compiler which is right there we can drag the compiled factory as the dictionary and then the key which you want to get is simply a string of abi now let's create a new output let's call it an abi simply and let's connect the value of the item getter to the abi now we can again go one level above by clicking on the workspace and now we can connect that newly created factory abi which is right now inside of the factory we can connect it to the factory api of the compile and deploy router now that the input values of the router are done we can focus on the outputs the events will be similar to the previous one so let's simply duplicate this multiplex event node and let's put it to the side for the errors we can again duplicate the logger with message put it to the side as well we can connect the events here we can also connect the error to the data part of the error but the message is going to say something like router compilation or deployment error there we go let's style this a bit better so it's looking good there we go and finally let's add another logger node by searching for logger it's going to be this one right there and we can connect it to the router address you can save our work so far by pressing ctrl s and then finally let's run it by pressing the play icon on the top right of the screen the same thing is going to happen we can see the green lines flowing from left to right and this process does take some time as we have to wait for those confirmations shortly you'll be able to see that the final logger node light up in green and then in the output you'll be able to see the address of the deployed contract now we can even see how it is executing things by going deeper into the compile and deploy factory node and we can see that everything has been light up in green besides this connection right there which means that we are waiting for the confirmations we can even see that if we press show traffic it is now 1 just moved up to 2 and then it light up in green which now means that we are properly sending the information all the way to the compile and deploy router it also light up in green right there so we can see the data and the transaction hash and finally we're waiting for the confirmations right there on the logger as well which should happen momentarily we can see confirmation number one of course we're waiting it to reach two which would happen really soon and there we go in the output we get the address of the deployed contract let's copy it and check it out on ether scan there we go on girly ether scan simply paste it right here search for it we can see that it is a contract creation and then on the top right of the screen you can see the content creator of that contract if you click it you'll be able to see that there are two different contract creations happening at around similar times for you it should be about a minute ago the first one is the factory contract and then the other one is the router contract with that we have accomplished our goal so press ctrl s to save it and phenomenal job reaching to this point of this video with no errors in case you did have some errors and this logger is not lighting up in green as it does for me no worries we've connected a lot of nodes here and things did get a bit complicated so it's possible you misconnected some nodes or provided some wrong data for that reason i have created an entire structure that you can see right now and created it as a template so down in the description you can find a first checkpoint which then you can load up into your crank by going to this menu project and then import there you can see checkpoint one for you it's going to be in downloads or on desktop simply click it and it's going to open it up the only thing you have to do once you get it you'll have to go to config data and then update these values right here from your alchemy and metamask accounts great then if you rerun it everything should be working perfectly congrats on coming to this part of the video you've successfully compiled and deployed our factory contract and then compiled and deployed our router contract phenomenal job and finally before we jump into creating that beautiful ui that you saw at the start that's going to allow us to exchange actual tokens we have to add liquidity because without liquidity no exchange can work having liquidity pools is essential let me show you how they actually work so there has to be a liquidity provider that's going to deposit some specific tokens into our liquidity pool that's going to form specific reserves so let's say we're going to have 100 ethereum there we're going to have 10 gold silver and bronze tokens that allows other traders to come onto our platform and actually make swaps for different tokens and of course the only reason why they can do that is because those liquidity providers have put their tokens in so now this person this trader can trade and then of course the fee is going to be added to the liquidity provider just due to the fact that they were so nice they provided us with some tokens great we can also compare that to banks for banks to be able to provide exchange services they have to have pools of money of let's say pounds usd and maybe some other currencies so if you want to exchange usd for pounds they have to have that pool of money they can give to you and that you can transact with them hopefully that makes sense if you want to transact usd into japanese yen and they don't have that pool then simply the transaction cannot happen so for that reason now we can create our liquidity pools fortunately crank has got us covered here as well let's open up the note palette and search for uniswap and then let's start typing liquidities and drag and drop the liquidities adder it's going to be the liquidities one plural not the liquidity one so let's put it right here there we go and as before we can create a group to keep the complexities of this step in one place so right click the liquidities adder and then simply say group node let's go under instance and let's rename it to add liquidities go inside this newly created group by hovering over the liquidity's adder we can see that the first input it needs is pairs so let's add a peers input to this group as well and we can rename it to peers then we have to have the to address for now we can use the same address we used in the config then we have the deadline which is the timestamp until the liquidity operation is completed so let's create that timestamp we can create it by creating a new store drag and drop it let's call it expiration and let's set the data to 300 seconds which is 5 minutes from that we can generate a timestamp and crank makes that incredibly simple on the left side search for timestamp getter and drag and drop it and if we have the current timestamp and we have the expiration then we have to add them together and we can do that by using the adder node so simply take the adder put it here it's accepting two different parameters so let's add the timestamp as a right here and let's also add the expiration as b so that's going to be the data and the sum will be the deadline to keep things clean we can hold shift select these two nodes and then we can group them let's call the group calculate deadline great and let's also give it an input called start because as we said before every single node to run needs a starting signal so we can pass in something that we know will always be there for example these liquidity pairs now we can go inside of that group and connect this start to the timestamp getter inside of the get and also to the read part of the expiration let's go outside of this group now and finally as we said the sum of those inputs is going to be the deadline so we can connect it right there and also those pairs that you can see here we are already getting them from the input so simply connect them as well so for now we have the pairs we have the deadlines and for most other needed inputs we'll get the data from the config so let's create an input at the left side for the config config contains everything needed for the credentials so we can immediately connect them right here credentials regarding the rest of the variables we'll pull the data from the config using the item getter we've used a couple of times before let's search for the item getter dictionary that's going to be this one pull the config into this item getter as the dictionary and then the key is going to be a string of account address and merge the value with the to address and the final value called router contract will come as an input to this group so let's create it router contract and let's pair it right here now i want to show you one cool thing you can do with variable and parameter types in crank if we go into the router contract part right now which is right here that is the input we can give it a data type instead of the prototype right here currently it's set to any it can be a string number or anything like that but it can also be a dynamic type which crank automatically reads from other nodes in this case instead of any we can type type off router contract inside of backticks off liquidities adder make sure to spell it properly that is going to resolve this type right here inside of the liquidities adder router contract and it will try to pull it right inside of here so now if you check it out it looks good and if you check the instance of the router contract port it has a specific type it knows that it is expecting an address which is a string and also it expects an abi which is an object containing a string pretty crazy right type matching for ports has enormous potential in crank i think that's an area they plan to work on so i think their end goal is to eliminate data type bugs entirely so the data type checking will work across connection not just with these parent and child type relationships that's coming soon but already what they're doing with this is quite revolutionary now this is how everything should look like for the add liquidities node group now let's go one level up by selecting our workspace in the middle of the screen the router contract which we have to pass to add liquidities is a compound variable consisting of two things we're getting from the router it is a combination of the router address as well as the router api so what we can do is search for a syncer node there we go it's going to sync two different variables the sinker node takes in a couple of imports and then it merges them into one output so under fields we have to provide an array of strings which we want to take as keys in our case that will be the address as well as abi and make sure to spell them correctly as you can see that created new inputs on the syncer node and now we can just connect the router address right here to the router address of the syncer and also the abi right here and that's going to provide us with a synced value those two things together form a router contract and we can connect it to the add liquidities under router contract the config object we already have it's a bit to the left so let's simply connect it right there and finally we need the peers and the last input to the liquidity are our liquidity pairs we have to store them in a store node so let's search for store we can drag and drop it somewhere around here and then we can move it next to the config because this is also going to be fairly static data we have two different stores in our application now this is going to be interesting i'm going to teach you how to create your own erc20 tokens on the ethereum girly network so let me show you how to do just that down in the description there's going to be a link that's going to point you to this website create your own erc20 token and we can immediately dive into the creation process let's enter the token name as you can see i was creating some tokens before so let's do just that i'm gonna call it jsm gold and in this case the short name is going to be jsmg that's the token symbol the only other thing you have to provide is going to be the initial supply so let's do something like 10 million so one two three four five six and then one more that's going to be 10 million of course feel free to play with this you can make it even larger but usually these tokens have huge initial supplies then we can leave it as a simple erc20 token but here's a crucial thing you have to change the network to gurley testnet not to be charged for real ethereum of course and we have to check this checkbox click next it's going to open up meta mask and ask you to connect with your account so click next and connect then you can skip entering your billing information and finally you can click create token it's going to open up another meta mask window and you can click confirm the transaction is already done and the token is being retrieved as we speak there we go jsm gold jsmg feel free to call this token however you want put your first and last name there play with a symbol and play with the name as well now let's add it to metamask there we go i'm going to add the token and now if we go to metamask you can notice it took some girly ethereum to create that actual acid but now under assets we can see that we have 10 million jsmg that is great while we're here let's also create some other tokens that we can play with so let's reload the page let's also create the jsm silver or again feel free to call it however you want to and that's going to be jsms in my case the supply is going to be same so that's going to be one two three four five six seven zeros and we can set it to gurley testnet of course we have read the terms of use we can skip we can create a token and we can again confirm and we're now retrieving our token there we go let's add this one to metamask as well great now we have two different assets right there besides our girly ethereum what we can do is do something interesting now maybe create a new version of our own token of a generally popular token so i'm now on coingecko.com and i switch to ethereum ecosystem tokens because if you think about it you can only create erc20 tokens on our unit swap clone as we are on the ethereum blockchain so we already have ethereum these are some stable coins but let's do something funny and create our own version of the shiba inu token so let's go back let's call it shiba inu jsm and that's going to be if this one is shib this is going to be shib j as in jsm i guess of course feel free to play with this and create your own cool tokens again that's going to be 10 million so 0 1 2 3 4 5 6 7 and we can create it on the girly test net skip and create token and we can confirm and the token has been deployed we can add it to metamask and with that now alongside ethereum we have three different assets we can play with in our uniswap clone once we actually create the ui part of our application but now we'll have to do something with those tokens remember our talk about liquidity pairs we'll have to use those to provide them as liquidity this huge supply there so what we can do is go into this asset go to these three dots and then go to token details there we have the token contract address so press this button to copy it and don't forget which one this is i think we were on the jsm gold now going back to our crank we can go into the data part of the store and we can create our actual liquidity peers so that is going to be an array and that array is going to have more arrays inside of it our first array is going to look like this it's going to have two objects inside of it so one and then two like this in there we have to pass the address and in here we paste the address of our jsm gold in my case of course for you that can be something different so you just paste it right here as a string then you also need to pass a second parameter which is a desired amount this is going to be the initial price of that token when compared to something else and we can set it to 1000. now what are we comparing it to well we can specify that inside of our second part of the pair so we can again add the address for ethereum the address is just eth and then we can add the desired amount as well there we go which is going to be set to 0.001 so we are paying a lot of gold for not that much ethereum but that's how it is ethereum is valuable we also have to add a comma right there now hopefully this makes sense uh we created only the first pair right here we're exchanging the jsm gold for ethereum now what we can do is we can copy this entire array and we can duplicate it one more time below or let's do one more time as well so now we have to be really careful of what we're doing here so i'm going to zoom it in a bit so we can see it better so that's going to be view and then zoom in there we go so this is our first pair jsm gold for ethereum then let's also add a pair for jsm gold that's the same address but now we want to exchange that to jsm silver so we can go back find the jsm silver go to token details and copy the token address now we can paste it right there so now we can exchange the jsm gold to jsm silver as well and for the last one let's say that we want to exchange maybe let's play with the shiba token right now so three dots and then token details and we can paste it right there and let's say that we also want to exchange that to ethereum so now we have provided some pairs in case you want to see more different options of being able to translate between one to another token feel free to add all of those pairs right there in my case i'm happy with how it is this is a bit of a complicated structure so i'm going to leave this structure down below so you can actually copy it but keep in mind after you copy it you do have to change all of those addresses to the tokens that you have created for it to work there's still just one little detail we still have to change we want to exchange gold to ethereum and of course ethereum is worth much more than gold so we're gonna keep this transaction rate but when converting gold to silver in this case we want to change it a bit we want to make it that 100 gold is worth 1 000 silver so it is just 10 times as large not this huge difference right here great with that said we can connect the data to the liquidity pairs right here and we also need to give it a starting signal so let's pull the start into the read part of our store finally we're now passing all the proper inputs into the add liquidities node group and we can go into it one final time to check what we're going to do with the output there we go so we can see that nothing is being outputted from this group we can connect them we have the result here and we have the error right there let's go out of this view now and as before we need a logger with the message for the error so let's duplicate it from above put it right there and connect it the result to the data and then for the message we can say something simple like add liquidities error and we can duplicate the logger to log out the result so simply put it here and then pull the result into the data of the logger i've noticed they made the wrong connection instead of connecting the result to the logger we have to connect the error there we go so now it should be good now the last thing we have to do before we deploy our application is go inside of the add liquidities group node inside of there we can notice that we have this calculate deadline which gets the current timestamp and then waits some time in this case we're waiting 5 minutes but the issue is we want to wait after the contracts have been compiled and deployed and not simply wait from the start of the code execution and that's exactly what's currently happening since pairs are generated immediately since they're just simply an array of objects we are sending that as the start signal node so it's happening immediately what we have to do is right click the pairs we need to delete that connection and then send the router contract as the initial start node to the calculate deadline note group great with that said we can go back and congratulations on completing the third and final step in our build let's press the play icon on the top right to start our flow there we go the output is starting and the project is running as you can see immediately a lot of things light up green immediately the liquidities are ready to provided tokens but we're still waiting for the compile and deploy router confirmations as you can see right there it still hasn't sent them so soon enough after it has two confirmations these things are going to light up green as well and then when they do they're going to send the data all over to add liquidities and then we should get something from the final logger and remember you can always right click the connections and click show traffic to see which data is flowing through it so right here we can see some addresses these are the liquidity pools the sinker is green as well and we're still waiting for our final logger while we're waiting we can check things on the girly ether scan by copying this address right here back on girly ether scan we can paste it right there we can check the contract creator on top right and you can see two contract creations happening a minute ago meaning that went well and now we are adding our liquidity pairs this process is still taking some time but it should be done really quickly there we go our first ad liquidity happened which means that we already have one liquidity pair and i'm sure the rest will happen as well no worries about this big number 2 string this is only a warning not an error so let's give it a few moments we're going to wait for it to finish and then hopefully we see a green light on our final lower copy and there we go as i was saying it we can see our liquidity pairs being listed out right there our logger copy is green as well we can show the traffic which are our liquidity pairs and that means that we're fully done with the compile and deployment process of those smart contracts and with the addition of liquidity pools isn't that great now again if you did have some errors that is entirely fine again down in the description you'll be able to see the final version of our crank project so you can download it go to the menu go to the project import and then there you can get the final checkpoint dot crack j then it's going to load everything up but again keep in mind you have to add the config data as well as the stored data for liquidity pairs from your own created tokens and also your own alchemy and metamask accounts great when you do that you can hit start again and then everything should work with that said we're now done on this crank side again i'm incredibly happy with how this turned out we can even zoom it out just a bit and you can see how it is looking again it's just a different way to look at the code it is quite visual we have this flow everything is flowing nicely from left to right we have some stores right there we have some node groups we have events and the data is just going all the way down from the compile and deploy factory to compile and deploy router all the way to add liquidities just imagine what you would have to do to code this out in code it would be a mess because you would have to work directly with solidity code this way it's just so much easier with that said phenomenal job on completing the crank part of this tutorial now we're going to focus on building the ui and ux off our unit swap clone and then connecting the crank to the front-end part to make a fully functional unit swap application the only thing you have to do right now is click this output button and then copy this address right there and store it somewhere because we'll need it once we create our react application great with that said let's get started with building our great react decentralized application as we always do on javascript mastery we're going to start off by creating an empty folder on our desktop and let's call it something like unit swap 2.0 great now that we have the folder open up an empty visual studio code window and then drag and drop it once we're in you should see something that looks like this an empty project now what you can do is go to view and then terminal this is going to open up an integrated terminal right inside of your unit swap 2.0 what you can do now is visit usedapp.io when ethereum meets react it is a framework for rapid dab development you can think of this technology as a create react app or vt for decentralized applications essentially it is going to create a file and folder structure that's going to connect our react application with our smart contract so let's get started by going to the documentation and then on the left side you can select using create eth app the only thing we have to do is run one simple command so back in our visual studio code we can run yarn or npm create eth dash app and then dot slash this is going to create a new ethereum application right inside of our current repository and again it is nothing more than a simple create react app with some additional file and folder structure to connect it to our smart contract so let's give it a moment for it to finish and then we'll be right back and there we go our application has been initialized now you're gonna notice that the structure is just a bit different from our usual create react app now in here we have the packages folder inside of the packages folder we have the contracts folder where inside of the src we have the abis folder for smart contracts soon we're going to modify this entire contracts folder then we have the react dash app which is essentially nothing more than a simple react application and then we also have a subgraph folder which in this case we won't need so let's simply right click and delete it we can also go to the package.json and then from here we can also delete the scripts that start with sub graph just to make it a bit cleaner there we go now one more thing that we have to do right here is right under workspaces add one more key and value pair and that's going to be resolutions is equal to an object where we have react dash error dash overlay and we can set that to the version of 6.0.9 i've noticed that this create eat app has a slight bug with hot reloading the react application once you save a file so adding these resolutions right here helps to fix that now as i've mentioned before we're going to delete our current contracts folder so simply right click it and then click delete and then right below this video you're going to find a link that's going to point you to the zipped contracts folder you can download it extract it and then simply paste it right here under packages make sure that it is not inside of the react app rather it has to be under packages that is important so these have to be siblings great now that we've done that we also want to clean up the react app a bit so go inside of it and you're going to notice that we have quite a lot of stuff inside of the source folder we won't be using most of these so simply right click the source folder and delete it now as we've done with the contracts right below this video there is going to be an updated source folder so simply download it extract it and then paste it right inside of the react dash app it's going to look something like this it has the styles and this is the list of some reusable tailwind styles that we'll be using throughout our application there's no logic happening here just some reusable styles then we also have the utils folder inside of which we have helpers this is a list of functions that's going to help us develop our application we have functions like get available tokens get counterpart tokens and find pool by tokens these are just some simple helper functions that will help us clean the data that we get back from the blockchain every single line of code that is dealing with actual web3 logic and pulling the data from the blockchain will be coded by you then we have some states just to simplify the logic are we currently pending are we allowing the transaction has it failed has it succeeded and we also have a simple helper function to get the failure message as well as the success message again nothing major just helper functions on top of that we also have our app which cannot be simpler it is a simple functional component that says hello web3 then we have the config.js inside of here you're going to put your own router address that we got back from crank and also your own alchemy url right here then we have some basic styles where we import tailwind and finally we have an index.js where we wrap everything using the use dab dab provider this was already there but we deleted the source folder so now we brought it back in as you can see this is the main part where we're importing the dab config and then we are wrapping our entire application with that dab config that's essentially what use dab create eat app is it takes a react application and it wraps it with its own that provider great with that said you now fully understand our initial source structure and we can continue the next thing we have to do is install tailwind in this case there's version mismatch between react and tailwind so we decided to use tailwind cdn it is a way where you simply add a script and it includes the tailwind right inside of your project and to bring tailway into our project you can go to public and then index.html we have a lot of things happening here but if we indent it properly and remove some of these comments you're going to notice that this is nothing more than a simple html5 document so one more time you can go down in the description into a github gist and there you're going to find two scripts that we can add to our index.html which you can add above the title it's going to be a script for tailwind cdn and then also the tailwind config and finally to make sure that we're using the same versions of dependencies you can go inside of your react app package.json and you're going to notice that some dependencies are already installed here what you want to do is for one final time trust me go into the description go to that github just below and then simply paste a couple of dependencies that we'll be using throughout our application there's going to be only one that's going to be mentioned twice which is the use dab core delete the one that is right here which is an older version and simply use the one that is right there in the github just below great so it should look something like this i know that this was a lot of setup and a lot of configuration but trust me now we have set everything up and we are ready to start coding things out so what we can do is finally run the application so go to view and then terminal let's clear it and finally we need to run npm install to make sure that you have all the latest versions of dependencies this process is going to take about a minute so i'll be right back now that our application is running you can go to the package.json to check the start script and in this case it's not going to be simply npm run start it's going to be mbm run and then we have to say react dash app colon start so one more time npm run and i would suggest using npm here i was having some issues with yarn so npm run react dash app and then colon start and press enter this is now going to start our application on localhost 3000 and there we go hello web3 this means that we have successfully configured our project and we are ready to start coding the ui and the ux of our great application and start connecting it to the smart contracts we have compiled and deployed before so with that said huge props to you to coming to this part of the video now the fun part begins to get started building a great application let's go into packages react app source and then app.js this is where the magic happens we are importing react from react let's also import a package called use ethers and that package is coming from add use dab forward slash core that is that main package that allowed us to create this file and folder structure we're also going to import styles from dot slash styles let's also import inside of curly braces uniswap logo and that's coming from dot slash assets if we look into that you should have the assets folder inside of your source folder great that's going to be all that we need for now now let's focus on creating our initial layout of our application we're going to wrap everything with a div so let's create a div and that div is going to have a class name equal to styles dot container so it's going to be dynamic in a sense and now might be a good time to open up the browser side by side with the editor so that we can see the changes that we make live there we go the browser is on the right side and for now we just have a dark background inside of that div let's create one more div that's going to have a class name equal to styles dot inner container inside of that inner container we can put our header that header is of course going to have a class name of styles.header and that's going to be essentially our navigation bar so inside of there we can put an image which is going to be a self-closing tag we can give it a source of uniswap logo an alt tag equal to unit swap logo and let's also give it a class name equal to w-16 h-16 and then object dash contain now if we save it you should be able to see a logo right there it should be a bit smaller for you as i was on the 500 increase so now let's zoom it in just a bit there we go the unit swap unicorn below that image later on we're going to render a new wallet button component so for now let's simply hard code it as wallet button now going below our header we can have a div that's going to have a class name equal to styles dot exchange container so this is where the exchange will actually happen inside of there we can create an h1 and that h1 is going to say unit swap 2.0 we cannot see it yet as it is dark but as soon as we give it a class name equal to styles.head title and save it you can see a huge uniswap 2.0 text appear right there and if you're wondering where these styles coming from you can control click these styles and it's going to lead you to the index.js inside of the styles folder and there you can see all of the tailwind css classes we have used great now below that h1 we can also put a p tag and that b tag is going to say exchange tokens in seconds and let's also give it a class name something like or not something precisely like styles dot sub title there we go that is looking great let's expand this just a bit there we go so we can see the code better and now below that p tag let's leave some space and then create one more div this div is going to have a class name equal to styles.exchange box wrapper and one more time just to repeat if you want to see what the styles are about ctrl click them and you can see exactly which tailwind styles we have used inside of there there's going to be one more div and then this div is going to have a class name equal to styles dot exchange box so this is going to be for that unit swap box and then finally in there we can have a div but this div is going to be self closing so now if we save this you can notice we have some lines there and this div is going to have a class name equal to pink underscore gradient like this in a string that's going to provide just a slight gradient at the top of the box we can also duplicate that gradient and then change the bottom one to blue as we're gonna have that blue and then pink gradients great now in the middle of those two gradients is where our actual exchange box is going to be so let's create a div and that div is going to have a class name equal to styles dot exchange that's immediately going to create this great looking box and i think now is the time that we actually zoom it out inside of here we first want to check if we have a connected metamask account to our decentralized uniswap application so now might be a good time to check that functionality connecting your decentralized app to metamask might be simpler than you think the only thing you have to do is go all the way to the top of your application and then say const d structure account coming from or rather is equal to use ethers and this is the function coming from the use dab core so this is going to give us access to your metamask account if it is connected so now what we can do is maybe just showcase it here let's see if it exists or not of course we would have to put it inside of a p tag right here and let's give it a class name equal to text dash white so right now we cannot really see anything and of course that's because our account is not connected so for now we're just going to use this account for conditional logic so let's open up a dynamic block of code and say if account exists then we want to have one additional check if pools are loading so if pools are loading then we want to show a loader so right here we can render a loader component like this so if we have the account and if the pools are loading then we can display a loader component if we have the account and the pools are not loading then we can render the exchange component like this and then finally if we don't have an account we can also simply showcase a loader component so let's render a loader right there there we go so we have two loaders and we have the exchange now there's a couple of things which we don't yet have the access to one is the pool's loading we don't know what that is so for now let's create that as a static variable at the top const poles loading is equal to false but now we have to do the actual components we have the loader component we have the exchange component and we can also transfer this wallet button to a component of its own so now we know that we have to create those three components to create those components let's go into our source let's right-click it and create a new folder called components inside of there we can create those three components that's going to be a wallet button.js then we're going to have exchange dot js and finally we're going to have a loader.js for each one of these three components for now we can simply run r a f c e that's going to create an empty functional component if this seemed like magic to you and it didn't work you might have to go to the extensions folder and then search es7 plus and then that's going to be react react native snippets so simply install this extension and it's going to work now we can repeat the process for these two other components as well and we can create a new index.js file inside of the components folder to export all of these components in one place so that's going to look like this export default as loader coming from dot slash loader we can duplicate this two times and then simply change the loader to exchange and then change the loader to the wallet button there we go so now we're exporting those three components and now going back to our app now we can import them so at the top we can say import exchange loader wallet button coming from dot slash components there we go so now we have everything we need of course we cannot yet see them because everything is dark but the wallet button is indeed here at the top it is barely visible next to this unicorn great so now we can actually render the loader which is currently being shown right there now these two loaders are not going to be identical each one is going to have a different title so let's add a title prop the first time we do have the account but the pools are loading so let's leave a message something like loading pools and then please wait and of course when i say pools i mean liquidity pools the ones we talked before someone has to provide liquidity for us to be able to make transactions and then for the bottom loader we can provide a title equal to please connect your wallet because this would only show if the wallet isn't connected so now let's go inside of the loader component and let's code it out we can first import styles coming from dot slash styles and then we can import the ethereum logo coming from dot slash assets now we know that this component is accepting a title prop which we've passed and now we can focus on rendering it out so we're going to wrap everything in a div and let's give it a class name equal to styles dot loader great now inside of there the only thing we want to do is render one self closing image that's going to have the source equal to ethereum logo the alt tag is going to be also equal to ethereum logo and then the class name is going to be equal to styles dot loader img there we go if we save that we can now see this huge colored and matching to our theme ethereum logo below that we can create a p tag that's going to simply render the title in this case that can be a class name equal to styles dot loader text if we save this we can now see please connect your wallet and this is looking great right off the bat so we can go outside of the loader expand this and it's already looking great now let's focus on adding that connect wallet functionality which is going to be inside of the wallet button so let's control click to go into it and let's start implementing it first we can import the use state and use effect hooks from react we can also import a couple of dependencies from use dab and these are going to be shorten address use ethers and use lookup address these are coming from add use dab forward slash core and finally let's also get the styles inside of this file as well so that's going to be import styles from dot slash styles we can start by getting something known as ens ethereum name service lookup so let's say const inside of curly braces let's name it ens and then that's going to be equal to use lookup address great it should look something like this we can also get a couple of things from use ethers things like account activate browser wallet and also deactivate and that's equal to use ethers so we're using two different packages we're using the use dab core and also the use ethers package i'm going to move the editor a bit more to the right so we have a bit more space to work with and then our app is responsive anyhow so we can move it right here great now that we have those let's also create a use state of our own so just at the top we can say const let's call it rendered and also set rendered that is going to be equal to an empty use state which is simply an empty string this is going to help us determine if we want to show an actual button or an address of the account that is already connected so let's focus on creating that button instead of a div we're going to create an html5 button it's going to have an on click property right here and that on click is going to be a regular function there we want to check if there is no account again account is coming from the use ethers and right now there shouldn't be an account because we haven't yet connected it in that case we can call the activate browser wallet so once we click this button if there is no account we want to activate not active activate the browser wallet and let's also change that here because it looks like i misspelled it and then else we also want to deactivate it so we can call the deactivate not the active just deactivate right there okay that's looking good now we can also provide a class name to this button so let's say class name is equal to styles dot wallet button now at the top right you can see our pill looking button and of course we have to say something in there so we can say if rendered is triple equal to an empty string as it is at the start then meaning and end if that is true we can render a string that's going to say connect wallet then if the rendered is not equal to an empty string so like this so if it has something in there in that case we want to render the rendered that's most likely going to be an account address there we go so now we have a button that says connect wallet that's because our rendered is set to an empty string then also our account is not existent so the button click is actually going to prompt us to create an account so now you might have to reload the page and then click connect wallet as you can see a notification is going to appear and it's going to ask you to connect with metamask which we're going to happily accept so let's click next and then connect now it's connecting but as you can notice it's still saying connect wallet and that's because we haven't actually changed the rendered function we want to show the actual address so let's create a new use effect field or a hook it's going to accept a callback function and then a dependency array we want to recall this use effect whenever the account changes the ens changes or the set rendered changes there we go so in here that's supposed to be ens and now that i'm looking at it it might be a good idea to rename the rendered as that is a bit confusing to something like account address so click on the rendered press f2 and then rename it to account address and then also rename the set rendered to set account address there we go so now this makes a bit more sense if the account address doesn't exist meaning if it is an empty string so we can say if no account address then show the connect wallet otherwise simply show the account address so that's going to look like this there is also a shorter way of doing this we can say if account address then show the account address otherwise simply show the connect wallet but then there is an even shorter way of doing this is when you have the first parameter and the second parameter of the ternary being the same you can simply say show the account address or show connect wallet so you can see how much we simplified it this just makes so much more sense right now but now let's actually update the account address right here we can say if ens exists then we want to set account address to be equal to ens then we want to have an elsif else if account exists then we want to set the account address to be equal to account but we want to shorten it first so this utility function is coming from the used app shortened address and we shorten it and then finally inside of the else we simply want to set account address to an empty string there we go so now if we save this you're going to see our great looking button and it's going to render the account address because we're already logged in now looks like there's a mistake with the hot reload i mentioned that at the start i cannot seem to click the button right now because we made some changes in our code again that is a bug in this specific version of create react app but that's fine just reload the page and you can now click the button if we click it it's going to disconnect us and then if we click it again it's going to connect us so this is working properly now if we are disconnected it's going to show this great loader which we can see right there please connect your wallet but if we do connect it then it's going to show the exchange which means that our next step is going to be to start working on the exchange which is at the same time the biggest and the toughest component of our entire application the exchange is going to contain most of the logic of our app so if you're thinking of taking a break now might be a good time to do so but with that said let's dive right into coding out the exchange component to start with our exchange component we will have to import quite a few dependencies let's start with a use state hook coming from react then we're gonna also need to import something known as a contract with a capital c coming from add ethers project forward slash contracts we're gonna also need something known as abis and that is coming from add my dash app forward slash contracts we're gonna also need to import something known as erc20 use contract function use ethers use token allowance this is going to allow us to see if the user has allowed for a specific amount to be transacted and then finally use token balance and all of this is coming from use dab forward slash core of course with an add sign in front we're going to also import ethers coming from ethers we're gonna import something known as parse units coming from ethers forward slash lib forward slash utils this is going to parse our strings into big numbers and these are all the external imports that we need for now now there will be a couple of internal imports so we can say import inside of curly braces all caps router underscore address and that's going to be coming from dot slash config so this is the perfect time to go into this config and to add our own router address here and our alchemy url here the best way to do that might be to go back to our crank and then in here we can of course check the data part of our store or config and there we can see our provider url so let's first copy that paste the provider url right here it's going to be a string and then finally we have to copy the contract address we got from the output now as you can see since we re-ran crank we don't see the output anymore but i've told you before to save that address somewhere so hopefully you did you can then copy it and then paste it there thankfully i did save my router address so i can paste it right there you can do the same and that's going to be it for our config now we can go back into the exchange and continue implementing it there is going to be just one prop that we need to pass to our exchange so if we go back to our app you can see that we're currently not passing anything and also these pools loadings are hard coded so instead of hard coding that let's actually implement it to implement our real pools and pools loading we can import something known as use pools so right here import inside of curly braces use pools and that is coming from dot slash hooks so those hooks if you look into them right there don't yet exist we just have the utils folder so let's go ahead and right click the source folder and create a new folder called hooks inside of there we can create a new file and that file is called use pools.js alongside that file you also need to add an index.js file from this file we're going to export our pools so we can say export use pools coming from dot slash use pools great and now we can come back to our use pools instead of this file we're going to implement the logic to get our liquidity pools so let's start from scratch by importing web3 from web3 now this is the first time that we're using this package this is one of the most popular package people use when interacting with smart contracts we're also going to import the use state as well as the use effect hooks coming from react and let's also import something called use config coming from add use dap forward slash core now we have all of the external imports we need but we're going to need also a couple of internal ones so we can import the router address and that's going to be coming from dot slash config we created it not that long ago and you put your own router address right there so for this step it is crucial that you have pasted it right here of course if you were to deploy this on the mainnet it might be a good idea to put this inside of the environment variables we can start by creating our own custom hook so let's say export const use pools and that is going to be equal to of course a functional component instead of here we can say const and then we can get the read only chain id and also read only urls this is inside of the curly braces and it is equal to use config coming from use dab if you hover over it it's going to give you more information it says right here chain id of a chain you want to connect to by default in a read-only mode and you can also get more info on read-only urls that is coming from the use config then we want to create our own state of loading as well as set loading and at the start it's going to be set to true finally we also want to create our own state of pools set pools and at the start it's going to be equal to an empty object now we have all of the states that we need now our custom hook is going to return an array of loading and pools but of course this doesn't make any sense as the loading is always going to be true and the pools are always going to be an empty object so what we have to do is create a new use effect that's going to have a callback function as well as a dependency array this function is going to rerun whenever the read only urls or read-only chain id changes so if those variables change this function is going to be rerun and there we have to fetch our polls we can do that by creating a new function export const load pools it's going to be an asynchronous function that's going to accept the provider url and that's going to be an error function now how do we get to the provider url well what we can do is call it so that's going to be load pools and then inside of there we can tap into read only urls and then we want to get read only chain id this is going to return the exact provider url we need this is asynchronous so we can call a dot then function on it provided a callback function and it's going to spit out pools right there the only thing we want to do then is set pools to pools as well as set loading to false there we go but of course this is not going to work right off the bat as our load pools is currently empty so we are yet to implement the logic to fetch our liquidity pools now inside of there we can get an instance of the provider so we can say cons provider is equal to new web3.providers.httpprovider and then in there we have to pass the provider url which we're getting from the use configs read only chain id and read only urls now we can also create a new instance of web3 and that's going to be equal to constweb3 is new web3 with a capital w and then we pass in that same provider now that we have the instance of web3 we can actually grab the router info and the factory info and this will be a bit tricky but that's why you are here you're here to learn so let's say const router info is equal to null for now and also const factory info is going to be set to null for now so how are we going to get that information well that is going to include a bit more code so a good idea would be to create a new function inside of the utility functions so inside of utils let's create a new file called get router info dot js and we can also create another one called get factory info js later on there's even going to be a third one called get pairs info.js so now we have all of these files right there let's first export them inside of the index so just above the export of helpers we can also say export inside of curly braces get factory info from dot slash get factory info we can repeat that by saying export get peers info from dot slash get pairs info and finally export get router info from dot slash get router info now of course we have to create those functions in each one of them so let's simply say const get factory info is equal to an asynchronous function right here and we can immediately export it now we can do that for all of the files so just rename this to get pairs info and then the last one is going to be get router info great so now we have those util functions which we can call inside of our use pools so let's first import them in this case we're gonna need two that's going to be get factory info as well as get router info from dot slash utils and now what we have to do is await get router info we have to pass our router address and the instance of the web 3. the router address was misspelled right here so if we fix that we should be good so now we know that we're passing the router address and the instance of web 3 to the get router info function so let's control click into it and let's implement it the first step is going to be to get the router address and web3 and we can also import something known as import abis and that's going to be coming from add my app forward slash contracts and if you're wondering what an api is while interacting with a smart contract abi is one of the essential components so essentially abi is an application binary interface and it is an interface between two program modules it allows us to interact with the smart contracts we have written with that said how do we use that api to get that contract well let's say constructor is equal to new web3.eth.contract and then in there we tap into the abis we get the router02 and then the second parameter is going to be the router address finally we want to return an object that is consisted of one property called factory there we can await router dot methods dot factory and then we call it you're going to notice that some of these things are going to be repeated in a lot of web3 applications we have to get the information from the smart contract using the apis and the addresses and finally we're returning the factory for that smart contract great that's going to be it for the get router info now the second step is to get the factory info so for that we can await call the get factory info it's going to accept the router info dot factory and also it's going to contain the instance of web3 now let's get into the factory info and now this is going to be a bit more work as we'll have to get all the fees and all the liquidity appears so let's start by importing abis from add my app forward slash contracts and then also import get pairs info which is going to be coming from dot slash get pairs info so that's going to be our third utility function we talked about but let's take it slow we know that we're accepting two different parameters the factory address as well as web 3. first we want to get the instance of the factory so we can say const factory is equal to new web3.eth.contract dot factory and then we pass in the factory address this was created in crank then we can form a new object called factory info which is going to for now be an object that's going to have a couple of properties it's going to have a fee property then which for now we can set to null it's going to have a fee to setter property which again we can leave as null it's going to have the all pairs length property as well as all pairs property so how are we going to get all these values well all of these are already built in methods on our factory so let's simply hold alt and then double click all the nulls right there and then start typing await factory dot methods dot fee call it and then dot call which we again call as a function now it's always going to be the same but it's not going to be fee rather it's going to be the name of our actual object key and then all pairs can be left as an empty array because we're going to dynamically go through it to fetch all liquidity pairs to loop through all of our liquidity pairs we can do the following let's open up a for loop inside of there we're of course going to initialize i to zero i is less than factory info dot all pairs length this is appropriately we created not that long ago then we can of course increment i and then inside of there we're gonna tap into our object so factory info dot all pairs and then we're gonna loop through them by increasing the i so we're gonna keep adding new liquidity pairs for however many pairs there are that's going to be equal to a weight factory dot methods dot all pairs we're gonna get the i number of pair and then dot call great that just added all the peers and also now that we have those pairs we want to get additional peers info so we can say factory info dot pairs info is equal to a weight get in this case it's not going to be pierce it's going to be pairs info and then if we fix that we can call that and we'll have to pass two different parameters that's going to be factory info dot all pairs so those pairs that we loop through we now want to pass them over as the first parameter to our own get pairs info function and then we also want to pass the instance of web3 great of course now we have to remove this peris from here and we have to go into the get pairs info function which is the third in a row utility function we have created this one will be a bit longer but it is how it is we're going to repeat the process of importing different apis from add my app forward slash contracts and we already know what we're getting we're getting the pair addresses as the first parameter let's make sure to spell it properly and the instance of web3 now initially we can set the pairs info to be an empty array then we can get the pair abi so const pair abi is equal to abis dot bear then we can also get the token api which is equal to abis.erc20.abi and now we'll have to loop over all of the addresses to get more information on each specific liquidity pair so to do that we can create a new for loop we can say let i is equal to zero i is less than pair addresses dot length and then i plus plus if you can see that github copilot is trying to autofill my entire function which essentially means that this is the code that you'll be writing quite often but of course i won't cheat here and use github copilot we're going to write it from scratch on our own so let's start by saying const peer address is equal to pair addresses and then i we want to get the current one then we need to get a specific pair by saying new web3.eth dot contract we pass the payer api and then we pass the peer address now there's going to be some repetition there are two sides of a pair right there's always going to be two tokens so let's say token 0 address is equal to await pair dot methods dot token zero and then dot co now we can duplicate this and the only thing you have to change is token zero in the name and at the end to token 1 right here so now we have both addresses of token 0 and token 1 of that specific liquidity pair then we want to repeat the process for the token 0 contract so we can say tokenzero contract is equal to new web3.eth.contract we pass the token api and then we pass the tokenzero address so this is going to give us the contract of token zero we can duplicate that call it token one contract and then pass the token one address and then finally we have to get the name of those tokens so let's say const token 0 name is equal to await tokenzero contract dot methods dot name dot call and then we can repeat the process for getting the token 1 that name as well as i said it is a bit repetitive but now we have all the information that we need now remember we're still inside of a loop so we are repeating this for every single new pair that we go through so inside of the loop we want to tap into the pairs info which is this array we created at the top and we want to fill it in so we can call a dot push method pushing an object where the address is going to be equal to the pair address and then we also want to pass the token 0 address as well as the token 1 address as well as the token zero name and finally token one name so now we're passing everything we need to our peers info finally at the bottom outside of this for loop we can return the pairs info and that means that this function is going to do what it was designed to do get the peers info it was a bit of code but as i've told you in the beginning while we're copying those files we didn't copy anything that was crucial to the code this part right here is crucial working with different peers working with apis working with smart contracts i know it's easy and i know it's different but it is new and it is important as web 3 is getting more and more popular and things are moving to the blockchain with that said hopefully this makes just a bit sense so now we can go back into the get factory info where we initially called the get pairs info now we filled our factory with everything and at the bottom line 20 of the get factory info file we are ready to simply return the factory info which means that the get factory info has fulfilled its purpose as well now you have to think strong and hard to figure out where did we initially call the get factory info as we did spend some time away from that original file but that was inside of the use pools custom hook see we have the get router info and then get factory info perfect now that we filled it up let's simply return it by saying return factory info dot beers info and now our load pools functionality is done as well we're loading up those pools whenever the read only urls or read only chain id changes and then we're simply returning the loading and returning the poles whenever we call the use pools custom hook so everything is entirely dynamic and separated into a lot of different utility functions this is the definition of clean code great now props to you if you remember where did we want to initially call the use pools custom hook it was inside of the app.js we imported the use pools which now we are ready to finally call so let's say const we're gonna get the loading and the pools there we go and that is inside of the square brackets and that is equal to the use pause function call it seems like a tiny little harmless hook call but actually it is a beast of a hook so now we are getting the loading and the pools we can delete the pool's loading we can now rename the pools loading to simply loading right here and the more important part is to pass over the pools as a prop to our exchange so now our exchange component can get the pools right here from the props and it can work with them ladies and gentlemen we are ready to start creating the exchange component before we start developing our exchange component there's a little small check we have to make to make sure everything is all right and we're good to go the first check is to go to our files and check if you have the index.js file inside of the hooks because we have to export those use pools we worked so hard on the second thing is to open up the inspect element or rather the console and then in here read out the errors we do have one error on line eight of git factory info so let's go to get factory info that's going to be inside of the utils and there on line eight instead of fee we have to name this fee 2 so it's going to be v2 dot co there we go now if we reload we no longer have any errors we can get back to the exchange component and we can click connect wallet there we go and connect now you can notice that it still says loading pools right here which means that we still have one more error so if we go to our console you can notice right here that it says type error cannot read properties of undefined reading pairs info on use pools 15. so let's go to use pools and check the line 15 so that's going to be factory info dot pairs info so what we can do to test this out is simply console.log the factory info to see what we're getting back we can even put it inside of an object so it's going to be easier to see and let's reload the page right there factory info is undefined that means that we're not getting back the correct info from our get factory info utility function so let's go into it there we're creating the factory we have all the factory info right there oops but we made one huge error and that is we never returned anything so after we populated everything into this factory info object we of course have to return it there we go after we do that now factory info is going to be there and we're returning the piers info from the factory info so now if we go back to exchange reload the page now you can see that we are connected and you can barely see it says exchange right there which means that we are in the right component and we are ready to start developing it our exchange component will be a bit bigger as it's going to contain a couple of inputs a couple of buttons and balances so what do you say that we start from the ui and then we can move to the functionality so first we're gonna have a div with a class name equal to flex flex dash call w dash full and then items dash center inside of there we're going to have one more div and this div is going to have a class name equal to margin bottom eight inside of there we want to render two different components we want to render the amount in component which is going to be a self-closing component and then below that we want to render a self-closing balance component as well now we can duplicate this entire inner div just below and instead of amount in we're going to have the amount out there we go and we can also give it w dash and then in square brackets 100 so now you can see that we already need to create three different components the amount in the balance and the amount out and then later on we're gonna pass all the props to them so let's go ahead and do that immediately we can go to our components and create three new components amount in dot js we can run rafce in there let's create the amount out dot js and again run rafce in there and finally let's create the balance component so that's going to be balance dot js and again run rafce in there after we do that we of course have to export them so let's duplicate this three times the first one is going to be amount in the second one is going to be amount out and the third one is going to be the balance now we can close all of that and go back to the exchange and we can of course import those components so we can say import inside of curly braces we're gonna get the amount in the amount out and then finally the balance and that's gonna be coming from just dot slash as we are already in the components folder finally we also have to get the styles so let's say import styles from dot slash styles there we go and the last thing that we need are going to be those utility functions that we have inside of the helpers remember if we go inside of utils there was this file that i provided you at the start this is going to be just a series of useful functions we can call from inside of our exchange again nothing groundbreaking here but it's definitely gonna be helpful and it's gonna save us some time so let's import all of these helper functions by saying import get available tokens and that's going to be coming from dot slash utils there we go we also have get counterpart tokens so this is going to be useful when you have one token you want to change to something else you need to know to which other tokens can you change that token to then we also have find pool by tokens because once we actually decide on what we want to change we need to find an available liquidity pool then we have the is operation pending so are we currently doing something and we have a getters for get failure message as well as get success message and that's going to be all that we need for now when it comes to those helper functions great we also have those components it's hard to see them right now as they're dark but they are right here so once the pools load we are gonna have our exchange and you can see amount out and balance and amount in and balance as well and that's going to be enough to start so now we can head into the amount in and we can focus on its functionality as well as ui and ux so inside of here we're going to import a couple of hooks that's going to be use state use effect as well as use ref we're going to also import something known as a chevron down and that's going to be coming from assets it's going to be a simple icon then of course we need to get the styles so we can say import styles from dot slash styles and finally we can import one helper function called use on click outside and that's going to be coming from dot slash utils this is going to help us to close that menu bar once we actually click outside of it you're going to see quickly what it does now let's focus on creating that input first we're going to have a div and that div is going to have a class name equal to styles dot amount container now you can immediately see a grayish color right there inside of there we're going to have an input this input is going to have a placeholder equal to 0.0 it's also going to be of a type number it's going to have a value equal to value which we don't already have so for now we can hard code it to simply an empty string it's also going to have a disabled property which for now is going to be set to false later on we can switch it dynamically it's going to have an onchange property which for now we can leave as an empty callback function and it's going to have a class name property which is going to be equal to styles dot amount input now if we save that you can see our great looking input right there but of course now we have to add the ability to choose the token we want to swap so below that input let's create a div that div is going to have a class name equal to relative and it's going to have an on click property once we click it for now we're going to simply have a callback function but later on that's going to open up our menu inside of there we can create our button that button is going to have a class name equal to styles dot currency button there we go you can see just something on the right side right there and then we're going to also render the active currency which right now we don't have so let's simply hard code it to something like eth for ethereum there we go and now we can also show an icon right there so people know that it's clickable so that's going to be an image with a source equal to chevron down there we go and let's also give it an alt tag chevron down and let's give it a class name so what we can do is let's make a dynamic and let's make it a template string w is going to be 4 for width h is going to be 4 for height it's going to be set to object contain margin left is going to be 2 to divide it from the letters and then later on we can rotate it up and down based on if the menu is currently opened or closed so for now i'm going to simply say true it's always going to be true for now later on we're going to do it dynamically so if true then rotate dash 180 in a string else simply rotate dash 0. there we go so now if you save this you can notice it gets rotated once this value changes so if we set it to false it's going to be set to down of course this is going to be dynamic soon enough and you know what we can immediately make that up and down work so for that we would simply have to create one new use state so let's call it use state it's going to be called show list and set show list and at the start it's going to be set to false now based on that once we click right here on this div then we want to set show list to be equal to not show list this is usually not the best way to do in react the react documentation discourages you to simply update the state using the previous version of that state so what we can do is provide a callback function inside of the set state there you get the previous state so pref state as the first parameter and then you can say not previous state so this is the proper way to toggle it in react of course before we test it out we have to set show list right here so let's say show list right there now if you save it it's not going to work immediately because we are having those issues with hot reloading in development but don't worry that's going to be fixed in production for now we can simply reload the page wait for it to load and then we can explore it in action it's actually working now once we do click it we want to show a menu so below this button we can create a new dynamic property where we check if the show list is true and then only then render the following code that code is going to be a ul an unordered list and we're going to give it a class name equal to styles dot currency list there we go now inside of there we will have to map through our currencies for now we cannot really do that as we don't have the list in this component yet so it might be a good idea to simply hard code them right there so let's create a new dynamic block of code let's create an array each array is going to be an object where we're going to have a token which is going to be set to let's say eth and then we're going to also have the token name right here so token name is going to be set to eth as well later on the token is going to change right here to the actual token address so these are not going to be the same but just since we're mapping through it we can keep things simple now let's duplicate this just so we have a couple of things there and let's rename this to jsm gold there we go now we can call a dot map functionality on it so that's going to be that map for each one of these we want to destructure the token as well as the token name and then we also want to get the index then we want to instantly return something so use just regular parentheses right there for each one of these we want to show an li that li is going to have a key and the key is going to be set to index we're also going to give it a class name but we have to know if this class name is currently selected or not so let's make it dynamic it's going to be a template string it's always going to have a styles dot currency list item but now we have to check if it is currently selected so we can say let's simply do true for now so it's always going to be selected and then we can give it a bg dash site dash dim 2 and then if it is not selected we can simply set this to an empty string and always it's going to be a cursor dash pointer so now if we save this nothing is going to show yet and that's because we didn't add anything inside of the li and there we want to render the token name so now if we save this and reload the page because of that hot reload bug and then click here you can see that it actually opens of course this is just the fake data for now but soon enough we'll be fetching real data from the blockchain great with that said that's going to be it for the ui of the amount in component later on we're going to provide a lot of different parameters to it so it's gonna actually work with that said we can now go back to the exchange and focus on creating our amount out component you might think that these are going to be quite similar as they're going to look almost exactly the same and they are both kind of inputs but they are also different the first one is an actual input where you'll be able to type different values but the second one is just an output it's going to show you how much of a specific currency you can get for the selected input with that said we can start by simply copying the entire amount in and then placing it in the amount out and of course rename it to amount out right here so as i said some parts will be similar but the majority will be different so now we have two of these which is looking great but in this case the placeholder will be the same the type is going to be a number value we're going to get later on then disabled is going to be always true so we can simply leave it like this because you won't be able to type into the output input and then also the class name can be the same the on change we won't really need as it is a static input and that's going to be it for now of course we're going to pass in the real values soon enough now let's focus on the shared component for both input and the output which is the balance we can move into the balance and this one is going to be much simpler we're going to import just two different utility functions from ethers that's going to be format units as well as parse units and that's going to be coming from ethers forward slash lib forward slash utils we can also import these styles coming from dot dot slash styles great now inside of here we're going to wrap everything in a div that's going to have a class name equal to styles dot balance we're going to also have a p tag right there that's going to have a class name equal to styles dot balance text and then there we have to check if we do have any balance for now i'm going to hard code it so let's do something like const let's name it token balance and let's set it to a string of 0.00 something you can do whatever you want now we can check if the token balance exists so that's going to be token balance and then we can simply say and end so if it exists show something in this case we want to show a react fragment and then inside of it there's going to be a span element with a class name equal to styles dot balance bold there we can say balance make sure to put one space here and then below it we can call the format units and then in there we can render the token balance in case the token balance doesn't exist we have to provide something else so if the token balance doesn't exist we can provide a parse units call of zero this is going to make sure that we don't have any errors as format units always expects one big number value so this parse unit is going to pass this string of zero to a big number now we do have one error so let's open up inspect element and go to the console we can notice that we have an invalid big number of 0.00251 so this value that you're passing right there should already be a big number so later on we're gonna of course parse that and send it already fixed from the exchange component to the balance component but now since we mocked this we can just call the parse units on that as well to transform it into a big number which format units accept so now it's loading pools and everything is looking great we have two different balances below two different inputs and for now everything is entirely static but soon enough we're gonna focus on making all of it dynamic as you can see these components are not getting any inputs right now and they're just waiting for us to do something with them with that said before we focus on that we can finalize the bottom part of our unit swap 2 which are going to be the buttons to approve the transaction as well as to actually enable the swap so let's focus on them right away before we do that we're going to need some help from the utility functions we imported at the top so let's first get a couple of states something like const is approving we always want to know are we currently approving or not and for that we can call the is operation pending and pass the approve as a string we can duplicate this and check are we currently swapping so based on these we'll be able to show different pieces of the ui and then in here we can change this to swap for now but these are just dummy values later on we'll have to provide the actual swap execute state and swap approve state so for now i'm just gonna write to do right here next to these two and finally working with success messages we can say const success message is equal to get success message but later on we'll have to provide some additional states to this so for now i'm going to also say to do there and the same thing is going to go for get failure message so failure message and also get failure message we're going to work on providing the proper parameters to all these functions really soon but right now the most important thing is that we have some of these constants which we can use to conditionally render our buttons so right below our div right here we can create a new dynamic block of code we're gonna check if approved needed so this is something that we're gonna have to get soon we don't yet have access to it so for now i'm going to simply leave it as a string and then we're going to say end and not is swapping so not is swapping there we go in that case so if the approval is needed and we're not currently swapping then we can render out a button and that button is going to check are we currently approving so is approving if we are we're going to render approving else we're going to simply say approve now if we save this it's going to break of course so let's see what's going to happen with that we can go to our inspect element and then go to the console in here we can see that cannot read properties of undefined reading status so already just by calling these functions with wrong parameters we are getting some errors that means that we'll have to comment amount for now while we actually get the right parameters to them and as you know i always like to guide you through all the errors that we go through usually it's not uncommon for people to simply skip that while creating tutorials i want to guide you to the real process of creating this application from scratch to finish with all the errors included because errors and bugs are normal parts of the development cycle great so now we can go down we have this button which is not yet styled so we cannot really see it so let's apply some styles to it let's say class name is going to be dynamic so let's do something like this that's going to be a template string we can give it a styles dot action button like this that's going to be 1c right there and then if we save it it's going to already look better but now we can provide additional styles where later on we're going to have the can approve state based on that we can render different styles so if can approve is true we can render the bg site pink and then text white and then else if we cannot approve we can render the bg dash site dash dim 2 and then text site dash dim 2 as well if we save this you can see that we have something that looks like a button right now now let's also give it a disabled property so disabled and it's going to be disabled if not can approve right here but this can approve again we don't have yet so i'm going to simply leave it as a string later on we're going to remove those string signs for now it's going to be always enabled and it's also going to have an on click which for now is going to be set to an empty callback function this is our button for approving but now if the approval is not needed and if we're not swapping in that case we want to render a different button so for now let's simply copy this button and then instead of closing this block right here we can remove that and we can call a question mark which is the ternary operator so now we're rendering this button if this is true if that is not true then we can for now copy that button and again make sure to close everything properly so we have to close that button right here and we have to close the ternary operator so one more time if approval is needed and we're not currently swapping then we're gonna show the approval button else we're going to show the swap button of course it's not going to be the same as this one in here we can say if not can swap then it's going to be enabled for the class name we're going to check the can swap right here instead of can approve and the class names are going to be the same finally inside of there we're going to have some additional logic we can say if is swapping or just by using the ternary operator is swapping then we want to show swapping dot else we want to check if has enough balance again for now we don't have that variable so we're going to put it in a string so if it has enough balance then we can simply say swap if it doesn't we're going to say insufficient balance there we go of course later on we'll have to remove those string signs from these properties right here to make that dynamic and finally we can focus on success or failure messages so right below the block of code with buttons we can open a new block of code and say if failure message and and no reset state then we want to show a p tag this p tag is going to have a class name equal to styles.message but of course it has to be dynamic so styles dot message and we're going to render the failure message now if we have a success message so right below we can say colin if there is a success message in that case we can render another p tag which is going to be the same as this one class name message and we're under the success message and else we're simply going to render an empty string now that's going to be it for now but as you can see we don't have access to any of these variables for now so we can simply leave them as strings later on we're going to modify them and for now we can simply see success message that means that everything in terms of ui is done and now we can focus on connecting our blockchain functionality with our existing front-end application the last thing i would want to do is fix the styles for the button so right here you can notice the class name can approve is not really how it should because now we're giving it a couple of different strings we're giving it this part and then this part which are divided so it's only taking the classes from here and it's disregarding this what we have to do is wrap everything inside of a template string open up a new dynamic block of code like this then we can put the can approve inside of that block and then we can put this part as well just at the end after this block ends but still inside of the same template string so if we do this now as you can see we get the button styles and we can simply copy this class name down to our can swap as well and we can rename this to can swap there we go so now we are truly done with the ui of our exchange and now the fun part begins depends on who you ask maybe you were enjoying creating this layout but maybe some are going to enjoy hooking up this functionality from the blockchain there's going to be a lot of utility function calls there's going to be a lot of hook calls and a lot of work with those libraries that help us connect to the blockchain so let's get started let's start by grabbing the information from our metamask account right here at the top of our exchange component that's going to be const this structure the account and that's equal to use ethers that is a hook coming from the use dab core package then let's initialize a couple of different states so let's start typing the use state use this helper function right here and let's call it from value set from value and at the start that's going to be equal to a string of 0. now let's create another use state that's going to be use state snippet and let's call it from token so which token do we want to exchange from and instead of leaving this blank we can use the pools 0 and then dot token 0 address to immediately render that token the a in address has to be uppercased then we can proceed we can create another use state this one is going to be called 2 token right here set to token and that's going to be set to an empty string and then finally we're going to have another use state called reset state and set reset state which is at the start going to be set to false we're going to use this to reset the success message now we have this from value which is going to be a normal human readable string number so what do we do with that we have to transform it into a so called big number so we can say const from value big number and that's going to be equal to parse units from value and we can say or or a string of zero so there always must exist something but i think since we are immediately resetting the value to zero that should be fine so we want to get the big number from the from value then we want to know a list of available tokens that we can swap from so let's say const available tokens and that's going to be equal to get available tokens and we pass in our liquidity pools then once we select some tokens we want to also get the counterpart tokens so to which tokens can we make a conversion to so we can call a get counterpart tokens function and we can pass the pools as well as the from token into it because we have to know from which token are we trying to make the exchange from and then finally we can also get the pair address so once we know from which token do we want to make an exchange from and to which token do we want to exchange to then we have to find a peer address of that specific liquidity pair so let's say find pool by tokens we're gonna pass in our pools we're gonna pass in our from token we're gonna pass in our two token there we go and then we can say question mark dot and then we can get the address so question mark dot means that we only go to this point if this function actually returns something and this peer address has to be a value has to be a string so we can use this new javascript operator question mark question mark and say if this right here is null or undefined then rather use an empty string great so now we have a lot of different values we can work from but that is not the end now we have to get a lot of different contract addresses so let's start with const router contract is equal to new contract and then we pass in the router address which is coming from the config and we have to pass the apis dot router 0 2. i'm going to expand this just a bit so everything fits in one line then we have to get the const from token contract so we have to know from which contract are we transacting from so let's say new contract we pass in the from token and we also pass the erc20.api as the token follows the erc20 smart contract then let's talk about the const from token balance so we have to know the balance of our token and for that we can use the use token balance hook it accepts the from token as well as the account then we have to know the two token balance so that's going to be const 2 token balance that's going to be equal to use token balance we're going to pass the 2 token and we're going to pass the account now that we have the from token balance and 2 token balance there is a third thing we need const token allowance now if you think about it before i briefly mentioned that the swap is a two-step process first we have to approve and then we can actually make a swap so let's get the use token allowance and we're gonna pass in the from token we're gonna pass in the account and we're gonna pass in the router underscore address in case this value doesn't exist then we can simply call the parse units and send a string of zero now that we have our allowance we can create a new variable const approved needed you can also call it approval needed but since we already called it approved need at the bottom let's stay consistent that's going to be equal to from value big number dot gt as in greater than token allowance so right here what we're doing is we're checking if the front value is greater than the token allowance if it is that means that we need to get the approval to make the swap so our variable is going to let us know that then we're going to create another one const form value is greater than zero of course it has to be greater than zero right so we can say from value big number dot greater than parse units and then we're gonna pass in a string of zero again we're just making sure that everything just works properly by having these custom checks for our form and then finally the last check is const has enough balance and we can check that by saying from value big number dot lte lower than or equal to from token balance and then in case the from token balance doesn't exist we can again use that new javascript operator and then we can pass the parse units 0 just to make sure we don't run into any errors later on great so now we have a lot of these different checks i would call them but now we are ready to actually start adding the functions that are going to allow us to send or approve transactions and for that we're going to use the use contract function coming from the use dab functionality that is the only one that we still haven't used so scrolling down we can say const we want to destructure two different things a state and also a send and that's going to be equal to use contract function like this we call it as any other hook but it will get a bit more complicated so the state we're going to rename to swap approve state and then the send we're going to rename to swap approve send it is like a variable and then a function all working to make our approval successful of course to our hook use contract function we'll have to pass a couple of parameters the first one is from token contract then the second one is a string that's going to say approve and then the third one is an object where we can say transaction name is on approve requested and then we also can provide a gas limit buffer percentage and we can set it to something like 10 percent great so now we have a function which we can run our approved functionality now let's copy it duplicate it below and we want to also make this work for the actual swap so let's say swap execute state again it is a two-step process so execute and then swap execute send as well of course we have to change this to the router contract we're going to change the approve to swap exact tokens for tokens now you might be wondering what this is so let's google it one google search is immediately going to bring you to the router zero to uniswap docs and then we can again ctrl f to find that exact function in here you can see that we're using the built-in unit swap functionalities because in our crank we built on top of unit swap so in here you can read more about what properties you have to send in but essentially the swap execute send is going to work exactly as swap exact tokens for tokens and finally right here we can say swap exact tokens for tokens as well with that we now have those two functions which we can call on button clicks finally we can get back to those checks that we started creating at the start so that's going to be const is approving is operation pending but now we know what are we wondering about we're wondering about the swap approve state which is coming from here the second one is going to be about the swap so that's going to be the swap execute state not send but state in this case then we're gonna work with can approve const can we actually click the button can we approve it and that's gonna depend on a couple of checks from above so let's put it like this we can approve if we are not currently approving and if the approval is needed so approved needed we can swap if not approved needed so approval is not needed and we're not currently swapping and form value is greater than zero and we have enough balance so now i hope you can see why did we create all of these fields these are checks to make sure that we can swap and can approve and now we can simply use these variables to make those checks in the code finally for the success message and the failure message we can now pass our parameters the first parameter is the swap approve state and then the second one is the swap execute state because we want to make sure that the approval and the execution went successfully and then for the failure it's going to be the exact same thing so we can pass the same parameters again it's the function that makes the difference we want to make sure that we pass through all of these two states successfully so now we have the success message and the failure message as well now that we have all the states and we have created the functions which we can call it's time to focus on creating the functionality the logic the actual verbs of our application the functions so let's say const on approve requested so this is going to be once we request the approval then we want to call the swap approve send we're going to pass in the router address and we're going to pass the ethers dot constants dot max integer 256 this is how it is written inside of the unit swap docs the second value is always going to be the maximum integer there is because we always want to approve for the maximum value so that once we approve for the first time we can then every other time simply swap without having to approve again and now finally we're gonna focus on the most important thing which is the function for the swap so we can say const on swap requested we're going to call the swap execute send and remember we talked about this function it is the same one that i showed you before swap exact tokens for tokens so at the start right here we said hey make our swap execute send this specific function which is coming from unit swap so now we know which values we have to pass i'm even going to paste it right here at the top so that we know what is what and let's create it let's pass those parameters one by one the first one is the amount in so that's going to be from value big number then we have the amount out that's going to be zero then we have an array of addresses which are going to be from token and to token then we have our account two and then finally we have our deadline we can calculate that by setting the math.floor we can take the date dot now divide it by 1000 and then we can add 60 times 20. now of course you can put any deadline right here if i'm not mistaken this is going to be two minutes but of course feel free to play with this however you'd like to then this is an asynchronous function so we can call a dot then on it and then we simply want to set from value to be equal to a string of 0 because we want to reset it once the swap has completed now let's create a special function to update this number at the top the input number so that's going to be const on from value change which is going to accept the value then we want to first trim it so let's say const trimmed value is equal to value.trim we want to make sure that we can easily work with it and then we can have a try block and a catch block then if we have a trimmed value meaning if it is not empty then we can parse units and we can pass in the value and then we can also set the from value to be that value there we go in the catch we can simply leave a console.log with the error for now great and finally we have to have just two more handlers for when we change those tokens the tokens in and the tokens out so let's create a new const on from token change we're going to get the value and then we simply want to set the from token to be equal to that value we can of course duplicate that and then this is going to be on to token change where we're going to set d2 token value there we go and finally the last thing is the use effect that's going to handle the success and failure messages so let's create this use effect right there it's going to accept a callback function as use effects usually do we can pass in the failure message and the success message as dependencies in the dependency array we want to check if a failure message or a success message exists and then we want to call a set timeout so set timeout it accepts another callback function and there we want to call the set reset state we want to also reset the from value not token to a string of 0 and then we also want to set the 2 token to an empty string so we are essentially resetting everything and then we can provide 5 000 milliseconds or 5 seconds right here and of course we have to set this to set time out like this it is a built in function and of course we have to import the use effect from the top so right at the top import use effect from react great a lot of logic a lot of code it's it's been tough right uh it's not an easy application to build again it seems simple two inputs but keep in mind we're working with the blockchain with smart contracts everything is fully connected and all these pieces of the ui will soon enough become dynamic so we'll be fetching live balances live from tokens live two tokens live liquidity pools so now that we have everything we need let's go ahead and actually send it to those functions so amount in is going to have the value as from value it's going to have an on change on from value change it's going to have a currency value which is going to be equal to from token we need to know from which token are we changing and that's going to be currency with a u then we're going to have an on select and that on select is going to be on from token change not on from value change we have a value for the input and then we have a select change then we're going to pass in all available currencies which are equal to available tokens and then we have to pass the variable are we currently swapping which is going to be equal to is swapping and has enough balance great that's going to be it for the amount in now for the balance we simply have to pass the balance of the in token or the from token so we can say token balance is equal to from token balance we can repeat the process for the second balance that is the 2 balance but you have to change it to 2 token balance so just like this now let's pass all of the props to the amount out that's going to be from token is equal to from token it's going to be 2 token is equal to 2 token we have to know how much do we want to transact so that's going to be the amount in equal to from value big number we're going to pass in the pair contract which is going to be equal to peer address we also want to pass in the currency value so to which token do we want to change the value to so that's going to be 2 token we want to pass an on select to change the 2 token which is going to be on to token change right here and it looks like we misspelled it at the top so let's find it there we go on token token change no this is on to token change hopefully you caught that and then finally we pass a list of all the currencies which are the counterpart tokens right currencies in the amount in are the available tokens from which we can swap and then the currencies in the amount out are the counterpart tokens which we can use to swap too hopefully that makes sense and hopefully now you understand the difference between the amount in and the amount out although they're quite similar in the layout and the look they're quite different in terms of props they're getting almost every single prop is different finally now that we have those variables we no longer have to use these boring static strings so now we have the approved needed we have the can approve so we can use it as a variable we have the can approve here as well then going down we have the can swap we have the can swap here there we go we have the has enough balance as well so that's gonna be good and we have the failure message we have the reset state and also the same goes for all of these strings right there it's going to be actual values there we go hopefully now you can see why it was necessary to create all of these so-called checks right or states derived from other states because it makes things so much simpler when actually rendering things we can simply say can swap instead of saying not approval needed and is not swapping and is from value greater than zero and has enough balance imagine if you had to type this out every time where we used can swap it would be a mess even though it's only two times in this case but some other things are used much more often so in this case you're really learning how to write clean and scalable and reusable code great with that said we now have everything on our component since our hot reloading is not working now is the moment of truth we changed a lot of things so we have to reload the app and hopefully it works it seems to be working which is great of course these values are still static because we haven't gone into those components and changed things out i've also noticed that we didn't yet provide the on click properties to those buttons so on the on click of the approval we're going to pass in the on approve requested which now we have on the swap we're going to pass the on swap requested and i think that's going to be it for now which means that we are ready to go and dive into the amount in to now take all of these props get them right here and then use them inside of that component so let's get started with bringing our amount in component to life let's get started by getting our props right into this component so first we have the value then we have the on change and there's a couple more if you want to know which one these are you can simply copy them from here but in this case we can keep writing them right there so we have the value we have the on change we have the currency value as well on select is another one currencies and then finally is swapping there we go now we have the show list already but we're gonna need one more state so we can create a new used state snippet and that's going to be active currency so which one is currently selected and at the start it can be set to a string that says select then we're going to also have a ref so let's say constraint is equal to use ref there we go now in here we can also call the use on click outside hook where we're gonna pass a ref to it and then a callback function that's going to set the show list to false and if i'm not mistaken these three lines are going to be repeated in the amount out so let's simply move there to the amount out and then right here we can just paste them there there we go so now we have the currency we have the ref and we also have the use on click amount out great so let's get back to the amount in and let's focus on actually using all of these props we can start with the input values so first the value is not going to be an empty string it's going to be value disabled is going to be only if we are currently swapping then we want to disable the input then on the on change we always get an event and there we want to check if the type of on change is equal to a function because sometimes we're not going to have it because it's possible that we pass something else so if it is a function then we want to call the onchange to which we can pass the e dot target dot value that's going to be it for the input then we have our div we have our button inside of that button we're gonna pass the active currency because now we have it if we save that you can notice currently it is just select and then finally we have our ul to that ul we're going to add a ref equal to ref and now is the time that we actually map over our real tokens so let's remove this empty array and let's do it like this object dot entries so we have a lot of different entries of objects and these are inside of currencies now that's going to give us both the key and the value for a specific token or a currency so we can map through them but we're going to be getting a list of arrays so instead of doing object destructuring and getting the token and the token name we have to do array destructuring using the square brackets like this now inside of there we're rendering an li with a key and a class name and as we said later on we want to check if the active currency is equal to the currently selected token name so let's spell this properly and that is it now it's going to be dynamic as well we can reload the page to check the changes and believe it or not if you click select we get real values real tokens from our blockchain isn't that crazy remember we created those liquidity pools on our own so now we have jsm gold jsm silver and shiba inu jsm as well as wrapped ether it is possible that you have some different ones as well now let's fix the on click property because now we cannot really select different ones so let's add an on click to our li it's going to be a callback function and there we can say if type off on select is triple equal to a function then we want to call the on select again really being careful of when do we try to call this to reduce the amount of errors that can potentially happen we can set the active currency to token name and we can set the show list to false because we actually want to change it now if we save that reload the page you can notice that if we select jsm gold it's actually going to be selected there we go it seems to be working perfectly for some reason the show list is not closing so if i click it it is still open and this set show list should actually turn it to false but that's fine for now we can click outside to actually close it great so this is mainly it for our input component there's just one more thing though and that's gonna be a use effect so let's create a use effect right there and that use effect is going to have a callback function and a dependency array as usfx usually do we're going to recall the function whenever currencies change or the currency value changes in there we want to check if object dot keys from currencies so we're going to get the keys and then if they include the currency value that is currently selected if that is the case then we want to set the active currency to be equal to currencies and then currency value i know it is a bit tricky but bear with me if that is not the case we can add an else so let's properly open a new block of code right here and now add an else saying set active currency to select so we want to reset it to select so now if you reload the page you can notice that the wrap ether is the first selected one and we can swap between other ones as well great with that said that's mostly going to be it for the amount in but you can notice that the balance is still not reflecting the changes so now might be a good time to jump into the balance component and make it come to life as well to our balance component we're passing just one prop which is the token balance so let's destructure it from here token balance and it is no longer going to be hard coded so for now the only thing we have to do is delete this hard coded value and everything is going to be done automatically so now you can see that we have 0.1 wrap ether now in your case this value is most likely going to be zero but no worries at all i'm going to show you how to get the actual balance for your wrapped ethereum what you have to do is go to the real unit swap application so that's going to be app.unitswap.org there you'll have to connect your wallet by clicking this button connect the metamask wallet that's looking good and now we want to exchange ether that is the gurley ether that we have right there and then you can select wrapped ether so what we have to do is we have to turn ether into an erc20 wrap ether to be able to make transactions with it and to be able to swap it to other tokens so let's say that we want to transact 0.1 ether to wrap ether now you can simply wrap it you'll have to confirm it so let's go ahead and do just that as you can see one transaction pending i've already done this before so now i should have 0.2 wrapped ether for you it should say 0.1 there we go wrap 0.1 ether to wedh we can close out of this as you can notice the balance for me changed to 0.2 wrapped ether for you it should still say 0.1 but the most important thing is that it's actually fetching some data right here great with that said we can close out of the balance we can close the amount in and we can copy the props that we have to pass to the amount out by holding the alt key and then double clicking the prop names we can go into the amount out and now we can simply destructure them and then paste them right here of course let's also put them in one line right here and we can add commas in between that's looking good and we are ready to dive into the amount out component we already have the show list the active currency and the ref but the most important thing right here is to calculate what we're going to be getting for the amount of the input currency so to do that we have to import something from utils and that's going to be called use amounts out so that's going to be a hook that's going to calculate it so we can say const amount out is equal to use amounts out and we're going to pass the pair contract the amount in the from token and then d2 token now this must not be undefined or null so we're going to use the question mark question mark operator and set that to 0 just a number in case we don't have any other value great so now we know how much we are getting what we can do is we can also copy the use effect from the amount in that's going to be a simple use effect for selecting the active currency so let's copy it and let's paste it right here great the last thing we have to do is plug those real values in so first let's add the value that's going to be format units and then the amount out then let's change the eth to active currency right here let's add a ref to our ul equal to ref and now we have to do the same thing we've done in the amount in so we can copy that part as well where we mapped over our object entries so let's copy everything from the object.entries all the way to the start of this function and we can paste it right here there we go now we have everything we need the class name in this case is going to be static so the class name is simply going to be currency list item we don't have to change it it's going to look like this of course if we properly close it and we can even remove the template string as it is only one dynamic value now we have to add an on click and the on click is again quite similar to the one in the amount in so let's copy it and let's paste it right here if type of onselect is equal to function then we're going to select the token we're going to set the active currency the token name and we're going to set the show list to false that is it so now if we save this and if we reload the page again because of that hot reload bug you're going to notice that we have 0.2 wrapped ether and if you go into our metamask that's going to be a different amount because this is just regular ether and not wrapped either but under assets you can see all of the other currencies so if we tried changing jsm gold the balance automatically changes and now we can also see that we only created the pairs to exchange the gold to wrap eater or jsm silver so this is being dynamically fetched from the blockchain let's select silver and we also get the dynamic balance now let's try exchanging 100 jsm gold to silver as you can see 100 gold is going to be 500 silver now it is important to mention that the exchange rates are not always going to be the same uniswap works on the principle of supply and demand so the more supply there is of a specific coin the less it's going to cost when transacted from other tokens since our pool is incredibly small we can see huge differences in the amounts we'll be getting so for example if we try doing something like 500 there we go you can see we get 832 but for 100 we get 500 so if we try playing with it for 500 we get 832 and then for 100 we get 500 so the value should be five times as much but it is only one and a half times as much again the reason for that is that these are our own liquidity pools and we don't have many people providing values to those liquidity pools but this is exactly how the real unit swap works great so everything seems to be working perfectly now so let's go ahead and try to approve the transaction i'm going to click approve a new meta mask notification is going to appear and it's going to say do you give permission to access your jsmg we indeed do give that permission keep in mind again this is a two-step process but you only have to approve it once so now as you can see in the button it says approving again we know that because we created a lot of these different checks to know when we are approving and when we are not this process usually takes about 10 to 15 seconds so let's give it a few more moments and then once we are approved we can press swap that's going to open up a new metamask notification and you can see that we want to swap a specific amount so we can press confirm now you can see that the button says swapping and again this also takes about 10 to 15 seconds and there we go swap executed successfully and also all of the values have cleared so now if we were to check the balance it would be really hard to notice that we actually did exchange something as these values are huge but we are definitely missing some jsm gold and we have more jsm silver so this is working perfectly you can also try exchanging rap ether silver shiba inu or anything like that to other currencies since we only added one pair for shiba inu inside of our liquidity pools we can only exchange it to wrap ether but that is fine that is exactly how we designed it so if you wanted to add more different combinations of different currencies for example being able to swap silver to something else other than gold in that case you can add those pairs inside of those liquidity pairs inside of crank hopefully that makes sense great with that said this is a phenomenal application we work through the amounts out amounts in and then most importantly worked a lot through the entire exchange component to get it all working it is using a lot of web3 functionalities from contracts abis erc20 contracts and tokens to the use ethers functionalities we're also parsing the values getting the router address and a lot more utility helper functions everything is being dynamically pulled from different smart contracts and from the blockchain and we're also keeping track of a lot of different variables right there we have functions connected to the blockchain that approve our swap and that execute our swap we have a lot of different checks to make sure that we're currently swapping or approving or something else we have proper air handling and messages and everything is working perfectly again might seem like a simple application but in my opinion it is the best application to properly learn how smart contracts blockchain and web3 applications work behind the scenes we have only a couple of components but the logic to connect everything to connect these pools is tough you have to understand how all of this is working how we're getting pairs of different liquidity tokens but by now i'm sure your knowledge improved so much you might be overwhelmed at this moment because we were talking about pairs tokens contracts liquidity pools and a lot of different concepts but i'm sure now that you heard about it after some time it's all going to make so much sense so props to you for coming to the end of this phenomenal build this has definitely been one of the more interesting builds on the channel a complete web 3 uniswap 2.0 clone and as you already know on javascript mastery i always teach you how to deploy these applications as well so this one is not going to be different i'm going to teach you how to deploy your react application to the internet so that everybody can see it we can open up our terminal by going to view and then terminal we can stop it from running by pressing ctrl c and then y let's clear the console we can open up the package.json to figure out the build command in this case it's going to be react dash app colon build so let's run npm run react dash app colon build this is going to build an optimized production version of your application now while that is doing its thing let's open up a website called netlify netlify is a website that allows you to simply deploy your react applications so either create an account or simply log in once you're logged in go to your sites there you'll be able to scroll down and then you can simply drag and drop your site output folder right there while we're doing this looks like the build folder has been generated so let's go right here let's go to our react app and then right here you can see the build folder let's reveal in file explorer or on finder if you're on mac let's drag it here and then simply drag and drop the build folder right here in a couple of seconds your project should get deployed let's reload the page and there we go while we reloaded it it got finalized let's also go to domain settings options edit site name and let's do something like uniswap clone jsm of course feel free to call it however you want to let's save it and let's click this link to go to it and there we go we have a uniswap clone jsm unit swap 2.0 and now we can connect our wallet so let's click the connect wallet button a metamask notification is going to appear asking us if we want to connect the metamask wallet this time not with the localhost but rather with a real deployed site so let's connect immediately we can see the balance in our metamask account and let's try changing 0.0001 wrap ether to something like let's do shiba inu we can only get about 90 which is fine let's go ahead and approve the transaction there we go we have to do that for the first time we'll have to wait a couple of seconds there we go the approval was successful but it looks like the input got cleared so let's retype 0.0001 and select shiba inu that's about 90 and let's swap there we go let's confirm and let's wait a couple of seconds right now we have 999 6498 so these three digits should change this number should go to five so let's check that out and now if we again check shiba inu there we go 999 6 and now we have 579 which means that the transaction went through so now your smart contracts are compiled and deployed to the internet or rather should i say to the ethereum blockchain and then the application itself at least the front end is deployed to the internet as well so you can take this link share it with your friends potential employers showcase your web3 development skills with that said huge thanks to crank not only for sponsoring this video but also for creating such an amazing software that allows us to build web 3 applications so simply and so intuitively with that said that's going to be the end of this great video thank you so much for watching and i'll see you in the next one have a wonderful day [Music] you

Channel: JavaScript Mastery

Views: 354,508

Keywords: javascript, javascript mastery, js mastery, master javascript, web3 explained, web3 tutorial, web3 development, web 3.0, web3 developer, web3, web 3.0 explained, web 3.0 projects, web 3.0 tutorial, react web3 project, react web3 tutorial, react web3 connect metamask, web3 tutorial uniswap, web3 solidity tutorials uniswap, cranq, uniswap clone tutorial, blockchain development for beginners, blockchain development roadmap, smart contracts explained, smart contracts blockchain

Id: Y89q6T1r1Yg

Length: 200min 6sec (12006 seconds)

Published: Fri Sep 09 2022