The Process of Creating a Functional Unit Swap Deck: A Step-by-Step Guide

To create a functional unit swap deck, we first need to understand what a unit swap deck is and how it works. A unit swap deck is a smart contract that allows users to transfer tokens between different assets. In this tutorial, we will go through the process of creating such a deck using Solidity, a programming language used for creating smart contracts on the Ethereum blockchain.

The first step in creating a unit swap deck is to set up our development environment. We need to make sure that our environment is properly configured with all the necessary dependencies installed. This includes things like Truffle Suite, Ganache, and Remix. Once we have our environment set up, we can start working on our contract.

We start by importing the necessary libraries and creating a new contract class. In this case, we are using the ERC20 token standard for our contract. We then define the variables that will be used in our contract, such as the owner's address, the token symbol, and the amount of tokens to transfer.

Next, we define the functions that will be used to interact with our contract. These include things like the `transfer` function, which allows users to send tokens from one address to another, and the `allowance` function, which allows us to set the allowance for a particular address to use tokens from our contract. We also define a function called `swapTokenToToken`, which will be used to swap tokens between different assets.

The `swapTokenToToken` function takes three parameters: the source token, the destination token, and the amount of tokens to transfer. It first checks if the user has sufficient allowance to make the transfer, and then it generates a big number from the amount and uses that to generate a string that can be used to work with later on.

We also need to add some error handling to our contract. This includes things like checking if the user's address is valid, and catching any errors that may occur during the transfer process.

Once we have finished defining our functions, we can start working on our tests. We write unit tests to ensure that our contract is functioning correctly, and we also write integration tests to test how our contract interacts with other contracts in the blockchain.

After we have finished writing our tests, we need to deploy our contract to the blockchain. This involves using a tool like Truffle Suite to create a deployment script and then running that script on the Ethereum blockchain. Once our contract is deployed, we can start interacting with it.

Finally, we add some functionality to our swap component. We use our `swapTokenToToken` function to generate the receipt for the transaction, and we also update our allowance variable to reflect any changes made during the transfer process.

In this tutorial, we created a fully functional unit swap deck that is able to convert between random ERC20 tokens. We tested our contract thoroughly and deployed it to the blockchain, where we were able to successfully complete swaps between different assets.

One of the most interesting things about this project was the allowance issue. When we clicked on the "Swap" button, it said "Ops insufficient allowance". This meant that we needed to increase the allowance for the user's address to make the transfer. We were able to fix this by going back and checking our contract code, making sure that we had imported the correct libraries and generated the big number correctly.

Another issue we encountered was with API mapping. It said "API map is not a function". This meant that we needed to double check our contract code, making sure that we were using the correct ABI to interface with our contract.

To test our swap functionality, we used our `swapTokenToToken` function to generate the receipt for the transaction. We then clicked on the "Swap" button and confirmed the transaction. Once the transaction was complete, we refreshed our page and saw that the values had been updated correctly.

Overall, this tutorial showed us how to create a fully functional unit swap deck using Solidity and the Ethereum blockchain. It also highlighted some of the common issues that can occur when working with smart contracts, such as allowance issues and API mapping errors. By following these steps and testing our contract thoroughly, we were able to successfully complete swaps between different assets.

In conclusion, creating a unit swap deck is a complex process that requires careful planning and execution. However, with the right tools and knowledge, it is possible to create a fully functional smart contract that can be used to transfer tokens between different assets. In the next tutorial, we will explore more advanced topics in smart contract development and blockchain development.

The Implementation of Tokens Token: A Final Step

To implement our `Tokens Token` function, we first need to import the necessary libraries and define our contract class. We then define the variables that will be used in our contract, such as the owner's address and the amount of tokens to transfer.

Next, we define the `swapTokenToToken` function, which takes three parameters: the source token, the destination token, and the amount of tokens to transfer. It first checks if the user has sufficient allowance to make the transfer, and then it generates a big number from the amount and uses that to generate a string that can be used to work with later on.

We also need to add some error handling to our contract. This includes things like checking if the user's address is valid, and catching any errors that may occur during the transfer process.

Once we have finished defining our functions, we can start working on our tests. We write unit tests to ensure that our contract is functioning correctly, and we also write integration tests to test how our contract interacts with other contracts in the blockchain.

After we have finished writing our tests, we need to deploy our contract to the blockchain. This involves using a tool like Truffle Suite to create a deployment script and then running that script on the Ethereum blockchain. Once our contract is deployed, we can start interacting with it.

Finally, we add some functionality to our swap component. We use our `swapTokenToToken` function to generate the receipt for the transaction, and we also update our allowance variable to reflect any changes made during the transfer process.

In this tutorial, we implemented a fully functional `Tokens Token` contract that is able to convert between different assets. We tested our contract thoroughly and deployed it to the blockchain, where we were able to successfully complete swaps between different assets.

