How to build a basic DEX - Web3 Developer Tutorial

so right here this is going to be the Decks that we're going to build you can see here we can swap out our madic uh cuz I'm using this on Mumbai here so native token is going to be madic and we can swap it out for a uh token called the dext or Dex token so in here we can say let's um I'm going put 0.1 madic you can see here in return I'm going to get 86 all of this deck tokens here uh we can hit swap we get a transaction that comes up to go ahead and go through with our swap you can see we're going to be swapping 0.1 maic so we'll put the swap through you can see here that it is swapping out our token once that goes through you can see swap was executed successfully if we look here uh I go down to point one uh 680 it's a little small here but you can see my decks uh my balance for my token also went up to 1.7 of the decks T now you can see if I do 0.1 again the calculation is I'm going to get a little bit less tokens back here and we're going to be creating our own Dex contract you can swap it around here this way too so if I swap it around and put in I want to swap back my token to madic you can see this is what we're going to get calculated in return hey everyone Sean waasa here back with another tutorial video and in today's tutorial video we're going to be building a very simple deck so we're going to build a very simple swap where a user can swap a specified token for a native token or vice versa an overview of what we're going to be covering in this video we'll first create our deck contract we'll also deploy our erc20 token contract that we're going to use with our decks we'll then jump in and build out our very own Dex application so with all of that being said let's jump on our computer here and let's get started once on third Red's dashboard and I have my wallet connected I'm going to head over to the contracts Tab and I'm going to deploy a new contract and here I'm going to deploy a token contract which is an erc20 contract so I'm going to select that I'm going to hit deploy now I'm going to name this uh Sean Sean token and my symbol is going to be Shan you can add a description you can add an image and I'm going to come down here to the network and chain select the dropdown and from that drop down you can select any evm compatible blockchain or network we support all of them here so we can search them by Chain name you can search it by Chain ID I'm going to be using Mumbai for this tutorial here so I'm going to select Mumbai and then I'm going to select deploy now we'll get a transaction that appears here so I'm just going to confirm that track transaction to deploy my contract then we'll get another signature request here this is to add it to our third web dashboard so I'm going to just sign that and again what we're deploying here this is just a token that we're going to use within our decentralized exchange this is going to be the token that we're going to be able to swap back and forth for our uh Native token depending on the chain that we deploy it to and our case or in my case it's going to be madx since I deployed it to the Mumbai testnet so once our token contract deploys will be brought to the contract dashboard on the left hand side here we're going to navigate down to the tokens Tab and right here we have zero tokens so we're going to Mint some tokens and Supply here and I'm just going to Mint 1 million tokens so we're going to hit mint here and I am going to confirm once that's done you can see here our total Supply is now 1 million tokens uh the 1 million tokens is owned by this wallet which I use to deploy this contract so we're going to need this here in order to provide it to our Dex contract so that our contract knows what tokens it can swap through so once that is done we have our token that we want to swap let's now create our Dex contract so I'm going to open up my terminal here and I'm going to run MPX third web create contract and we're going to create our very own Dex contract using third web here so we're going to name our project I'm just going to name this Dex contract and I'm going to use hard hat for this you can use Forge as well and the name of my contract I'm just going to name it Dex and we're going to start from an empty contract here once that is done we'll just switch into our Dex contract project and we'll open that up in our code editor so once you have that open in the contracts folder we're going to go to the contract. so file here and we're going to start creating our Dex contract so let me just close this and the first thing we're going to do here is we are going to import the base erc20 contract from third web so so I'm going to do at third web-dev SLC contracts SLB slc20 base. so and once we have that imported our contract here we're going to name this our Dex contract and it is going to be of erc20 base now I'm just going to remove the Constructor function here for now and in this we're going to first store an address which is going to be be our token address so we're going to say uh token then we're going to create our Constructor here and our Constructor is going to need to also deploy us our erc20 token so which is why we are taking in our base erc20 token here this token is going to be the liquidity pool token or the token that is provided to a user who adds uh liquidity to this Dex contract so when we add liquidity say I add a ,000 um sha tokens uh along with whatever amount of madic I want to match it what I'm going to get in return is a th000 of this Dex token right over here so what we're going to need here is to also call our base ERC 20 and we're going to need to deploy our token through that as well so for our base erc2 we're going to need the default admin address so we'll say default admin we'll also need the name of our token or our liquidity pull token and then we'll need the symbol of what that token is going to be so for our Constructor what we're going to provide it is an address this address here is going to be the token address that we are allowing for our decks we're going to submit an address which is going to be the default admin address and we're going to also take a string of memory which is going to be the name and string memory which is going to be symbol the default admin name and symbol is what we're going to pass here to generate um our erc20 token our liquidity pool token and then finally here we're going to set the token which is our variable up here to the Token address that we provide our Constructor so again this is how we're going to set up our contract our Constructor is again going to take the token address of the token we want for our decks we'll then submit the address which is will be the um default admin of the contract we'll set the name and symbol for our uh liquidity pool token so now let's create the functions of our contract here the first function we're going to create is going to get back the balance of the token that we have within our contract so we know how much is within the liquidity pool so we're going to create a function here called get token in contract this function is going to be a public function uh it's only going to be a view function and it is going to return to us a uent 256 uh returns for this function all we're going to do is return and we're going to take our ERC 20 base here and we're going to provide it with our token and we're going to get the balance of this address so address this so this contract address we want to know what the balance of of the provided token is and that is what this function here is going to return us next we're going to uh create a function to add liquidity to this Dex contract here now liquidity is going to be us depositing both the Shan token and a amount of madic in this case so the native token and now the first initial um the first initial time we add liquidity I can put in however much Sean tokens and however much um madic I want to into this contract after that we're going to have to calculate and uh provide the correct amounts depending on what the balance is within our contract of both the token and the native token so we're going to create a function here we're going to call this one add liquidity this is going to take a uent 256 which is going to be the amount of the token that we're going to add so we're going to say amount this is going to be a public function uh this is going to to be a payable function cuz again we're going to be sending uh the native token along with this and it returns a uent 256 as well so we're going to set a few variables here we'll say uint 256 we're going to have our liquidity then we're going to have another U 256 this is going to be our balance uh in eth of eth which is going to be this address and getting the balance of this contract so how much eth or the native token we have in this contract here then we're going to get the U 256 of token Reserve so this is how much of the token we have in this contract and to get our token Reserve we're going to use the function that we created up top which is get token in contract so that's going to give us back the amount of our Shan token in this case that our contract is holding and then finally we're going to have our ERC 20 base uh which is going to be our token and this is going to be our erc20 base token right here so now for the first time again when we first initially add liquidity which we're going to do here in this video we can put in as much Shan token as we want and as much madic that we want uh into this Reserve so if we put if the token Reserve equals zero so this is either this is the first time or maybe we just need to add more into our Reserve here what we're going to do first is we're going to take our token uh and then we're going to transfer from and this is who we're transferring it from right so we should be transferring it from our message sender we should be sending it to this contract address so we'll say address this and then the amount is going to be the amount that we are adding to the liquidity pool so this is again how much of the Shan token we're going to transfer here then we're going to set the liquidity equal to the balance and eth and what we're going to do is mint the liquidity token to the person that is submitting or adding um liquidity into our contract so we're going to Mint the MSG do sender we're going to Mint them the same amount that of tokens that they added into the pool here so we're going to send them the amount now else what we're going to do is this is for anyone that wants to add liquidity after the fact of the initial liquidity or if the token Reserve is basically High higher than zero and with this one we're going to have to calculate an amount here so we're going to create a uent 256 here this is going to be our reserved eth or our native token and this is going to equal our balance in eth minus the MSG Dov value so minus the amount that we are going to be sending within this adding liquidity we are going to require here that the amount be greater greater than um be greater than or equal to the MSG doval so the value being sent times the token reserved divided by the reserved amount of eth if it is not we can say that the amount of token sent is less than the minimum tokens required after that once we verify that they can transfer the amount and the amount is Ade Equitable to add some liquidity in we are going to get our token that they want to transfer we will do our transfer from we're sending it from the message sender from the MSG do sender to the address so this contract address and the amount is going to be the amount that we said that we're adding within this function and what we're adding here is the liquidity equals the total Supply times the MSG Dov value divided by the reserved amount of eth and then finally we are going to Mint the MSG do sender the amount of uh what liquidity so depending on the amount of the liquidity that is going to be the amount of tokens that the user or the sender gets sent when adding to the liquidity poll if it's the initial amount they get calculated or they don't get anything calculated it's just the initial amount that they deposited if they are not the initial person to add into this liquidity pool we will calculate the value here and then that is the amount of tokens that they get sent and then finally we are going to oops return the liquidity here so that is our function for adding liquidity in our Dex contract next we're going to create the function to remove liquidity so this is if you want to um essentially take your liquidity tokens burn it and then receive back the Shan token and the native token from the contract so we're going to create a function here called remove liquidity which is going to take a ENT 256 we'll call that our amount that we want to remove this is going to be a public function which returns a uint 256 and in here we're going to first require that the amount is greater than zero if not uh we shouldn't be able to remove oops uh remove anything like zero amount of liquidity we'll just say you can't run that or execute that function here then we're also going to store our U 256 for our reserved eth amount so we'll say re reserved eth which is going to equal this address this contract address balance then we're going to get our U 256 here for our total Supply and we're going to get the total Supply here and then we're going to create a u 256 for the amount of eth so we'll say eth amount that is going to equal the reserved eth multiplied by the amount divided by the total Supply we'll also get the ENT 256 for the token amount this one's going to equal we're going to first get our tokens in contract we're going to multiply that by the amount and then we're going to divide that by the total Supply uh which is the total Supply here uh this does not need the underscore here once that's done we're going to burn the amount of the liquidity tokens that the user is basically exchanging back to us so we're going to burn and we're going to burn it from the message sender and the amount we're going to burn is the amount that they are submitting then we're going to say payable and what we're going to pay them back or send back in the native token uh we're going to send the native token along with the Shan token back to them so payable we're sending this to the MSG do sender and what we're going to do is transfer them the to the MSG do sender is transfer the eth amount and then we're also going to do that for the token so we're going to take our erc20 base of our token and what we're going to do is transfer to the MSG do sender the token amount that we calculated and finally we're going to return our eth amount and token amount here oh and then here we have different arguments in return statement oh uh we're returning to uent 256s there we go next we're going to create a function to get the amount of tokens so this is going to get and calculate the amount of tokens that you'll receive when you swap so we will function we'll call this a get amount of tokens we are going to need to get the U 256 of our input amount we'll need the U 256 of our input reserve and then our output reserve and this is going to be a public function and this is going to be a pure function that returns a uent 256 so for this function here we're going to require that the input Reserve is greater than zero and that our output Reserve is greater than zero then if if you want to uh calculate a fee or anything um you can calculate your fees in here if you want to take 1% 2% 3% of you know swaps or anything you can calculate that in here we're not going to do any of that here we're just going to take whatever the input amount is is what they're going to be able to swap for so we're going to calculate our un 256 for our numerator and we are going to take our input amount and times that by our output Reserve then we're going to take a uent 256 for our denominator and that is going to be our denominator and this is going to equal our input Reserve multip by 100 plus our input amount and then unchecked here we are going to return our numerator and divided by our denominator here and then the last two functions are going to be the functions we're going to create to swap our eth to our token and vice versa our token to our eth or our native token so we're going to create a function here we'll call this swap to eth and what this function is going to be is a public function that is a payable function and we're going to set a u 256 for our reserved token which we are going to get the tokens in contract then we're going to get another uint 256 for tokens bot which we are going to get amount of tokens and we are going to provide this with our MSG doval the input Reserve which is going to be the this address so this contract addresses balance and then the output Reserve which is going to be our Reserve token and make sure I spell U 256 correct here and then all we're going to do is take our token and transfer from the sender the number of Bot tokens so we're going to transfer them the tokens that they are asking for so when we hit transfer we're going to calculate the amount of tokens so they're going to put in the amount of eth we're going to calculate the amount of tokens so for this function here again we're swapping to e so we're going to take the token reserved amount we are going to then get the amount of tokens that we are going to transfer to the user uh which we are going to use the function here that we are going to calculate that amount so we're providing it again with the value of how much madic or the native token that they want um and we're going to compare it to the balance and the reserved tokens within our contract we're going to then send that token and that amount to their wallet and then finally we're going to do the swap back to eth this is going to take the number of tokens sold so un 256 of the token sold this is going to be a public function and this function we're first going to create a un 256 of the reserved tokens again which we are going to get the tokens in contract we'll then get a un 256 for ebot and this is going to be how much eth or the native token are we going to send back to the user so we're going to get the amount of tokens again the inputs here are going to be the value so the amount that we are sending the amount of um eth that we're going to be getting the uh address this and then the balance of this address and then finally the reserved tokens and what we'll do here is we will take the tokens do transfer from so we are transferring this from the MSG do sender we are transferring it to this address and the amount is going to be the amount of tokens sold and then finally we are going to create a payable and send back the amount of native tokens to the MSG do sender and we are going to transfer the amount of eth that was bought or that we need to transfer back to them and then we are missing an error here oh uh sem meol in there there we go and then tokens sold uh did I spell this wrong probably did there we go token sold and MSG value oh this shouldn't be the value CU we're not sending eth we are sending the amount of token sold so this should be the amount of token sold as well and that does it for our contract again we created a DEX simple Dex contract here uh we created a few functions to add and remove liquidity we created a function to calculate the amount of tokens that a user should receive uh and then we created some functions to swap um our tokens to eth and then Vice ver it to swap I mean to swap this should be swap eth to token and then we have the option to swap our um token to eth so so once our contract is finished here we're going to deploy this and we're going to use MPX third web deploy and we are going to deploy our contract here you should get a browser window that opens up to deploy your Dex contract now we just need to fill out these contract parameters for our Constructor here so this is going to be the token address that of our token that we're going to allow to use our deck so we're going to come back here get our Sean token here or whatever token you deployed copy the contract address come back here paste that in then we need to provide it the name of our liquidity pool token so we're just going to call this a DEX LP token and we'll give it a symbol of Dex LP and then you can select the network and chain you're going to want to make sure that this is on the same network and chain that you deployed your uh erc20 token that you're going to be using then we'll hit deploy now we'll confirm that transaction here again we'll assign the signature request to add it to our dashboard and then there you go we have our Dex contract deployed now with this Dex contract we're going to have to one initially add our liquidity into it and approve that this Dex can transfer some tokens and everything for us so we're going to copy this contract address of our decks here we're going to come back to our erc20 contract here we're going to go to to the Explorer section here and we're going to approve that the decks can transfer these tokens on our behalf so the spender is going to be our decks the value uh we have a million tokens here so I'm just going to uh open up a way converter here I'm going to put in the 1 million here take that wave value and plug that into here and I'm going to execute this and yep we'll say we're going to give them a spending cap of 1 million tokens approve so once that's done we're going to come back into our Dex contract here I'm going to come to the Explorer section here and we are going to add liquidity or the initial liquidity into this Dex here so the amount that we're going to do here is going to be the amount of the Shan token or the erc20 token that I want to deposit so let's just say I want to do five 500,000 so we'll just say 500,000 here I'm going to take that way value come to our decks here paste that and then I'm going to put in the amount of the Native token so this is going to be the value of whatever native currency of whatever Network or chain you're on in this case I'm using madic on the Mumbai chain and I have four madic here so I'm just going to put 0.5 of this token here for this native token you can put in your native currency amount uh with the decimal point and everything uh you don't need to convert it we'll do the uh third web's dashboard does the converting for this value automatically so we'll execute that we'll hit confirm and there you go so now if I come back to my token contract and I come back to my tokens here you'll see that the supply is still 1 million my wallet now only holds the 500,000 because the remaining 500,000 is within our Dex contract so we have added initial liquidity to our decks now let's actually build an application or web 3 app that allows a user to exchange uh those values so I'm going to come back to my terminal I'm going to clear this out and we're going to run MPX third web create app this time and we're going to create ourselves a DEX app so I'm going to say Dex swap app we're going to use nextjs and typescript for for this tutorial and once that's done let's change into our Dex swap app here and open up our code editor and and then before we start building out our app we'll have to set up our third web provider here so in the pages folder and in theore app. TSX file we have our third web provider here the first thing we have is our client ID which is your third web API key so if you come on over to third web you go to the settings here you'll have your AP API keys and you can create a new API key we'll drop a link down in the description below on a tutorial video and some documentation more about API keys if you want to learn more about it I'm just going to copy my client ID I'm going to come over to my files and go to this EnV file and paste in my client ID there I'm also going to rename this file here to get rid of example and leave it just ASV come back to theore app. TSX file and in the second thing we're going to have to set up is our active chain so this active chain here by default is ethereum I'm going to switch it over to Mumbai cuz that's the blockchain that I deployed my contracts to and then with that you have everything set now I am going to have some styling here that I'm going to add into this home. module. CSS file this is just so that our decks looks nice and everything as we go through it and we don't need to spend so much time on The Styling here but if you do want to get the same styling and follow along we'll add a link to the repo down in the description below so next here I'm going to open up the index. TSX file within the pages folder and we're going to build out our Dex app here so I'm going to delete uh everything within this div tag that has the class name of container so all of this here I'm going to just select it and remove it this is just the boilerplate code that you get from third web when you create a new project and in here we're going to create a few variables and get a few things that we're going to need in order to start creating out our Dex application so the first things we're going to need are going to be our contract addresses so we have our token contract and then we're also going to have our Dex contract so we're going to grab those two contract addresses so let's come back here let's get our Dex contract here paste that in we'll also come and get our token contract copy that paste that in right there next we're going to get an instance of our SDK which we're going to need so we're going to get our SDK uh and we're going to use the use SDK Hook from third web we're also going to need to know the wallet address of the connected wallet so we know who the uh sender of the message and everything is so we're going to create a variable called address and we're going to use the used address hook from third web and then we're going to get um the instances of our contracts here so we can get our first contract which is going to be our token contract and we're going to use the used contract hook and provide it our token contract address uh we'll do the same thing for our Dex contract and then we're going to get the token symbols and balance so we can get the token symbol which is going to be the um token of our token here so whatever tokken you're doing we can get the token symbol in that metadata so that we can display it within our decks so we're going to get our data we'll rename this to be symbol and this is going to equal uh we're going to use the used contract read hook and what we're going to get this from is our token contract and we are going to get sorry uh provid it the symbol function is what we're going to need so get get back that symbol uh and then we're going to get the token balance and we can get the token balance of the connected wallet for that token so we're going to use the used token balance provide it with our token contract and the address of the connected wallet and that's how we can get the token balance for that connected wallet we're also going to need to do that with the native balance so in order to get the the native balance so in this case uh the user's wallet balance for madic we're going to get the uh Native balance here and we can use the use balance Hook from third web and that's going to get us the balance of whatever the native token is and then we're going to also need to get the contracts token balance and this is going to use the use token balance of our token contract but we're going to see how uh the Dex contract here and we actually need to get the contract address so we're going to provide it with the token balance we're checking the tokens how much of the tokens does the actual Dex contract have left or how much is it still holding from the amount of liquidity we added in next we're going to create some State variables that we're going to need for our application here first one is going to be our contract balance and we'll say set contract balance this this is going to be a string and we're going to make this default here zero we're going to import this from react we're also going to get the contract balance for our native token so native token or say uh Native value we'll set the native value we'll make that a string as well set it to zero we'll do the same thing for token value set that to zero we'll get the form uh so this is going to be whether a user is swapping native or they're swapping the native token to the Shan token or if they're swapping from the Shan token to the native token uh this is going to be a string and we're going to set the default to the native token and then finally we're going to just create a state for is loading and we'll set that to false next we're going to get some of the functions here from our Dex contract so we're going to to get the uh mutate a sync we're going to call this function the swap native token function and we're going to use the use contract right hook and we are getting this from our Dex contract and what this function is going to be is the swap eth to token function we're going to do this the same thing for our other functions as well so we're going to mutate a sync we're going to call this one swap token native use contract right Dex and it's going to be swap token to eth and then finally we're going to get the approve token spending and we're going to use the used contract right this is going to be on our token contract and we're going to call the approve function and this is to again approve Pro that we are going to allow the decks to swap out these tokens and everything for us so the next thing we need to do is create a few functions that are going to allow us to swap these tokens so the first one is going to be the amount we need to be able to get the amount that um a user is going to receive when they swap a one token to another so if they're swapping the native token to get tokens we need to calculate uh based on how much of the native token they are want to swap out how much of the Shan token are they going to get so we're going to get uh we'll say data or we'll say amount to get and we're going to use the use contract read hook here and we're going to read this from our Dex contract and we are going to read the get amount uh get amount of tokens function that we created in our contract and depending on the if we're swapping from and depending if we're swapping from native token to the token of our choice or from the token of our choice to our native token depending on what our current form is and if it is equal to our native token meaning we're swapping native to the Shan token what we're going to provide it with is are going to be the native value so we'll say uh we'll convert this two way using the two-way here and we're going to convert the native value as a string and we're also going to provide it with the contract balance so we'll say two way so that we can get the contract balance and then we're going to say the contract token balance and then this needs to be the value or if we're swapping from token to Native value value we're going to say 2way and we will be providing it with the token value as a string the contract token balance value and then the two-way uh the contract balance so depending on which way we're swapping we'll have to provide it with the different information here to calculate the amount of tokens that they will receive next we're going to create a function to fetch the contract Ballance and what we're going to do here is run a try catch and in the catch we're just going to console error the error uh but for the try here we're going to store the balance here in a balance variable and we're going to await the sdk. getbalance uh we're going to get the balance of the Dex contract uh we'll also set the contract balance to uh balance. display value um or we'll just pass it a zero string here and then the final function we need to create is the actual executing of the swap function so we're going to say execute Swap this is going to be a async function here and over here we're first going to set is loading to True we'll run a TR catch here again the catch will just uh console error the error we'll also just put in a little alert here saying an error curred and then for the try here we're going to say if the current form is equal to Native so if we're going native to token we're going to await the swap native token and we're going to provide it with some overrides and the overrides is going to be the um the value the payable value that we're going to be sending which is going to be the native value as a string and we'll convert that to a wave value here because again that's what we need to provide to the contract and then once we have done that swap we can alert here saying that the swap was successful uh or else what we're going to do is if we're swapping the other way around we're going to await first that uh we have approved the token spending and we need to provide it with our arguments here and we are proving that the Dex contract can move these tokens for us so we're going to say two way and then we're going to give it the token value and then once we have approved that the dexs can move our tokens here we're going to await the swap token to a native function and that one we are going to give it the arguments here of two-way and give it our token value and then finally here we're going to alert and say that the swap was executed successfully and then finally after our catch here we'll say finally we'll set is loading to false and that does it for our swap function so again depending what which way we're swapping the tokens uh if we're doing native token to regular token uh we can just call the swap if we're doing um token to Native token we are going to have to and I spelled this wrong approve token spending spell that right there we go um we're going to have to first set approval that the Dex contract can transfer a to tokens for us and then we can call the swap to uh swap token to a native token here and then finally we're going to create some use effects here to uh fetch the contract balance and update it so we'll say use effect um this is going to be uh one to fetch our contract balance and then we'll set the interval to every 10 seconds so every 10 seconds it'll just fetch the contract balance for us and then we'll use the use effect again here this time based on the amount to get and this is going to calculate the amount um of the either native token or token that the user is going to get uh based on their swap so we'll say if no amount to get will just return out of here but if there is uh the current form so if the current form is equal to Native then we are going to set the Tok to value and we're going to get the token value but we'll have to convert it so we'll say to Ether here and then we're going to get uh the amount to get else we'll set the native value to The Ether of the amount to get so depending again which way we're swapping our functions and every our app and the first thing I'm going to do here um for our app is just create a simple navbar I'm going to open up my file directory here I'm going to create a new folder I'm going to call this components and in that components I'm going to create a new file called navb bar. TSX and this nav bar here I'm just going to create a very simple Navar just a div here that has a display of flex in a row we're going to space the items uh with space in between and we're just going to name it our Dex tester and we're going to add a connect wallet UI component and this is going to allow a user to connect to our uh application with whatever wallet they looking to connect with and then I'm going to just add this into theore app. TSX file above my components here so I'm just going to add navbar we'll save that and then if I actually run this here so run yarn Dev we'll open this up on 31 here I should have my nav bar up here in the top there we go we have our wallet connected uh you can see here I can switch accounts in everything so we can switch over to let's say this account here there we go we are not connected with that so if we take a look back at our demo one here next thing we're going to do is we're going to create a component for this input here so the input that's going to show us you know we can put in whatever values it's going to show us what token it is what our current balance of that token is and then we can you know set the max amount or uh whatever it is here and then we'll create this little swap button here where we can swap between the two depending on which way we want to swap their tokens so in here I'm going to create a new component so in my file directory create a new component we're going to call this the swap input. TSX and for our swap input here I'm first going to create a type of props and what we're going to provide this component here is one the type which is going to either be native or token so again depending which um input this is going to be for we're going to also get the token symbol we'll make this optional here this is going to be a string we'll get the token balance that will be optional as well because if it's zero we're just going to put zero in and then we're going to get the current which is going to be the string so depending which type it is currently on um Native or token then we're going to create a set value here and we'll set that value to string to void and then we'll set the max here which will be a string and then a value which will be a string as well so we'll export our default function here for our swap input we'll give it our type token symbol our token token balance um our set value all of our props here and then finally in here we're going to say return and we'll provide it a div so I'm just going to create one function here and it is just a truncate function that is going to shorten our values here just to um four decimal places and then we're going to build out our input so within our div here and I'm going to give this div a class name here of styles let me import Styles here so say import Styles uh from uh should be home so Styles we'll say styles do this is going to be our swap input container and in this input container here we're going to create our input field this input field is going to be a number right cuz we're putting in the value of whatever we're swapping uh we'll set the placeholder here to just 0.0 we'll set the value to Value we'll set the onchange we'll set the value to whatever the target value is uh this will be dis disabled uh if the current value is not equal to the type so depending on what it is uh we shouldn't be able to we're only going to allow you to uh enter a value in the top input not the bottom input and finally here we're going to give it a class name and we're going to say styles. swap input and then below that input we're going to create a div here we're going to give this div some styling here we'll just add in just a few styling here we'll add position which is going to be relative or actually sorry this position is going to be absolute we're just going to move it over a little bit so absolute uh top we'll say is 10 pixels and then the right will say 10 pixels as well so this is going to be us positioning the information of the input on the right like what token is it and then the token balance so we'll first display we'll say p uh the token symbol we'll add some styling for that next under that we're going to add the token balance so the balance of whatever the token is so we'll say balance and we're going to display a truncated version of the token balance as a string We'll add some styling onto that and then depending uh if the current form equals the type that we're swapping again only the top um input field is going to have the ability to change the value and we'll also add a Max Button as well which will just change it to the max amount of the equal to the balance of how much of that token they hold so if the current type equals type will show a Max button so a button here that says Max and that button is going to have an onclick here that is going to set the value value to Max as a string um or zero cuz if you have a zero balance it's just going to change it to zero and then we're going to set the class name here to styles. Max button and that is going to be our input field here so we're going to come back to our index. TSX here and we're going to start building out our application and our deck so I'm going to create a div in here this div I'm going to give some styling just some background color and everything here then I'm going to create another div this is going to be the card that our Dex kind of lives in and I'm going to set the let me create the current form from current form so depending on what our current form is we're going to set the the native um and then we'll be able to toggle the direction of our inputs so we'll set it the flex direction as column if they swap it we'll just reverse the column and put the other token up top so the first thing we need to do is add our input so we'll add our swap input here and our swap input we're going to have to provide it with our current which is going to be our current form as a string here we'll provide it with our type so we'll say the default as native we'll set the max here to the ative balance. display value we'll set the value here to the native value as a string or sorry the yeah value will be Set uh as the native value as a string the set value will be set as the set native value the token symbol uh in this case we know we're using madic so I'm just going to set the default to the madic here uh and then token balance is going to be the ative balance as the display value uh then we'll do our other swap so we'll do swap input here this one is going to be for our token so current is going to be uh our current form as a string the type will be token the max is going to be the token balance do display value the value is going to be the token value the set value will be set token value the token symbol will be our symbol that we got and then our token balance is going to be our token balance. display value now in between that swap we're going to have a button that allows you to toggle and switch to two so we're going to add a button here uh which is going to have like a little down arrow so we'll just copy the symbol here um and then we're going to say on click what this is going to do is Swap and set our current form to swap the places of the input so what we can to say here is is going to be if our current oops current form is equal to Native then we're going to set the current form to token or else vice versa we'll set the current form back to Native and if we save that and take a look at our app you can see right over here that we have this input here we have our balance which is showing our Matic we have our token balance which we don't have our token balance for just yet and then oh let me add the styling to this button here we're going to give it a styling of toggle button here and there you go you can see we can toggle now and switch between the two and our token balance isn't showing let's take a look at that uh token symbol here should be symbol as a string and then balance there so if we come back there we go we can see our Shan token now our token symbol is now showing and we can toggle between the two so I don't own any Shan tokens um I do have 05 mtic in this account so if I wanted to swap 0.1 here you can see that in return I would get 998 sha tokens uh if I say 1.5 I will get 1495 Shan tokens and uh if I point 05 you can see that calculates to 499 Shan tokens so we can see our swap is working now we just need to create a button here that is going to actually execute that swap for us so we're going to come back to our code editor here and again we only want that swap button to uh show if someone has a connected wallet because if they don't have a wallet then they shouldn't be able to swap those tokens so we're going to make sure that they have a wallet address connected and if they don't have a wallet address connected we'll just say uh connect a wallet to exchange and then if they do have a wallet connected then we'll just create a div here uh we'll just give it a quick styling of text align uh Center and within this div we're going to create a button and this button is going to depending on our loading state so if we are loading here it's going to say loading if not it'll say Swap and then for our button we're going to have give it a onclick of executing our swap it will be disabled if the swap is loading so if it's executing our swap we shouldn't be able to click the button again and we're going to give it the um sorry this should be uh disabled um and this should be what is this Boolean is not accepted to Boolean or undefined so it adds Boolean here and then our class name will be the swap button styling so now come back to our app we now have this swap button here so if I wanted to swap 05 Matic you see in return I would get Shan tokens so I can hit the execute swap button here we'll see that it is loading we'll get a transaction that comes up you can see here payable I'm going to swap 05 maic we're going to confirm that transaction our transaction here is loading we should get a popup the alert saying that our swap has been successful you can see the values and everything have already changed because again it is calculating those different values uh right there our swap was successful I'll hit okay you can see my madic value went down to 47 and I now Cod 454 uh .1 Shan tokens um again we can swap this around we'll go Max you can see here though in return if I had to swap back uh I would get a much lower value um of madic back here so again you can see here how we can create our very own simple decks uh and we can create our own little application that will allow a user to swap those tokens back and forth so there you have it we built a very simple Dex contract along with a very simple Dex application and if you want links and to see the GitHub repost for this again we'll link those down in the description below but again I hope you folks found some value and you like this video if you did give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on more tutorial videos just like this and if you need any help or support We'll add a link down in the description below where you can open up a support ticket and our support team will be happy to reach out and answer any of your questions but again I hope you folks enjoyed this video and until next time see [Music] [Applause] [Music] you

Channel: thirdweb

Views: 1,399

Keywords:

Id: ktc9hOo3N6U

Length: 55min 48sec (3348 seconds)

Published: Tue Feb 20 2024