How to Create a DEX Like Uniswap FULL COURSE

today i'll be showing you how to build a fully fledged decentralized exchange in just about an hour or so and it's going to have all the functionality you can imagine same as uni swap one inch whatever swap platform you're uh using today this will have the same functionality and here is the final result you're going to be able to select from all of the tokens that are available to trade and you are canceling the front token and the 2 token we can select here as the run token you can fill in a price automatically get the quote in the other token and you can actually perform the swap and it's not just a pretty interface behind this is the actual one-inch platform uh actually doing the swap so the assets will swap it will be just like doing it on unit swap or any other platform and the reason we can build this so quickly in just about an hour or so is because of morales we will be using utilizing morales and especially the morales plugins let's see where do we have them here morales plugins we're going to use the one-inch plug-in or morales so currently we have only have two plug-ins so one-inch decks tools we're going to use to very easily integrate one inch into our platform which is one line of code we can get the price with just one line of code we can do the swap with just one line of code we can approve smart contracts so let's see i signed in here without the mosque and i don't have 10 eth in my wallet i have one each there we go and now i can confirm the swap i don't want to swap my ether to run but this is how it's done uh and i hope you will follow along for this journey uh you'll learn the amazing techniques you'll need to utilize morales to build apps quickly and how to use morales plugins in order to integrate external services into your dap because in terms of morales plugins this is just the beginning we have launched two of our own plugins soon we'll open up for third-party developers to develop plugins and there will be an entire library here of things to integrate i hope you're excited to get started i wish you good luck let's get started all right we're going to begin in visual studio code that's what i'm using for my editor and you need a new project new folder and we're going to create a few files first of all index.html which will be our main page we're going to create main.js which will be our main javascript file maybe our only one and we're gonna create style.css for our css and then i'm going to use the boilerplate code from the morales github which i'll link down below but you can search for morales i need boilerplate just morales boilerplate you should find it and i will copy the contents of this html file which will give us some basic things that we might need first of all web3.js jquery i don't think we're going to use your jquery but it's in here morales.js bootstrap bootstrap and that's it then it's our own file style css main.js i'll copy that into index.html we're going to modify it in a little bit but we're also going to get the main.js file or should we do yeah let's bring this in as well in here here we go and of course you also need a morale server so we need the app id and the server url for morales so we're going to go to morales and we're going to get our server details so uh we're going to create a new server mainnet server we're going to call it dex i'll call it v2 i've already experimented with the dex here but i'm going to create the new one so you can see the process because we need to install the plugin and we're going to do it on it now but you can do it on any network and then we need to wait a few minutes for that to start but when it when while it's doing that we can go ahead and have a look at the morales plugins so morales.io plugins here we'll find the current plugin library and we're just getting started so we have two plugins so far one inch dex tools and fiat on ramp and we're going to start by using the one inch deck tools and what this does is that it allows us to very easily get all the tokens from one inch and get a quote meaning get the suggested price for a swap between two tokens and then check if we have the allowance to do the swap if not we can call the approve function and then we can call the swap function to facilitate the swap and so we need to install this plugin into our server once it has booted up so now it has booted up and we do that uh by going to this plugin store browser planes and then click install the plugin this will bring us to the admin panel and here we should select the server and i'm going to select dex d2 which i just created keep in mind as it says here that you need a specific server version or rather a server with a higher version than this in order for it to work you can't have an old server because then we didn't we haven't had it introduced plugins yet uh so click confirm and just click install and plugin installing it will take a few minutes to do that as well and you can check the status by going to plugins and seeing it installing while it's doing that we can go to our index.html file and clean up a bit we can name this mydex title we're going to delete this jumbotron i'm not going to use that instead we're going to pull in a nav bar i think uh we're not going to have the login button in the container we'll remove that we're already bringing in our style sheet here style css and here we're bringing in main.js and in the main.js we have a login function which will bring in the current user and authenticate using metamask when we click the login button so here is the one click under let's see is there anything else we can do in here let's see if it's actually done it's not there we go now it's done and now it's just going to reboot the server and that's it while it's oh no we can't grab the server details it needs to reboot there we go once it has rebooted we're going to give you details we're going to get the server url copy that main.js server url paste it there app id there we go save that and then i want to grab the container i want to start by adding a bootstrap navbar so let's search for that bootstrap nav bar and you click here navbar and we're going to get one of these navbars look it will look like this it will be collapsible all of that stuff i'm going to paste that in above our container and then we need to delete some stuff here i think if you want to have a look at this in our browser first because we open this with lime server you need to install the live server plug-in if you want to use this uh because you need you need a local web server in order to be able to use metamask and morales so either use this or use a simple python server but in visual studio code you can use live server and it will open up it on localhost here you can see our menu at the top with a search field you can search a drop down menu but we're gonna remove most of this but it looks quite good so we're gonna keep the look and feel so first of all we can have the home link still there we can rename this here brand to my decks um let's [Music] you have remove let's remove link that's the second element we're gonna remove the drop down we're gonna remove this disabled link and here then we have our our search form and i'm not sure if we need the form i think we can remove the form and just keep the button because we're not gonna have a search thing we're just gonna have a button that's a sign in with metamask there we go and this is gonna say sign in with metamask and this should be btn outline primary not success i don't know if these classes do anything in particular active let's check this out oh this is true that id what was the id of the sign-in button login button should be the id so we can use that later to actually do the sign in even though we're not going to straight away so now we should have the nav bar completed there we go home signing with meta mask now we can move on to the actual content so in the actual container we're going to create a div class row so this is where we'll have the bootstrap content and here we're going to create a single column because i want to create like a uni swap like interface um so we're gonna have class column and let's say this is column medium six and then in order to center this i will write offset medium three so that means that our column will be six columns wide out of twelve and on each side there will be or rather on the left side there will be a three column offset which means we have three columns on one side three columns on the other side six columns in the middle three plus six plus three is twelve that's the full page um so this will give us sort of a single column in the middle and here we can have our um sort of trading window right and then we can have some sort of title in here we're going to do an h4 that says swap and then let's have a div which will contain r2 or of uh so let's let's have a look at unison first of all what it looks like so what we're going to do is we're going to create this here we have our column in the middle already we're going to build this thing uh so we have some input boxes here really two big input boxes but in each input box i can select the token here it opens a pop-up and then i can input the amount here all right that's what we're going to achieve and then we select the token here input the amount here or rather the amount will be automatically set here [Music] transaction token here it will give me the price or rather how many of i get for um so that's what we're gonna build so we need to build these two boxes so they will be inside here i'll give this id form and then inside the form i need these two boxes we're going to create those two divs let me give it class swap box we're gonna have two swap boxes because that's where we select the token and the amount and then inside each softbox i want to have one input field here which is this drop down and then one input field here for the amount um i'll create a div which will be the uh let's call it swap box select this will make a selection here i'm going to give it id well let's work with the idea i don't know what exactly we're going to call that this is one of the forms and then then we have the right hand side which will be let's also call this class swap box select and here we'll have an input field here we know we have an input field pass it's going to be number here so we're filling the amount uh we'll also give it class for dash control that's the bootstrap class for input fields uh placeholder amount we're going to fill in the amount id should be from amount let's here select the from token and the from amount and then the second box beneath it will be the two token what we want to swap to so we're gonna have the same in here and now i think we can view this in our browser maybe style it a bit so that it looks sort of what we're looking for let's check this out wow almost looks perfect right don't worry we're gonna get there all right so first of all our swap box here oh let's see our actual entire column that's not the swap box um this thing maybe give it some margin to the top there we go maybe give it a background color um could give it black for now i'm going to set color white we can see anything give it some padding there we go starting to look like something uh for the radius the unit was almost a bit round so we're gonna do it a bit round like so and we can also give it some shadow there we go let's set that to this column element let's say copy all of that and let's check out this does not have an id yet so we're going to give this an id call this window and then we can set it in our style css we can set id window and have this style right here and now let's check out these boxes so we have two of these boxes and inside of them we have write down empty div which you actually should fill out with the token information and then we have the input box for the amount let's just put some dummy data inside of this swap box select here so here we'll have token select the same thing down here because then we'll give it some space here and then i want these to have width 50 percent and same thing for the other one now let's see if i put it on the representation box select class okay i can't i'm sure there's way but i don't know the way and float left let's do the same thing with this just to see what it looks like float left there we go so now it's starting to look like something we need something that looks like this right amount here like here uh let's set that to our softbox select class there we go and now it's the same for both of them good now we have this normal issue here where the parent div has either with zero because we have floated elements we can solve that by saying overflow auto i will give this the normal height that it should have so this should be for the whop box the swap box should probably also have some margins so let's say margin bottom should be what should we take 20 pixels or should it be both top and bottom try that on the swap box there we go that looks okay and then should we give these swap boxes some yeah they should have another color and they should have some border and yeah let's do that so there should be some padding here on the swap box yes let's say we have 20 pixel padding we have background color it should be like a grayish or rather something like that maybe a border radius 20 pixels should have border 1px solid white but let's make this not so here so it looks quite good let's do that or both the swap boxes there we go looks a bit better now let's move on to well we can do the let's do the rest of the ui so we're gonna have a bot swap button here at the at the bottom we can add that as well while we're at it uh and then we'll start working this token select because this is quite a lot of work we need to get all the tokens populate them in a big list be able to select from them so we're going to get started in that after with that after the button so after the entire form thing or maybe we put it in the form but after the swap boxes yeah i guess it should be inside this black box yeah let's put it here so we have a button it's going to have class btn btn large um etm primary and the btn blockers i wanted to be full with and then we can give it an id swap underscore button and we will set the text to how that looks there we go it's amazing what you can do with bootstrap go so quickly looks good we have signed in here swap here amount amount token select open select this needs to be two amount of two amount from amount we can have the same id all right let's start working on this token select when we press the token select we want to bring up this pop-up with a token list in it all right so we need to make this like a clickable thing like we have here okay i guess the um we should have similar units we have an image and then the uh standard token which is eath so we can have east here for now and we'll give this swap box select would probably not be this wide let's let's keep it this wide for now but let's do it so that we can actually click on this let's give it some adding well now both of them get padding all right let's wait with that i think let's just say that when we click on or give it an id this is let's give it another class we want the same for the other one token select the same class down here then we'll say token select uh colon hovers when we hover over that we want to give it some the background color uh let's do some grayish yeah let's see how that looks there's a random gray color ah that didn't really do a lot so let's give it some brighter color like that i picked the same color as the background uh cursor should be pointer and let's also give this token select some padding be 5px 0 there we go now it looks like i can click on this and i can select the token uh and when i do that we should bring up a token select model like oops that's lagging something like this we can scroll through the tokens and select what we want um and what we can do is we can use a bootstrap model we call modal for this dial i don't know uh and we can use that to bring up a window like this so i'm gonna copy that call the modal i have no idea you're gonna see you're gonna hear me mispronounce this thing for the entire video so let's grab this model and let's put that in where should we put it doesn't matter where we put it let's put it at the end of the body like right here we can give this an id token model um the title should be select token and then what do we need here this is the close button so we can keep the close button uh modal body here is where we're gonna have the token list so we can leave that for now we're just gonna view it save changes we're not gonna have any of these twitter buttons because you're going to press on the token to select it not on a button now just need to make sure that we open this up when we click the button so let's create a function function is open and what we're gonna set is the id token do the style display is equal to block i guess that should be it when should we do it though so it's when we click on either of these now we need to give those an id i can select here id from or let's call it from token oh yeah let's start with that one we'll call this to token or from token selected here this will be clear called two tokens so from token select when we click on that we're gonna run open model let's see if this works when i click on this there we go now i can select the token all right now we need to populate with the list here of tokens and that means that we need to call the one inch api to get all the tokens and this we should probably do when the page loads because it will be a lot of token so we don't want to load them into this model when we i can close it yet when we press this button then it's going to take time to load so we want to load this list in the background and then just display it when someone presses this thing right here we should also make sure we can close it because that's quite frustrating so the where is the close button close button let's give this an id i'll close when that is pressed now close we're gonna run now find that play none open close open close all right now let's start working with the one-inch api so if we go to the one-inch dex plug-in page we can see that we have this function here get supported tokens which calls morales plugins one inch get supported tokens and this we're gonna call in when we load the page basically we can check out the response that we get back so let's create an init function async function init which will initialize the page i will start by just calling this and we'll call this function right here the bottom and we're going to use chain eth by the way we can leave that we need to initiate it the plugins first of all though so before we do anything we need to initiate the plugins uh i'm going to see how we do that here we go so we need to call await morales init plugins we should also call morales.name morales.enable here we'll use that later on this will initialize the morales web3.js sdk so let's see what we get out of this okay so apparently i have to unlock my meta mask now [Music] there we go okay so tokens tokens here we get a big list of tokens right and each of this it's an object with the address as key of the token and then we can get the logo uri the decimals the name the symbol or all of the tokens that are available to trade over at one inch so now we're going to populate a list with all of these tokens when we load the page we can always i guess we can place this in a separate function so we'll call it the list available tokens and we'll call that here and tokens and we'll put this thing in here what we're going to do with all of these tokens that we get back is to loop through them all and to populate a list in our model body here we need some sort of div here the id token underscore list which we're going to populate with an unsorted list or unordered rather all right so list available tokens we'll call this result and then we'll get the tokens so const tokens is equal to result.tokens because that's the that was the how the result was presented to us and then here we can start looping through this but this is not a list so this is an object with keys and values so we need to do the special for loop for that so cost address in result or rather in tokens and then that token is equal to result dot okay or opens we already collected that for the address this will give us a specific token object and we'll loop through all of them here now what we're going to do is that we need to build the html and append that to this token list that we created so we can create a parent element out here so let's parent equal to document why is it caps document get element by id open list and then we're going to create another div in here document dot create element so this will be the base for our uh like token row in this token list um give this class name token row and then we will create the html string and this will be one of these multi-length html strings first of all we'll have the we'll have the image of the token icon because that was also provided to us in the let's see where is it ah now we didn't call it anymore but it was provided to us in the response from the one-inch plug-in get supported tokens um and we'll give this a class token list image and the source would be token dot logo uri that was the uh how we can find the image and then we're gonna have the text elements so span class token list text because we're gonna style this later on and span and then the content of the span will be token.symbol right and then we can simply set div dot inner html so this was the div that we created here to be equal to this html and then we append this div as a child to the parent element which was the list right there we go so this should populate the entire list now we're just going to recall it there did it do let's see if this works open up the list oh man it looks like the icons are huge let's see here token list image let's hear with the 40 dx ah there we go so just now every icon needs to be that small so token list image we need to modify the css with all the pixels there we go look at that now it's starting to look like something and also let's say that the model body it shouldn't be at least infinite long should be able to scroll in it right so let's say that the height should be 600 pixels and overflow should be scroll there we go now we're going to scroll with the tokens i mean it's crazy how fast it is to develop crazy crazy crazy [Music] so we're going to set that to the model body there we go save that and then what more should we do in order to so each row should we add some padding so padding 5px npx oh wait this needs to be for every token row there we go it's a bit better yep and then maybe so we're going to select between this we need to be able to click on these and maybe give it some background color when we hover over them so it looks like we can actually press them so token row colon hover will give it the same color as here there we go and also a cursor pointer wow look at that it's too it's too great now it is right there so let's see however this would be like that brighter gray there we go looks good now i can click on these like so now the only question is what's gonna happen when i oh let's see we didn't actually do the overflow thing uh oh it did why didn't that work not called what i think it was called ah dash body it's the bootstrap class maybe we should use the same standard for naming the classes all right so now i can select this huge list of tokens but what's going to happen when i click on them well we need to call some sort of function which then takes the contracts or the address and the token details and displays it on the page and saves our selection we need somewhere to save our selection and i'm thinking that we should keep a global object here like current trade which will be an object which i'm thinking we have from and to and here we set the token object inside here all right but i'm going to leave it as an empty object for now um and then when we also need to set like div dot on click to something so when we click on these divs need to run a function so let's say we create a function called select token we're going to create that under here async function select token first we need to do is close the model of course and then the question is how do we get the address of the token we selected what we can do is that we can add this as an attribute to the actual html to this div here i'm going to set div dot set attribute i'm gonna set data dash address to the actual token uh now we had address up here so the actual token address i will embed that into the element as an attribute then when i click on this i can let address be equal to event.target which will be the element we clicked on dot get attribute data dash address and let's see let's console that address and let's see so now when i open up the list all of these will have an address embedded data address for each token when i click on one of them it will close and it will consolidate the address now i need to get the token info and save that in our global variable that means that current trade [Music] for either now from or two we need to have some way of deciding between this so let's say we create another global variable which is uh current side current the left side all right and we set that when we open the model okay so when we click on where is this when we click on from token select we're gonna run a function here where we're gonna run open modal and then we're gonna input which side it is so here it is from because we click the from token select then in open modal we can that the current select side is equal to side and then we can use that in select token and set that the current trade for current select side is going to be equal to somehow we need to get the tokens in here or the address maybe that also should be a global variable tokens so when we list the available tokens we're also going to set we're going to set tokens equal to result of tokens because then we can get them here as well and then we can set them as our current trade and then in here let's also console.log now the current trade to see if it works as intended unexpected token 65 from here there we go missing a parenthesis let's click here let's click on the dos undefined so that means that tokens for address was on the firewise so tokens here is undefined it must be okay no but now it worked i maybe just forgot to do refresh so now it actually says from performance than equal to this token we selected uma it has the uri for the image voting token name and the symbol perfect but we don't display it here yet so when we select it we want to display it as the current token inside our html so here this should be empty we should set this dynamically but you also have an image here for the like from token image and we can also give this a class name because we're going to style two of them open image we're going to set this when we select the token let's call this in another function like uh render interface this is actually not async and render interface is probably not to be either then here we're going to document.getelementbyid we're going to get the from token image and we're going to set the source equal to current.trade.from.logo uri i'm going to do the same thing for the actual text that was next to it for the symbol text we named that something uh here from tokenselect let's see now the image should be inside of this div of course and then we have a span here that is the symbol so id is from token text and we can set that here equal to symbol right i think that's what it was called yes let's see if this works so i select here i select uma for example oh yes there we go we just need to make it a bit smaller how small should this be token image uh with 40 pixels there we go where's the text text did not work for some reason symbol it should have worked work okay so token image from token image or token image needs to be styled it's the same as this other token image here open this but weird what about the text from token text added source dot innerhtml all right i'm ready to refresh select math oh what happened now properties of undefined our current trade is undefined currently.from is undefined what's going on here let's debug here when we select tokens is set address is null then the target as you can see the attributes attributes doesn't have the attribute what's going on there it has the attribute why is it null it works with that but doesn't work with math specifically math doesn't work what's wrong with math math has an address ah all right it doesn't work here either [Music] well let's try to do this without attributes if the attributes are not working let's try to do it in another way try to instead do one click equal to anonymous function an error function where we run select token but with the address as an argument try that instead address like that and we put the address here we use that instead of this let's try that if that works better i don't know what was going on maybe you can tell me refresh select uma now it worked math works this this this okay that works better more reliable it seems uh okay so then we have the from thing and this looks quite good actually we could maybe make this a little bit bigger this text but that's final details uh now we're going to do the same thing for this one where we select the from token we remove this then when you do the same thing when we press the two token select we're gonna open up the open model but with the side two and then the rest should work because we do set the current select side all of that the only thing we need to do is when we render the interface we need to also render the two token image and the two token text here we have to be be careful though because if we haven't selected two token it won't be able to render it so we need to check if it's defined so and the same for from token so if current trade.from we can do this and the same thing here if current trade.2 into these two there we go that's render interface let's try this ah wait we need to check the html so this should be empty it should have the same thing as here but it should be two token image and two token text if i can select that should work okay let's click here select math uh here we probably so undefined does this work math that works ah now it said it's for both uh ah this needs to be two of course that's why it didn't work to and from now i can select here i can select here boom i can now select the pair i want to trade that's incredible when you fill in the amount here but of course now we need to get the price but when i filled an amount i want to calculate the price get the quote from from one inch so that's the next step if we take a look at uniswop you'll see that it's when i enter let's see when i enter an amount here it doesn't fetch the price directly it's when i oh it actually does but it also calculates it if i leave the box like that and that's what i thought it would do i actually didn't thought it updated it when i stopped typing also but what we're going to do is when we leave focus from this box then we're going to calculate price and that's not too hard to do actually there is a javascript event or when an input box like this loses focus as it's called because when we have it selected like this we call it having it in focus and when we drop the focus of it then there's an event file that we can listen to and this event is called on blur that's what we're going to set up a listener for and what was this input box called from amount we're gonna have a listener like this or from a mount on blur then we're gonna run a new function we're going to call it get quote all right we're going to use that in order to get a quote from one using the one in plugin so this is going to be async async function get quote and what we first need to do is get the value from the actual input field so document not get element by id for from amount and then dot value to get the value out of that input box now we need to save this to a variable of course let amount be equal to that we also need to convert it into first of all into actual way meaning the smallest possible unit in ethereum and we do that through a morales function so morales.units.eth and eth and then we take this entire thing and then we also need to convert this in to a an actual number because it will be a string as it is so we're going to convert that into a number and that will be our amount and then in order to get the actual quote we write like this awaits morales dot plugins dot one inch dot quote and then here we have our configuration options and of course we can copy this from the plugin website also we have get quote here we can copy all of these just actually chain is going to be eat then we just got to populate the other thing here from token address this is the token that we selected that start from token and this we have in our current trade object so current trade dot from dot address and the same thing is true for the two token address but here we have current trade.2.address and amount is going to be amounts that we got from the input field up here and then finally we can console.log the quote what we should do as well is before we get the code is to make sure that we actually have all of the data we need to actually have selected the tokens because if we haven't selected the tokens that we want to trade from into then we can't get a quote because we won't have these current trade from and two objects set we need to check that current trade dot from is actually set so if it's not set we will return but we also need to check if current trade.2 is set so if any of these are not set then we will return to and we also need to check so that we actually have this amount so let's move this down actually uh no let's have it here and we'll check so that this is also set and if none of those are set we're gonna return okay and that should be it for getting the quote we're to see the format that we get the quote in and then we're going to continue so let's go back to our website and let's refresh and now if i select tokens here so first i select math and i select wi-fi and then we're going to fill in the amount 100 math and we'll see the quote we get for wi-fi here we got it back when we left i clicked outside the input box we got the quote here it says from token so it clarifies the token we selected from token amount in um in way but it struck me now that this should not be in way unless we are doing eth i mean we should use the decimals now it was 18 decimals we should use the decimals that is in the from token to actually convert the amount from all units into the smart contract units the units the smart contract so we need to use the decimal value from the from token we're going to change that and then we have two token and we have two token amount so this would be the amount that we would write out here and we have to adjust it for the decimals of the two token all right so we got the quote here uh this many math for this many wi-fi's okay let's adjust this for the um or the right right decimals okay so we're gonna do the number conversion but inside that we should first take this and then multiply that by 10 to the power of whatever is in current trade.from decimals so we're going to multiply this by 10 to the power of current trade dot from decimals write this out on multiple lines uh i think that will be correct and then this yeah this will be converted to number yeah that should be it and then when we get the quote back we need to set that in the two amount box in this box we need to set the amount that we got back so once again document.getelementbyid to amount uh that value is equal to quote dot to token amount that's what it said and we don't have it there uh divided by here we have to do the same thing we're going to divide it by the same thing we did here and to the power of but then use quote dot two token dot decimals because um well it's we could use what we had in current trade as well all the data come from one inch but it feels better to use it from the recent quote because then we know it's actually correct um and that should be it we're gonna set it to that divided by that yes let's try refresh and select the same thing again we're gonna do math do wifey in 100 math was it that's what we did [Music] you do and there already got it that's how many wipes we'll get let's take some more common examples let's see we don't have a search function yet maybe you want to add that let's add e let's see can i find it there's eat let's do eath um wife let's see how many wifi's i get for one heath i get about point let's check that let's check that price if it's correct you're in finance yeah looks about right and because one wifey is about 9.78 so that means that one heath would give us a round 0.1 um and we can also check for example eth to uh usd maybe there we go let's check that out 393. let's check that out with eth yeah that's about right uh the usdc amount could of course be a little bit different and the quote is not always perfect you have slippages and so on um and uh here we could also add of course when we switch tokens we also calculate the amount because now we only do it when we leave this input box because whenever we select the token um we can add that very easily so we just we run get quote anytime we select a token where is that select token here we go so we did it here get quote as well and that's about it we can also get from this quote now we didn't consolidate it anymore what we should do yeah let me do this again i can show you that in this we also get the estimated gas and that's very important so let's add that so the user can see what the actual gas is let's add that above the button uh id gas estimation gas estimate and we'll set this when we get the get quote inner html is equal to quote dot st make the gas save and let's try again maybe yeah of course we cannot just do that let's do like this instead so estimate the gas colon and then here we'll put a span that has id gas estimate we want to we wanted to be curious to use not just output number but actually explain what it is there we go let's try that instead there we go estimated gas that will fill in automatically math 5v 100 there we go now all that's left is to implement the swap button when we swap we'll get the meta mask pop-up and we'll actually perform the swap so we already have our button and it's already called swap button so we just need to write the function but let's write the function async function swap or maybe try swap because we will also have the problem of does the user we need to check if the user has given allowance to the smart contract the token smart contract to actually let one inch do the trade for them so we need to check that first because in order for one inch to be able to perform the trade for you you need to to have given them um the right to transfer your token in the actual token smart contract so but we can very easily check that using the morales plugin we're going to do that but here first let's get the address of the user dot morales.user.current.get don't get east address i will get the address with morales um and it would be different here depending on if the symbol is ethernet if it's eth that is the from token that means that we don't have to do any allowance check because you always can send eth you don't need allowance it's not a smart contract so we'll separate based on that here so if current trade dot from dot symbol is equal to eth then we can go ahead with the swap right away otherwise we will do check allowance pick allowance and get allowance trade well let's see let's put it the other way around if it's not eat we'll do the allowance thing in here and then we just do we just get rid of this and we'll trade in down here so if it's not eth that is the front token will go directly into trade but if it's not east we'll check allowance and get allowance okay so because then we minimize code duplication so first of all we need to get the amount once again so the amount we're gonna trade will be the same as it was here at the mount and then we'll get allowance from the the current allowance from the morales sdk so morales.plugins.1 inch dot has allowance this will give us a simple yes or no true or false whether we have the allowance for this amount um and we can also get the these options from the one-inch page so here's hass allowance and copy options this is going to be eth from token address we have that as we know current trade dot from dot address uh that right yes from address that is our address because that's we need to have an actual balance and we need to have an allowance so we need to check against our address the amount is the amount we selected here and then we can get the allowance back so we can console.log the allowance but in the end what we want to check is if allowance because it will either just say fonts or it will give us an actual number i think or maybe we'll just write zero maybe we'll just write give us the number back uh but if well i need to check this actually uh but if allowance is bigger than amount i want to check that but let's check the console log first uh so try swap we're gonna run transform try swap when we click on our swap button we're gonna have another listener here for swap button on click we're gonna run try swap all right let's try this let's do this math wi-fi 100 boom get the price estimated gas i click try swap and let's see country properties null didn't get try swapper is this i'm not signed in i need to be signed in in order to swap so we should disable the button disabled as you know the initial condition and then it only way to get it enabled is to log in so do you have the login function yet yeah we do so if we successfully login which would be here then we can enable the buttons of document.elementbyid pop button dot disabled is equal to false but otherwise now we won't be able to press it because it's disabled but if i sign in let's see that we connect this button yes we did sign now the button is enabled and now we can do the swap uh should we do some other toggles now we do bath to read let's see if there is such a pair uh there we go let's do the swap and let's see what we get okay so now we just get false alright so this will be a uh a boolean maybe i should zoom in here more let you guys see this will be a boolean and that means that we don't do the any check and comparison between the amount we just get true or false if it has enough allowance or not and if it doesn't then we have to get the allowance so if allowance is true then we can go ahead with the trade but that we're going to do down here so if allowance is false here we have to get the actual allowance and that's also in the one inch decks here it's the approve function we can run it here browse packets one inch dot approve and once again we need chain heat token address is the current trade from address and from address is our address and then we just have to wait for that to complete and when that is done that means we can move on to the trade then we can actually try this and we can uh well let's see maybe we're not gonna do this because if we actually do this on the live then i will have to pay gas for the trade i don't know if i want to trade here so we're gonna do uh the trader directly and then i can show you what it looks like with the then we're gonna actually do the swap so let's let's create the function that is do swap is now we've checked all of the allowance stuff then we can do the swap so uh async function do swap and here we're gonna get once again the actual call from the one inch docs or the morales plugin docs we can get that in here we get the receipt back we can actually let's see let's actually not make this async and instead return this thing so we return the receipt back to this function uh once again chain is going to be eth from token address this two token address this amount maybe we can pass that in here pass in amount you can also pass an address so user address round we use the amount here from address that is our user address flip edge one percent how much slippage we will actually want to allow for a trade to fail not fail depending if it doesn't hit the exact price we want the one is pretty standard um we return that is there we go that looks correct and then here we can uh let receipt be equal to await this and once that is done we can alert swap complete you can of course makes it make this a lot prettier not just alert the message so let's see what happens uh happens now we go to the decks let's see what line was this main.js 122. ah another wait we're just going to return that there we go now let's try to swap from eth because then we don't need the approval or allowance and i'm going to swap to chai 108 there we go i need to sign in i forgot that oh ah we need to add a check in the init call to see if we're signed in uh okay swap amount is not defined let's see let's see try swap 116 here amount is not the oh it's because that's inside of this block right here so let's get that outside here then we need it anyway and then again we can also fix our login issue so in the init call let's see here's the init function here it is [Music] should we check if we have a current user and if we do have a current user we will enable the actual swap button you can also hide this button of course so that when you're signed in it doesn't actually say sign in you could hide the button uh ease do else power i don't even know what that is uh now i can do the swap something went wrong what did we do now okay so that probably means that it has to do with the fight i don't have any eath in this wallet um because we're on the mainnet let me try with another wallet just to confirm all right so let me try now with the new account it makes sense that we check the east balance before we actually try to swap but the error message should be better so i relayed that to the the team okay let's try to do that swap is it my new eth address right this isn't hasn't actually swapped we haven't provided a logout button so that's a bit of a problem because it still thinks that i'm the old user so let's see how do i log out i could clear my cookies i would do it or the local storage rather do that and the cookies let's see refresh now we should not be signed in and then we met the mask sign [Music] now finally i am bullish this is gonna work here we go or don't know if i have 12 eats pop skip that okay now we get the meta mask look at that so here we have the swap i can't do the swap but i'm not gonna do the swap but this is a one in shop uh one inch for one one each for like two million x and k tokens um gas fee let's see how much is the gas fee 126 bucks well that's just a bargain that's life on each these days but i'm not gonna do this one but if you do the swap it's gonna be successful now uh this is where i'll actually leave you guys because now we have a working decks and we've created it in i don't know how long time have we been here an hour an hour and a half maybe i don't even know um and what can you do to improve them because i mean the basic functionality is here but you know you can do some more nice styling you can add you know log out button or you can handle the event that happens when you switch accounts in matamos you can handle that and automatically log out the user or make them pick an account that's all doable with morales it's in our documentation you could do a search function here not too difficult actually to do that you could also add the fact that when i select the token here if i go way down inside the token here when i go into this one i don't want to be down here i want to be up here i want to reset the list i want to be up here you'd set the scroll position uh you could add more messages so for example when i don't have the approval like i have here maybe when i click swap i want to get some sort of message that okay i need to do the approval first i need to allow this to spend i want to get a message about that i know i think units for example if you don't have the allowance when you click this button will change to like approve instead or something like that then you click approve and then you get the approval and then you can do the swap um so you can improve this in lots of ways but i think i'll wrap up the tutorial here because i've really shown the power of morales i mean it's so incredibly quick to get all of these pairs all of these tokens just populate them in the list then very easy with the plugin to swap to approve all of that stuff you don't need any api you don't need any other library you don't need to read up on any other api it's incredible i hope you enjoyed this tutorial and if you did make sure to check out our other tutorials here on youtube and subscribe to the channel like the video and then join the morales discord join our little community become a moralist mage as we call it and i enjoyed making this tutorial with you and i'm looking forward to seeing you in the next video thanks for watching

Channel: Moralis Web3

Views: 23,635

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: XOvtnDx1m5c

Length: 76min 12sec (4572 seconds)

Published: Mon Sep 20 2021