Build A Web3 DEX | FULL COURSE | React, Node, Moralis, 1Inch

what is up everyone welcome to an episode of Morales blueprints in which we show you how to start your web3 development journey by building cool web3 projects with even cooler web3 tech in this video we're going to build a decentralized exchange using the Morales web3 API for token prices the one inch aggregator API to actually make the swaps the wagme web3 library to connect your wallet to a react app we're going to build a react app for the front end and for the back end a node.js Express app but before we get into the tutorial let's look at this final product to see what you're going to learn how to build so we have this very cool interface where you can swap the tokens that you want to change tether USD to for example uni swap let's change this back to usdc you can swap them around like so we're automatically getting the token prices so as you enter a price you'll get that swapped over here in the second input field how sweet is that then you can connect your wallet over here let's connect my account one where we have at I believe some usdc let's check out our wall dollar we have five usdc tokens but we don't have any uni swap tokens let's import uni swap into my wallet uni swap over here next import tokens and check out as we make the swap we should get some uni swap tokens so let's change four usdc tokens for 0.63 uni swap tokens let's swap one inch aggregator API gives us a quote where our tokens for usdc will be changed to 0.63 usdc we'll have to pay three dollars in gas and ethereum we confirm this transaction and we get this nice process of the transaction is pending we can also follow this on metamask over in here our one inch aggregator found the Uno swap decentralized exchange to have the best rates for the swap so we wait for that pending to go through that's gone through and now that should be reflected over here as well the transaction is pending State should say change the transaction successful and now checking out our metamask wallet and our assets we only have one USBC coin left but we have 0.6 uni swap tokens valued at 3.97 United States dollars how cool is that we also have a functionality to advanced settings for setting the slippage tolerance from 0.5 2.5 to 5.0 percent to make sure that your transactions actually go through but if you're excited for this build stay stuck in and we'll show you how to build this from scratch today stay stuck in and let's get started hey I'm Jay your Morales instructor from beautiful Finland I got into crypto in 2020 and I've been building into space ever since in my free time I enjoyed running and at the gym and in the summer you'll definitely find me at the golf course now let's get stuck in and learn about web 3. [Music] radio let's get started with this project so open up your favorite development environment I have Visual Studio code open and a folder in which you want to create this project and to get us off the flying start I prepared a starter repo that's available in the link in the description it'll take you to the GitHub page and what you can do is just press this code button over here and copy the link to this repo and then we'll go ahead in our development environment and clone this repo into our folder git clone and the address over here and this will start cloning your Dex starter repo over into your folder and once that's in here let's go ahead and move into that folder CD Dex starter in your terminal like so and let's go ahead and open this and you'll notice that we have a front end which is called the decks which is a simple react file and then we have a back end which has a simple node.js file over in here but as you'll notice we haven't configured any of this yet and that is the idea of this tutorial you'll learn step by step how to make may cause the different web 3 endpoints to get the prices of tokens make swaps of tokens and in the front end portion of the build if we jump into the decks folder over here you'll notice that we have a app.js which is totally empty and the index.js just shows us we have a react app ready to get going as we start off with this build so first things first let's go ahead and install all the dependencies for this project let's go ahead and clear the terminal for now and then let's go ahead and start off with the front end so CD into the decks folder and go ahead and run npm install so this will install all the front and dependencies we have for this project and then we can go ahead and jump start the project and see what it looks like in its starter form alright now that everything installed let's go ahead and run npm run start and this should open up localhost 3000 for you like so and we have this nice gradient background and we have a DEX title over here and this is the basis for our project and we'll start off by building all the features for the front end of this page and then we'll still only delve into creating a back end with Morales to fetch token prices and also integrate with the one inch aggregator API to actually make swaps of erc20 tokens at the end you'll have your fully fledged decentralized exchange so now let's jump back into Visual Studio code and here what we can do is close down the terminal so we have a bit more space close down the index.js file and jump into the app.js file so this is going to be the main route of our front-end project and what we're going to do is build it out with these components over here we have a header which will have the header of every page then we have a swap page and a token page and the token page is something that is extra challenge for you at the end if you want to build out this further and kind of have a list of tokens but we'll focus on the header and swap components for this build now jumping back into the app.js file let's go ahead and use this header component so let's go ahead and import it import header from the components folder and the header file over here and then we can go ahead and use it here in our app component let's go ahead and place our return statement in Brackets over here copy this command X and paste it in here and rather than just pasting decks let's add our header component in our app div and throughout this build you'll notice that we've given class names to our different tags and this is because I've already prepared a app.css file with all the CSS styling for this build so if you're interested in the CSS styling of how to make things look pretty you can always go ahead and check it in here but we'll be referring to them in the class name tags to speed up the process of this build because we're not focused on styling but the actual web 3 functionality so now let's go ahead and use our header tag which we've created in component for and add it to our app component let's get rid of this semicolon over here so now everything should be working nicely let's go ahead and save we can actually go into split screen mode so we can see the changes we're making live on our browser like so so now we're in split screen mode we have Visual Studio code open and our localhost 3000 on our Google Chrome web browser running over here and you notice that the dash heading has changed the header because now we're not rendering the text decks over here but we're using from the components the header component over here which has a div named Header by changing this this is what will change into our browser like so let's go ahead and redo that so now we have the header and now let's start off by making a nice header we'll have our logo in the top left corner a couple of page options and then a connect button over here on the right so let's go ahead and move into building that let's close out the file structure over here so we have more space in our header component and start by importing all the things we need for this header component all right so what we'll have is two images we have a Morales logo which is stored in the file directory and a eth logo the eth logo will be represent the chain the user should use to access the swap so we'll configure this for ethereum but of course you could figure it for other chains as well like Avalanche polygon whatever you'd like your decentralizing change to be on but now moving on into the header component rather than returning just a div with a header text let's go ahead and actually make a header tag header like so and in this header tag we'll create a div with a class name equal to left Capital H which will have all the components of our header we want to be on the left side so the logo and the different pages so let me just go ahead and paste these over here like so so we'll have an image which has our logo we imported at the start over here we have our first header item which is the swap page and the second header item which is our tokens page so if we go ahead and save this what you'll notice is that now we have a nice header over here we have our logo in the top left we have two page options and in a moment here we'll actually link these with the react router so you can actually go to these specific pages but for that we'll have to set up the routes in our app.js now let's go ahead and work on the Chain selection and the connect button we'll have in the top right corner of the header for this we'll create another div and we'll give it a class name of equal to write H close that div and in here let's go ahead and paste the items we want in the top right corner of our header like so so now we have another header item which is like the Swap and token header items we have over here here on the left side but this one will have a image of our logo the chain of this decentralized exchange which is ethereum here you could place your other options but then we also have a connect button and on click connect event will do later so we can remove that and then we have a connect button that pops up over in the top right corner and now our header is looking awesome now as it is in split screen mode it is a bit Crown but as you go in full screen mode everything looks absolutely beautiful so now we have a lovely header and that didn't take any time at all and now as I said now everything is just on this localhost 3000 page but we want to have different routes for the swap page and the token page so let's go ahead and jump back into the app.js page and create the routes for these two pages our react app is already set up with react router in the index.js file so what you can do is go ahead and import from react router route and route from react router Dom and because we want to route to the swap and token components we have in our file structure over here we have to import those as well us import them under our header over here and then after that you can place a main window div below your header so create a div give it a class name of equal to main window close up that div and in here we'll place our route like so so we have a route tag and within that routes tag we have two routes one which will be the main page which is a swap component and then we'll have the tokens component taking us to the tokens page and as we save that we should get a swap text pop up on the page as now we're on the main page which is the root route and the swap component should have a text called swap let's save this and look at that now we have Swap and as we move to the tokens route tokens now you get the tokens tag over here and as I said we'll be focusing on the root routes for the swap page and build out the swap functionality but the tokens page is something you could build out further later on but now we also want this routing to work from our selections over here here in our header so jumping back into the header component we have to bring in link from react router like so and then wrap our header items over here within linked tags so let me just paste them in over here voila and now our two header items are both wrapped around their own link component with a class name of Link the swap page will take us to the Home Route and the tokens button will take us to the Token drought if we save this now we go ahead and press the tokens component that takes us to the tokens page and pressing on the swap button that will take us back to the swap page so now without focusing on the functionality of our con connect button we have a fully functional header which takes us to the different pages of our decent exchange how sweet is that and we can move on to working on the swap component over here which will have our nice model with all the different options of changing our tokens our erc20 tokens to other erc20 tokens let's move on to that next radio so now with our header component ready for now let's go ahead and close that and jump back in to our components folder and we have the swap.js file and we'll start working on this so let's close down the file structure so we have more space and for this project we're using a UI framework called Ant design so to help us out let's start off by importing all the components and icons we'll be using from Ant design throughout this swap component build so pasting them over in here will notice we have different things from add design the components we'll be using are the input popover radio modal and message and then different icons will have a arrow down outlined just a down outlined icon and a settings outlined icon but you don't have to worry about these too much I'm just importing them here at the start so that we can easily access them when we need them for our different UI features so starting off in our swap component let's go ahead and give our main div we'll be using a class name a class name which will be equal to trade box go ahead and save that and you'll notice a nice box or our swapping pairs to be populated in now of course we have the swap header which we can remove from over here and go ahead and make a div for our trade boxes header so go ahead and create a new div give it a class name of equal to trade box header close it up and in here we can make a number four heading which we can say swap in let's see what this looks like say that and now everything looks a bit neater now on the right side we can apply some settings so for example when using a decentralized exchange you'll have slippage tolerances so although you're presented with some sort of initial price that one inch aggregator fetches you these prices might change So to avoid your transaction or swap of tokens going through with a different price you've selected you can set a slippage tolerance so let's go ahead and create a settings button over here first of all let's go ahead and use the settings outlined icon and for the class name we'll give it a class name of COG like so save that see what happens now we have a nice settings button over in here it even has a nice animation which turns around 90 degrees when you hover over it but now we'll also want a pop over functionality so as you click it you'll get the option for setting your slippage tolerance so let's create that let's wrap our button in around a pop over element from and design like so so that here you see why we're already bringing all the different components at the start let's go ahead and indent this close our popover like so and then provide some functionality for our popover first of all we'll give it a title which will e be equal to settings of course what will trigger this popover trigger will be equal to a click and of course you can find all this information in the and design documentation and then the placement of our popover will want it on the bottom right so let's go ahead and place bottom right as the option over here let's go ahead and save that and now as you go ahead and click our icon what you'll get is a settings popover now for the content of this popover we'll want to have those radio buttons to select which slippage tolerance we want for our trade so let's go ahead and create a Content over here content which will be equal to a settings component that we have to create so creating that settings component over in here what we'll do is create a variable called const settings which will be equal to a UI component let's go ahead and give it some tags to fit it in and let me just paste it over in here like so so we can talk about it so we have a heading called slippage tolerance you could also provide other settings as well if you'd like to we'll just have the slippage and then we have a div in which we use and design radio group component giving three options for radio buttons we have a value of 0.5 for the slippage which will reflect a 0.5 slippage tolerance and the same for 2.5 percent and five percent and of course for the radio buttons the value will be a slippage variable and on change we have a function to handle slippage change so we have to create those and for that we'll have to bring in from react use state so over here in the top bring U state from react and we might as well bring use effect as well at the same time as we'll be using that later on in this build so at the start of your swap component we can create a state variable called slippage like so and then we set the slippage over in this set slippage hook so go ahead and use State and we'll start off with for example 2.5 as the initial State and then of course we have to create that function that we called handle slippage change over here so go ahead and create that function function handle slippage change and this function all it will do is use the set slippage to set our slippage State variable to the Target value selected in the radio buttons so that should have us set let's go ahead and save this now and we get two errors e is not defined and settings is not defined so what we used over in our popover was settings not settings so let's go ahead and change this variable to settings and then for our value for our function over here we have to pass the argument that the user selects so e let's go ahead and save that and now all the errors have gone and we should be able to use this look at this now we have a slippage tolerance and we have this nice radio button interface where we can set the slippage tolerance we want for our swaps how sweet is that we're making great progress and now let's go ahead and move on to the actual input fields for our tokens so scrolling down to our return statement where we're rendering everything let's go ahead and in our trade box underneath our trade box header let's go ahead and create a div with a class name of inputs like so then what we'll do is create two input Fields over in here from Ant design so we're bringing in input so what we can do is bring those in like so let's open this up for in full screen for a moment so you see what we brought in so we have two inputs as a placeholder we'll have them both set to a zero value so in here you'll place the amount of tokens you want to swap and as you see the value is set to token one amount and token 2 amount and for the first one we have a on change function which will change the amount to whatever the user inputs and the second one is disabled as here we will be using the Morales token API to fetch the token price for both of these tokens and it'll automatically render the amount of tokens this token 1 amount will be swapped to if you swap them to token 2. and over here I also want to mention that these input components you'll see as we go ahead and render this page will not be the standard ones from ad design what we've done in our index.js file excuse me our index.css file we've given some custom code for our ant design components our ant input over here we've given some custom code to make them look nice so again you can check out the CSS styling for all the custom code we've given for ant design components over in the index.css file so now in the swap.js file what we have to do is set our state variables for token 1 and token 2 and then create this on change function for changing the amount so over here in the top let's go ahead and paste the two State variables in here like so so we have token one amount and both of them are highlighted now because we're already using them and we have the setting of these variables as well and we set both to null at the initial state so we'll use the placeholder holder of zero now what we'll also want to do is add that function and it'll be very similar to the setting of The slippage we're just changing the amount of token one so over in here let me just paste it in the function change amount and we take the user input and the target value we change to the Token one amount later on when we fetch the token prices we'll also set the token 2 amount based on the token prices given from the Morales token API so let's go ahead and go back into split screen mode Let's close down this so we see a bit better and save see what happens and now we have two nice input Fields over here look at this so quick progress and we can change our our token one amount but token 2 is disabled and you can't change this because that will be dependent on what you set for token 1. so now following this what we can do is add an indication of which token both of these inputs represent so let's add a token field over here on the right side for these input Fields so scroll down over to your inputs over here and underneath then we'll go ahead and create a div with a class name of equal to asset one as shown over here and in the CSS for asset 1 it is positioned relative to this inputs div and will be placed nicely over here in the input field of input one so let's go ahead and save this see what it looks like and now we have a nice little place where we can add the logo and the ticker value for asset 1 and we can do the exact same thing but this time for asset 2 and again The Styling is in the app.css file so you can check that out from there and that will create a nice field for our asset too but to be able to decide which assets to show in here will have to have the image variables and the tickers and for that I've also shorted you out so for that let's go ahead and open our development environment in full screen for a while let's go to the top over here and open up our file structure so in the source folder over if you travel to the bottom of the source folder you'll find we have a tokenlist.json file and in here we have an array with all these different tokens and for all these tokens we have the ticker value image associated with this token the name of the token for example for usdc it'll be USD coin and the actual on-chain address which represents this token on the ethereum network and the decimals which will help us out when actually making the swaps so we have usdc we have link usdt for tether we have Gemini USD we have wrapped ethereum wrap Bitcoin Matic unison up all these tokens but if you want to add some more you can do so and you can if you're using a different chain of course use the addresses on those chains but this is kind of a file to help you out with all the different coins you want to be swappable on your decentralized exchange so what we'll do is import this tokenlist.json file into our swap.js file let's keep this open for now so in our swap.js file over at the top let's go ahead and import this token list import token list from our tokenlist.json and now what we can do is use for example at the start of every render we use usdc and Link the first two items in our array as the options for token 1 and token 2 so we can use the image variable and the ticker valuable of each of these objects to present them nicely in our divs over here so let's do that straight away for asset one we can do this let's close down our file structure like so so what we do is add a image tag with this Source being token 1 image and the class name asset logo and then we paste the text for token 1 ticker so we use the image and the ticker and then we also have a down outlined icon to kind of represent a opening of a modal of selection of changing your tokens but you'll notice that we have a token one variable that we don't we do not have set in the swap component so we'll have to create that state variable that we can then change in the future and initially set it to the first item of our tokenlist.json so jumping over to the top let's go ahead and add that here and we might as well add token 2 like so so now we have token 1 and token 2 and they're set to our token list first element and second element so usdc and chain link and now let's paste the same thing over here we have our asset one and do the same thing for asset two we can just copy this over from here paste it in here and rather than having token one let's go ahead and do token to like so token two and now as we go ahead and go to split screen mode once more go ahead and save this now you'll see all these render automatically we have a nice usdc coin over here with a logo and chain link over here and if we go ahead and change these for example to token list five let's see what happens then we get wrapped ethereum let's change the first one to token list seven let's see what we get we get Matic and automatically the logo so this is how sweet our Dex is already it's looking very very clean now let's add a functionality to swap these two tokens around so add a button over in here between because sometimes you might be on the wrong token you want to actually do the swap between West to Matic so let's add a functionality to make that easy and a and the user experience as smooth as possible so I kind of like usdc and Link so let's change these back to zero and one like so save that and now scrolling down what we'll have is under our input will create another div and let me just paste it directly in here go ahead and jump into full screen mode for a moment so you see what's going on we have a div called class name switch button and within that div let's go ahead and end that this nicely we have a icon from Amazon icons arrow down outlined which will kind of indicate that you can swap this token into this token kind of flipping them around and to trigger this functionality we have a on click event which fires the switch tokens function so let's go ahead and create that function underneath our functions over here at the top function switch tokens it doesn't take any arguments and all it does token one state variable in this variable called 1 and the token 2 variable in this variable called 2 and that's then let's go ahead and set the token 1 and token 2 to these one and two respectively so essentially swapping them around like so so we use the state variable use statehook the set token 1 to token 2 and we set token 2 to token one effectively sweeping swapping them around creating a nice user experience let's go to split screen mode save this and now look at that we get a nice button over here in between and as you press that you swap between link and usdc and it works for any pair as well let's go to and for example nine over here save that we have tether and curve dial let's go ahead and swap those around and that is beautiful next the next step of course is creating a modal so when you press these buttons it gives you a nice model where you can select between any of the tokens in the tokenlist.json file let's change these back to usdc and Link like so save that and now we have this nice swap button Works awesome so now focusing on that model we have brought in from ad design as well so we can go ahead and just create that model over here at the top we created actually above our trade box div because it will be on top of all that we render on this swap component so over here we can do a modal like so then everything went red so we have to provide these tags around the whole return statement over here like so react likes that way better and then for our model let's provide some arguments so over here let's go ahead and provide our arguments like so so our modal will be open if the is open State variable is set to true we won't have a footer on cancel so on close of this modal we actually set the state variable is open to false and then the title of the modal will be select a token so let's go ahead and create that is open State variable over here at the top let's go ahead and add a state variable in here like so is open and set is open you stay Hook is set automatically to false let's go ahead and save that and now let's create on click for our asset 1 and asset 2 the is open State variable will be changed to true so let's create that on click event over here like so opening this up full screen so you see what's going on on click recall a function called open modal and we pass it an argument of one so because we have to know which token we want to change we have to pass an argument to oh we have to call a function called open modal which will set our is open modal to true we do the same thing for asset 2. on click we open modal but this time we pass an argument of two and now let's go ahead and create this open modal function and actually create another state variable before that which will store the asset number asset 1 or asset 2 we work we are currently changing so change token and set change token we initially set it to one but our open modal function will change this to whichever button we press so go ahead and create another function underneath our lowest function over here function open modal it takes one argument which is the asset and then all this does is it changes the asset being changed like so set change token to asset and set the model to be open to be true so everything should be working nicely now as we click asset 2 or asset 1 we should open a modal and in the background we set the state of which token we are changing let's save this and now as we hover we can press and we get to select a token we can close this and the same thing for this so both of these buttons are working of course the styling isn't there yet because we haven't provided any contents for our modal but we'll do that next so close this and jump into our modal over here and let's start filling this out so going ahead in our model let's create a div first of all give it a class name of equal to modal content just like so and then in our modal content what we'll do is we'll take our token list and map through it so we'll get a option of choosing between all of these tokens in our token list so go ahead and get the token list let's make sure that react has got it so we add a question mark and then we mapped through it we'll take each element and the index of each element and then within that what we'll do is we'll return information about each element so let's go ahead and return and this I'll just paste in for simplicity's sake and then we can go ahead and talk through this so let's open this up full screen for a while what we have here is we have a token Choice div in which we then have the image of each token so because we're looking at each object in the token list we can get the image of each token and then we have the token Choice names so we have the token name and the ticker displayed as well and all the styling is made nice of course on click of any of these token choices we have in the token list we'll modify the token but we'll create that function a bit later so we can go ahead and comment that out for the time being to see this in action as we open the modal so let's go ahead and save this and now as we correct click usdc over here look at that we have a list of all the tokens with nicely presented token icons names and tickers and all of them are over and here we have Shiba Inu Ave uni swap rat ethereum all this looking beautiful and then chain link as well all this is the same and we can swap between these tokens but now we have to create this modify token function so as you click tether USD it goes ahead and closes the modal and changes this token to tether USD or whichever token you click so let's go ahead and uncomment this that we just commented and go ahead and create this modified token function which takes as an argument the index of our token list we want to change our token two so let's go ahead and jump over here in our functions let's go ahead and create a function called modify token it takes an argument of I and then go ahead and create a simple if statement which checks our change token variable to see which token we are changing and then based on that changes the token on our token list to the ith element of our token list so if change token is equal to 1 we'll change token 1 to token list element I and the same thing if it's change token two we set our token 2 to the ith element of token list so everything should be footworking phenomenally right now go ahead and also what we have to do is set the model to be closed so set is open to be false so that just nicely closes our model after we swap the tokens so now going ahead over here usdc we can change to die stablecoin look at that works phenomenally well for a chain link we could do rap Bitcoin and look at that how sweet is that and then we can swap them around like so we are absolutely flying through this usdc back to chain link how cool is that everything is working phenomenally we can even change the value like so now I believe the last UI features are creating that swap button and then we can go ahead and move on to creating that back end where we call the Morales token API to fetch the token prices for these two tokens and actually render the correct amount of tokens any amount we set in this first input field would change to in this second token so let's go ahead and create that swap button now jumping back into our swap component at the bottom of the page here beneath our inputs div over here what we can do is go ahead and let's just open this up full screen for a while let's add a div called swap button and on click we will have a fetch decentralized exchange swap but that'll be later on in the video when we're actually making the swaps and using our one inch aggregator API to make the swap now we'll just have it disabled if we don't have a token one amount and then what I'll say is swap simple as that let's go ahead and save this and look at that now we have a swap button which is disabled now because we don't have a token one amount but as soon as we add an amount the swap button activates and we could essentially click it if we had a on click trigger over here in the div but that is essentially the front end pretty much completed how sweet is that we've done a whole lot in a short period of time we have the settings over here which we can swap the slippage tolerance we can change between pages and like I said the tokens page is something you could build out further to see all the tokens you already have the token let's Json file we just focused on the swap functionality over here you can change the tokens Gemini USD you can go to UNI swap tokens you can swap them around how sweet is this you can go to USD coin back to chain link and as you add some value over here you can swap and I think this is a great moment to start working on our back end where we call the Morales API to actually fetch the token prices for these two tokens as we already know their on-chain addresses and we can use those with the morels API to get the prices of each of these tokens in US Dollars get the ratio and that way calculate the amount of 41 usdc it would convert to in chain link tokens later on we'll also connect with wagme so we can actually connect our wallet to the page and then we can make our swaps using the one inch aggregator so now jumping back into Visual Studio code what we'll do is go ahead and close out our app.js file and our token list we'll leave the swap just because we'll get back to this as we're making the calls to our back end but what we'll do is open up our file explorer we can go ahead and close the front end file and open up the Dex dot back and here you'll see you have a env.example file let's start over with this so the env.examp file will have a a Morales key and you can get yours from morales.io so let's go ahead and start off with that let's jump in to morales.io open up Google Chrome and arrive at the morales.io webpage you can go ahead and start for free it's totally free or then you can log in so I already have an account so I'll log in and this will take me to my admin dashboard so this is what the admin dashboard looks like there's a lot of resources like the API reference and tutorials we've made to get you started with Morales we also have a video to get you started to navigating around the morals admin dashboard but all you need is jump into the web3 apis you can get your web3 API key over here it's very important to keep this safe as you want as you don't want anyone else to get access to your Morales account so just copy it and jump back into Visual Studio code and paste it over here into your morals key in these parentheses I'll paste it and then I'll jump here into the index.js file like so my API key is now in the EnV and what you'll have to do is also go ahead and rename your EnV file to just EnV no example so like so we are ready to start working on our back end which is a node.js Express have everything set up for you what we want to do is go ahead and open up our terminal we currently have our front end running over here so let's create a new terminal and over in here let's see deep into the deck starter folder deck starter and then CD into the decks back which has the back end of your project and what we can do here as well as we did with the front end install all the dependencies for our back end which is npn install and that should get you going with all these dependencies Express Morales cores.env and so on and so forth beautiful and if this is your first time working with no J node.js Express we can give this a go and see how it works so let's close this terminal down for now we're running on Port 3001 so as we start off this back-end server we have one endpoint called token price it's returning a USD price variable that we haven't created yet so it's very important to remove that and just for example respond with an object an empty object let's go ahead and save that and now you are actually ready as you run that starter script which is node index.js we'll start Morales with your Morales key and then start your server on the port we defined over here which is 3001 as our front end is running on 43 000. so what you can go do in your terminal for your back end is go ahead and run node index.js and this will start your backend server you should get a prompt saying listening for API calls and we can actually open up our browser and make a call to localhost 3001 to the Token price endpoint and as a response we should get an empty object so open up your browser and over in here type in localhost 3001 token prices like so so localhost 3001 token prices should give us a response of an empty object or I might have missed both I might have misspoken there I said token prices but actually the endpoint was token price as we search for this we as a response we should get an empty object and look at that we get our empty object as a response how sweet is that so now let's go ahead and start working on making a Morales call over here and it's very simple you can always check out the Morales documentation let me just show you docs.oralis.io will get you to the Morales documentation where you have the references you can get all the web 3 data apis over in here we have as we scroll down the token API where we'll be using the get erc20 token price endpoint and there's clear instructions on how to use it over in here you have different languages we can use we're of course using node.js ourselves right now but this is where you can find all different endpoints if you want to try something else out but for for now we'll just be using the get erc20 token prices endpoint and let's start it over in here and I think you won't believe how simple this is so starting off when we make a request to our token price endpoint we can provide request query parameters and we can fetch those query parameters by destructuring them from the request we've sent over and then we can go ahead and already make our Morales ebm API call so we'll do one call First for our token one response one will is what we'll call it response one will be equal to awaiting Morales and the evm API you'd notice is completely typed so you have all the different functions you can use we'll use the token method and we'll use the get token price endpoint like so and all you have to pass for this endpoint is the address you want to get the token price for you'd also have to provide the chain but as we're on the ethereum chain that is the default chain so we don't have to pass that as a that as a parameter and then from our query we sent to this endpoint we can get the address one we send so we have to make sure that we when we make a request the token price we provide a address one query parameter which will have the token address of our token one then we can do the exact same thing but this time we'll do a response too where we make another request to the Morales token price endpoint but we get it for our address too so now we should have the response for the prices of two different tokens and what we can do for example here we can do a console.log of response one dot raw the raw format of the response and we can do a console.log of response 2 as well like so console log response 2 over here and now we have to go ahead and restart our server because we haven't installed nodemon let's go ahead and run Ctrl C in our terminal and go ahead and run node index.js and we're again listening to API calls so now as we make a request to our Port 3001 token price endpoint per passing two query parameters for address 1 and address 2 our terminal should show the response of the price of t these two assets so let's go test this out jumping back into Google Chrome again let's go ahead and make a request over here to localhost 3001 token price endpoint like so but now adding a question mark we can add the token parameters here in our browser so address one for example we seem to have two options over here address one we use this address and for address 2 we use this address and let me just check which addresses these are jumping back into Visual Studio code we can check out our front-end folder decks our search folder tokenlist.json and I believe it was Xerox DAC and 0x514 so we have chain link and usdt as the parameters we are searching for over here in this request let's go ahead and give this a try search for these and we get a response of the empty object as that is what the endpoint responds bit but now checking out Visual Studio code opening up our terminal look at this we get the console log of the raw responses of the two API requests we made to Morales we get the latest native price in ethereum of chain link but we also get the USD price with a 6.7 and then for usdt we get the native price in ethereum but we also get the USB price which is one dollar as usdt is a stable coin so how sweet is that we get the token prices super easily and quickly using the Morales evm API so what we can do is use this information that we get the USD price of each token and pass them as the response of our endpoint so let's close this down let's close down our front-end files and I just found myself back in the backend folder in the index.js file and now rather than console logging response 1 and response 2. let's go ahead and create a object called USD prices const USD prices and for this object we'll have a token 1 which will equal from the raw response of response 1 the USD price and the same thing for token 2 will get the raw response of the response for token 2 and the USD price and then for the ratio we'll get the ratio of these two prices so that will help us calculate in our front end what our tokens will swap into so over here we can go ahead and create a ratio of our USD price divided by our USD price of token 2. and now rather than responding with a empty object let's go ahead and respond with the USD prices object we create over here and that is how simple our backend server is actually ready we can go ahead and test this out and before this will work we'll have to go ahead and restart our server once more so go ahead and run Ctrl C node index dot JS and now we're listening to API calls again our backend server is running on Port 3001 jumping back into Google Chrome we can make this request one more time go ahead and press enter and look at this the response we get is token one the price is 6.7 token two the price is one dollar and the ratio between the two is six point seven one eight seven how sweet is that and we can go ahead and change the addresses over here so for example if we didn't want to check out chain link we go ahead and remove this address over here go ahead to visual studio code check out our front-end file for the token list in the source folder over in here let's go ahead and for example check out wrapped Bitcoin which should be around twenty thousand US dollars at the moment let's copy this jump back into Google Chrome and paste it in here so now we've changed the Bitcoin so now our token one as we make this request should give about 20 000 US Dollars let's go ahead and search and look at that exactly as I said about twenty thousand dollars twenty two thousand five hundred and seventy two dollars to be exact is the current price of rap Bitcoin and the usdt price is one dollar so the ratio is about the same 22 000. so our backend server is running now we have to just hook this up with our front end let's go ahead and do that next so jumping back into Visual Studio code we can go ahead and close down our terminals let's go ahead and close down all the files we don't need let's close down the EnV file the index.js file and back in our front end swap dot JS component let's in our file structure also close our back end and now close our file structure jumping up back to the top of the file let's go ahead and make a request to this backend server and for that we'll need axios which is already a dependency for this project so let's import it over and here this is a very simple import we just import axios from axios and with that we can also go ahead and create a state variable in which we'll store the prices after we make that request to our backend so for this for example we can create a variable called prices using the you stay hook we can set the prices to whatever we get back as a response from our back end and now let's go ahead and create a function which will actually fetch these prices using axios and set them to our prices variable so we have all these functions over here let's go around to beneath the last one and go ahead and create a new function function batch prices and we'll have to pass in two arguments an argument one and an argument two so for the two addresses we want to fetch the prices for we have to pass them every time we call this function and I actually remember this should be an asynchronous function as we're going to use axios and we need to wait for the response so then we await axios but we can actually restore our response const response into whatever we get as a response from axio so const response is we awaiting from axios using a get request to our localhost 3000 token price endpoint like so localhost 3001 token price and then we can pass the query parameters which are params like so address one is what we called it will be R1 that we passed to the fetch price function and the same thing for address 2 will be two so the second argument to the French price is function and after we get our response what we'll do is we'll set our prices variable to the data we get back from our response for now we can also console log it console.log our response dot data so you can see in our browser what the response looks like and what the prices variable is set to now to start off we can use our use effect hook to to get the initial prices of our tokens so token list one zero and token list one so straight off when you start using the app you have the prices for usdc and chain link as as we go into split screen mode those are the initial tokens we have set so let's create that use effect which we've already imported at this top if you haven't make sure you import it from react then believe our fetch prices function let's create a use effect hook use effect like so and it will be triggered on Mount of this component so pass an empty array at the end of your use effect hook and what it'll do it will just fetch prices with two arguments token list 0 dot address and then this token list one dot address so this will get the token prices for usdc and chain link for our very initial render of the page like so as we jump over in here let's go into full screen mode as this is running on Mount as we refresh the page we should be console logged with the prices of usdc and chain link let's just test this out so let's go ahead and refresh the page then open up our console like so and react is in test mode so we get two responses it runs our Mount twice and look at this we get an object address as a response and we get a ratio of one seems off so we're getting usdc twice let's see what's gone wrong of course we're fetching the price of tokenless zero twice so let's change that to one that should change it to chain link let's save that and now on Mount it ran again and we get another object so the ratio is 0.14 and token One's price is about one dollar and token two which is chain link is 6.7 so our fetch price from our backend function is working beautifully and this is now the format of our prices State variable in our react app so everything's absolutely awesome let's jump back into Visual Studio code and we can use now the prices variable to go ahead and change the token 2 amount as we change token one as we have the ratio of these two tokens so let's go find out our change amount function over here so as we're setting token one we're changing token one but token 2 remains unchanged but now as we know the prices what we can do is go ahead and create a if statement here to check that we have the prices variable and the target value is changed to some number and then then we change the token 2 amount to the ratio of that number so opening this up full screen for a while here if we have changed the input one and we have prices variable set we set the token 2 amount to whatever the user changes the target value to multiplied by the prices ratio and we also make the UI a bit nicer by fixing it to two decimal points and then otherwise we just set the token 2 amount to null so for example if the user clears the input field we also clear the input field first token two so let's go ahead and save this and see what happens so opening up this we go ahead and change usdc this for example 6 and that is about one chain link token I think seven might be even closer so you automatically because we're making that call to our back end where Morales is fetching the token prices for this we get the automatical ratio of these two tokens and we get how much chain link tokens we would get for swapping seven usdc tokens that is pretty sweet but for now things aren't working as if we change usdc for example to wrapped ethereum which is of course way more valuable this would still give us the same ratio as usdc and chain link so what we have to do is as we change these tokens we have to set our input fields to null again and also we have to make a new request using our fetch prices function to get the new ratio between the two tokens we've just changed to so let's make these changes first so as we go ahead and switch tokens over here let's go ahead and also set everything to null over here setting our prices to null setting our token one amount to null and setting our token 2 amount to null and after these are set to null we swap our tokens around and then we can make a new request to our backend using our fetch prices function and this time swapping them around so now we make the token one to be our second token and the token 2 to be our first token as we did the switch so go ahead and save this and see if that works out so go ahead and if we refresh the page now we should have have usdc over here so 7 usdc is equal to about one chain link token but as we swap these around now what we do is seven chain link tokens that's about 46 usdc tokens so everything has worked we made that new request and our backend calculated a new ratio so now about one chain link token should be seven usdc tokens check that out so the ratios of course change because of the prices but everything is working smoothly with that the only thing now is if we change the token that still doesn't change anything so one usdt token should be approximately one usdc token that is not the case right now so what we have to do is in this modify tokens function we have to do the same thing so before we go ahead and change the token we nullify our prices and the token 1 and token 2 amounts like so save that for now so as we change one of these tokens for example to Gemini USD all these input Fields go to null and then if we go ahead and change token one what we'll do is we'll make a new request to our backend using the token we've selected and that address and the token 2 will remain the same but if we change token 2 we'll do the same thing but just Swap this around like so so we use the token one original address and the swap token as the second argument for the address saving that now let's go to our app refresh the page we have usdc to chain link so 7 is about one usdc but as we change this to for example tether now one usdc actually let me press two but about two usdc is approximately two usdt excellent excellent we can swap these around everything works nicely let's go ahead and try wrap Bitcoin to usdc one rock Bitcoin is 22 563 usdc we are absolutely flying our backend is working we're using a Morales web 3 apis super easy to use and we can get instant swap ratios of how our tokens would swap against each other this is very very cool and now before moving on to the last step of connecting our wallet with wagami so we know which wallet is wanting to make the Swap and then making that swap using the one-inch aggregator API we can make a little sanity check so if we don't have the prices given from our back end we shouldn't be able to change this input field one so let's go ahead and jump over to the bottom over here where we have input field one over here of course input field 2 is disabled let's open this full screen input field 2 is disabled all the time as we change it based on input 1 but we can disable this as well if we don't have the prices object from our back end so that is just a nice little sanity check so if we go ahead and save this now as you're making your initial launch of the app this will be disabled for a very short time before we make that request to our backend file and we can actually get the price of course as well as when you swap these as disabled for a very short time you saw the little X over there because it takes a while to get that price but now everything should be working seven you linked tokens is 46 usdc tokens so now let's go on and move on to this connect button over here and let's connect our wallet I have my wallet over here which is a metamask wallet we have some test ether over here so we can make some swaps we have some USD coins some chain link coins but let's try and make some swaps after we've done with this and actually try and get some other tokens as well for example uni swap tokens or tether or whatever we think of is good but now let's make sure we can try and connect this wallet with this web app so we can then use that wallet to make a transaction so for that we'll need wag me let's open up our development environment full screen open up our file structure and jump out from the component for a while and jump into index.js over here and what we'll do over here was we'll use something called wagme which is the awesome web3 library to make our connection to our decentralized exchange so go ahead and import a couple of things from wagme we'll configure our chains we'll use mainnet ethereum of course there's other change if you want to use them check out wagmaker documentation for that we'll get the wagbeat configuration and we'll create a client and then we'll of course need a provider you could get providers from providers like Alchemy and inferior but for our cases they'll suffice to use the public provider so we destructure that from the providers provided by wagme now there's a few initial steps these will be in the final repo if you want to just copy them over them over there but we're just configuring our chains to use mainnet and the public provider over here and then we'll create our web3 client like so using the provider and websocket provider and will also set auto connect to true so when you come to the website you're automatically connecting it to your decentralized exchange if you've already connected and not disconnected your wallet then all you have to do is wrap your app and our browser router inside the wagme config tag with our client we created over here so go ahead and add log me config with our client which is equal to client over in here and close that wag me tag over in here close wag me config like so so now we have wagme and web3 functionality for our react app that's just something you have to do in the index.js JS file I went through this pretty quickly but this is just some prerequisites so check this out from the final repo if this was too quick for you now jumping back into our app.js file which is our which is the root of our app so here we'll actually provide all the connections and accounts that are connected to our react app and our decentralized exchange so again from wagme we can use the hooks user connect and use account and the metamask connector to connect to our app of course there are other connectors like the coinbase wallet connector rainbow kit Etc I use metamask metamask is the most prominent wallet so we'll use that in this tutorial if you want to check out some other options go check them out in the wag me documentation now in our app component which is the route for our whole app let's go ahead and destructure the address and is connected variables that the use account hook that's just for us and the connect function that we get from the use connect hook like so so from use account we can destructure the address that is connected if there is an account connected and we check if something is connected using the is connect variable and then using the use connect Hook and the metamask connector we get a connect function which allows us to connect our wallet to the decentralized exchange or your react app in this case now what we can do is for our header in which we have the connect button let's actually pass as props all of these different variables and functions like so so we pass the connect is connected and address as their names itself and we're actually going to pass them to the swap component as well in the swap component we don't need to connect as we don't have the connect button and the swap component is only in the header but we also need to know if we're connected and if we have an address over in the swap component so let's pass these in there as well so copy those paste them over in here so now all the different components that need web3 functionality have them and we can go ahead and jump into the Heather component we haven't been in Dairy for a while but this is very important so we can connect to web3 through our header components so jumping back into the header component what we'll do is we'll get the props we pass these from our parent component the app component and we'll destructure all of them so we had address we had is connected and we had the connect function over from props so now we have access to these variables and functions over here in our header component as well and we can actually go ahead and scroll down to the connect button over here and rather than just presenting the connect in the div let's go ahead and on click we'll use the connect function and then for the contents of this div let's make it conditional so whether we are connected is connected go ahead and get the address like so slice the force first four digits of the address add three periods and then we'll slice the last four characters of the address and paste that so that will give a kind of an indication a nice indication rather than just having a connect text of which address is connected but if we are not connected we'll just have a text saying connect your wallet please so that is as simple as it is that is how simple it is to connect your web3 wallet to your react app in this case our decentralized exchange and we can go ahead and give it a try straight away let's go ahead and save this so now as we're not connected we still have the connector text over in here but let's go ahead and open this in full screen let's press connect and this automatically opens up metamask3 for me ask which account we want to connect with let's connect with account one over here press next as you see metamask also uses this this form of pace of showing the first few characters a couple of periods and then the last four characters of your wallet let's do that connect and now as we're connected now we have our wallet connected and it's an indication of which wallet is connected Xerox 4D is the wall is that connected and that is in fact my wallet 0x4d and we could actually do the same thing if we disconnect this account we can try and connect and not connect with account one let's connect with account 2 which is 0x5da press next connect and now it'll show DRX 5D is connected to this decentralized exchange but as account 2 does not have an ether we can't actually use this let's go ahead and disconnect this account disconnect and connect back with account One account one over here next connect so now we're connected with account one everything's beautiful and we can move on to actually making this transfer with account one so jumping back into our development environment let's open this up in full screen as we'll make quite a few changes over here in the swap.js component where you can close all the other ones for now scrolling up to the top we'll have to import a couple of hooks from wagni so what we'll do over here is we'll import usecent transaction which will allow us to send a transaction that the what the one inch aggregator asks us to send in order to make that swap between two's tokens and then we'll use wait for transaction later on to make sure to present nicely to the user when the transaction is processing and if it actually goes through then as we passed from the app.js and props we can bring them in over into this component as well props and let's destructure them I believe we had address and is connected like so so now we have address and is connected brought in from props so we can use the address that is connected as the account that will make the Swap and also we can use the is connected variable to check whether we can actually make the swap so let's go ahead and open these these in split screen mode like so and as we scroll to the bottom we already have a disabled swap button if there isn't a token one amount but we can also set an or statement over here if we are not connected is connected is not true save that so now as we disconnect our wallet let's go ahead and switch to account one make sure this is disconnected disconnect this account so now we just have the connect if we go ahead and apply an amount of usdc we want to convert we still can't make the swap as we're not connected with our wallet so that is very good but now moving back into the functionality let's go ahead and create first a state variable which will store the transaction details we have to send with the use send transaction hook like so so we have a transaction details variable that we can set using the use State hook using the set transaction details function over here and we have a to address the data that the one inch API will return to us as we request a swap and then the value Associated which will be zero in most cases as we don't need to send ethereum as we're swapping tog erc20 tokens with other erc20 tokens but back to the one inch API very shortly let's first prepare our usen transaction hook so from the use and transaction and hook will get data and send transaction function let's make sure we type const correctly const like so like so and that is coming from use send transaction and it will have some configurations we'll have a request with an object with a couple of keys let's make sure we pay type request correctly request like so and then paste in the keys over in here so we will send the transaction with these details as the request the from will be the address that is connected to our decentralized exchange and the two data and value will be fetched from our transaction details State variable so as you can see now if we try to call the send transaction function it would not work as we don't as we're not passing any correct requests over here and we're not connected so we don't even have an address so we have to create a use effect hook to make sure that we have these details in order to actually send that transaction so let's go ahead and where we have our use effects at the bottom over here let's create a new use effect use effect where we go ahead and Trigger this as transaction details is changed and we make sure that at the start of this use effect we make a if statement and check that we have transaction details we can for example check the two key and we also make have to make sure that we are connected as this will make sure we have an address so now if these conditions are true and the transaction details change and these transaction details will change when we call the one inch aggregated API we can go ahead and send a transaction from the wagme use and transaction hook so it's a bit of a mouthful but you'll see this working very very soon so now we're sending the transaction now we just have to make sure that we change these transaction details and how we change these transaction details is we create another function so we have our functions over here let's add a function which is an asynchronous function again async function and here we'll create that function called Fetch decks Swap and for this now let's go ahead and open up our browser and check how the one inch aggregator API works and which endpoints we can call to make a swap using the one inch aggregator so opening up Google Chrome over here here we are in the one inch documentation for the aggregation protocol we're on the ethereum network and we check all the API endpoints so first of all they have the approve method so when we're making a token swap using an aggregator like one inch that the smart contracts that one inch has have to be approved to swap your tokens that you have in your wallet for example here in my wallet I have some ethereum tokens usdc tokens and chain link tokens but the 1X aggregator won't be allowed to swap these tokens if we haven't approved it first and over here we can make a check of using this endpoint get the number of tokens that one inch router is allowed to spend so we can check a token address let's go ahead and get one from Visual Studio code over here let's open up our token list let's for example get chain link tokens over here copy this because we have some of these in our wallet let's try it out and paste the token address over in here and our wallet address is over here in metamask let's copy that paste that over in here and go ahead and execute see what happens and the request URL that we have to use is over here so we'll use this later but the response body is allowance zero so this means that one inch aggregator smart contracts don't are not allowed to use any of my chain link tokens but as I've done this already test this out it is allowed to do it for my usdc coin so checking out USD sequence over here copy that jump back into our browser and change the token address over here to usdc tokens execute this and now as we check that allowance for usdc tokens is essentially unlimited so the one inch aggregator tote contract can use usdc tokens in this wallet so what this means is this is the first check we have to do in our fetch deck swap function is to check the allowance of tokens to be swapped in my wallet and if there isn't and if they are not allowed to swap them we can use another function open a Google Chrome if we close down this approved transaction is generating a data for calling the contract in order to allow the one-inch router to spend our funds so then we'll have to call this endpoint with the token address which we want to allow one inch to use and we can leave the amount empty to allow it to lose on to use unlimited funds of course if you want to be cautious you can set an amount of funds that the one-inch aggregator is allowed to use at once so let's go ahead and try this for usdc let's jump back into this previous call over here where we have the usdc contract copy that and paste that over here into the approved transaction let's try this out these tokens we want to approve and let's set unlimited and this way we get the request URL as well so now we have this request URL to actually approve one inch to make swaps for the token we want to swap out of so let's go ahead and use these request URLs let's use the first one to check whether the one inch router has access to our token we want to swap let's copy this jump back into Visual Studio code and over here make a variable called allowance which will await axios to get and then here we paste that request URL let's just close down our file structure so we can see the whole request URL and I've already changed this to a template literal so we're making a call to the one inch API approve allowance to check the allowance and we're using the token address the token one we've set from our token list so it'll be one of these objects and we'll be checking the address so we can get the allowance for that token and the wallet address will be at our address that we are connected to the decentralized exchange with using metamask and this will give us our allowance and then we can check what the allowance is so if this allowance and in the data of the response checking the allowance key if this is equal to zero what we'll do is we'll have to make a another call and that will return us the approval transaction details so awaiting axios to get and then again we have to go to Google Chrome over here for our transaction transaction over here we use this request URL and what it will return to us is the data we have to send to the send transaction function of wagni and the two address and the value so this will be the response body that this request URL will give us so let's copy that jump back into Visual Studio code I'll already format it to template literals but you'll have to do that yourself like so make another call to the one inch API this time to the approve transaction endpoint and we only have to pass the token address which is our token one address that we're wanting to Swap and this will give us the transaction details we have to send Using metamask so we can send set our transaction details set transaction details to whatever the response is from our axials request to the one inch API approval endpoint like so and now for this what we can do is we can console log for example not approved and then return this function but otherwise if this if statement goes through and for example in our case usdc which is already approved for us we can console log make Swap and we'll do that next but let's give this a go first make swap let's go ahead and save this and remove our previous control log so command find console log response data let's remove that and any other console logs no other console logs so now let's go ahead and test this out save this open up our browser and our decentralized exchange so going to Morales decks over here we have to connect our wallet let's go make sure first that we refresh the page this is what we want to swap let's go ahead and connect our wallet actually before we can do this we actually have to call the fetch deck swap when we click the swap button so let's go ahead and Implement that jumping into Visual Studio code where we have the swap button over here let's create a on click event on click what we'll do is we'll fetch the decks swap like so save that now we're ready to go refresh the page let's first connect our wallet connecting account one next connect everything is beautiful now as we want to make a swap of say one usdc let's press this swap but first inspect at the same time let's place the console on the side so it's easier to see over here if we go ahead and press swap it's allowing us to make the swab as it's not getting stuck in our fetch deck swap function over here we already have allowance so it's just going straight over to make the swap but now if we go ahead and jump into Google Chrome and change these tokens so we go ahead and try and make a swap of Link tokens which we haven't approved let's swap one link token if we try and Swap this it gives us not approved and we're asked by metamask if we're given permission to access your link for the one-inch aggregation smart contract how sweet is that it costs a fee of one one dollar and 25 cents for the gas but we'll reject that for now as we want to test this out later and we get this error error that we denied the request by metamask but now we know everything is working perfectly and what we can do is go ahead and write that final one inch API call to get the transaction details to actually make a swap so jumping back into Visual Studio code rather than just console logging make swap what we'll want to do is we'll want to make another call to make an actual swap so let's check out the one inch API over here we have all these open let's close these now as we've now figured out how to check our allowance and get the transaction details to access our tokens now as we scroll down we have the swap method which has the swap endpoint and this is what we want to going to want to try out let's try it out out so we can just try with these basic details because as this will give us the request URL and the sample body so let's use our wallet let's copy our wallet address from over here let's paste that over in there and we actually have to make sure that we have those tokens otherwise the API won't let us make the transaction so let's check out Visual Studio code get some USD coins from over here get the address of usdc coins jump back into Google Chrome paste that address over in here and make sure that usdc has six decimal points so one two three four five six one usdc coin this should be like so and we have one usdc coin I think we have about 10. assets we have 10 usdc coins so we should be able to make this also you see the slippage and we actually are storing that so we can set that in a template literal from our state variables in our react app and now let's go ahead and execute this see what it gives us this is the request URL and while it gives us is the from token which is usdc coins we want to swap and the two coin which is in this case one inch tokens and as we scroll to the bottom the important information for us is this transaction key which has all the transaction details we have to set in our react app to make sure that the wagme send transaction hook sends the correct transaction to make the swap so this is what is important for us let's copy the request URL copy that like so jump back into Visual Studio code go to our fetch deck swap function and in here what we will do is create a variable called transaction where we await again from axios to make a get request to the one inch API and paste the request URL over you can hear I'll already convert it to a template literal passing in the arguments we want to swap like so so we paste that in we're using the swap endpoint from the one inch API as the from token address we're using our token 1 address the two token will be our token 2 address the amount is relatively trivial because we have to use the decimals of the ERC token so we take the token one amount which is just in standard units of tokens but we have to pad it at the end with zeros by the amount of decimals that this token has so for example for usdc tokens we have to pad it with six zeros for other tokens with 18 decimals we'd have to Pat it with 18 0. so that's what this section of the URL is doing and then the from address will of course be the address that we have connected to that decentralized exchange and then the slippage is our slippage we set in that little slippage pop over which is set to 2.5 percent at the start but you can of course change it to 0.5 or 5 using the advanced settings popover how sweet is that so now as we have the transactions we can set the response of these transactions to the transaction details and actually make the transaction of swapping rather than just a proving the tokens for swapping so we paste that over in here set the transaction details to the data in the transaction response and the transaction key so if we check that out over again so as we get the response that we'll have the transaction which will have the from the two the data that we have to send and the value associated with it and Etc how sweet is that but one thing we can also do is we actually get the two token amount so in this key after we make this request to the one inch aggregator it gives the actual amount of tokens that it will be swapped to so we can display this it for the user after they press the swap so they get the exact amount of tokens that they will get because there might be changes with different decentralized exchanges that the one inch aggregator is using so the Morales price API is just getting the current price from a set decentralized exchange but at the one inch aggregator is aggregating between decentralized exchanges you might want to display this to the user so we can do that simply over here before we set our transaction details let's go ahead and get the decimals of our token 2 over in here we getting the decimals and we're turning it into a number like so and then the token 2 amount we can set to whatever the two token amount key is from our transaction response and dividing that by decimals so this way we can show in the UI the actual token 2 amount that will be swapped so let's go ahead and save that so now everything should be ready to go and we should be able to make our swap let's go ahead and try it out and now as we already approved for usdc you've seen that let's go ahead and swap these tokens around and let's see how many chain link tokens we actually have let's see our assets we have 0.7 chain link tokens so let's try and swap 0.5 of our chain link tokens and we should get 3.35 usdc tokens in response for that but we first need to connect our wallet of course let's go ahead and connect connect account one next connect perfect so now our swap mode swap button is effective we can go ahead and swap let's see what happens first we're not approved so we'll have to approve our chain link to be used by the one inch aggregator let's confirm this that is confirming let's check out the status of it it's still pending and now that was approved so now we are allowed to use chain link tokens so now we are allowed to lose our chain link tokens to make swaps for different tokens so how cool does that sound now we can go ahead and press the swap button again and now we should actually change our chain link tokens to usdc tokens so at this point I'd like to know that sometimes it might take a while for the information to propagate to the one inch API and you might need to disconnect your account and connect it again to make sure that you can make your Swap and another note is that with the current method of sending the token amount we want to swap using decimals will not work you'll have to use whole numbers as over in here as we're sending the one inch swap API call we're padding the end with zeros and in this case we're not muting the decimal point so only with whole numbers so if you want to be able to make swaps with decimal point numbers you'll have to change this method of changing the token amount to the correct representation of decimals to a way where you can actually use decimal so that's a nice little challenge for you in your own time but so this means that we'll have to go ahead and change our chain link tokens to one make sure that we actually have one chain link token to swap yes we have 1.09 chain link tokens to swap let's go ahead and swap that that should give us 6 6.71 usdc coins so in the end we should have about 15 usdc coins so let's go ahead and make the swap now and it didn't give us an error that we're not allowed to do it because we are allowed to swap our chain link tokens now we're going to going to pay a fee of 2.82 cents in ethereum after a gas let's confirm that and now there I noticed one more thing we could add a little indication that the transaction is processing as now we'll have to open up metamask and actually see the activity it was just pending but now it went through so in our Assets Now we have 15 usdc and only 0.09 chain link tokens but this means that everything is working we actually made a twap of tokens how sweet is that let's close down the console over here and create that final functionality of actually seeing the processing status of our swaps so going back into Visual Studio code let's go ahead and jump over to the top of the file over here here and seems like it's automatically brought this sent transaction over but we can remove that and go ahead and we'll use the use wait for transaction hook to get the status of whether a web 3 transaction is in process and whether it is successful so go ahead and underneath your use Trend transaction destructuring let's destructure from our use weight for transaction and is loading variable and an is Success variable and as for the hash key that we have to provide we'll use the data from the use and transaction Hook and the hash of that data as long as we have it so now what we can do is create a use effect for the is loading State and is Success State and depending on those render a message component from and design on the page to indicate to the user that the transaction is processing and whether it's successful or it's not so let's create that message pop-up first and then hook it up with the is loading and is Success States so we have them message component from ad design what we're going to want to do is going to get from the use message hook the message Api and a context holder this context Holder will have to pass in to our component so we have our component all the way down here we're going to have to pass in the context holder in here just like so at the top context holder that just makes sure that we can actually present messages in our swap component let's save that and then we are going to go and see where we have our use effects here we have our use effects let's create one over here use effect and what is going to trigger this use effect is the is loading state is loading and whether it is loading we're going to create a new message so first of all we'll check if there are any messages on the screen currently we'll destroy them and after that we're going to check like so in a conditional if the is loading state is true then we'll create a new message by using the message Api open method and the type will be loading again you can check these in the end design documentation the content will say transaction is pending and the duration by setting it to zero it will run indefinitely until we destroy it and we'll destroy it here in another use effect use effect which will be triggered as the is success s State variable changes so is Success changes and making sure that at the start over here we again destroy any current messages on the screen and then let me just scroll down and we can paste a conditional that if we have a success State we open a message Api which is type of success and say that the transaction is successful show this for 1.5 seconds and else if is this if the success date is false and as long as we have some transaction details so it's not on the initial amount of the component we open a error message which says that the transaction failed and display this for 1.5 seconds as well and that should be it that should be our whole build ready to go let's save this and go test it out so opening up Google Chrome over here let's go ahead and check we have some USD coins let's make sure we refresh the page let's disconnect our account disconnect like so connect it again next can connect make sure that we're transferring usdc let's get a new token for example let's swap to someatic tokens let's go ahead and swap actually before we go ahead and swap let's check that we have Matic tokens in our wallet let's go ahead and import some tokens search for tokens Matic Matic Network token let's add that to our wallet we have xeromatic import tokens scroll back so our Matic tokens are here let's go ahead and swap say 10 of our usdc tokens this should give us 10.5 Matic tokens let's go ahead and swap those metamask asks us do we want to make that swap it'll cost us 3.5 dollars in gas let's confirm that and now we have a transaction is pending State how sweet is that we have a message and that will be pending as long as it's pending here on metamask as well after that's gone through we should have a success date let's check that out that's successful and now our transaction should change the transaction successful and be gone in 1.5 seconds how sweet is that now final check that we actually have the assets so we don't have 15 usdc anymore but we have 10 Matic tokens how sweet is that that is how you can simply build a decentralized exchange and that didn't take us too much time at all I really hope you enjoyed this Morales blueprint first episode and you take the learnings from this in your own web through development Journey build out your own decentralized exchange build on top of this project there's multiple things you can improve on and again hope you really enjoyed this video and I'll catch you in the next one

Channel: Moralis

Views: 35,830

Keywords: blockchain, programming, ethereum, crypto, cryptocurrency, Moralis, javascript, Ivan On Tech, cloud functions, dapps, ethereum code, create a coin, web3, web3 programming, blockchain coding, moralis programming, smart contracts, BSC, Binance Chain, polkadot, Polygon, development, coding, what is blockchain, blockchain explained, blockchain technology, blockchain for programmers, blockchain for developers, nodes crypto, blockchain archive nodes, decentralized applications, blockchain nodes

Id: t8U7GRrlYW8

Length: 90min 29sec (5429 seconds)

Published: Sat Feb 04 2023