"WEBVTTKind: captionsLanguage: enin this video you're going to be building uni swapcom on the ethereum blockchain using infuria and xjs you will be able to convert your ethereum coins into custom erc20 tokens that we'll be building throughout this video that's uh let's get straight into the video alright ladies and gentlemen welcome back to another build today we are building unit swap as you could see in the title so while you're down there looking at the title go ahead click the first link right below that because that's going to take you to this very page where you're going to go ahead and sign up for inferior after hitting the sign in button you put in your name email you don't put in your name you just put in your email and then you put in a password and then you go ahead click sign up and then verify your email whatever answer those few questions it doesn't really matter it's just for analytics but like you can just select engineer and solo freelancer whatever applies to you and once you're good there you go ahead hit submit and then straight away You're gonna go ahead get started with a project now for Network you want to go ahead and select web3 API the reason is there's a bunch of chains that one particular thing supports and then for name you can put in like whatever I put here a production but like you can just put in even swap whatever once it's done hit submit and go ahead and that that's it that's it that's basically it you're done you're in you're good you're set now they're all your projects which is probably only one and if you already have an account just go ahead sign in and basically you could have skipped in this entire part that's sad let's go ahead and set up metamask okay next up you want to go to metamask.io slash download now once you're there you can just go ahead and click that big blue button that's going to take you to Chrome web store and by the way it does build is only going to be working on Chrome or whatever browser that supports metamask but which is suggests chroma hit add to Chrome go through that yeah advics engine whatever and then once it's done it's going to pop open a brand new website for you which is just like their configure page and if you already have metamask like once again you can just skip ahead a couple of minutes but if you're new click agree and obviously read that we all know that's important and everybody reads that privacy policy is the most important thing you will ever read in your life not legal advice now if you happen to have a new computer you can just import your previous wallet over there but if you are brand new you can just click create new pass in a add a password that is go that you will have to remember again read the terms of use and then create a new wallet now I highly suggest you go ahead and watch that video because that's going to explain to you in thorough details and how you can keep your the 12 phrase mnemonic safe but in short keep it safe because if someone steals it they will have full access to your wallet now quick tip you want to use separate wallets for development and for your own funds and then never share any kind of detail where your money is at and then only share details of wallets that you don't mind they get compromised now here's your security recovery phrase this is the absolute key if it gets lost you're done like for real without exaggeration so keep it a secret with that said though you wouldn't have to go ahead copy this whole thing hit next and then you will have to verify that you have that you can just copy paste it in there and you're good to go now once you hit confirm minimize basically takes that as your confirmation that you are aware of anything everything that I just said and all the terms of use and everything that they prompted you so once you hit all done you're good to go there is your meta mask now one more thing you want to do is because you only have access right now to the ethereum mainnet which obviously is a ton of money and you don't want to use that click that show hide right there scroll down all the way where you can see show test networks turn that thing on and then turn on show conversions on test networks that will basically show the dollar amount of every single ethereum in your wallet which is just a nice touch and then basically they're good now if you scroll back up and then click the selector there are all your test networks now in this build we're going to be using girly so you might as well go ahead and check that off or you might as well go ahead and select that said let's go ahead and get started coding now if you're familiar with us and you know that we have our own CLI tool that makes your life easier and you want to go ahead and to use that you want to type in npx clever program and if you don't have it it will have to install itself I also recommend you add a at latest at the end so that you get the latest version of it and it will get it or it will update itself but regardless just put in your email address and then put in your name and then at the time when we shot this wasn't the latest version but right now we are supporting type search so if you start typing unit swap you it will basically just narrow down the list and you can just hit return select that one so that's going to be something that that's going to help you so anyways it's gonna run a couple of scripts and we'll install the dependencies and everything for you to get started and then open up your vs code in that specific project so you can just sit back relax get over coffee whatever and as you can see on my screen that's what's happening there now I already opened this guy up that is the project that we're going to be building on top of and for you to spin it up I'm just going to zoom in a little bit just so you can see it better what you can do to spin this up is CD into uni swap Dash app CD as in change directory right away and then in there you just type in yarndev npm run Dev or something but I just recommend you use yarn anyways once it's good to go you open the uh you open your localhost up and there is your project that is your starter project that we're going to be building on top of and there you go let's go ahead and start setting things up now to make things extremely easy for you we recommend you use truffle extension in your vs code so you want to go ahead search for truffle for vs code install that guy and basically they have an integration with infuro which we're going to be using today so that's a pretty good one and once you're there open that little truffle icon on the left hand side you can go ahead click that I click create new network and that will and then select inferior service and then you can go ahead click sign up and that will just take you to infuria and once you connected the two Services it will prompt you to select the project name now you can either type it in there or sometimes it like shows it up oh because we actually create you can just create a brand new project so just type in uniswap and that's going to be the new name of the project however if you want to connect it to us to an already existing project you can just hit connect to network instead and then that will show you the drop down which will enable you to select your existing project now once you typed in we recommend you use public just go just for easiness just to make things easier and then there you go there is your project all right for this next step we recommend you start using we recommend you use remix that ethereum ethereum.org which is by the way an online IDE just to create smart contracts and I'm going to slow down a little bit because this is where things are getting a little Advanced and these are things that might be new to you now if you watch a couple of my other tutorials I might be using the vs code extension for this tutorial we're going to be using this so if you want to see a familiar familiar thing on your screen as you see on my screen you might as well use remix IDE in the browser now to generate a new workspace you can either leave it on the default or you can just generate a new one but to generate a new one you can click that little plus icon and then just name it the way you want to template doesn't matter and in your contracts what you can do is right click new file and then just name it uniswap.sol now in this file is where we're going to write most of our contracts so starting off spdx license identifier MIT that you just need it don't question it you just need it if you write MIT there that basically it's an open source license anyone can use it and you don't you're not liable for anything that happens whatever you write in there the more you know now you have to specify the version of solidity you are using I see so many people trip up on this you don't want to mess that up type in 0.8.16 that was the latest one when we shot this tutorial well you will need to import though is something oh something from open Zeppelin now they have template contracts and you're going to be importing the erc20 contract okay and this is basically going to and let's think of it as like a npm package but for solidity we're gonna have two contracts in this file if I'm correct first contract is going to be we're just going to name it custom token and it is going to be child of erc20 so it's going to inherit everything and we're going to have a Constructor in there now that Constructor is going to require two inputs one of them is going to be a name and one of them is going to be a symbol now these are both are going to be strings and then this is going to be you're going to obviously pass that into erc20 because that has a Constructor now erc20 has a underscore mint function built in it it comes with the import so you don't have to import it separately minting requires a few more things minting requires someone a wallet where it's going where all the tokens are going to be minted to and then an amount now what is happening here is we want to Mint a thousand a thousand of those tokens however and this is something that I'm going to say a bunch of times during this tutorial now I've said it many times in solidity the only currency that is accepted and the and the only currency that solidity works with is something called way now that is basically all your first contracts so congratulations you just wrote your first contract that will mean a bunch of erc20 custom tokens into your wallet now you can go ahead close that artifacts thingy if you have Auto compile enabled that just that's just gonna go crazy and it will keep compiling your contract and make sure everything is good to go so as long as that check mark on the left hand side is present you're good and with that said let's start typing up another contract which we will call uni Swap and that will handle all the conversions and everything now that will require another Constructor and inside the Constructor we're just gonna strike start straight away with a for Loop now custom coin that we're going to create in this case coin a coin B coin c we're gonna start from zero and go all the way to go all the ways to tokens dot length now what is tokens yes good question we're gonna figure it out in just a second don't worry about it there it is it is going to be an array of tokens but or it is going to be an array of strings it's basically just the names of every single it's not super creative but it guess there's not job done it like doesn't go all the way down to all the fanciness you can use this you can just rename it you can even call it Coca-Cola if you want to doesn't really matter we just wanted to go with this because it's simpler easier to follow especially if you're a beginner all right so we're going from zero and the max is going to be the length of that array you can put in five ten thousand two thousand three thousand what however many random coins you want to and then just like usual just like in JavaScript you will increment that I variable which is going to be the index now here you're gonna go ahead and create a new instance of custom token you don't have to import anything you don't have to do anything we're just going to create a new instance of it meaning it will invoke The Constructor so you where you're going to see that in action in just a little bit so as you can see we are passing in two items to the Constructor which is tokens I and tokens I it's literally the same thing and if you look back up to line seven on my screen I don't know how like which line is on your screen but on my screen it is line seven it requires two inputs so that's what we are putting in here meaning that the coin name and the coin symbol in this case is going to be the exact same again if you're Advanced you can do some tricks with it but I recommend you just stay with this for now it will get the job done perfectly we want to definitely save this new token that we just created like right now in a mapping and we're going to that up in just a little bit this mapping later on is going to enable you to fetch all these coins way easier than otherwise would be so let's go ahead and set up that mapping so for that we need to use the keyword mapping and it's going to be mapping a it's going to map a string to an erc20 token all right it's going to be public meaning anyone can use it so there's your mapping that we're going to use and then we will set up an eighth value and that's just once again to keep things simple this is a beginner tutorial we're keeping things simple simple if you haven't heard of solidity before you're in a good place so we're going to set up a eth unit eth value which is going to be a uint what is a u n it's a number and again I'm gonna I'm referring about I'm going to refer back to the statement that I made just like a minute ago everything is stored in way so we're going to convert eth unit to weight and if you save this website by the way eth-converter.com that is eat eat that is eth-converter.com that will be helpful for you later on so if you put in any kind of ether value in which case in this case it's going to be 0.000 that is 0.001 yeah I'm not gonna say any of the other numbers just copy that that's going to be your way value that we'll be saving there so that's going to be your base way value save it there it will be useful later on don't worry about it for now just do as is and then it will all come together now if you select that last option on the left hand side now we're going to go ahead and compile and deploy this contract that we just built now I also have Auto compiler enabled so it's automatically compiled but you will have an option to do so if you need to and then there is that big orange deploy button click that and down there on their deployed contracts it should show up and those are the two functions that are available right now and those are coming built in with erc20 and everything and the mapping that we created now little explanation here when you deploy a contract the Constructor runs immediately because in the Constructor we have the for Loop that will immediately deploy all three coins so you don't even have to worry about that and so what you can do is here fetch all the coins that were deployed so if you put in coin a which is just an of the first coin it will return the address of that coin and so that's what you but that's what we just implemented so mappings works like that you gotta pass in and a string and it will return an erc20 address so that's what you see there and then for tokens that is your that is the that is on my screen on in line 13 that is the array so you can fetch each and every single element like that and if you get these results on the left hand side after you deployed your contract congratulations time to move on all right now you have your custom tokens perfect each of them are deployed and minted thousand of each but how do you verify that you need a function that Returns the balance of each coin so I want to go ahead and get started creating a new function inside your second contract and it will call it get balance now this will have two inputs one is the token name and the second is an address what's happening you want to get a balance all right so you need the wallet address which holds potentially that token and that's going to be the address and then you want to get you want to pass in the token name so let's say I have a wallet which has a random address and I have coin B so in that case I will pass in coin b as the first argument and I will pass in my wallet address as the second argument and all I expect to see back is just a number of how many ether or or of how many coin B do I have in my wallet so it's going to be a public function which will return a uint as I said and all it will do is just go through the go to the mapping and then pass in the token name so far all it would do is just return and address however once you got that address you want to call a balance of function and this is something that is coming from erc20 so this is part of the standard and there you're gonna pass in the address so it's going to be my wallet address that's going to go in there so what it will do under the hood it will retrieve one the token address so we'll know that coinb has this and that address and we're gonna check that at that address my wallet address a lot of addresses I know so that that coin address my wallet address how much the balance of that it scrub that so this will return that my wallet that has the second address is that will return the balance of the first coin inside of my wallet so let's go ahead and deploy this new contract and actually you can see all the instances you feel free to like keep removing it but you can keep it that's fine too again the Constructor has run immediately so we're not going to check that but you can pass in coin a right there to check how much coin a in your wallet and then you want to pass in your very own wallet address now you can get that from there from the account because it is not actually connected to your Minimus yet it is remix ID's own built-in environment so it gives you a bunch of like test tools so once you pass that in and hit call I'm gonna pause this for here for a second and you should pause guess how much of the of that coin do I have in my wallet invalid address perfect that's not what you guessed am I right okay that's just because I have all those quotes there so let's just remove it it's an address it's a different data format I know it's annoying I can get around it I make mistakes all the time remove the quotes call it again so there you go past that pass the address in and call it and if you thought and if you guessed zero you're good and with that said let's keep moving all right let's just create a function that will return the coin name every time you pass in the coin name precise so you want to have a function that will return a string and it takes in a string and it will return it the coin's name from the mapping so there you have it you want to type in token instance map token name dot name function and there you go if you go ahead and redeploy the contract and then go ahead test this out and then type in coin a it will return coin a all right so let's build the function that will return the custom coins address so we can fetch a bunch of things with that just by passing in the name so let's do that all right so we're going to get started by just starting a new function we'll call it just get token address or whatever and it will have one input which will be a string and it's going to be token name and then it will return obviously an address and then all we're going to do is just call the address function on the token instance map and then pass in token name so literally we're going to use the mapping that we already have pass in the name and the little return the entire thing and we're just going to we're just going to need the address of that specific contract okay so let's go ahead and deploy that and let's see if that works so if I just type in coin a and then hit that there's my address that's uh working perfectly let's go ahead and get started swapping stuff because this is where like the real deal is going to get started all right now we are going to get started swapping eth to custom coins and this is where the real meaty stuff is happening so you can come back to this if something is unclear all right so let's just go ahead and create a new function it's going to be oh create a new function it's going to be actually a pretty simple one so we're going to call it just swap East to token and it will have one input it's going to be a string that's going to be the token name so basically what's going to happen is you're going to send X amount of eth to the contract and the token name and that's it and then the rest is going to be handled by the contract this is going to be a payable function because we'll need to send money all over the place and it will return a number of how much was actually converted we're going to need to have a couple of variables here we're going to be saving the input value then we're going to be saving the output value which is going to be input value slash each value and if you look up to my line 15 on top of the screen that's where my each value is at and then we're going to need to make it an 18 digit way thing remember that's that's a solidity thing and then we're gonna need we're going to need the requirement here we're gonna need to make sure that the transfer it actually happens all right so we're going to need to transfer from the coin that the user is firing we're going to need to pass a couple hour much we need to basically the output value amount we need to transfer it to the user's account all right so that's how we're calculating the whole thing and so there is and then we just return the output value which will just tell the user hey this is how much you actually got for your money and so there's the value that helps us once again convert between if and the custom token and you're going to decide which token you want to get and then you're just going to pass it turn it into way transfer it over and if that's good you're getting ready to go all right so let's go ahead and actually test this out so I'm going to deploy it and let's see what do we got because of the Constructor I already have access to a bunch of Ethan on all these tokens so those are already there so let's go ahead and use that swap eth token function and so I'm gonna need to type in coin a and put in a value of I don't know two if this is good and if let's see what happened so it says erc20 transfer amount exceeds balance so we're gonna need to increase that and that's because like initially we just started with a couple of coins let's just make it like 10 000 or something so there's like actual balance there all right deploy it again let's try it again passing coin a okay it seems like it worked and now we're just going to go ahead and check the balance now it has two inputs remember you're gonna put in coin a and then uh the wallet that you want to check it on so put in new wallet address and we should get back a pretty interesting number in way but it's going to be a one and a lot of zeros so let's see and there you go works perfectly Works beautifully now we're gonna need to do the swap the other direction you're gonna need to do it from Custom coin to eth as well so let's go ahead and do that now all right let's say you converted too much Ethan you want to convert some back I got you start by creating a new function and that and that will call swap token to eth which will obviously just like last time take in one string that is the token name but this time it will also take in a u-n which will be underscore amount and then this will return once again A U Win now we're going to get started with some quick math and stuff like that so create a new variable if it's going to be exact amount which is going to just convert it to way because well convert it to the 18 18 digit version the currency that you're passing in so that's always useful when you work with solidity and then you want to go ahead create a new variable which is going to be the ether Mount now it's going to be exact amount times The Ether value which is just the conversion value and then and we can get into business now we're going to need to make sure that the current address so meaning the current the contracts built in wallet has enough ease to bet enough ease to transfer over so you want to make sure that balance is greater than or equal to the amount that is that is required and if not just throw an error message and then after that you're going to go ahead and get started actually transferring that money so you want to make it make the message sender address payable and then transfer the required amount now after that you want to make sure at this point that the transfer was successful and then you want to and then last but not least return the amount that was to be that was transferred over now let's go ahead and test this out because there's a couple of things that we haven't discussed just yet but you're gonna find it out real soon so let's go and um do the same step so we're just gonna go ahead convert some teeth and then let's get the address so yeah there we go the ethuke token was successful however let's go ahead and start convert some of that back so yeah let's go with 12 coin A's let's uh let's transact and there you go there's some sort of error now don't worry about it it just says insufficient allowance on the second line at the very end that's something we haven't discussed yet but that's something that we're going to address right now so what you need to do is get the address of the coin like that and then we're gonna go ahead and interact with the coin contract itself as you can see on the screen because as of right now we're only interacting with the decks itself but we need to interact right now with the coin because we're gonna we're gonna need to increase the allowance so so put it put in your wallet address right there okay right there that's going to be your wallet address and now you're going to include increase the amount so that's what we need to specify now and just to make like things easy we're going to approve the entire balance of all the coordinates and then now it should go through so let's go ahead and actually hit transact and as you can see both of them both of the transactions went through and there you go the balance just changed by 12. you can see at the very end it says 88 and a lot of Nines in front of it so that means that our function worked perfectly in this case and just got it done so with that said let's go ahead and now enable the swapping between token custom token and custom token all right so far we have covered two of the three main swapping methods one just for quick refresh one was eth to custom token two was custom token eth now we're gonna need to cover the custom token to custom token so let's say you wanna you have a lot of coin A's but you want some coin B's and you don't want to spend e you just want to convert coin a to coin B that's what's coming up all right so we're gonna go ahead and start up with our trusty function and then it's going to be swap token to token or you can name it whatever but uh we're gonna need two strings as input so there's gonna be Source token name and there's gonna be destination token name and you also want to put in an amount which is going to be a a number now this is going to be once again a public one and we're gonna need to make sure that the source to connect we're going to need to make sure that we take out the amount yeah we take out the amount that is trying to be transferred from The Source wallet and we just store it in the contract and then we're going to transfer over from the central wallet to the user uh themselves so that's something uh liquidity to pull would be in a real life situation but this is going to be like a dumb down easier version of that so and now we're gonna just transfer over a bunch of token b or like destination tokens to the sender so once again lines first line is just taking out the source token from the user's wallet and then second is going to take take the equivalent amount in a different token and then put it back into the user's wallet and that's basically our function so let's go ahead and deploy it and we're going to go ahead and transfer swap some eth2 to coin a and then now we're going to need to increase the balance okay there you go we got the balance now we're going to need to increase the allowance so that's something that we're gonna do and just for simplistic approve for the entire balance let's go ahead and test out our function so coin a to coin B and let's say we just want to try pass over a tenth so what we need to see now is that when we check on coin B's balance in our wallet we're gonna we should see a ten and there you go ladies and gentlemen that is a perfect solution if you see that that's perfect and if not just go back rewind where you can just double check that the function is perfectly written or if you've made mistakes that's that let's go ahead and keep on going now this is just going to be like a quick complimentary function we're just going to go ahead and double check that how much eth is available on the contract so it is going to be an easy actually you should go ahead try it out by yourself there's no input nothing one liner I think so it's like a super easy function Try It Out by yourself pause it now and then if you were able to figure it out good if not it's completely fine too let's keep on going with the solution so it's going to return a uint and what we're going to return is address this dot balance that's it and that should in theory return how much eth is currently stored on our how much it is currently soared on our contracts wallet let's go ahead deploy the new contract and let's see what we've got it'll say zero so that's perfect and if you were to send some in there and convert then it's going to be updated but with that said let's keep on going all right so now we're gonna start using truffle extension inside of our vs code and what you want to do is just copy the entire contract that we just wrote put it on your clipboard command see it and because we're going to be copying it over so in our vs code what we're going to do is go ahead and create a new contracts folder and open up the CLI right there and you want to install truffle so it's going to be a global install if you haven't done that already now is the time and then you want to type in Truffle in it and that will spin up a new truffle project now inside the Truffle project you want to go ahead and type in truffle create contract unit Swap and that will create you a new contract file and that is where you want to go ahead and paste your contract so as you can see definitely you have to make sure that the solidity version is perfect and then just raise the entire contract and there you go now you might be seeing this red underscore under the on the open zaplin package and that's because it hasn't we haven't installed it yet so let's go ahead and fix that so it's your net and then paste at opens up and slash contact and once it's done you want to right click on your on your solidity file and then just hit build contracts now if you do not have Shuffle extension at this point go back in the video I explained it earlier how to install it and how to set it up I'm gonna I'm gonna do it again that is where they set up it so if you're skipping around it's gonna be like somewhere in the beginning so that's where you want to look for it all right let's go ahead and continue so you want to click that and then it's going to build and in the output you can check how that goes you want to see something like successful compiled successfully and then next up you want to hit deploy like right click and deploy and then select girly now we set this up as well and this is uh so don't worry about it just go back and check it out if you haven't done that already now it's asking for gas price leave it empty just hit return on it don't even worry about it and then I'm gonna either paste your mnemonic or if you've already set it up you can just use that configuration and then if you're pasting it it's going to do this and then once you're done it will go ahead and try the blade Howard it's not going to go through it's like you don't see any kind of address on my screen right now and that's because we missed out we completely forgot the migration as file that's something that like we hear a clever programmer every single time that is our signature that we try to deploy and then oh the migrations file so in the migrations folder you want to go ahead and create a new file which will be one underscore deploy and then we'll have to import the unit swap contract so it's going to be artifacts that require any unisplot and then just explore export the deployer and so then you're going to be good to go now try again hit deploy and this time it's gonna go through so let's speed through that real quick and as you can see there is my contract address so you want to go ahead copy that and then go into your unit swap app go into euros and then contracts.js close that output out and then just create a new variable Bowl which will be addressed and just save it there because that's going to be something that that's going to be the thing that we're going to be using now if you want to double check on ether scan currently.etherscan.io paste your address in you're going to see everything that just went through so if you're up to this point congratulations now we're going to go ahead and set up rainbow kit all right so you want to go into your app.js file and we're going to import a bunch of things so just hold on it's going to be Rainbow Dash me slash rainbow kid slash styles.css it's going to be giving us all the Styles and then you're going to copy you're going to import merge from low dash dot merge and then we're gonna this is gonna this is where it's gonna get started this is where it's gonna start to be mental so we're gonna need get default wallets we're gonna need rainbow kit provider we're going to need Dark theme and we're going to need midnight theme actually you can just choose between the two we sometimes just look at it I don't know I prefer Dark theme if you're interested but try out midnight that's like completely black and then the dark is like dark gray so the more you know all these are coming from rainbow kit now really a bunch of things from wag me I believe is what's coming up so let's chain configure chain create client and whack me config all this is coming from wag me and then we're going to import infuro Provider from wagme slash provider slash infuria and that is basically it now up until this point you need to import everything we're going to be using all of it so just pause here for a quick sec but we'll check you have everything and let's keep on going then now we're going to destructure chains and Provider from configure chains and we're going to have two arrays in here so in the first array we're just going to put in chain dot girly that means that this app is only going to be running on the girly chain nothing else is going to work here and then for that we're going to be using the infuria provider where we need to put in an API key now we have it somewhere if you haven't done that already just place it in an EMV file and then you can you don't need you're not you don't actually have to expose it to the browser that's a good thing about it you can just go with inferior API key you don't have to do next next public but as you can see that is how you get your API key so if you haven't done it already now is the time to do and so there you go all right next up we're going to be setting up the connectors for our OLED connection and that's that's going to be using get default wallets from wagme now we need to pass in app name that is going to be uni swap you can pass in whatever and then you're going to need to pass in Chains and then next up we're gonna have a wagme client that will use create client and we're gonna need to pass in a couple things here so we're gonna need to pass in autoconnect you can either set it to true or false I prefer to be truth true but for this build we just use false for whatever reason and then you want to pass in connectors and the provider and with that all the setup is ready and then one last thing to set up is going to be we're going to make sure we're going to create a my theme which will merge midnight theme and we're going to override a couple of colors so we're going to say we're going to have an accent color of that and this is like completely optional this is just elements so there you have it extended call Extended color foreground accent color and now we're going to wrap our app in between wagmeconfig and where we're going to need to pass in Wagner client is it's like context these are like contexts for our app to be able to access this and then we're going to import the or we're going to wrap the rainbow kit provider with the chains and the theme and then just and then just pass in and then just pass in the app and that is basically it now we're going to go ahead and actually render the connect button to our screen all right let's actually go ahead and render out that connect button and so this is going to be a quick one what you want to do is go into your header file inside your components folder and then go ahead and import connect button from rainbow kit just like that and then we already as you can see we have it commented out that's the place where you want to put it in as a component so that's literally all we do once that's there it's going to show up on the top right corner and now let's actually check it out so there you go literally pre-set up buy rainbow kit so you can already use it and once you hit I'm going to mask it's going to work perfectly so that's it all right let's go ahead and set up all the contract Builders so we're going to be importing a couple of things here so first of all we're gonna need ethers then we're going to need unit spot ABI from utils slash uniswap API yeah uniswap.json and then we're going to do the exact same for the custom token these are coming with the build all right now next up we're gonna we're gonna need two functions that will immediately straight away going to export so let's not waste any time on that at first we're gonna have a token contract that we're gonna export and that'll take in an address and then we're going to you we're going to generate a provider using ethers the providers.web 3 provider and that and using the window ethereum and what is window ethereum that's basically the code that is being injected by metamask now next up we're going to use that that we're just going to go ahead and destructure ethereum from that from window and if it actually exists meaning the user has installed metamask we're going to use that to generate first a science so we're gonna we're gonna say provider.getcenter and all these are going to be like this is gonna be this is a lot of like setup and prep and whatever but this is ultimately going to be like completely needed in order to be able to interact with the contract all right so we're gonna join the contract reader and it's going to use it's going to be new ethers.contract and passing dress contract ABI and the signer itself and then just return that bad boy and that's pretty much the first one now we're going to repeat this exact same process for for the unit swap contract itself so the decks so the first two lines are copy paste immediately if statement copy paste and the only two things that are going to change are going to be the the address because that's there's only one address in this scenario and that's going to be the Dax address and then which ABI are we actually are we passing it so in this case it's going to be the uni swap baby Island API and then we're just passing the same same signer that we created up above and then return the contract reader so that's pretty much it now we're going to set up a couple more helper functions and then actually put things into motion alright so these are going to be two functions that we're going to be setting up just so we can convert between eth or ether and way so we're going to import ethers from ethers and then we're gonna use that to set up two functions so there's we're going to have one function that will be two way and that will take in an amount and then that will take into decimals but default value is going to be 18 and then con we're just going to say cause two-way ether.utos.parse units and that's just something that like comes from ethers and I'm passing the amount and I'm passing decimals and then we're just going to return that now as a and then we're just going to return that as a string that is the first one and then the second one I'll let you try figure it out by yourself but it's going to be on the same analogy the only difference we're going to be passing in way here and then we're gonna need eth so I'm gonna go ahead and continue now so we're gonna say it's gonna be two eth and once again we're gonna pass in an amount decimals it's gonna be 18 usual utils.forement units and then we're gonna say we're gonna go to eat same we're gonna type the exact same thing all right that being said we are actually going to go ahead and start implementing the each coin functionality all right so let's actually let's like finally actually swap from E3 or custom tokens that we have worked so hard for all right so you want to go into your queries.js file and then import a couple of things so big number in ethers from ethers first of all and then you want to import contract and token contract from the from the contract file that we set up earlier so that's the like contract interaction interfaces functions I don't remember it though completely but that's what's basically going to allow you to actually interface with your contract and then next up we're going to import to eat and two-way so the other two helper functions that we just created and so here we're going to have the swap to eat function which will require a token name and amount and as I always say use try catch functions error console let the error out and then we're going to convert the amount to way because once again it's already only works with weight we're going to use the contract function that we set up earlier to generate a contract object for Unison for us and then we're going to use that to actually handle the transaction itself so we're going to say contractobject.swapes to token and pass in token name and TX which is the way amount of the eth amount the user passed in and then we're going to go ahead and generate a receipt by waiting for that data and then return it once it's done so that's basically it for that file now you want to go ahead and go over the swap component and scroll down to wherever you see functions for contract functionality here and then you want to put in create a new function that'll heavily rely on our setup for of the front end so we're going to create a perform swap function that's going to be an async function and we're gonna before we do anything set transactional pending true all right and then we're going to go ahead and generate a receipt we're going to go ahead and start create a new create a new variable that we're going to call receipt and then using everything that we set up earlier just type in the if Source token equals eth and destination token token doesn't equal either and you would just want to invoke and you want to wait for the swap if the token function and then put in destination token and input value and like I said this whole thing is heavily relying on the front and we already set up for your convenience now you definitely want to make sure that a function is actually getting called so we're gonna create a new function that we'll call handle swap it's actually on my screen in on line 73. there was a little bit of scrolling so I just wanted to help you out with that now here it's a little repetitive but we're just gonna double check that everything is good to go there and then call the function once the once everything is ready now my screen on line 140 where you're gonna pass in that function and what that basically does is that will fire up this function and whenever you hit the swap button which you currently cannot see because the wallet is not connected to the app but I'm going to show you just now let's go to this app put in a value there and then we're gonna need to select uh tokens that's going to be coin a and you're going to connect your wallet so that's something you gotta do and then it didn't turn blue so there is some sort of error going on here let's let's actually go ahead and figure that out now as you can see on line 16 we have imported use account from wagme and that basically I'm just going to help us that's just going to help us to check whether well that has been ink is connected or not so just update it on line 61 and you're just gonna restructure address from use account and that itself is going to take care of this whole things the wallet is connected and then there you go now there's your swap button and then confirm that transaction speed it up a little bit because that never hurt and there you go you can try it with another amount and it's going to work perfectly again so there it is that is your function now we're going to go ahead and fetch balances of each token render them out on the screen all right ladies and Gentlemen let's go ahead and fetch those balances that's going to be a little bit of a longer thing but yeah that's so that's where it's going to go now you want to go into your header file because everything is going to happen in our header and we're going to import a few things so start with use account from wagme and then we're going to import token balance from token balance and then we're gonna create a new use state which is going to be token balance and it's going to start out as a completely complete nothingness now you want to extract address from the structure address from use account and then we're just going to go ahead and kick things off with a use effect which we're gonna fire off every single time once the address changes that is important because if you connect a different wallet to the app you want to see the updated balances inside that wallet and not the previous one so this is super important now we're going to go ahead and uh our we're going to update the use date with a bunch of jsx code in there so we're going to use the token balance component and pass in coin a and then the wallet address so we're going to repeat this a couple of times so like we because we have three custom coins we're gonna either do this three times and by the way those um coin names are going to be strings so you want to make sure you have Queen ABC and then three times the wallet address as as in the address next up you want to have a an if statement and make sure that it and if the wallet any of the user haven't connected their bullets then you want to put you want to punch out a little bit of a notification for them so we're gonna go ahead and set that up right now so that's going to be a toast wallet and it's just going to be like a toast air and we're gonna be like yo connect your wallet or something like that it's going to be there for two seconds and that's basically how it's gonna look like you can see it on the right okay so we just connected our wallet and now you're gonna go ahead and we actually have to render those components out so render out just put the token balance component and render it out right there but throw some sort of error okay so let's actually go into that token balance component let's see what's going on in there so we're going to need to create a couple things we're going to need to have a balance use State and we're gonna need to have a copy icon used it so there's a few things that we need to specify here and that will just be a icon that we already imported for you so that's going to be clipboard icon and then we're gonna we're gonna have separate we're gonna have multiple States we're going to have a transaction pending and we're gonna have a not not pending and we're just gonna kick them off based on whatever uh whatever is suitable for the situation and then you also want to have a token address over there and by the way the balance is going to start out as an as like a dash string basically all right now we're gonna have two notifiers set up so that one is going to be an error and this is going to be like a toaster just like the one before but this time it's gonna go for six seconds and that's by the way in milliseconds so that's why it's six thousand and then we're gonna have a success message or like a success host where we're going to say transaction complete and I mean you can go ahead and set up a duration for that too honestly so go ahead create a new function which is going to be fetch token balance and that's going to be and then we're just gonna kick things off with invoking the get token balance function which we imported earlier which we're gonna set up in a little bit and you're going to need to pass in a name and wallet address for that and then we're going to also need to format the balance and then set that balance or set the formatted balance to the state itself out so there's going to be that's how it's going to look like in in a little bit that's the that's the component that we're going to make a and we're gonna have that we're gonna have to make we're gonna have to fill up with the good data all right so going to record is the JS file and we're gonna go ahead and set up get tokenbalance function and so we're gonna need to call the contract there so we're gonna need to set up the contact object and just like before use the get balance function from a method from the contract balance and then create a new variable and then return it and that should basically get it every single time and then you're gonna need another one which which is going to be get token address and once again just go ahead try it out by yourself like every single time we create a new function I want you to go ahead from now on because it's going to be a lot of repetition so try it out by yourself and see if it works and then just come back for the solution so try catch console log the error out and then we're gonna create the usual contract object and then the usual way just call on the get token address font method now everything that we just created we're going to go ahead and now import from from that file so get token address and get token balance and then we're also going to set up a new function which is going to be fetching which is going to use the get token address function that we just set up so it's going to be fetch token.s it's going to be an async function use that and then whatever that thing returns we're going to set it to the state and then we're going to go ahead set up a use effect that will run again and again whenever name and the wallet address changes and if both of them exist then we're gonna fetch the token balances and then we're also going to fetch the token addresses and if that even if they and if not either of them don't exist we're just gonna set everything back to their normal regular or like the initial value and then it says ethers doesn't exist so let's go ahead fix that import ethers from ethers and that should be good pretty much now if you scroll down on my screen it's line 40 but in your screen but on your page it might be something different so just check out where it's at we have a hardcodone balance there but we should go ahead and now fix that so let's see what happens there and there you go ladies and gentlemen as you can see our previous two swaps were successful because you can see the 30 coin a and the 20 coin B transactions that would fit there so that's basically it now we're gonna go ahead and display a success toast whenever the transaction succeeds all right let's just go ahead and set it up so go back to your swap component and as you can see we already set everything up for Success so now we're just gonna invoke everything so go down to your go to your perform swap function we should have set the set transaction pending state to false once it's done and then if the transaction results in your receipt and that result and that receipt doesn't have a transaction hash property then you want to go ahead and notify errors I've hired that off and then pass in receipt so everybody knows what's happening else just notify success and that should basically be pretty successful so let's go ahead and test it out so let's do some transactions over there hit confirm and let's see what do we got let's see if it works let's speed that bad boy up and any moment now and there you go there is your host message and also as you can see on the right hand side once I connect my wallet coin c oh coinb now has 60 so the transaction definitely went through and now we have proven that it did go through all right let's go ahead and now set up the swapping from token or like from Custom erc20 token to eth so what we're going to be doing here is uh first of all close out everything we're not we don't need a bunch of things go into your queries the JS file and we're gonna set up two functions but let's start with the first one now so that's going to be swap token to eat now it's going to be an async function that takes in token name and amount and we're just going to do the usual try catch console log area create your contract object and then what we're going to do is use that contract object to swap token two if basically call that function of the contract so we're going to pass in the usual stuff to the way converted amount of the amount you want to convert and then the token name now it's going to be the same thing whenever the receipt shows up wait for it and then return the receipt now as you remember we're going to need to pre-approve the amount to be transferred so let's do that now it's going to be the second function so that's going to be increase allowance and so once again we're gonna have oh we're gonna pass in the token name and the amount and then we're gonna do the usual try catch console log the error and there's going to be a little bit of a trick here now so I want you to listen closely so we're going to Fat what we're going to do is we're going to determine the address of the uh specific coin that we're going to need and then we're going to use that address to generate a new contract object and we're going to use that to increase the allowance all right so there's going to be two contract objects here and both we're going to be interacting with two contracts in the same function so that's how let's continue so we're going to use the uni swap contract to get the address of the custom tokens we're going to pass in token name and then we're gonna go ahead and generate a token contract object using that address that we just generated so that we can increase the allowance and so we're going to do that right now so using that we're going to go ahead and say called approve and so what's happening now is the approved function Works in a way where you pass in who can who can interact with this or who can interact with this coin and how much are you allowing them to interact with this coin so we're going to need to pass in two things one of them is going to be the unit swap address and the other one is going to be the way amount of the amount or like the weight converted amount of the amount you want to convert and with that being said we're pretty much good to go here all right now let's actually connect this with our front end so we're gonna go into our swap component and then in the perform swap function there is that if statement so you're gonna add a else Clause after it so we're going to say else if if the source token is not if but the destination token is this is what we want to do so now we're going to generate the receipt based on that and we're going to call these swap token to eth function and now we're going to create the increase allowance function so let's go ahead and do that so transaction pending has to be true and then we're gonna use the function that we just built and then invoked it and invoking and then pass in Source token and input value and after that once it's good to go might as well turn off the loading screen and so inside of handle swap I'm going to turn on the loading screen again and then you want to check whether the wallet has some sort of allowance on the source token for the amount that you are trying to convert back to each oh there's a there's in there I'm gonna make it async okay that's fine and after that we're good with loading so let's actually move that and then if the result is valid and actually called the perform swap perform swap function and if if not if if the user doesn't have allowance now we get a call the handle increase handle insufficient allowance function and to do that what we're going to do like we we already set that up ahead of time now we're going to just switch out the swap button to a different button and so let's go ahead and do that that's on my screen that's line 162 and then there is a swap button text whether if it's your increase allowance or not and if it is then we're going to call the handle increase allowance function now let's go ahead and try it out let's see how this actually works so we're going to turn some we're going to use 20 coin A's and then swap back into eth and let's see what happens there's some interesting things going on around in the background so that's something so we apparently don't really have the has wallet allowance function but that's completely fine because we're gonna go ahead and build it now let's see what can we do here so we're going to pass an owner we're going to need the token name and the amount and we're going to use the usual try catch console log the error that's fine and then we're going to use the uniswap contract to generate our contract object and then we're going to have an address obviously once again we've got to fetch the token address to get everything and then using the using the token contracts we're going to double check the allowance so we're gonna we're literally just gonna fetch it so we're gonna pass an owner and we're gonna pass that as in the uni swap address and then we're going to convert it into a like a regular human number so we're gonna say that's a bunch of things going on there so basically what's happening is we're gonna get the way amount and then generate a big number from it and then we're going to use that to generate a string that we'll be able to work with later on so just go ahead copy that and then let's feel free to spend some time understanding what is happening there and then now we're gonna go ahead and return the result and also export the function because we need to use it in our swap component so let's go ahead and try it out again so if we click swap it says Ops insufficient allowance we're going to need to increase it so we're going to go ahead click that okay there's some interesting things happening here again so it says API that map is not a function we might have made a mistake earlier on yeah there it is so you want to double check that every single time when you are generating a contract contract reader you say you import the Json and then dot ABI and that's what you're trying to interface with because there's a bunch of stuff that you don't need so let's go ahead test this out again so refresh real quick connect your wallet and to say 30 okay insufficient allowance we've seen that and there you go give access let's wait for it to go through speed it up if we need to and then fresh real quick connect Google it again and then now it says Swap and if you click it you're gonna approve the transaction itself not the allowance so we should be pretty much good to go soon so let's see how that goes perfect it says transaction completed so technically we should be good let's just refresh real quick so connect that and now you see that the values have been updated so that's basically it now we're just going to implement tokens token and we're good to go all right so to make this work we're gonna need to go into our queries.js file and it's going to be super simple it's going to be super fast so just create a new function swap token to token as in Source token and destination token and amount and the usual try catch console log the error because that's usually helpful to see what went wrong and now you're going to generate the contract object as usual you can once again try it by yourself but if it doesn't if you're not that experienced that's fine too which is going to be basically the response of the swept function and then just pass in everything that we got obviously make sure you convert the amount to weight and next up you want to go ahead generate the receipt and return it now if you don't export the function it's not going to work elsewhere so go back to your swap component after you've done that and of uh perform swaps next statement you want to have an else clause which has no other conditions basically it just in the first two we made sure that everything is accounted for so now this is the only option to do or the only option to have and now what you want to do is generate the local receipt for that or update the receipt update the receipt variable for that and then call the swap token the token function from the file that we just from the queries file pass in everything that function is go ahead and see what do we need so everything should be ready to go pretty much so let's see what we got let's turn 30 coin A's and just swap them over to coin B let's see if that works so let's hit Swap and okay we gotta increase the allowance that's perfect that's fine okay hit confirm let's see if it works and we can just speed it up see if it's to go and after after that's done we can actually go at now that we have the allowance we can now actually go ahead and do the swap and once you confirm the transaction it should go through pretty fast transaction completed and there you go there you have it your coin a and coin B is updated so ladies and gentlemen that is it it is a fully functional unit swap Decks that is able to convert between random erc20 tokens use them you can literally actually factually use this and you can transfer your eth into custom coins and your custom coins back to eth and then custom coins between custom coins and then all that kind of stuff so you can have basically your own trading bot I'm not saying you should be doing that but with a little enhancement you can automate that stuff so there you go that's that's pretty much it and I hope you got some value out of this tutorial and with that said I'll see you in the next onein this video you're going to be building uni swapcom on the ethereum blockchain using infuria and xjs you will be able to convert your ethereum coins into custom erc20 tokens that we'll be building throughout this video that's uh let's get straight into the video alright ladies and gentlemen welcome back to another build today we are building unit swap as you could see in the title so while you're down there looking at the title go ahead click the first link right below that because that's going to take you to this very page where you're going to go ahead and sign up for inferior after hitting the sign in button you put in your name email you don't put in your name you just put in your email and then you put in a password and then you go ahead click sign up and then verify your email whatever answer those few questions it doesn't really matter it's just for analytics but like you can just select engineer and solo freelancer whatever applies to you and once you're good there you go ahead hit submit and then straight away You're gonna go ahead get started with a project now for Network you want to go ahead and select web3 API the reason is there's a bunch of chains that one particular thing supports and then for name you can put in like whatever I put here a production but like you can just put in even swap whatever once it's done hit submit and go ahead and that that's it that's it that's basically it you're done you're in you're good you're set now they're all your projects which is probably only one and if you already have an account just go ahead sign in and basically you could have skipped in this entire part that's sad let's go ahead and set up metamask okay next up you want to go to metamask.io slash download now once you're there you can just go ahead and click that big blue button that's going to take you to Chrome web store and by the way it does build is only going to be working on Chrome or whatever browser that supports metamask but which is suggests chroma hit add to Chrome go through that yeah advics engine whatever and then once it's done it's going to pop open a brand new website for you which is just like their configure page and if you already have metamask like once again you can just skip ahead a couple of minutes but if you're new click agree and obviously read that we all know that's important and everybody reads that privacy policy is the most important thing you will ever read in your life not legal advice now if you happen to have a new computer you can just import your previous wallet over there but if you are brand new you can just click create new pass in a add a password that is go that you will have to remember again read the terms of use and then create a new wallet now I highly suggest you go ahead and watch that video because that's going to explain to you in thorough details and how you can keep your the 12 phrase mnemonic safe but in short keep it safe because if someone steals it they will have full access to your wallet now quick tip you want to use separate wallets for development and for your own funds and then never share any kind of detail where your money is at and then only share details of wallets that you don't mind they get compromised now here's your security recovery phrase this is the absolute key if it gets lost you're done like for real without exaggeration so keep it a secret with that said though you wouldn't have to go ahead copy this whole thing hit next and then you will have to verify that you have that you can just copy paste it in there and you're good to go now once you hit confirm minimize basically takes that as your confirmation that you are aware of anything everything that I just said and all the terms of use and everything that they prompted you so once you hit all done you're good to go there is your meta mask now one more thing you want to do is because you only have access right now to the ethereum mainnet which obviously is a ton of money and you don't want to use that click that show hide right there scroll down all the way where you can see show test networks turn that thing on and then turn on show conversions on test networks that will basically show the dollar amount of every single ethereum in your wallet which is just a nice touch and then basically they're good now if you scroll back up and then click the selector there are all your test networks now in this build we're going to be using girly so you might as well go ahead and check that off or you might as well go ahead and select that said let's go ahead and get started coding now if you're familiar with us and you know that we have our own CLI tool that makes your life easier and you want to go ahead and to use that you want to type in npx clever program and if you don't have it it will have to install itself I also recommend you add a at latest at the end so that you get the latest version of it and it will get it or it will update itself but regardless just put in your email address and then put in your name and then at the time when we shot this wasn't the latest version but right now we are supporting type search so if you start typing unit swap you it will basically just narrow down the list and you can just hit return select that one so that's going to be something that that's going to help you so anyways it's gonna run a couple of scripts and we'll install the dependencies and everything for you to get started and then open up your vs code in that specific project so you can just sit back relax get over coffee whatever and as you can see on my screen that's what's happening there now I already opened this guy up that is the project that we're going to be building on top of and for you to spin it up I'm just going to zoom in a little bit just so you can see it better what you can do to spin this up is CD into uni swap Dash app CD as in change directory right away and then in there you just type in yarndev npm run Dev or something but I just recommend you use yarn anyways once it's good to go you open the uh you open your localhost up and there is your project that is your starter project that we're going to be building on top of and there you go let's go ahead and start setting things up now to make things extremely easy for you we recommend you use truffle extension in your vs code so you want to go ahead search for truffle for vs code install that guy and basically they have an integration with infuro which we're going to be using today so that's a pretty good one and once you're there open that little truffle icon on the left hand side you can go ahead click that I click create new network and that will and then select inferior service and then you can go ahead click sign up and that will just take you to infuria and once you connected the two Services it will prompt you to select the project name now you can either type it in there or sometimes it like shows it up oh because we actually create you can just create a brand new project so just type in uniswap and that's going to be the new name of the project however if you want to connect it to us to an already existing project you can just hit connect to network instead and then that will show you the drop down which will enable you to select your existing project now once you typed in we recommend you use public just go just for easiness just to make things easier and then there you go there is your project all right for this next step we recommend you start using we recommend you use remix that ethereum ethereum.org which is by the way an online IDE just to create smart contracts and I'm going to slow down a little bit because this is where things are getting a little Advanced and these are things that might be new to you now if you watch a couple of my other tutorials I might be using the vs code extension for this tutorial we're going to be using this so if you want to see a familiar familiar thing on your screen as you see on my screen you might as well use remix IDE in the browser now to generate a new workspace you can either leave it on the default or you can just generate a new one but to generate a new one you can click that little plus icon and then just name it the way you want to template doesn't matter and in your contracts what you can do is right click new file and then just name it uniswap.sol now in this file is where we're going to write most of our contracts so starting off spdx license identifier MIT that you just need it don't question it you just need it if you write MIT there that basically it's an open source license anyone can use it and you don't you're not liable for anything that happens whatever you write in there the more you know now you have to specify the version of solidity you are using I see so many people trip up on this you don't want to mess that up type in 0.8.16 that was the latest one when we shot this tutorial well you will need to import though is something oh something from open Zeppelin now they have template contracts and you're going to be importing the erc20 contract okay and this is basically going to and let's think of it as like a npm package but for solidity we're gonna have two contracts in this file if I'm correct first contract is going to be we're just going to name it custom token and it is going to be child of erc20 so it's going to inherit everything and we're going to have a Constructor in there now that Constructor is going to require two inputs one of them is going to be a name and one of them is going to be a symbol now these are both are going to be strings and then this is going to be you're going to obviously pass that into erc20 because that has a Constructor now erc20 has a underscore mint function built in it it comes with the import so you don't have to import it separately minting requires a few more things minting requires someone a wallet where it's going where all the tokens are going to be minted to and then an amount now what is happening here is we want to Mint a thousand a thousand of those tokens however and this is something that I'm going to say a bunch of times during this tutorial now I've said it many times in solidity the only currency that is accepted and the and the only currency that solidity works with is something called way now that is basically all your first contracts so congratulations you just wrote your first contract that will mean a bunch of erc20 custom tokens into your wallet now you can go ahead close that artifacts thingy if you have Auto compile enabled that just that's just gonna go crazy and it will keep compiling your contract and make sure everything is good to go so as long as that check mark on the left hand side is present you're good and with that said let's start typing up another contract which we will call uni Swap and that will handle all the conversions and everything now that will require another Constructor and inside the Constructor we're just gonna strike start straight away with a for Loop now custom coin that we're going to create in this case coin a coin B coin c we're gonna start from zero and go all the way to go all the ways to tokens dot length now what is tokens yes good question we're gonna figure it out in just a second don't worry about it there it is it is going to be an array of tokens but or it is going to be an array of strings it's basically just the names of every single it's not super creative but it guess there's not job done it like doesn't go all the way down to all the fanciness you can use this you can just rename it you can even call it Coca-Cola if you want to doesn't really matter we just wanted to go with this because it's simpler easier to follow especially if you're a beginner all right so we're going from zero and the max is going to be the length of that array you can put in five ten thousand two thousand three thousand what however many random coins you want to and then just like usual just like in JavaScript you will increment that I variable which is going to be the index now here you're gonna go ahead and create a new instance of custom token you don't have to import anything you don't have to do anything we're just going to create a new instance of it meaning it will invoke The Constructor so you where you're going to see that in action in just a little bit so as you can see we are passing in two items to the Constructor which is tokens I and tokens I it's literally the same thing and if you look back up to line seven on my screen I don't know how like which line is on your screen but on my screen it is line seven it requires two inputs so that's what we are putting in here meaning that the coin name and the coin symbol in this case is going to be the exact same again if you're Advanced you can do some tricks with it but I recommend you just stay with this for now it will get the job done perfectly we want to definitely save this new token that we just created like right now in a mapping and we're going to that up in just a little bit this mapping later on is going to enable you to fetch all these coins way easier than otherwise would be so let's go ahead and set up that mapping so for that we need to use the keyword mapping and it's going to be mapping a it's going to map a string to an erc20 token all right it's going to be public meaning anyone can use it so there's your mapping that we're going to use and then we will set up an eighth value and that's just once again to keep things simple this is a beginner tutorial we're keeping things simple simple if you haven't heard of solidity before you're in a good place so we're going to set up a eth unit eth value which is going to be a uint what is a u n it's a number and again I'm gonna I'm referring about I'm going to refer back to the statement that I made just like a minute ago everything is stored in way so we're going to convert eth unit to weight and if you save this website by the way eth-converter.com that is eat eat that is eth-converter.com that will be helpful for you later on so if you put in any kind of ether value in which case in this case it's going to be 0.000 that is 0.001 yeah I'm not gonna say any of the other numbers just copy that that's going to be your way value that we'll be saving there so that's going to be your base way value save it there it will be useful later on don't worry about it for now just do as is and then it will all come together now if you select that last option on the left hand side now we're going to go ahead and compile and deploy this contract that we just built now I also have Auto compiler enabled so it's automatically compiled but you will have an option to do so if you need to and then there is that big orange deploy button click that and down there on their deployed contracts it should show up and those are the two functions that are available right now and those are coming built in with erc20 and everything and the mapping that we created now little explanation here when you deploy a contract the Constructor runs immediately because in the Constructor we have the for Loop that will immediately deploy all three coins so you don't even have to worry about that and so what you can do is here fetch all the coins that were deployed so if you put in coin a which is just an of the first coin it will return the address of that coin and so that's what you but that's what we just implemented so mappings works like that you gotta pass in and a string and it will return an erc20 address so that's what you see there and then for tokens that is your that is the that is on my screen on in line 13 that is the array so you can fetch each and every single element like that and if you get these results on the left hand side after you deployed your contract congratulations time to move on all right now you have your custom tokens perfect each of them are deployed and minted thousand of each but how do you verify that you need a function that Returns the balance of each coin so I want to go ahead and get started creating a new function inside your second contract and it will call it get balance now this will have two inputs one is the token name and the second is an address what's happening you want to get a balance all right so you need the wallet address which holds potentially that token and that's going to be the address and then you want to get you want to pass in the token name so let's say I have a wallet which has a random address and I have coin B so in that case I will pass in coin b as the first argument and I will pass in my wallet address as the second argument and all I expect to see back is just a number of how many ether or or of how many coin B do I have in my wallet so it's going to be a public function which will return a uint as I said and all it will do is just go through the go to the mapping and then pass in the token name so far all it would do is just return and address however once you got that address you want to call a balance of function and this is something that is coming from erc20 so this is part of the standard and there you're gonna pass in the address so it's going to be my wallet address that's going to go in there so what it will do under the hood it will retrieve one the token address so we'll know that coinb has this and that address and we're gonna check that at that address my wallet address a lot of addresses I know so that that coin address my wallet address how much the balance of that it scrub that so this will return that my wallet that has the second address is that will return the balance of the first coin inside of my wallet so let's go ahead and deploy this new contract and actually you can see all the instances you feel free to like keep removing it but you can keep it that's fine too again the Constructor has run immediately so we're not going to check that but you can pass in coin a right there to check how much coin a in your wallet and then you want to pass in your very own wallet address now you can get that from there from the account because it is not actually connected to your Minimus yet it is remix ID's own built-in environment so it gives you a bunch of like test tools so once you pass that in and hit call I'm gonna pause this for here for a second and you should pause guess how much of the of that coin do I have in my wallet invalid address perfect that's not what you guessed am I right okay that's just because I have all those quotes there so let's just remove it it's an address it's a different data format I know it's annoying I can get around it I make mistakes all the time remove the quotes call it again so there you go past that pass the address in and call it and if you thought and if you guessed zero you're good and with that said let's keep moving all right let's just create a function that will return the coin name every time you pass in the coin name precise so you want to have a function that will return a string and it takes in a string and it will return it the coin's name from the mapping so there you have it you want to type in token instance map token name dot name function and there you go if you go ahead and redeploy the contract and then go ahead test this out and then type in coin a it will return coin a all right so let's build the function that will return the custom coins address so we can fetch a bunch of things with that just by passing in the name so let's do that all right so we're going to get started by just starting a new function we'll call it just get token address or whatever and it will have one input which will be a string and it's going to be token name and then it will return obviously an address and then all we're going to do is just call the address function on the token instance map and then pass in token name so literally we're going to use the mapping that we already have pass in the name and the little return the entire thing and we're just going to we're just going to need the address of that specific contract okay so let's go ahead and deploy that and let's see if that works so if I just type in coin a and then hit that there's my address that's uh working perfectly let's go ahead and get started swapping stuff because this is where like the real deal is going to get started all right now we are going to get started swapping eth to custom coins and this is where the real meaty stuff is happening so you can come back to this if something is unclear all right so let's just go ahead and create a new function it's going to be oh create a new function it's going to be actually a pretty simple one so we're going to call it just swap East to token and it will have one input it's going to be a string that's going to be the token name so basically what's going to happen is you're going to send X amount of eth to the contract and the token name and that's it and then the rest is going to be handled by the contract this is going to be a payable function because we'll need to send money all over the place and it will return a number of how much was actually converted we're going to need to have a couple of variables here we're going to be saving the input value then we're going to be saving the output value which is going to be input value slash each value and if you look up to my line 15 on top of the screen that's where my each value is at and then we're going to need to make it an 18 digit way thing remember that's that's a solidity thing and then we're gonna need we're going to need the requirement here we're gonna need to make sure that the transfer it actually happens all right so we're going to need to transfer from the coin that the user is firing we're going to need to pass a couple hour much we need to basically the output value amount we need to transfer it to the user's account all right so that's how we're calculating the whole thing and so there is and then we just return the output value which will just tell the user hey this is how much you actually got for your money and so there's the value that helps us once again convert between if and the custom token and you're going to decide which token you want to get and then you're just going to pass it turn it into way transfer it over and if that's good you're getting ready to go all right so let's go ahead and actually test this out so I'm going to deploy it and let's see what do we got because of the Constructor I already have access to a bunch of Ethan on all these tokens so those are already there so let's go ahead and use that swap eth token function and so I'm gonna need to type in coin a and put in a value of I don't know two if this is good and if let's see what happened so it says erc20 transfer amount exceeds balance so we're gonna need to increase that and that's because like initially we just started with a couple of coins let's just make it like 10 000 or something so there's like actual balance there all right deploy it again let's try it again passing coin a okay it seems like it worked and now we're just going to go ahead and check the balance now it has two inputs remember you're gonna put in coin a and then uh the wallet that you want to check it on so put in new wallet address and we should get back a pretty interesting number in way but it's going to be a one and a lot of zeros so let's see and there you go works perfectly Works beautifully now we're gonna need to do the swap the other direction you're gonna need to do it from Custom coin to eth as well so let's go ahead and do that now all right let's say you converted too much Ethan you want to convert some back I got you start by creating a new function and that and that will call swap token to eth which will obviously just like last time take in one string that is the token name but this time it will also take in a u-n which will be underscore amount and then this will return once again A U Win now we're going to get started with some quick math and stuff like that so create a new variable if it's going to be exact amount which is going to just convert it to way because well convert it to the 18 18 digit version the currency that you're passing in so that's always useful when you work with solidity and then you want to go ahead create a new variable which is going to be the ether Mount now it's going to be exact amount times The Ether value which is just the conversion value and then and we can get into business now we're going to need to make sure that the current address so meaning the current the contracts built in wallet has enough ease to bet enough ease to transfer over so you want to make sure that balance is greater than or equal to the amount that is that is required and if not just throw an error message and then after that you're going to go ahead and get started actually transferring that money so you want to make it make the message sender address payable and then transfer the required amount now after that you want to make sure at this point that the transfer was successful and then you want to and then last but not least return the amount that was to be that was transferred over now let's go ahead and test this out because there's a couple of things that we haven't discussed just yet but you're gonna find it out real soon so let's go and um do the same step so we're just gonna go ahead convert some teeth and then let's get the address so yeah there we go the ethuke token was successful however let's go ahead and start convert some of that back so yeah let's go with 12 coin A's let's uh let's transact and there you go there's some sort of error now don't worry about it it just says insufficient allowance on the second line at the very end that's something we haven't discussed yet but that's something that we're going to address right now so what you need to do is get the address of the coin like that and then we're gonna go ahead and interact with the coin contract itself as you can see on the screen because as of right now we're only interacting with the decks itself but we need to interact right now with the coin because we're gonna we're gonna need to increase the allowance so so put it put in your wallet address right there okay right there that's going to be your wallet address and now you're going to include increase the amount so that's what we need to specify now and just to make like things easy we're going to approve the entire balance of all the coordinates and then now it should go through so let's go ahead and actually hit transact and as you can see both of them both of the transactions went through and there you go the balance just changed by 12. you can see at the very end it says 88 and a lot of Nines in front of it so that means that our function worked perfectly in this case and just got it done so with that said let's go ahead and now enable the swapping between token custom token and custom token all right so far we have covered two of the three main swapping methods one just for quick refresh one was eth to custom token two was custom token eth now we're gonna need to cover the custom token to custom token so let's say you wanna you have a lot of coin A's but you want some coin B's and you don't want to spend e you just want to convert coin a to coin B that's what's coming up all right so we're gonna go ahead and start up with our trusty function and then it's going to be swap token to token or you can name it whatever but uh we're gonna need two strings as input so there's gonna be Source token name and there's gonna be destination token name and you also want to put in an amount which is going to be a a number now this is going to be once again a public one and we're gonna need to make sure that the source to connect we're going to need to make sure that we take out the amount yeah we take out the amount that is trying to be transferred from The Source wallet and we just store it in the contract and then we're going to transfer over from the central wallet to the user uh themselves so that's something uh liquidity to pull would be in a real life situation but this is going to be like a dumb down easier version of that so and now we're gonna just transfer over a bunch of token b or like destination tokens to the sender so once again lines first line is just taking out the source token from the user's wallet and then second is going to take take the equivalent amount in a different token and then put it back into the user's wallet and that's basically our function so let's go ahead and deploy it and we're going to go ahead and transfer swap some eth2 to coin a and then now we're going to need to increase the balance okay there you go we got the balance now we're going to need to increase the allowance so that's something that we're gonna do and just for simplistic approve for the entire balance let's go ahead and test out our function so coin a to coin B and let's say we just want to try pass over a tenth so what we need to see now is that when we check on coin B's balance in our wallet we're gonna we should see a ten and there you go ladies and gentlemen that is a perfect solution if you see that that's perfect and if not just go back rewind where you can just double check that the function is perfectly written or if you've made mistakes that's that let's go ahead and keep on going now this is just going to be like a quick complimentary function we're just going to go ahead and double check that how much eth is available on the contract so it is going to be an easy actually you should go ahead try it out by yourself there's no input nothing one liner I think so it's like a super easy function Try It Out by yourself pause it now and then if you were able to figure it out good if not it's completely fine too let's keep on going with the solution so it's going to return a uint and what we're going to return is address this dot balance that's it and that should in theory return how much eth is currently stored on our how much it is currently soared on our contracts wallet let's go ahead deploy the new contract and let's see what we've got it'll say zero so that's perfect and if you were to send some in there and convert then it's going to be updated but with that said let's keep on going all right so now we're gonna start using truffle extension inside of our vs code and what you want to do is just copy the entire contract that we just wrote put it on your clipboard command see it and because we're going to be copying it over so in our vs code what we're going to do is go ahead and create a new contracts folder and open up the CLI right there and you want to install truffle so it's going to be a global install if you haven't done that already now is the time and then you want to type in Truffle in it and that will spin up a new truffle project now inside the Truffle project you want to go ahead and type in truffle create contract unit Swap and that will create you a new contract file and that is where you want to go ahead and paste your contract so as you can see definitely you have to make sure that the solidity version is perfect and then just raise the entire contract and there you go now you might be seeing this red underscore under the on the open zaplin package and that's because it hasn't we haven't installed it yet so let's go ahead and fix that so it's your net and then paste at opens up and slash contact and once it's done you want to right click on your on your solidity file and then just hit build contracts now if you do not have Shuffle extension at this point go back in the video I explained it earlier how to install it and how to set it up I'm gonna I'm gonna do it again that is where they set up it so if you're skipping around it's gonna be like somewhere in the beginning so that's where you want to look for it all right let's go ahead and continue so you want to click that and then it's going to build and in the output you can check how that goes you want to see something like successful compiled successfully and then next up you want to hit deploy like right click and deploy and then select girly now we set this up as well and this is uh so don't worry about it just go back and check it out if you haven't done that already now it's asking for gas price leave it empty just hit return on it don't even worry about it and then I'm gonna either paste your mnemonic or if you've already set it up you can just use that configuration and then if you're pasting it it's going to do this and then once you're done it will go ahead and try the blade Howard it's not going to go through it's like you don't see any kind of address on my screen right now and that's because we missed out we completely forgot the migration as file that's something that like we hear a clever programmer every single time that is our signature that we try to deploy and then oh the migrations file so in the migrations folder you want to go ahead and create a new file which will be one underscore deploy and then we'll have to import the unit swap contract so it's going to be artifacts that require any unisplot and then just explore export the deployer and so then you're going to be good to go now try again hit deploy and this time it's gonna go through so let's speed through that real quick and as you can see there is my contract address so you want to go ahead copy that and then go into your unit swap app go into euros and then contracts.js close that output out and then just create a new variable Bowl which will be addressed and just save it there because that's going to be something that that's going to be the thing that we're going to be using now if you want to double check on ether scan currently.etherscan.io paste your address in you're going to see everything that just went through so if you're up to this point congratulations now we're going to go ahead and set up rainbow kit all right so you want to go into your app.js file and we're going to import a bunch of things so just hold on it's going to be Rainbow Dash me slash rainbow kid slash styles.css it's going to be giving us all the Styles and then you're going to copy you're going to import merge from low dash dot merge and then we're gonna this is gonna this is where it's gonna get started this is where it's gonna start to be mental so we're gonna need get default wallets we're gonna need rainbow kit provider we're going to need Dark theme and we're going to need midnight theme actually you can just choose between the two we sometimes just look at it I don't know I prefer Dark theme if you're interested but try out midnight that's like completely black and then the dark is like dark gray so the more you know all these are coming from rainbow kit now really a bunch of things from wag me I believe is what's coming up so let's chain configure chain create client and whack me config all this is coming from wag me and then we're going to import infuro Provider from wagme slash provider slash infuria and that is basically it now up until this point you need to import everything we're going to be using all of it so just pause here for a quick sec but we'll check you have everything and let's keep on going then now we're going to destructure chains and Provider from configure chains and we're going to have two arrays in here so in the first array we're just going to put in chain dot girly that means that this app is only going to be running on the girly chain nothing else is going to work here and then for that we're going to be using the infuria provider where we need to put in an API key now we have it somewhere if you haven't done that already just place it in an EMV file and then you can you don't need you're not you don't actually have to expose it to the browser that's a good thing about it you can just go with inferior API key you don't have to do next next public but as you can see that is how you get your API key so if you haven't done it already now is the time to do and so there you go all right next up we're going to be setting up the connectors for our OLED connection and that's that's going to be using get default wallets from wagme now we need to pass in app name that is going to be uni swap you can pass in whatever and then you're going to need to pass in Chains and then next up we're gonna have a wagme client that will use create client and we're gonna need to pass in a couple things here so we're gonna need to pass in autoconnect you can either set it to true or false I prefer to be truth true but for this build we just use false for whatever reason and then you want to pass in connectors and the provider and with that all the setup is ready and then one last thing to set up is going to be we're going to make sure we're going to create a my theme which will merge midnight theme and we're going to override a couple of colors so we're going to say we're going to have an accent color of that and this is like completely optional this is just elements so there you have it extended call Extended color foreground accent color and now we're going to wrap our app in between wagmeconfig and where we're going to need to pass in Wagner client is it's like context these are like contexts for our app to be able to access this and then we're going to import the or we're going to wrap the rainbow kit provider with the chains and the theme and then just and then just pass in and then just pass in the app and that is basically it now we're going to go ahead and actually render the connect button to our screen all right let's actually go ahead and render out that connect button and so this is going to be a quick one what you want to do is go into your header file inside your components folder and then go ahead and import connect button from rainbow kit just like that and then we already as you can see we have it commented out that's the place where you want to put it in as a component so that's literally all we do once that's there it's going to show up on the top right corner and now let's actually check it out so there you go literally pre-set up buy rainbow kit so you can already use it and once you hit I'm going to mask it's going to work perfectly so that's it all right let's go ahead and set up all the contract Builders so we're going to be importing a couple of things here so first of all we're gonna need ethers then we're going to need unit spot ABI from utils slash uniswap API yeah uniswap.json and then we're going to do the exact same for the custom token these are coming with the build all right now next up we're gonna we're gonna need two functions that will immediately straight away going to export so let's not waste any time on that at first we're gonna have a token contract that we're gonna export and that'll take in an address and then we're going to you we're going to generate a provider using ethers the providers.web 3 provider and that and using the window ethereum and what is window ethereum that's basically the code that is being injected by metamask now next up we're going to use that that we're just going to go ahead and destructure ethereum from that from window and if it actually exists meaning the user has installed metamask we're going to use that to generate first a science so we're gonna we're gonna say provider.getcenter and all these are going to be like this is gonna be this is a lot of like setup and prep and whatever but this is ultimately going to be like completely needed in order to be able to interact with the contract all right so we're gonna join the contract reader and it's going to use it's going to be new ethers.contract and passing dress contract ABI and the signer itself and then just return that bad boy and that's pretty much the first one now we're going to repeat this exact same process for for the unit swap contract itself so the decks so the first two lines are copy paste immediately if statement copy paste and the only two things that are going to change are going to be the the address because that's there's only one address in this scenario and that's going to be the Dax address and then which ABI are we actually are we passing it so in this case it's going to be the uni swap baby Island API and then we're just passing the same same signer that we created up above and then return the contract reader so that's pretty much it now we're going to set up a couple more helper functions and then actually put things into motion alright so these are going to be two functions that we're going to be setting up just so we can convert between eth or ether and way so we're going to import ethers from ethers and then we're gonna use that to set up two functions so there's we're going to have one function that will be two way and that will take in an amount and then that will take into decimals but default value is going to be 18 and then con we're just going to say cause two-way ether.utos.parse units and that's just something that like comes from ethers and I'm passing the amount and I'm passing decimals and then we're just going to return that now as a and then we're just going to return that as a string that is the first one and then the second one I'll let you try figure it out by yourself but it's going to be on the same analogy the only difference we're going to be passing in way here and then we're gonna need eth so I'm gonna go ahead and continue now so we're gonna say it's gonna be two eth and once again we're gonna pass in an amount decimals it's gonna be 18 usual utils.forement units and then we're gonna say we're gonna go to eat same we're gonna type the exact same thing all right that being said we are actually going to go ahead and start implementing the each coin functionality all right so let's actually let's like finally actually swap from E3 or custom tokens that we have worked so hard for all right so you want to go into your queries.js file and then import a couple of things so big number in ethers from ethers first of all and then you want to import contract and token contract from the from the contract file that we set up earlier so that's the like contract interaction interfaces functions I don't remember it though completely but that's what's basically going to allow you to actually interface with your contract and then next up we're going to import to eat and two-way so the other two helper functions that we just created and so here we're going to have the swap to eat function which will require a token name and amount and as I always say use try catch functions error console let the error out and then we're going to convert the amount to way because once again it's already only works with weight we're going to use the contract function that we set up earlier to generate a contract object for Unison for us and then we're going to use that to actually handle the transaction itself so we're going to say contractobject.swapes to token and pass in token name and TX which is the way amount of the eth amount the user passed in and then we're going to go ahead and generate a receipt by waiting for that data and then return it once it's done so that's basically it for that file now you want to go ahead and go over the swap component and scroll down to wherever you see functions for contract functionality here and then you want to put in create a new function that'll heavily rely on our setup for of the front end so we're going to create a perform swap function that's going to be an async function and we're gonna before we do anything set transactional pending true all right and then we're going to go ahead and generate a receipt we're going to go ahead and start create a new create a new variable that we're going to call receipt and then using everything that we set up earlier just type in the if Source token equals eth and destination token token doesn't equal either and you would just want to invoke and you want to wait for the swap if the token function and then put in destination token and input value and like I said this whole thing is heavily relying on the front and we already set up for your convenience now you definitely want to make sure that a function is actually getting called so we're gonna create a new function that we'll call handle swap it's actually on my screen in on line 73. there was a little bit of scrolling so I just wanted to help you out with that now here it's a little repetitive but we're just gonna double check that everything is good to go there and then call the function once the once everything is ready now my screen on line 140 where you're gonna pass in that function and what that basically does is that will fire up this function and whenever you hit the swap button which you currently cannot see because the wallet is not connected to the app but I'm going to show you just now let's go to this app put in a value there and then we're gonna need to select uh tokens that's going to be coin a and you're going to connect your wallet so that's something you gotta do and then it didn't turn blue so there is some sort of error going on here let's let's actually go ahead and figure that out now as you can see on line 16 we have imported use account from wagme and that basically I'm just going to help us that's just going to help us to check whether well that has been ink is connected or not so just update it on line 61 and you're just gonna restructure address from use account and that itself is going to take care of this whole things the wallet is connected and then there you go now there's your swap button and then confirm that transaction speed it up a little bit because that never hurt and there you go you can try it with another amount and it's going to work perfectly again so there it is that is your function now we're going to go ahead and fetch balances of each token render them out on the screen all right ladies and Gentlemen let's go ahead and fetch those balances that's going to be a little bit of a longer thing but yeah that's so that's where it's going to go now you want to go into your header file because everything is going to happen in our header and we're going to import a few things so start with use account from wagme and then we're going to import token balance from token balance and then we're gonna create a new use state which is going to be token balance and it's going to start out as a completely complete nothingness now you want to extract address from the structure address from use account and then we're just going to go ahead and kick things off with a use effect which we're gonna fire off every single time once the address changes that is important because if you connect a different wallet to the app you want to see the updated balances inside that wallet and not the previous one so this is super important now we're going to go ahead and uh our we're going to update the use date with a bunch of jsx code in there so we're going to use the token balance component and pass in coin a and then the wallet address so we're going to repeat this a couple of times so like we because we have three custom coins we're gonna either do this three times and by the way those um coin names are going to be strings so you want to make sure you have Queen ABC and then three times the wallet address as as in the address next up you want to have a an if statement and make sure that it and if the wallet any of the user haven't connected their bullets then you want to put you want to punch out a little bit of a notification for them so we're gonna go ahead and set that up right now so that's going to be a toast wallet and it's just going to be like a toast air and we're gonna be like yo connect your wallet or something like that it's going to be there for two seconds and that's basically how it's gonna look like you can see it on the right okay so we just connected our wallet and now you're gonna go ahead and we actually have to render those components out so render out just put the token balance component and render it out right there but throw some sort of error okay so let's actually go into that token balance component let's see what's going on in there so we're going to need to create a couple things we're going to need to have a balance use State and we're gonna need to have a copy icon used it so there's a few things that we need to specify here and that will just be a icon that we already imported for you so that's going to be clipboard icon and then we're gonna we're gonna have separate we're gonna have multiple States we're going to have a transaction pending and we're gonna have a not not pending and we're just gonna kick them off based on whatever uh whatever is suitable for the situation and then you also want to have a token address over there and by the way the balance is going to start out as an as like a dash string basically all right now we're gonna have two notifiers set up so that one is going to be an error and this is going to be like a toaster just like the one before but this time it's gonna go for six seconds and that's by the way in milliseconds so that's why it's six thousand and then we're gonna have a success message or like a success host where we're going to say transaction complete and I mean you can go ahead and set up a duration for that too honestly so go ahead create a new function which is going to be fetch token balance and that's going to be and then we're just gonna kick things off with invoking the get token balance function which we imported earlier which we're gonna set up in a little bit and you're going to need to pass in a name and wallet address for that and then we're going to also need to format the balance and then set that balance or set the formatted balance to the state itself out so there's going to be that's how it's going to look like in in a little bit that's the that's the component that we're going to make a and we're gonna have that we're gonna have to make we're gonna have to fill up with the good data all right so going to record is the JS file and we're gonna go ahead and set up get tokenbalance function and so we're gonna need to call the contract there so we're gonna need to set up the contact object and just like before use the get balance function from a method from the contract balance and then create a new variable and then return it and that should basically get it every single time and then you're gonna need another one which which is going to be get token address and once again just go ahead try it out by yourself like every single time we create a new function I want you to go ahead from now on because it's going to be a lot of repetition so try it out by yourself and see if it works and then just come back for the solution so try catch console log the error out and then we're gonna create the usual contract object and then the usual way just call on the get token address font method now everything that we just created we're going to go ahead and now import from from that file so get token address and get token balance and then we're also going to set up a new function which is going to be fetching which is going to use the get token address function that we just set up so it's going to be fetch token.s it's going to be an async function use that and then whatever that thing returns we're going to set it to the state and then we're going to go ahead set up a use effect that will run again and again whenever name and the wallet address changes and if both of them exist then we're gonna fetch the token balances and then we're also going to fetch the token addresses and if that even if they and if not either of them don't exist we're just gonna set everything back to their normal regular or like the initial value and then it says ethers doesn't exist so let's go ahead fix that import ethers from ethers and that should be good pretty much now if you scroll down on my screen it's line 40 but in your screen but on your page it might be something different so just check out where it's at we have a hardcodone balance there but we should go ahead and now fix that so let's see what happens there and there you go ladies and gentlemen as you can see our previous two swaps were successful because you can see the 30 coin a and the 20 coin B transactions that would fit there so that's basically it now we're gonna go ahead and display a success toast whenever the transaction succeeds all right let's just go ahead and set it up so go back to your swap component and as you can see we already set everything up for Success so now we're just gonna invoke everything so go down to your go to your perform swap function we should have set the set transaction pending state to false once it's done and then if the transaction results in your receipt and that result and that receipt doesn't have a transaction hash property then you want to go ahead and notify errors I've hired that off and then pass in receipt so everybody knows what's happening else just notify success and that should basically be pretty successful so let's go ahead and test it out so let's do some transactions over there hit confirm and let's see what do we got let's see if it works let's speed that bad boy up and any moment now and there you go there is your host message and also as you can see on the right hand side once I connect my wallet coin c oh coinb now has 60 so the transaction definitely went through and now we have proven that it did go through all right let's go ahead and now set up the swapping from token or like from Custom erc20 token to eth so what we're going to be doing here is uh first of all close out everything we're not we don't need a bunch of things go into your queries the JS file and we're gonna set up two functions but let's start with the first one now so that's going to be swap token to eat now it's going to be an async function that takes in token name and amount and we're just going to do the usual try catch console log area create your contract object and then what we're going to do is use that contract object to swap token two if basically call that function of the contract so we're going to pass in the usual stuff to the way converted amount of the amount you want to convert and then the token name now it's going to be the same thing whenever the receipt shows up wait for it and then return the receipt now as you remember we're going to need to pre-approve the amount to be transferred so let's do that now it's going to be the second function so that's going to be increase allowance and so once again we're gonna have oh we're gonna pass in the token name and the amount and then we're gonna do the usual try catch console log the error and there's going to be a little bit of a trick here now so I want you to listen closely so we're going to Fat what we're going to do is we're going to determine the address of the uh specific coin that we're going to need and then we're going to use that address to generate a new contract object and we're going to use that to increase the allowance all right so there's going to be two contract objects here and both we're going to be interacting with two contracts in the same function so that's how let's continue so we're going to use the uni swap contract to get the address of the custom tokens we're going to pass in token name and then we're gonna go ahead and generate a token contract object using that address that we just generated so that we can increase the allowance and so we're going to do that right now so using that we're going to go ahead and say called approve and so what's happening now is the approved function Works in a way where you pass in who can who can interact with this or who can interact with this coin and how much are you allowing them to interact with this coin so we're going to need to pass in two things one of them is going to be the unit swap address and the other one is going to be the way amount of the amount or like the weight converted amount of the amount you want to convert and with that being said we're pretty much good to go here all right now let's actually connect this with our front end so we're gonna go into our swap component and then in the perform swap function there is that if statement so you're gonna add a else Clause after it so we're going to say else if if the source token is not if but the destination token is this is what we want to do so now we're going to generate the receipt based on that and we're going to call these swap token to eth function and now we're going to create the increase allowance function so let's go ahead and do that so transaction pending has to be true and then we're gonna use the function that we just built and then invoked it and invoking and then pass in Source token and input value and after that once it's good to go might as well turn off the loading screen and so inside of handle swap I'm going to turn on the loading screen again and then you want to check whether the wallet has some sort of allowance on the source token for the amount that you are trying to convert back to each oh there's a there's in there I'm gonna make it async okay that's fine and after that we're good with loading so let's actually move that and then if the result is valid and actually called the perform swap perform swap function and if if not if if the user doesn't have allowance now we get a call the handle increase handle insufficient allowance function and to do that what we're going to do like we we already set that up ahead of time now we're going to just switch out the swap button to a different button and so let's go ahead and do that that's on my screen that's line 162 and then there is a swap button text whether if it's your increase allowance or not and if it is then we're going to call the handle increase allowance function now let's go ahead and try it out let's see how this actually works so we're going to turn some we're going to use 20 coin A's and then swap back into eth and let's see what happens there's some interesting things going on around in the background so that's something so we apparently don't really have the has wallet allowance function but that's completely fine because we're gonna go ahead and build it now let's see what can we do here so we're going to pass an owner we're going to need the token name and the amount and we're going to use the usual try catch console log the error that's fine and then we're going to use the uniswap contract to generate our contract object and then we're going to have an address obviously once again we've got to fetch the token address to get everything and then using the using the token contracts we're going to double check the allowance so we're gonna we're literally just gonna fetch it so we're gonna pass an owner and we're gonna pass that as in the uni swap address and then we're going to convert it into a like a regular human number so we're gonna say that's a bunch of things going on there so basically what's happening is we're gonna get the way amount and then generate a big number from it and then we're going to use that to generate a string that we'll be able to work with later on so just go ahead copy that and then let's feel free to spend some time understanding what is happening there and then now we're gonna go ahead and return the result and also export the function because we need to use it in our swap component so let's go ahead and try it out again so if we click swap it says Ops insufficient allowance we're going to need to increase it so we're going to go ahead click that okay there's some interesting things happening here again so it says API that map is not a function we might have made a mistake earlier on yeah there it is so you want to double check that every single time when you are generating a contract contract reader you say you import the Json and then dot ABI and that's what you're trying to interface with because there's a bunch of stuff that you don't need so let's go ahead test this out again so refresh real quick connect your wallet and to say 30 okay insufficient allowance we've seen that and there you go give access let's wait for it to go through speed it up if we need to and then fresh real quick connect Google it again and then now it says Swap and if you click it you're gonna approve the transaction itself not the allowance so we should be pretty much good to go soon so let's see how that goes perfect it says transaction completed so technically we should be good let's just refresh real quick so connect that and now you see that the values have been updated so that's basically it now we're just going to implement tokens token and we're good to go all right so to make this work we're gonna need to go into our queries.js file and it's going to be super simple it's going to be super fast so just create a new function swap token to token as in Source token and destination token and amount and the usual try catch console log the error because that's usually helpful to see what went wrong and now you're going to generate the contract object as usual you can once again try it by yourself but if it doesn't if you're not that experienced that's fine too which is going to be basically the response of the swept function and then just pass in everything that we got obviously make sure you convert the amount to weight and next up you want to go ahead generate the receipt and return it now if you don't export the function it's not going to work elsewhere so go back to your swap component after you've done that and of uh perform swaps next statement you want to have an else clause which has no other conditions basically it just in the first two we made sure that everything is accounted for so now this is the only option to do or the only option to have and now what you want to do is generate the local receipt for that or update the receipt update the receipt variable for that and then call the swap token the token function from the file that we just from the queries file pass in everything that function is go ahead and see what do we need so everything should be ready to go pretty much so let's see what we got let's turn 30 coin A's and just swap them over to coin B let's see if that works so let's hit Swap and okay we gotta increase the allowance that's perfect that's fine okay hit confirm let's see if it works and we can just speed it up see if it's to go and after after that's done we can actually go at now that we have the allowance we can now actually go ahead and do the swap and once you confirm the transaction it should go through pretty fast transaction completed and there you go there you have it your coin a and coin B is updated so ladies and gentlemen that is it it is a fully functional unit swap Decks that is able to convert between random erc20 tokens use them you can literally actually factually use this and you can transfer your eth into custom coins and your custom coins back to eth and then custom coins between custom coins and then all that kind of stuff so you can have basically your own trading bot I'm not saying you should be doing that but with a little enhancement you can automate that stuff so there you go that's that's pretty much it and I hope you got some value out of this tutorial and with that said I'll see you in the next one\n"