Learn Blockchain: The COMPLETE beginner’s guide

today I'm going to show you how to build an entire blockchain application from start to finish we're gonna build a crypto currency exchange where you can buy and sell crypto currencies at a fixed price and I'll walk you through everything step by step we'll set up a blockchain on our computer right to aetherium smart contracts we'll write tests against them and finally we'll create a client-side website where anyone can connect to the exchange and buy and sell crypto currencies and you might be thinking I don't even understand what a blockchain is or how it works that's okay I'm gonna show you everything you need to know before we start coding so really quickly if you're new around here hey I'm Greg arrays from dab University and on this channel I teach you how to become a blockchain master so if that's something that you're interested in then click the like button down below and click Subscribe and if you like this tutorial and you're serious about becoming a blockchain developer then head on over to DAP in your virtual com4 slash bootcamp alright so before we start building the project let me explain how a blockchain works and how we're gonna use it in this tutorial so what is a blockchain well to answer this question let's look at how a normal web application works normally when you use a web application you access it with your browser and that web browser talks to a central server this server hosts all the code for the web application and all the data is stored inside of a central database this presents a real problem you can't store value this way for example you couldn't create a digital currency with a traditional web application why is that see the code can be changed by the developers at any time and the data and the database can also be changed arbitrarily with anyone who had access to it this means that whoever controls the money could manipulate your balance and steal your funds so we don't want to use a centralized web application to create money instead we want to use the blockchain it will guarantee that no one can change the code for the application or manipulate the database we can rest assured that our money will always work in a predictable way and that our funds won't be stolen how can we achieve this you might ask to answer this question let's look at how a blockchain works a blockchain is basically just a giant world wide computer instead of a single that stores data and runs programs blockchains used thousands of computers that all handle this each computer is called a node and each node talks to one another and each node also gets a copy of all the data and all the code that's stored on the blockchain all this data is stored in bundles of Records called blocks which are changed together to make up the public ledger and all the code is stored in smart contracts which are immutable code that runs in the blockchain this creates endless possibilities for a new generation of applications not controlled by anyone but instead run by them sells on the blockchain cryptocurrency is a great example you can create a cryptocurrency with a blockchain because each node in the network is responsible for processing your transaction and tracking your balance whenever you send a cryptocurrency the network achieves consensus that your transaction is valid and that your balance is updated properly on the public ledger now let's look at how a basic blockchain application or add app works for this tutorial we're going to use the etherium blockchain to access the application you'll use your browser to connect to a front-end website written an HTML CSS and JavaScript and instead of talking to a back-end web server this website will talk directly to the blockchain this is where all the code and the data for the application will live the code is contained in smart contracts which are written in the solidity programming language which looks a lot like JavaScript these smart contracts are immutable which means they cannot change and all the data is stored inside of transaction records on the public ledger which is also immutable anytime we add new data to the blockchain it will be permanent and publicly verifiable so that's an overview of what a blockchain is and how it works now let's get a preview of the application that we're gonna build together in this tutorial and see how it leverages the power of the blockchain this is an instant cryptocurrency exchange called eath swap where you can trade cryptocurrencies at a guaranteed price you can buy and sell cryptocurrencies immediately without having to open any buy or sell orders or wait for anyone else to fill your orders inside this application we're gonna trade two different cryptocurrencies the first is ether the native cryptocurrency of the etherium blockchain and the second is DAP token a cryptocurrency that will create together in this tutorial our applications will allow us to purchase DAP tokens with ether like this we'll just specify the amount that you want to purchase click swap and we'll see our depth token balance go up and we'll also be able to sell the DAP tokens in a different tab like this and you can see that the cryptocurrencies change here and we'll also highlight the redemption rate you know the price right and then also the account that were connected to on the blockchain along with an IDenticard that represents the user's avatar here's a diagram of how the application will work we'll build a client-side application in react j/s that's what you see here and then this client-side application is going to talk directly to the blockchain alright and then the blockchain will contain two different smart contracts the first smart contract will be the east swap contract that facilitates purchasing tokens and also selling them and then that smart contract will talk to a second smart contract which will be the token that we create in this tutorial in this case the DAP token now let's install all the dependencies that we need for blockchain development the first is no js' you can see if you haven't already installed by going to your terminal and typing node - V if you don't have node installed yet you can install it with a command-line tool like homeroom or you can download it directly from a node.js website just like this for this tutorial I'm gonna stick with node version 9 10.0 and I suggest that you do the same the next dependency is ganach this is a one click block chain that runs on your computer I'll put a link down in the description below where you can download this but when you go here you can just click this download button and it will automatically select the correct installer for your operating system whether you're on Mac Windows or Linux and once you've downloaded it and you start it you'll have a blockchain running on your computer and you can see that it gave you 10 accounts for free and each of these accounts has been pre funded with cryptocurrency in their wallet so in this case it's ether or the native cryptocurrencies of the etherium blockchain that's what this represents and this you know cryptocurrency isn't worth anything this is just you know pretend cryptocurrency for development purposes but you can see the accounts address here and then also you can click this to reveal the private keys and finally I'll say don't use these accounts in the real world because you know everyone who's watched this video has seen these private keys and you don't want to compromise your funds the next dependency is the truffle framework this is a smart contract development framework where we'll be able to create aetherium contracts with a solidity programming language we'll also be able to write tests against the smart contracts and deploy them to a blockchain I'm going to use a very specific version of truffle in this tutorial and I suggest that you do the same I'm gonna get my terminal and type in NPM install - - G truffle at version 5.1.1 4 click enter and finally we must install meta mask this is a browser extension that will turn our normal web browser into a blockchain browser you can go to the Google Chrome Web Store to find meta mask and just click install I've already done it so I have the remove button but if you don't have it yet you should see the install button alright and once you walk through the setup steps go to your Chrome extensions and make sure that you have meta mask and able you can tell that it's enabled by seeing the Fox icon up in the right-hand corner of your browser now let's start building the project instead of setting everything up manually we're gonna use a template that i've created called the dap university starter kit you can find this link down in the description below but copy this URL and go to your terminal and say git clone and then paste in the URL alright and then hit space and create your project name in this case I'm gonna call it swap and now I'll enter into that newly created directory like this I'll say CDE swap and I'll install the project dependencies with NPM like this say NPM install alright once that's finished you should see a success message here don't worry if you see a bunch of warnings here it's not ideal but they are just warnings for now you'll know that it completed successfully if you have a message like this all right so really quickly before we move on I want to install one more dependency that's not included in the project yet ok so if I go back to the application preview you can see these things right here these are called identic cons and we want to install a special library that it helps us to create those so we're gonna use identic on j/s let's see if I can find it here here it is so this library is gonna allow us to create these identic ons based on the users of theorem address all right so we can install identic on jeaious like this we'll say npm install - - save identic on a s @ and then carrot version 2.3.3 alright now let's get a quick tour of the project I'm gonna open this in my text editor I'm going to use sublime text so I've configured a special command on my computer to open the project in sublime text like this alright it's a simple dot this is a truffle project where we have everything we need to create smart contracts right tests against them deploy them to a blockchain and also create our client-side web site all right so I'm going to show you what's inside of here the first place to take note is the truffle - config file this is the main entry point for the application where we specify our connection to the blockchain the shows the development network that connects to ganache this tells us which you know compiler we want to use to compile the smart contracts and then also it shows us where the smart contracts live inside the project so if you've used truffle before this may look a little new to you that's because I've configured this project to automatically put the smart contracts at a different place than where they normally are in the project that's because I want to access those smart contracts from the client-side application that we'll build in this tutorial you'll see that more at play here in a minute so I'll just show you the smart contracts are inside the source contracts directory we can see this migration contract that's already here this is a smart contract that comes with every truffle project that basically just handles deploying other smart contracts to the blockchain so don't worry really too much about what's happening inside of here just know that this comes standard with truffle projects and you don't have to edit this code or really even understand it next you can see a components directory this is where all the application code for the clients that application will live you know this is react.js code so react organizes all of its all of its code into these reusable components which we'll talk more about when we get to the client side portion of this tutorial but I wanted to just make note of that here all right and then next we have a migrations directory this is where we'll create migrations to put the smart contracts on the blockchain we'll talk about that more when we get to that and then finally the package JSON file this is where we specify all the project specific dependencies that we need in order to build the project and also while we're inside of here we can you know change this name to see your eath swap alright and we'll just say an instant ERC 20 cryptocurrency exchange all right and we can also see the identic Khan library that we added manually via the command line right here so next let's go ahead and boot up the web server for the project just to make sure that it was installed properly I'm gonna open up a new terminal tab to do this alright and I'm gonna say NPM run start and that should automatically start the webserver and open up the website the client-side website and a new browser tab boom there we go so this is what was installed this was the DAP University starter kit so you can see this already looks really nice it has some styling already that's because we're using the bootstrap templating framework you can see a nav bar here with a nice dark color the DAP University logo and everything you know has some nice-looking fonts and stuff like that we're gonna be able to use bootstrap to avoid writing really any CSS in this tutorial it'll make our application look really nice and eventually like this without having to do too much coding so whenever we create the client-side website essentially we'll start here inside the app J's directory and modify this code you know you can see this is all the code that currently generates the starter kit that we see here all right so I'm gonna leave this for now we'll come back to this whenever we create the client-side portion of the application but I'm just gonna leave the web server here running in a separate tab and don't forget about it whenever we come back I'll remind you we build that part of the application but next I'm going to do is go ahead and start developing the smart contracts and we'll use you know our primary terminal tab for this and then leave the web server running in the background okay I'll create a new file for the smart contract like this I'll say touch let's see here source contracts and we'll say cap OE eath capital s swap Sol alright and you can do this from your text editor if you want to you don't have to do it from the command line but if you look here we've got a source contracts you'll see this eath swap file that was created inside of here is where we're gonna write all the solidity source code for the smart contract okay so we can start off by doing this we can say pragma solidity I'll use a carrot oh sorry it's a version 0.50 all right so what this does is it declares the solidity programming language version that we want to use so the next thing that we do is create the smart contract like this we say contract each swap all right then we use some curly braces and inside these curly braces is where we'll write all of the code for the smart contract they'll say that it belongs to this contract named eath swap alright so the first thing that I want to do is just create a really simple test or a demonstration to see how it works and what we're gonna do is create a name for the smart contract and we'll do this with a variable like this all right so we'll say name equals eath swap instant exchange all right and now you know this is a string which basically just means it's a human-readable you know set of characters like this inside of these quotation marks and we must follow each line with a semicolon like this okay and then finally we must tell solidity what type this is all right because it's a statically typed language so it's a string name okay so it can't be a number later or something like that it always has to be a string and then finally what we want to do is read this variable value outside of the smart contract so we must call it public all right so string public name equals you know the string swap instant exchange followed by semicolon so this actually creates a lot of functionality for us in one simple line of code which we'll see here in a minute because we declare this public solidity is going to give us a function that we can call on the smart contract called name which is going to return this value okay and you know there are different visibilities and functions which we'll see later and solidity in this tutorial but this basically just means that if we didn't have this we wouldn't be able to read that name value later out the smart contract but because we do we'll be able to read this like in the console which I'm going to show you here right now alright so let's just see if we can put this smart contract on the blockchain and interact with it in the console just to see that the project's set up properly so what we'll do is go to the migrations directory alright and you see this initial migrations file we're going to create a new file here and we'll call it - all right I'll call it deploy contracts ijs all right so let me tell you what these migration files do essentially they just take a contract a smart contract and put them on the blockchain so that's what this code does and truffle basically has these things called artifacts which are you know kind of JavaScript versions of the smart contracts with JSON and you know you're able to sign them to variables like this and JavaScript and truffles deployer notice how to put them on the blockchain like this alright so essentially we're just going to follow this pattern and copy and paste this you don't have to like reinvent the wheel here so I'm just gonna do that put it in the deploy contracts directory and say eath swap alright so that's just gonna swap the saara it's gonna fetch the east swap contract we just created and put it on the blockchain so lastly I'll say that migration files inside of truffle are a lot like you know migrations that you might have seen in another context if you're if you're a developer already so maybe you've seen a migration to change a database like with sequel or MongoDB something like that where you're essentially creating new tables or something like that maybe adding columns it's the same thing in shuffle so in those contexts you know you're migrating the state of a database from one state to another or you're adding new tables in this case you're also changing the blockchain state from one state to another and also you're technically migrating smart contracts from your development environment to a blockchain okay so that's that's a few different ways you can think about it before you run the migrations make sure that you have ganache running right so don't forget this is your development blockchain so find wherever you installed it and open it and make sure that it's running you might see like a Quick Start button or something like that go ahead and click that and when you see a page like this with the accounts and their balances you'll know that ganache is ready to go and that you're connected to it at the right port seventy five forty five you know right here inside your truffle project now that that's finished we can migrate the smart contracts like this and put them on the block chains we just go to the terminal and say truffle migrate all right and there you go you can see that it first compiled the smart contracts it started the migration process the initial migration contract was deployed and then finally our each swap contract was also deployed okay the next thing we want to do is interact with the smart contract in the development console like this we just open it by saying truffle console all right this is going to give us a JavaScript environment where we can you know write JavaScript commands that will interact with the blockchain and also interact with the smart contract that we just created so I'm going to fetch the smart contract like this all right we say contract equal oh wait swap got deployed all right and sometimes people get confused because I say undefined here but we can simply access the contract like this we just retype the contract variable contract all right boom there we go and we can fetch the contract address like this we say contract address all right and then we can fetch the contract name like this we just say name equals a wait contract name followed by two open and closed parenthesis all right so no parenthesis here but parentheses here and we say name boom there we go ease swap instant exchange perfect so really quickly I'll explain a few things here first is the contract address so if you open ganach you'll see that you know you have accounts already here on the blockchain and these have addresses these essentially represent the users on the blockchain you know the addresses were like a username and the private key is sort of like a password right so the same is true for smart contracts they also have addresses so essentially this just tells it the location or kind of like the username of the smart contract on the blockchain so yeah that's what this is right here the other thing I want to explain is this a weight keyword alright so whenever you're interacting with the blockchain a lot of times you know especially in JavaScript you're you're doing a synchronous interactions which essentially means that the function calls a lot of times don't actually return the value that you're asking for so for example when you say name if I just did like name equals contract name this wouldn't work this wouldn't actually return the contract name it would return something called a promise okay and a promise is a way for JavaScript to handle asynchronous function calls okay so what we can do is wait for the promise to resolve and say oh wait you know contract name and that will actually do what it says it'll wait for it to finish and we'll get the value of the name like that okay just so just notice that you know that won't actually return the name but this will so there's lots of a ways to handle asynchronous function calls in JavaScript you can use promise chains use callback functions you can read more about that online if you want to but just notice that you know whenever you're interacting the blockchain a lot of times you have to do these asynchronous actions because the blockchain is slow and you know there's multiple strategies for handling that but we're gonna pretty heavily use the async await pattern in this tutorial now we've created a basic file for our eat swap smart contract okay this is gonna be the contract where we create buying and selling tokens in this tutorial and we'll continue building out this throughout the remainder of this series okay so the next thing we want to do is create a second smart contract for the token alright so if you go and revisit the diagram that I talked about earlier we have our website that talks to the blockchain and then you know the first smart contract is the east swap smart contract that's what we just created here all right and the second smart contract is going to be the token that we buy and sell with ether right you know the native crypto currency of the etherium blockchain right and that's the smart contract that we want to create right now so I'm gonna go ahead and create a new file here so I'm just gonna reveal this here contracts youth swap all right look at a new file and here we'll say DAP token or will say token token that's ole capital T okay en dot so this will be called DAP token I'll show you how to do that here in a minute but this is going to be the file where we create the second smart contract for the crypto currency that we're gonna buy and sell so let me explain how this works a theorem allows you to create your own cryptocurrency without creating your own blockchain which is really powerful it basically means you can write a smart contract like this to govern or cryptocurrency all right with something called an e rc 20 token so you might have heard of that alright it's pretty popular if you go to a website like coin market capcom you can see a list of VAR c 20 tokens this is all the cryptocurrencies but on this list you'll see let's see here tokens like maker is an e rc 20 token if you look at like 0x it's a near final you to a list of these but just note that you know you can just go to the homepage and see plenty of them there and if you look at any of these ERC 20 tokens you'll just notice that they all have a lot in common all right they all work the same way and actually if you go their smart contracts you can look at the code and they all like I said they work the same way basically they have like the same functions they have a transfer function they have an approved function alright a balance of and that's because a theorem tokens have to follow a standard alright called ERC 20 so ERC 20 is a standard for a theory of tokens that just governs how they all work it specifies a set of functions and behavior that the tokens must implement in order to be supported on you know cryptocurrency exchanges to be held in wallets to be sent around it basically just creates you know a set of rules that they must abide by so that are not you know constantly trying to reinvent the wheel with how they handle cryptocurrencies all right so you could read through the entire ERC twenty spec here if you wanted to but essentially I'm gonna call it a few things you know Toki must have like a name you know symbol and some decimals okay so I'm gonna call it a few things here so for example the token must have a transfer a function this is what allows it to send tokens and it also must have wants to hear an approved function and also like a balance of function to get the current balance of whoever holds the soakin all right so it also supports things like name symbol and decimals which we'll see here in a minute so particularly in this tutorial we're gonna focus on the balance of function and also the transfer function this is going to show us how many depth opens we hold like this right you'll see the balance here and then also the transfer function which is going to be used whenever we sell the tokens in the eath swap contract so just notice that ye are c 20 is a standard pretty much all CR c 20 tokens have to implement these types of functions so and because of this I don't want to reinvent the wheel and code out a basic er C 20 tokens step-by-step right so we're gonna use this er C 20 token here I'll put a link down to this sorry I'll put a link for this down the description below and we're just gonna copy and paste this code for the ERC 20 token inside of our project alright so if you want to learn to build this er C 20 tokens step-by-step you can check out my full length tutorial code your own cryptocurrency on aetherium okay and this will show you how to build it step-by-step right this is like an eight hour tutorial series but I don't want to reinvent that you can follow that tutorial if you want to and for the sake of you know getting started in this we're just going to copy and paste this and put it in our project okay so don't worry we're gonna get plenty of practice coding solidity smart contracts and we build the eat swap exchange use this to save some time right so we'll go to our project and go to token dot Seoul and paste this in here and you can see all of the features of your FC Twente tokens here like you know the amount the transfer function you have balance of here all right and also the approved function all right and again you don't have to know how all this code works basically just know this transfer function is what sends tokens from someone to another person the balance of function tells you how many tokens you have and then also the approved function you know let's somebody else you know spend your tokens so we'll see these in action and you know if you want to learn more about how this works go follow that other tutorial all right now let's finalize our setup and put this token on the blockchain too so let's go back to the deploy smart contracts or sorry deploy contracts file inside our migrations directory and what we're gonna do is put the token on the blockchain as well so I'm trying to copy this and paste it alright and we'll change this to token I'll put it first and then just like this well say token as well alright and then I'm gonna say deploy token alright and then a deploy eath swap okay so now let's put this on the blockchain as well so I'm going to exit the trouble console like this say exit with a dot in front of it all right I'm gonna say truffle migrate and then whenever I do this I'm gonna go - - reset alright so why is that well smart contract code is immutable alright it cannot change that's the whole point whenever you write the smart contract code you put it on the blockchain you can't update it like you would a normal application so the only thing you can really do is deploy a new copy of it to the blockchain and that's exactly what this reset operation does so if I said truffle migrate - - reset hit enter it's gonna put a new copy of the east swap exchange on the ganache blockchain and it's also going to put the token alright so you can see that here you see your token and then you swap so now I'm gonna trouble console sorry truffle shuffle console and we'll say token equals a wait token got deployed nope sorry capital T token and then I can say balance equals a wait token that balance of and then I'm gonna pass in the first account inside ganache here cutter paste this and balance alright and say balance your string all right boom there we go so we can see here the first account inside ganache has all of the tokens alright and I'll show you why that is so inside of the token file you can do this constructor function this is a function that gets run whenever the contract is put on the blockchain and basically what we do is we take all the tokens and we assign them to the user that deployed the smart contract okay and in this case that's the first account inside of ganache so you'll understand this more when we start explaining how smart contracts work and we code the other one out all right don't worry if this is confusing yet but essentially know that we took 1 million tokens that's how many this is and we assigned them to this account whenever we deployed the smart contract to the blockchain ok so that's you know what we Illustrated here but that's actually not right ok we don't necessarily want the user to have all the tokens we want the eath swap exchange to have all the tokens because we're gonna buy them and we want the E's swap contract to possess them so that we can buy them from the actual smart contract ok so we want to do is transfer all the tokens from this account to the east swap exchange and we can do that and set our migration file like this okay so basically we'll just say I will go fetch the token country like this Const token equals oh wait token dot deployed just so we did in the console all right we'll do the same thing for each swap we'll say each swap and then each swap okay so now we have a copy the token and a copy of the swap contract and we'll say transfer all tokens to eat swap say 1 million and we'll do a weight token transfer each swap address and then we'll say we'll just go to the token copy the total supply put it here and we'll say yeah there we go that's all we need to do so if you look at the transfer function it just takes two arguments the address that you're sending it to in this case it's going to be the eat swap smart contract and then the value which is the total number of tokens that you want to send in this case we just paste it in the total supply which means we want to transfer all the tokens to the ESOP smart contract okay and just note that inside of this truffle project the account that's performing all these actions is assumed to be the deployer or the first account inside ganach like this okay so you can also see that the ether balance has gone down as had this account that's because the deployer has paid the gas fees to put the smart contract on the network okay so that basically means that anytime you do something on the etherium network you create a new transaction you must pay for it with gas and that gas has been debited from this first account here okay so now we can open the truffle console again actually sorry let's migrate it say truffle migrate - - reset this will put new smart contracts on the blockchain okay let's make our changes oh so we had a problem here see here away he's only valance I have an async function all right so let's change that we have to put the async keyword here a sink basically you can't use the await keyword unless you're inside of an asynchronous function call all right so we'll try that again shuffle my great - - reset and boom there we go so now we came up with the trouble console all right now we can say eath swap equals a wait 'if capital e got deployed oops sorry call it as a function sorry typo here perfect if swap address boom and then now we want to say token equals a wait token dot deployed all right and say token are say balance equals awaits balance of toki swap dot address and what we should see here is that all of the tokens are assigned to e swap okay all right moment of truth balance to string oh all right so it didn't work all right so I see why this was my fault so we have to do if we're gonna do is an order you say oh wait yeah I forgot about this sorry everybody all right so wait deploy or dot deploy token awaits token all right so let's try that again say exit and then truffle migrate - reset and actually I kind of like when I run into these errors on screen because it shows you that you know even if I've done this a million times I'm not perfect and then also it helps you debug problems that you're probably going to run into whenever you build your own blockchain applications all right so shut it again truffle console and we'll say eath swap equals wait actually we just copy and paste this I'll just do this make it faster and then we'll say you swap goes wait you slept up wood all right and then we'll say tok balance oh wait token balance of beef swap or sorry 'the swap to address imbalance to string all right there we go boom all the tokens have been transferred to the east swap contract and they're ready to be purchased all right so congratulations you come a really long way in this video so far what we're gonna do next is actually program the e swap smart contract so that we can start purchasing tokens from it now that they're all inside of the smart contract so we're gonna continue here focusing on this smart contract and building it out so specifically we're gonna create the buy tokens functionality okay we're gonna allow people to purchase their tokens with ether all right the be able to go here enter their aetherium amount and then receive you know a certain amount of tokens so we're gonna focus on the smart contract part of this not the interface just yet just the smart contracts so let's talk about how we're gonna do that all right so one way of doing this would be to just you know create the functionality and then go to the truffle console and keep testing it out like we did it in the last video but that's really slow and inefficient so what we want to do instead is write tests that make sure that the smart contract works the way we want to write so there's several reasons for this you know tests essentially they do just that they make sure that the code that you write works without having to interact with it you know on a website or something like that more in the console and you can always keep running them and it just saves you a lot of time and the other thing is it's really important to test smart contracts before you with them on a blockchain and ensure that they work it's almost more important when you're developing blockchain applications and other types of applications because you know smart contracts can't really be changed and you want to make sure that they work before you put them on a blockchain and the testing phase where you write automated tests is critical for that development process right so shuffle lets us write tests like this we can basically just create a new directory all right inside of here we could say make derp it's a mkdir test all right so you can see a new folder was created here and this is where we'll create a new file slight touch will see tests and we'll say eath swap is sorry test is okay and then you'll see that a new file was created here all right so this is the file will write all the tests and we're gonna do it in JavaScript so yeah that's how truffle works essentially it gives us a way to write tests for solidity smart contracts in JavaScript so yeah it's two different programming languages here you know this is solidity and then JavaScript is what we use to write the tests right so truffle comes pre bundled with a few different libraries that are really going to help us out when we write tests the first is the mocha framework this allows you to create test Suites in JavaScript and the second one is the chai assertion library you can read more about these on their websites basically chai allows you to compare things like you know saying a value should be a string or you know whatever the assertion is that is the key word here that you want to focus on right so let's go ahead and create our tests so go to this file and we'll you know create a test like this we'll just say contract all right and it'll paste it each swap and then we'll say accounts all right and then we'll pass in a callback function like this with an arrow and this is what will write all the tests inside of here all right so in order to write tests against it we must first import the smart contract just like we did in our migrations file we can do the same way in the test suite so we'll just say token first all right so conce token with a capital T equals artifacts require token and then contract you know II swap artifacts require you swap you can basically just copy and paste that directly from the migration file right here all right it's basically the same so now we have these inside the project or sorry inside the test suite the next thing we want to do is configure chai all right so that's the library I showed you a second ago this is mocha and then this is chai so we'll configure the chai search in the library like this you can just pull this from the master project on github or you can you know code this out yourself so we say require chai and then we say use do chai as promised and then should okay so that's going to configure our assertions which will observe later when we write the tests right so the first thing I want to do is just create a really basic test that ensure that the smart contract was deployed to the network so first we'll say describe all right Heath swap deployment all right we'll say a sink and inside of here we'll create our first just like this we'll say it contract has a name and I know they doesn't really read quite like English but their works for now all right then we say cost name equals a weight you swap that name all right in order to do that we have to fetch it just look at it in the console so this this code should look a lot like what we did in the console is essentially running that that operation over and over and over again really easily inside the test that's why it's called an automated test so say eath swap equals o8 eath swap new so not deploy but new all right and then finally we'll say assert equal house a name let's say eath swap instant exchange all right remember this is what we observed in the console in the last video and essentially we're just checking for that inside the test so we can go to our terminal and run the test like this we say truffle tests I just make sure you have ganache running like this oops sorry yeah like that right okay so we got a problem here says e swap is not defined so what we need to do is say let you swap sorry about that try like this and boom there we go our first test passed so that's how easy it is to get started testing smart contracts you know we just fetched the smart contract and performed the operation that we did in the console in the last video like imagine how long it would take you to open up the console and do that every single time you can do this command and it does it automatically for you and what we're gonna do in this tutorial series is you know create several more tests that would take us a really long time to check for in the console or maybe with the front-end application or something like that so this saves a lot of time and gives you a lot of efficiency and that's one really amazing thing about testing smart contracts so a lot of people do test-driven development and that's a really good practice I think it's kind of challenging a lot of times for beginners so we're not exactly gonna be TDD so to speak in this video but we are gonna write tests we're gonna have test coverage for the basic functionality of the contract itself okay so now we can do is write test for the token as well all right so just like we described the eath slot deployment before that I'm gonna say describe token deployment all right and we'll say contract has a name and instead of east swap I will just say token right change both of these and we'll say token all right and in this case it won't be East swap it'll be DAP token and then we'll run the test like this all right I said triple test and hopefully it'll pass all right there we go so the contract name is correct as well so the next thing I want to do is make sure that the contract has tokens all right so remember we did that in the last video basically in the initial migration this Miss migration sorry number two we transfer the tokens to the exchange to to e swap itself right and we checked in the console the the token balance for east swap right so we want to run a test that makes sure that that's also correct so we can do that like this we can say contract has tokens okay and we'll say async I just hope you do before and inside of here let's just copy and paste this all right this and they'll also say token new all right so you swap new before that we'll say it soak in new all right and let's see here so essentially we want to do is transfer the balance just like we did here and the migration actually going to copy this all right do this all right and then say assert equal say balance or actually sorry before T that lets check the balance say let balance equals a weight token that balance of all right then pass an e swap address all right and say assert equal balance to string and then what we want to do is you know just copy this value and put it here oops sorry if I'm wrong place perfect all right so let's run that test and see if that works hopefully everything was coated properly we're about to find out awesome perfect so the contract has tokens okay so that's a really good basic test to start off with you know everything is deployed properly everything that we created in the last video is covered in the test suite so before we continue let's do a little refactoring all right the first thing is some duplication so essentially you know we're doing this twice you know token equals token dot new we're doing that here and we're doing that here but what we want to do is have access to the token and every test without having to write this code over and over and over again and we also want to perform this operation where we transfer the tokens you know once so that we you know the rest of the tests work like that and then also the same for you know fetching the eath swap contract so we can do is create something called a before hook like this so we say before I say async passing a function all right and we can just put all the code that would be here inside of here all right and say you swap and we can say just like this transfer all tokens to e swamp all right and then we can take away all this all right and then we should go to run the tests it should still work moment of truth okay boom we got a problem and actually I'm glad we ran into this problem because this is an important thing to highlight I doesn't know what token is and it doesn't know what swap is so there's a few different ways to handle this squit saying when he gets here it doesn't know I swap is and it doesn't know what token is that's because these variables are declared inside this there's a few different ways to handle this how I'm gonna do it is this say let token and then I can say let eath swap alright but I can also do this in one line like this boom done and take these away and then now we have access to token and each swap inside these test examples so try it again hopefully I'll work this time and hit it awesome boom it passes all right so the last thing I want to do is refactor this number this looks kind of funny right so I'll explain how this works you know this might look confusing because this says this is a million tokens right that's how many tokens exist but this number looks like a lot bigger than a million so let me explain why this token has 18 decimal places behind the zero okay so I'll show what that means if you go to source contracts token dot Seoul obviously decimals is 18 all right so what does that mean well basically like when you're talking about currency I'll set the US dollar for example you know one dollar is often expressed like this all right one with a period or a decimal place and then two zeros ACTRA because you know a dollar has smaller subdivisions called cents right and 100 cents equals a dollar so you know you can have fractional dollars like this dollar ninety-nine is almost two dollars but it's 99 cents so whenever you're dealing with cryptocurrency and you know aetherium smart contracts you don't really deal with decimals right you basically have to express things as you know integers so you can't use decimal places so if you're gonna write one dollar as an inside of an aetherium contract you have to write 100 cents like this all right this is how you would express one dollar inside of in aetherium smart contract but for ether you know the native cryptocurrency on the etherium blockchain and many tokens as well they use 18 decimal places behind the zero so you know one aetherium or one ether might look like this and then do 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 right 18 decimal places well that's what it looks like all right and you can't use decimals so you have to take away the decimal place and do everything in cents so to speak see E and T cents right like like cents right but an ether you don't call it cents you call it way all right that's the smallest aetherium value is called way so this is like what one aetherium looks like in way value so similarly a lot of ERC 20 tokens use 18 decimal places just like ether does so we can use the same standard for our dap token that were created in this tutorial so it's going to have 18 decimal places behind it so that's what one DAP token would look like here now if you want to talk about a million DAP tokens you put you know three more zeros so you just do like 1 million 1 2 3 4 5 6 and then you would copy this and paste it here all right and you'll see that's the exact same number boom done so that's a 1 million tokens looks like expressed in its smallest subdivision like this all right it's actually important to understand because we're gonna use helpers in this tutorial series for aetherium I'll show you we'll create our own right now so that we can make this a little more human readable I would say function tokens in alright and what we're gonna do is convert this number from a human readable number like this 1 million to this alright basically like this right we want a human readable function that does that so I'll do that right now we'll say tokens and we'll say return web 3 I'm sorry I will say new web 3 tills actually sorry Oh stupid first web 3 utils - way alright we'll say in that's the number of tokens they're going to pass in and then we'll say ether alright so web 3 is a library that we use to talk to the blockchain we're gonna see a web 3 use a lot more in this tutorial but essentially it has some utilities that allow us to convert aetherium or ether into way which I just talked about a minute ago where I showed you all those 18 decimal places and stuff like that so we can use the exact same helpers for our token because it has 18 decimal places behind it just like ether does all right so we're not actually converting ether or actually converting our tokens to way at the smart contract level or its smallest subdivision but that's what we can do just like this okay so we're gonna use our helper and instead of you know writing out this crazy long number will say tokens and then we'll pass in 1 million one two three four five six and then we'll use it down here as well alright save it for the test again shuffle tests see if it works and there we go it passes awesome so we're gonna use this tokens helper so that we had to write out those really long strings every time it's gonna make things a lot more readable and a lot easier okay alright so that sets up our test suite now we can use this to start building out more the smart contract okay so the next thing I want to do is actually talk about the rate so inside the smart contract the next thing we want to do is actually import the token so that we can use it inside this smart contract you know essentially we're gonna talk to another smart contract from within this one the two are going to interact with one another so if we go back to our diagram you know the east swap exchange is actually going to talk to the DAP token smart contract so in order to do that we must import the DAP token contract into this particular file so we do that like this we do that with solidity symport and then we say dot which is the current directory I'm sorry I'm gonna say token Sol alright cuz that's the same token file that we see here so you swap and then token we're just importing token like this so really quickly we can just run our tests oh and also we don't have to I had from the test we can just do truffle compile to see if that worked all right so truffle compile is just a command that makes sure that the code has no syntax errors alright so that works we don't actually have to go through the process of running the entire test suite just to see if our code is working properly and you'll notice that truffle compile gets run before the test suite even runs so it's kind of just a first line of defense to make sure that everything worked okay so we talkin and then next we want to do is keep track of the token and the smart contract like this say token capital T okay n say public token and what this does is it creates a variable that represents the token smart contract and you know later when we purchase tokens in this tutorial you know we'll be able to call the token methods on this variable you know like transfer for example that's what's going to happen whenever we purchased tokens we want to call this function and we need to have access to it alright so we'll just likes a token transfer and we'll use this particular variable to do that alright so next what we need to do is tell this smart contract where this particular contract is located so we're going to do is create a function that gets run whenever the smart contracts are deploy to the network call it constructor and say public and inside of here we're gonna basically set the token up so when we say token like this when we import the smart contract it's just the code for the smart contract it doesn't actually tell us where it is on the blockchain all right so remember like when we do the truffle console we saw that the token an address just like the counts do like the smart contracts will have addresses that look like this well we also need that to use the smart contract inside of here we need the code for the smart contract and then the address okay so what we can do is pass the smart passed the address in whenever we deploy the token to the network so because I token and say token tok in alright and then say token equals underscore token all right so I use underscores here as a naming convention and it also helps conflict from this right here all right so that gives us a token that we can actually interact with later inside of here all right so also let me stop and explain a couple more things first is how these variables work so this right here is called a state variable name is a state variable because the data that's stored in the name variable is actually stored on the blockchain that's why we were able to go to the console and also the tests and fetch the variable name value for name right so in the same way we want to store the token on the blockchain but this right here this is just a local variable all right it's actually a function argument that we access with the local variable here and this doesn't get store to the blockchain unless we do this all right so that's why we assign token right here okay so this is just a variable that we could do other stuff with and our function will see that more later but this actually writes to the blockchain because it stores it to this state variable okay so we'll see other properties of state variables like for example they can be accessed in other functions where this variable right here can only be accessed inside of this particular function right and again this constructor function this is a special function with the constructor keyword inside solidity that gets one once and only once whenever this contract gets deployed to the blockchain we can't like call this function for example inside the test right because we added an argument here we have to do a couple things all right first we have to update the migrations whenever we deploy the token to the blockchain so if we go to initial migrations or sorry I deploy contracts we have to tell the token address all right that's all we did this first so what we do is pass in the argument for this constructor function right here token with token address like this say token address all right so let's try to migrate the contracts again truffle migrate - - reset remember we need to employ a new copy to the blockchain all right it worked so the next thing we need to do is go to the tests and we want to pass in the token address there as well all right so essentially what we do is just modify what we have already right we just go here you swap and say token address all right and that makes the eath swap contract oops sorry nothing jump test that makes the e swap contract aware of the token inside the test as well it provides the necessary constructor argument that we need to move forward okay so let's keep building this out much the test pass first yeah oh good the next thing I want to do is you know go ahead and create a way to buy the tokens so we'll create a new function inside the smart contract like this we'll just call it by tokens let's say function all right I'll give it a name say buy tokens and we'll do these parenthesis like this and this is where we're gonna write all the code to purchase the tokens so inside of here what we want to do is essentially just transfer tokens from the eath swap contract to the person who's buying them all right so we're going to rely upon the transfer function write this function in here from the token and we just call it like this we basically just say token dot transfer and then that will send the tokens from the token contracts are the ESOP contract to the person who is purchasing them all right whoever's calling this function we need to pass in a few arguments we need to tell it who it's going to and then also the value okay so how do we determine that well the recipient is going to be the person who calls this function all right and inside of solidity we can find out who that is like this you say MSG sender so let me explain that MSG or message is a global variable inside of solidity and sender is the value of the address that's calling this function so you know for example something like this okay so that's the first argument you know who the tokens are going to and then next we want to determine the value so could say like you know one token followed by you know 18 decimal places yadda yadda yadda but we actually want to calculate this value out all right so how do we do that well we know that we're sending in etherium or ether you know the cryptocurrency on the etherium blockchain in order purchase tokens if we go back to our finished application that's what we do we buy the tokens here with ether all right so that's what's gonna happen is the person calling this function is gonna be sending in ether and they're gonna buy tokens so we want to do is determine how many tokens they purchase based upon the etherium amount that they're sending whenever they call this function alright so if you go to our finished app here we see that one aetherium equals 100 you know DAP tokens so we have to perform this calculation alright so what we're going to do is just create a number variable here called token amount all right we'll make a calculation so the token amount it's gonna look like this we can just say you int so this is going to stand for an integer an unsigned integer it's a token amount amount all right it's gonna equal you know something so what's it going to equal well basically we want to do is say you know amount of theorem you know multiplied by the redemption rate okay so all right so the redemption rate equals you know number of tokens they receive for one ether all right in this case that's going to be 100 right so if you go back here you say 1/8 equals 100 dap so we're gonna do is create a state variable inside of here called rate say you int public right all right and we're actually going to assign the value right here in line call it 100 all right so I'll pause liquid clean also say this u n stands for unsigned integer okay which basically means you know 100 is an integer it can't have decimal places and unsigned means that it can't be negative all right means it can't have a sign in front of it like this okay okay so same for this UN token amount has to be a positive integer all right so here's a Redemption rate the number of tokens they receive for one ather that's going to be the rate all right and then what we're going to do is find the amount of aetherium and multiply it by the redemption rate so how do we find the amount of aetherium or ether just like m/s you got sender we can do it like this MSG value alright so what that does is it is another global variable that tells us how much ether was sent whenever this function was called all right so it's a special reserved keyword inside of solidity but this is gonna tell us how much ether was sent whenever the function was called so we just take that value and just multiply it by the right all right so it's pretty straightforward once you understand the basic concepts okay so now we can say calculate the number of tokens to buy let me take this out take this out take this out so quick recap we're just catch them a token amount or taking the etherium amount multiplying it by the rate the number of tokens when they get when they contribute one ether and then we call the tokens transfer function we say msg sender that's who we're sending it to the person who's calling it and then we're passing in the token amount which we calculated here right so we see that two in value and that's two and value all right so the last thing we need to do to this function before we can try it out is make it public so that it can be called outside the smart contract and then the next thing we need to do is make it payable all right and that's gonna allow us to send aetherium whenever we call this function right so if we didn't have this we wouldn't be able to send ether whenever we do it okay so there's give me a little bit more to this but that's the basic functionality for now and we can run a test against it so let's just try to compile the smart contract first truffula compile see if this works and if it does we'll continue on with the tests all right that worked so let's write the basic test for that functionality and we'll say describe so we'll minimize this and say describe I might get myself some space here say by tokens we're gonna write all the tests for this function here say async alright and we'll say it's allows user to instantly purchase tokens for us are from eath swap for a fixed price say sync alright so inside of here we want to do is basically just say you know each swap by tokens alright and then we want to pass in the person who's purchasing them so how we do that is basically tell a specific account so you can see this accounts array here like I say it counts 1 is it from accounts 1 and then what we also need to do is not just tell who it's who's calling the function but we also want to say how much ether that they're sending whenever they purchase the tokens as well ok so we do that with value alright and let's say what they want to contribute 1 ether so we tell it 1 ether you know followed by 18 decimal places 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 remember we can't use decimal places so we have to create a value like this but that would be the basic that'd be the basic functionality we can just say a weight youth swap by tokens so that's not going to check for anything but let's just see if it works just make sure nothing broke yet alright so by Duncan is not a function I'll see her alright so looks like I had a little error let's go back to our code here capitalize the T that's my fall everybody buy tokens should be have it have a capital T let's go back here all good let's try it again trouble tests let's see if it works and boom there we go so it doesn't actually check for anything yet I just want to make sure that this was configured properly so let's refactor this before I move on instead of you know coding this out long form we're going to use utility we're not going to use tokens like this we're gonna say say this alright let's try it again remember tokens work like that but we're gonna say to way from ether because we're sending an ether here also in sorry hit hit want to do one either alright and the next thing we want to do is refactor this accounts that we're not always like reading out of this array so we're gonna use two users in this case alright and you can actually break this out inside the test suite instead of returning an array here inside this callback function we can actually fetch accounts out individually by declaring an array and say accounts or sorry we say deployer that's the first account and then investor okay so deployer is gonna reference the first account inside ganach like this alright that you know you can see their balance keeps going down and then the second account will be the investor okay we can see their balance has also gone down because they just called the buy tokens function so they actually went down by one ether each time we ran it so now we say investor here on the test see if it still works well there we go all right so the next thing is to explain you know from a new value so this from here is gonna correspond to msg sender all right we specify the address and then the value here is gonna represent let's see here we go the MSG got value okay so this corresponds to from and this corresponds to value just like this I'm gonna take this away all right so now before we continue on with this specific example let's refactor this into a before hook just like this so inside of here this say before okay and we're gonna move this inside of there all right and we're to say results and we're gonna say let results okay and we'll say purchase tokens before each example and so inside of here what we want to do is just check that the balance actually changed so we're gonna check that the investor received the tokens so let's say Wester received tokens after purchase all right and we can just check for the investor balance like this we just say you know let Bester balance equals weight token balance of and say investor and then we check it say assert equal investor balance two string tokens 100 so let's try that see if it works boom there we go awesome so that's the basic functionality so the next thing we want to do is check the east swap balance we're gonna make sure that you know it lost tokens it lost 100 tokens so like this let's just say you know let eath swap balance will say check each swap balance after purchase and we'll say eath swap balance equals a wait token balance of all right passing an e swap address all right and then we'll check it will say asserts equal eath swab balance to string and then pass in tokens and then the number of tokens should be that many once we subtract a hundred and then say yeah there we go should work let's try the test see if it passes boom boom there we go each swipe balance to string us on a function so see your East fob balance okay I see the problem here I just missed them in all right save that try it again so sorry I'm full of typos today everybody yeah all right boom there we go so the next thing I want to do is check that the ether balance went up so we could do that like this we can say eath swap balance equals oh wait web three eath get balance this is the function that we use to check the etherium bounce eath swap balance all right we can say assert equal eath swap balance to string and we can say web 3 you Dill's to weigh one either let's also do that see if it works okay we got a problem here I just missed typed this you swap address sorry everybody let's try it again hopefully this will fix it see if it passes all right there we go works so we can see that the token bounds went down and the eath swap exchange received one ether all right so the ether left the you know users account the investor's account and went to east swap and the investor got tokens all right and then the token balance for the ESOP exchange went down just like we expect right in our finished application the investor goes here and basically they just put in one ether and they got 100 tokens and click swap the exchange or each swap in this case gets one ether and they dispense 100 tokens and the token balance goes down while we're here I want to do one more thing I want to teach you about events inside of solidity aetherium allows you to emit events from your smart contracts essentially they're a way of subscribing to events in the blockchain and finding out that something happened so this case what we want to do is trigger an event that tokens were purchased all right so say emit and events so basically we want people to subscribe to this and say oh you know a token was purchased and it's going to allow them to do lots of things we'll be able to inspect the value of how many tokens were purchased and things like that it'll show you in the test ok so we do like this first we needed to define an event it's pretty easy we can just do it at the top of my file like this we say event token purchased all right now to add a semicolon like that and we can add some arguments to the event we say address count that's going to be who is calling the function you know who purchased the tokens address token of the token that was purchased will say units amount the amount of tokens that were purchased and then you nth rate you know the redemption rate that they purchased the tokens with so basically someone if they had all this information could you know make like a transaction history or something like that and determine the exact amount that was purchased and all that kind of stuff and how much ether they send so that's that's why you Justin like that so it's really easy to omit the event inside of the function we just say emits token purchased all right and so the account is gonna be MSG dot cinder all right just like we did here and then the address as me the token all right for the token right here but we must convert this to an address like this okay and then the next thing is going to be the amount it's just token amount just copy this and paste it here and then finally the rate is going to be the rate they purchased it with here all right and then we'll just do a semicolon at the end of the line so let's just run the test again make sure they didn't break anything all right should work just fine all right it passed perfect so now we want to do is actually inspect this event inside the test to make sure that it you know returned the arguments we expect so what we can do is go back here and inspect the event like this I'm just going to log into the console first so that you see how we find it essentially we're going to use this result that was returned after we you know called the function and we'll just say Const event I'll just say this console log and we'll say results that logs all right this is the laws that come back from the function call we run the test again to see what that is it'll just show it here on the screen when the tests finish will be able to see what that looks like since we did a console log right boom there you go so this is what the log looks like so it's got a bunch of different properties here's got like the you know ID the address all that kind of stuff but if you look at the args and then the result you can see these values account token amount and rate which we defined inside the event so the event gives us you know some history of the data that was sent in with the function and that's one of the reasons we do this all right so we can write a test to make sure these values are right we just dig into this object by saying you know result logs all to get the first one so say zero and then dards all right so let's run the test again see what those are that should just give us this set of values here all right boom so now we can call a count token amount and rate on this directly so say say Const event equals this right what just showed you say assert equal I'm just gonna do this really quickly boom start equal the event account is the investor all right the event token is the token address the amount is a hundred tokens and the rate is also 100 tokens all right so copy this you pause the video if you want you to see all that code and understand it more I'm gonna run the tests see if it works all right it passes perfect so the last thing I want to do before I wrap up this section is create a requirement all right so essentially what we want to do is require that this exchange actually has enough tokens so if someone like tries to purchase it like then if it someone tries to purchase more than the exchange has then it'll fail alright so basically we're gonna say require touken that balance of all right say address this that's greater than or equal to token amount all right so essentially that means if somebody tries to buy more tokens than the exchange has then this will fail so break that down require is just a statement inside of solidity that will say hey if whatever you pass into here if it evaluates to true keep executing the function if it evaluates to false stop executing the function and don't do anything else okay and throw an error okay so we can check the balance of each swap inside this function by saying token balance of right that fetches the balance and then this references the address of the smart contract so this is actually eath swaps address okay and we convert it to an address type like this right so basically we just say make sure that balance is greater than or equal to the amount of tokens that are getting purchased right here all right so make some notes about that so to say require I swap has enough tokens and then will also make a note here that this transfers tokens to the user all right so I'm gonna save that run the test again see if it passes and hopefully nothing changed and the tests will still work all right there we go so you know we could write a test for this but I'm gonna skip it for now and I'll explain why basically I would have to have a million ether or well you know close to a million ether in order to I guess I had to have a hundred thousand or ten thousand and something like that right a lot of a third order to purchase all the tokens and each swap or more but I don't want to really simulate a test scenario where that's possible I'm just going to trust that this works for now we're gonna test out other requirement statements in the next video so you're gonna get plenty of practice on that but for now I'm just gonna leave this as is the test pass and we're gonna stop there for now okay so let's continue on we worked on this you swap contract and we created the buy tokens function so if you look here you know this is the bide folk sorry the buy tokens function we created last time now we're going to create a sell tokens function so we'll do that just like this we'll go ahead and give herself some space here all right and we'll say function say sell tokens just like we would the buy tokens function and I'm gonna even go farther on the screen okay so what needs to happen inside this function well basically we want to do the opposite of what we did here so instead of transferring tokens from the east swap exchange to the investor we want to do it the other way around we want to transfer tokens from the investor to east swap and then we also want to give the investor ether okay so we need to write function that or start some code that performs a sale say perform sale so how do we do that well first we can give the user ether we could say msg sender say transfer and then some sort of ether amount okay so we haven't defined this yet but that's the core code that we're gonna write in order to give the user a theorem okay so I don't forget msg that sender is the person calling this function Whoopi's all that in the last section here alright and so transfer is not a function that you've seen yet inside of solidity for aetherium okay we saw here on the token this is you know the transfer function for e rc 20 tokens pull that up right here transfer right but here what we're doing is calling transfer for ether you know the native cryptocurrency of the etherium blockchain so what we're doing is saying send ether to the person calling this function and we want to tell it you know how much we haven't defined this amount yet all right so we're gonna do is pass in an amount here you int amount all right so basically we're to say you know how many tokens are they selling right let's say they want to sell 100 tokens will the pass in a hundred here so we can calculate this ether amount just like we calculated this token amount we'll just do the opposite say calculate the amount of ether to redeem and we'll say you int ether amount equals amount all right this is the number of tokens that they're selling so we're going to take the number of tokens are selling and we're going to divide it by the rate okay so remember here we multiplied the number of the amount of ether that they were gonna send by the amount of sorry when we back that up we multiplied the amount of ether they sent when they went to buy tokens by the rate to determine the token amount so when they sell the tokens we were backwards we take the amount of tokens that they want to sell and we divide it by the rate to get the ether amount that they receive whenever they sell the tokens okay and then we send them that much right so that sends ether to the investor but now we want to do is also transfer tokens from the user the investor to the eath swap exchange so that it gets the tokens back you know it's selling the tokens so we had to send the tokens to the exchange and we also have to you know give ether to investors so it's a two-way street right so how we do that is we say token and then you know here we did transfer your token transfer all right we'll just let's do this for now all right and then what we want to do is swap this alright we could say you know token amount here and then swap them and when I say swap I mean instead of sending it to image sender we can send it back to the smart contract so we say address this alright we could do that right and that would essentially transfer the tokens to this which is the smart contract right and then the amount but this isn't gonna work so here's why basically whenever the investor calls this function it doesn't necessarily we can't let the smart contract call the transfer function on an ERG 20 token like this on behalf of the investor it's not how I XI 20 tokens work otherwise you could just like hide transfer functions inside a smart contract calls without people instantly knowing about it and you could like you know send your money away so in order to avoid that ERC 20 has a special function called transfer from alright and so basically this is what allows other smart contracts to spend your money so we have to use this transfer of thumb function inside of here so I transfer from alright and so we say msg sender all right so that's who it's going from that's who it's going to and this is the amount so see that here from two amount so this is the special function we use anytime you want a smart contract to spend your tokens for you okay now before we do that you know in the test you'll see that we're gonna have to approve tokens first like that's how transfer from works this approved function must be called before we can call transfer from will see that and play in a minute but we don't have to do that inside of the smart contract basically we could just do the approval outside of it and then we'll do this transfer from function any type of call cell tokens which we'll see in a minute like basically you have to call approve and then cell tokens and this will work okay so we'll see play right now let's go ahead and test this out we'll say a chuffa compile make sure there's no syntax errors before we update the tests all right okay so we got a problem here we need to make this function public all right so we'll say public that's gonna allow it to be accessed outside of the tongue sorry out the smart contract okay perfect so now let's go to the tests you swap tests and we'll create a test down here it's go ahead just copy this one say sell tokens alright and we'll clear out all this and we'll clear all this we're just making the skeleton in place here all right so for the description we'll say it allows user to instantly sell tokens instead of purchase to e swap for a fixed price okay so we're sure we reverse that boom it allows you to instantly sell tokens to e swap a perfect price so inside of here what we want to do is call that function we just created so we'll say results equals a weight eath swap sell tokens all right and let's just sell the all 100 tokens here that we purchased back to the exchange say tokens 100 and we'll say you know from investor right so I'll show you this is gonna blow up I'm sorry truffle tests that's not going to work and I'll illustrate why yeah let's hope it actually doesn't work yeah okay boom so it incurred it reverted all right so why well it's just like what I was saying a minute ago in order to call transfer from we have to approve the tokens before the smart contract can spend them for us okay this this function that I'm talking about here this allow smart contractors spent our tokens so we have to call this on the token itself before we can call buy tokens or start sell tokens on e swap so I'll show you let's say a weight invest our token so not eath swap but token approve eath swap address all right so this is saying we want each swap to be able to spend the tokens for us and then we specify an amount so we'll just say all hundred tokens and then we'll just you know do the rest of these same arguments so I'll make notes inside of here that the investor must approve the purchase and then you know this is the action where they actually sell the tokens all right so let's just run it and see if it works all right so now it didn't revert so that shows you that we have to approve the tokens before we sell them and this is going to be a critical step whenever we developed the client-side application as well okay so now we want to do is check the investor balance went up or sorry went down so we can just copy this example so do this and instead of 100 will just say zero because they sold them or the tests see if it passes and basically we're going to check the opposite in this test of what we looked at for the last test so yeah that also worked all right so now we can make sure that the east flat balance is corrected for the purchase all right so ease fly balance equals awaits token balance of each swap so now it should be back up to you know million one two three four five six and the East five balance should be zero or sorry the ether bow should be zero all right so it was back to the way it was when we started this tutorial series or sorry in the first test example yeah awesome perfect so that's doing pretty well now let's go ahead and add an event to the sell tokens function just like we did in this first example so we'll copy this and instead of tokens purchased or token purchased say tokens sold and tell you what while we're here I'm going to update this name let's do tokens plural all right I'm gonna update that say tokens sold this is probably gonna cause some problems for people so sorry but I just want to make sure this is it looks good before we continue so same thing it's gonna have the same arguments account token amount and rate and then we'll just omit that at the bottom so let's say you know emit an event like this emit and events emit tokens sold then we'll pass an MSG sender address of the token right then the amount and then the right and then similarly you know we'll go into the test and copy this same event check right well dig into the logs paste this here let's even say had some comments here say check logs to ensure that the event was emitted with the correct data I had this comment here as well and we'll update these values so you know the account should be the investor should be a token address it should be a hundred tokens and the ether amount surely the rate should be 100 all right so let's run the test see if it passes all right it worked okay so lastly what I want to do is you know add some requirements to this function okay so the first thing we want to do is make sure that youth swap has enough ether to redeem the tokens so just like we did here we want to check the e swap has enough ether whenever the sale happens we'll do that before we perform the sale okay so basically what we do is we can check the balance like this address this balance all right and we want to make sure it's greater than or equal to the ether amount okay and we want to require that all right let's just run the test see if it passes okay boom all right so this is a really strange error um and yeah this is this is a kind of a weird thing all right so this is a real strange quirk you need to go you're truffle - config file right below here and say EVM version Petersburg all right so I don't want to get too in-depth on why we need to do this but just try it and hopefully you'll make your test pass it try it again and there we go awesome so this is really strange quirk but this is a real gotcha just make sure you put this in your treble - config file here in order to continue all right so last thing I want to do is make sure that the I'll see here that the user can't sell more tokens than they have okay so I'm gonna write the test first actually and then we're gonna write the code so basically we'll test for failure here failure I'm gonna show you how to test for failure say investor can't sell more tokens than they have okay so we'll say oh wait 'if swap sell tokens and we'll try to sell like you know 500 that's more than the investor currently has and will say if from combustor I say should be rejected all right perfect so let's run the test it should fail so we expect and then we're gonna write the code to make it pass all right perfect and actually it looks like it passed the first time and that's because probably because the token is throwing an exception not necessarily the Swap smart contract okay but what we can do is write an explicit requirement in the contract as well that would look like this okay say user can't sell more tokens than they have and like I said I think the ERC 20 tokens already taking care of this for us but we're gonna do it for tutorial purposes just to show you explicitly how you do it inside the smart contract say we require token balance of MSG at sender is greater than or equal to amount right I think it's because it's trying to Trent I think whenever it calls the transfer from function its trying to you know move tokens that you don't have so it's gonna throw an error anyway but we're just going to add this here so you can see how you check for yourself and there we go still passes awesome so that's it guys that is the completed smart contract code congratulations you've come a really long way and a series so far so there's one final step before I move on to the next section this is really important don't miss this we want to put the smart contracts the completed smart contracts on the blockchain so we'll a truffle migrate - - reset and that's going to put them on the blockchain and also put the final compiled versions inside of our truffle project like this you can go to source or actually start build where is it source contracts sorry it source ABI is my fault I swap alright so here's the completed smart contract and it even gives you the C Network shows you the address of it on the network all that kind of stuff awesome alright everybody so congratulations that's it and now we're going to do is start building out the client-side website or user interface which you see here so really quickly if you liked this tutorial series go ahead and subscribe to the channel and put the like button down below that really helps these videos get found with a youtube algorithm and also if you want to take that next step towards mastering blockchain then head on over to dap university comm for it slash bootcamp all right so let's continue on with this right this is the finished product that we're working toward and right now you know we have just a really bare-bones website this is the starter kit that we you know began the product with we haven't really modified the code for this at all and so that's what we're gonna do in this tutorial at least in this part of the video so we're going to connect this to the blockchain alright we're gonna load our account and put it here and wire up this identic on and we're gonna get started with all of that right now so a few quick housekeeping tips you know if you're just picking up at this point the tutorial make sure you have your a node packages installed you can just do that with NPM install right that makes sure that you have all the dependencies on your computer to run the project make sure that you have your webserver running you know I've got mine here in a separate terminal tab but you can start your webserver with NPM run start all right next make sure that ganache is running this is your development blockchain right make sure it looks like this and you see your accounts with ether and then finally make sure that your completed smart contracts are migrated to ganache as in you've actually put them on the blockchain and you can do that like this shuffle my gray - - reset okay okay so again yeah I've done all those commands so you don't have to that's why I didn't click enter but you should if you haven't done those yet all right so let's go ahead and open up the project again and kind of take a quick tour of the client side application before we start modifying it we go to source components all right go to app DJ s and here's the main component that we'll use for this tutorial we'll start here you can see the code for this page right here go here all right deputy diversity starter kit Dappy diversity starter kit so we're gonna basically just start editing this I'm gonna clear out all the code inside of here let's just do this and make sure we can actually update it make changes forgot that and we'll just say you know hello world yeah awesome so are your first page and there we go boom and we're going to eat the logo out and we'll remove it from the top as well and there we go okay so we've got a fresh palette to work with and now we're going to do is go ahead and connect the application to the blockchain well actually before we do that let me make a quick mention of react.js and kind of how it works so you don't have to be experienced with react in order to follow along with this tutorial I think you can pick up a lot about react just by watching me code and you know building something and react yourself so basically react tjs is a JavaScript library for building user interfaces alright so what it does is it organizes your code into these things called components and that's what you see here you see class app extends components all right we're pulling in component right here from the reactor library which we installed inside of our package JSON file okay so basically these JavaScript files you know nsj right here they actually mix HTML code and JavaScript code okay so you can see like this is JavaScript right here class extends component render is a function in JavaScript it has a return and inside the return this is all HTML code that we see here a webpage right right here all right so inside the HTML code you can also execute JavaScript so if I undo like what I did a minute ago you see this source logo right if I go back even further yeah source logo basically these curly braces anything inside the curly braces is JavaScript essentially so this logo right here is a variable that was imported right here from the image and basically this is just the path to the image okay so I'm gonna redo all that and well sorry yeah you just kill that and manually redo it go back to page here all right so yeah anyways I'll take another quick tour of react so it's component base yeah this is what a component looks like you know you can see this class hello message that looks a lot like our app component let's see here so the next thing is react State all right this is gonna be a critical concept to understand as we build this tutorial essentially react State is sort of like a database kind of on the front end it's a place where all the the data for the application goes so for example you know if you were gonna build a to-do list and react only right you can see it to-do list well where do you store all the to-do items on the to-do list right if I say item 1 and click add item 1 and say item 2 like where do these go well they get stored and reacts State object which kind of acts like a little tiny database right it's not persistent you know if you refresh the page everything goes away but it's a little temporary kind of database ish object inside the react component all right so you can see it right here this is the react state object right here say this state equals this object and that's where you'd store like all the items in the to-do list alright so for our tutorial we're gonna make pretty heavy use of the react state object to store all the data that comes back from the blockchain like the person's balance how many total how many how much ether they have and your their account address and all that kind of stuff ok so let's see here if there's anything else to make note of I think that's a pretty good overview to get started we'll see all this stuff in play and I'll reference the reactive documentation and get a little bit later when we wire up our component so let's go ahead and do that let's let's connect our website to the blockchain alright so in order to like turn this application into a blockchain application two things need to happen all right so the first thing is connect app to blockchain and then second is connect browser to blockchain right so even if you connect your app to the blockchain if your browser can't use the app with the blockchain it's no good alright so we're going to do each of those things right now first let's actually do the browser to the blockchain that's the easier part and it has to be done first before we can really successfully make use of this part so we're gonna stack words right so in order to connect your browser to blockchain we're gonna use meta mask alright you installed this at the very very beginning of the tutorial okay so make sure you've got metamath setup properly go back and revisit that section if you haven't already all right so basically if you open this little fox icon you know you'll probably see a count 1 right here this is your first time using meta mask and you know you probably connected the main net right here so the first thing you want to do well actually it's sorry let me explain Matt a mask essentially your web browser by default doesn't talk to the blockchain you need a special browser extension in order to do that and that's what meta mask does so this is an ethereal wallet alright wallets are how you connect to the blockchain and what you want to do first is connect to the correct blockchain okay so if you click this button up here yours probably says main if the ARIMA network you want to do custom RPC all right and we can call this ganache and say HTTP colon 4 slash forward slash local hosts port 75 45 alright so I have already done this so it won't let me save it anyways just click Save so then go and select the instance you just created I'll go ahead and select annachi err alright so once you've done that you'll have correctly connected to your development blockchain that's this right here okay so the next thing I want to do is import this account right here the very first account that's important into meta mask so you'll click this little key icon right here so show your private key alright you can copy it click OK so I mean make sure you don't actually use this to store any real money because everyone who's watching this video will have seen it and then go over here go to med mask click you'll see you're gonna counts import account and then make sure this says private key right here on select type and then paste in your private key and click import so it's gonna tell me I've already done it because I have but you should basically you know see success and you should see your account connected right here alright so once that successful you should see an ether balance right here and you know your ganache network selected ok so that's step one right connecting your browser to a blockchain so meta mess does that and then the second thing is connecting your app to the blockchain so we're going to use a special library for that alright call web 3j s and you've already seen web 3 a little bit in this tutorial whenever we built out the tests right if you go back to let's see your source test or test test test I swap test you'll see let's see here web 3 utils you know two-way you'll also see like web 3 let's just search for it web 3 eath get balance stuff like that so we've already used web 3 a little bit but we're going to use it on the client side in order to connect to the blockchain that's what it does and basically how web 3 works is it works with the concept of an aetherium provider so basically you know meta Mask connects to an aetherium node to talk to the blockchain that's what it does with ganache and then meta mass exposes that as a provider to the web 3 JS library so basically it's just that's that's the point of connection that you can start using in your application so it's going to get started doing that so what I'm gonna do is go to my main component here go to the App J's file alright go here and the first thing we want to do is import web 3 into this file ok so this is how we do it instead of react we use this import here and we do like this import capital web 3 from lower case web 3 with you know single quotation marks around it and I'm gonna go ahead and kill these semicolons just for consistency we don't need them all right and so basically we can load up web 3 inside of our component like this ok new function so here's you know this render function will create a new function here called load web 3 say load web 3 alright and inside of here is where we're gonna pull the etherium provider from meta mask and expose it to our application alright so essentially I don't want to reinvent the wheel here I'm basically just gonna use meta masks own instructions on how to do this so meta mask just tells us you know straight-up how to do this we don't have to reinvent the wheel here you know here is their suggested code on how you connect to meta mask with your web 3 provider ok I'm sorry with web 3 library so I'm just going to take this and modify and put it straight to the application so don't necessarily worry if you understand everything that's going on here this is just kind of like what they tell us to do okay so essentially what it does is it looks for two different things one is window aetherium and window dot web 3 and this is basically for modern web browsers they'll have this and legacy web browsers will have this and if you don't have met ematic installed will show the user and alert you know not aetherium browser connected please use matt mask alright so the next thing we want to do is make this asynchronous or start make this yeah support the oh wait keyword right so we have to do a sync so now we want to call this so in order to connect to this i'm going to create new method here called component will mount alright and then inside if you're able to say it wait this load web three I'm sorry I can't code today eyes and then if we're using the awake keyword here we also have to make this asynchronous async and then I'm gonna say console dot log say window dot web three alright so we'll do that go back to our project here and then open this go to console and there we go there's our web three instance awesome so web three is we're going to use inside our application to connect the blockchain if you go back to our tests you'll see we can do stuff like get the users current balance right web three eath get balance we can do all kinds of stuff and so make it quick mention this component will mount this is a special lifecycle method and react that runs whenever this component is going to get mounted to the react virtual Dom so it gets called before render so essentially you know before we lay out what it was saying is before we lay out all this HTML content on the page do this alright we want to wait for this to finish before all this happens let's continue on here I'm going to remove this console logging statement so now what I want to do is create another function that will actually import all the data into the application that we need that's currently stored on the blockchain alright so we'll call this wait this load blockchain data alright and then we'll create this function here and be asynchronous async load blockchain data alright make this a function so the first thing I want to do is we're windowed at web 3 to a variable for shorthand so do we have to keep keep retyping window which we're going to call web 3 a lot in this function throughout the rest of this tutorial but the first thing I want to do is actually fetch the account that we're connected with inside met a mask alright so we want to take this account and pull it out so we can use it in our application so if you look at our finished products right you know it shows our account here it reads the balance the ether balance and also touken balance so we need this account to put all this information on the page it's sort of the first step so if you look at the web 3 documentation here this is how we fetch the accounts from metamath cards just web 3 eath get accounts all right so it's pretty simple appreciate forward and we can do that just like this I was like Const accounts equals a weight web 3 eath get accounts all right and then we'll say console.log accounts all right so let's go wrap okay so accounts is not fine it's like I just made a typo here there we go so here's the account that we're connected with the meta mask all right so to a EC right to a EC so that looks correct and you'll see this is inside of an array so really this is like could be multiple accounts but there's only one inside of here and the first one is the account that we want to connect to so we can just fetch that out of the array you know you can just say like here's an array with you know different write foo bar Baz and this is an array something with the first item out of this array basically oops sorry array equals 4 with the first item at this array we just say array 0 and there you go so we'll do the same thing with the accounts console we'll just do like this counts 0 and then there you go so you know arrays with zero based index so the first item is 0 the second item is 1 third item is 2 etcetera etc so next we want to do is actually store this in the react state alright so if you go back to our reactant ation here I talked about this briefly earlier you know the state is how we keep track of all the data and in this case we're going to store the blockchain data inside the state so let's follow reacts own instructions on how to set up the state so I'm just going to copy this this is what it tells us to do all right just below star just above the render function I'm gonna paste this in alright so got the semicolons here for consistency's sake kill this because we don't need that all right so this is basically what we need to do we need to take all right we just call this super because what it does it takes the constructor function well sorry let me back up the constructor function is just like the constructor function we saw in our smart contracts if you go back to components or sorry contracts source contracts you know you swap we have a constructor function inside of there as well so this is the you know function that gets run whenever the smart contracts created similarly this is the function that gets run whenever the component is created alright and you know we're inheriting from a different component here or extending so what this does is it calls the constructor function on the component that we are extending and then we execute our own code inside of here okay so what this does is it sets up the default state all right so in this case we want to say the default account is gonna be equal to an empty string okay so then what we want to do is actually set this value alright and we do that with the special functions I react like this let's say this set state and then we pass it an object okay and we say account and we'll say it counts zero alright and then what we can do is log this back out we can fetch it back out from state sorry and say let's see this state that count and it should be the same thing alright boom there you go it's the same awesome so we can do the important thing to like note is that we set this state here so that we can access the data and other places in the application so for example I can call console.log you know this state account died here in the render function right which I couldn't do earlier without putting in the state somebody that hit refresh still works right perfect alright so now what I want to do is fetch the balance okay so we've got the account from meta mask and eventually we want to show this ether balance here and we can do that next inside of our account or sorry inside of our application so we've seen that before actually so if you go back to the tests you swap tests so you get balance eath get balance all right look here recheck the eath swap balance before we did web 3 eath get balance so let's just copy this from the test since you've seen it before and do it inside of their front-end application alright so instead of each swap balance we'll just call this const balance I will say eath balance and this is going to be the balance of this account right not east swap it's gonna be the user who's connected to the application will say this state account and we'll store it to the state just like we did with the other one say this set state I must say eath balance equals each balance now I'm gonna show you a pretty cool thing in JavaScript you know in this version of JavaScript and es6 if you have a key and a value of a variable type or sorry let me explain that better if you have a key that has a variable value and they had the exact same name you could just do this you can you don't even need the key or the colon you could do that okay so that's the same as doing this because they have the same name and you couldn't do that here because it's not the same okay so now let's at the default state and let's say the default balance eath balance is zero right and then let's do console.log this that state eath balance okay there you go boom so you see that looks right so ninety seven point eight seven three ether alright so you know you don't see a decimal place here and that's okay remember that i explained in the previous videos that ether is expressed in way when you move it around so that's the smallest nomination so basically you know it's like a like a penny for a theory i'm a really tiny penny and it's got you know eighteen decimal places after zero you don't use decimals so that's why you see this big number good all right so now what i want to do is show the count that we just loaded on the page right we want to put it up here just like this finished product okay and we also want to add this cool icon that's generated automatically with our etherium address so the first thing i want to do is actually move the navbar to its own component all right so you're gonna see a really nice benefit of using react components is that we can create more components just like this one that are reusable in other parts of our application alright so i'll create a new file like this sorry new file and we'll say navbar capital in navbar dot j s okay and so i might do is just copy all this and then do this take out these two alright and then take out pretty much all this alright so we got our render function here and then we'll just take the navbar part all right and then do this and then we'll rename this this app to navbar oops start navbar alright that's pretty much all we need to do for this component for now now let's go ahead and import it into our project here sorry our main component so you can do this you can say import a navbar from dot four slash capital in navbar OOP sorry net bar save that and then let's go let's see here let's just go back to the website and make sure that everything it looks right alright let's go here I'm and cook refresh and nothing changed that's okay we didn't actually render out the navbar on this page I just want to make sure that it imported properly without any errors so it did and say well let's go ahead and change the name here so that we can see our new navbar the page will this call this beef swap alright save that refresh the page so we don't see eath swap yet that's ok because we haven't moved the nav bar down here so now we want to do is take out all this code right here and just say let's make this symbol a greater than symbol or less than symbol sorry navbar capital in nav bar and then forward slash there we go awesome now we should see east wob boom there we go east swap so there's our new nav bar on the page so what we've done here is created a new react component right like like this here's a new nav bar and its own components and we've imported it and then we've rendered it out on the page and reduced you know the amount of code that we see here down to this one line ok so now we want to do is show the account here on the page so in order to do that we need to pass the account down to here so basically what we've done is we've loaded the account we've set it in the react state that we defined here but the problem is this component right here doesn't necessarily know about the state for this component like the state just belongs to this component so we can pass it down like this we can say account equals then do some curly braces this that state account all right and then inside of the navbar here we can render the navbar the page or sorry we can render the account on the page like this we can just say let's just do a paragraph here for now and then we can say curly braces this that props count all right so here we go and there we go we can see it there you go awesome so let me explain this whenever we use these curly braces we're basically executing JavaScript inside of the HTML code here and this dot props right is how we fetch data passed down to this component so we say this that props that account is this right here so we said account this say that account gets turned into this props that account okay so props is just short for properties I believe and this is how you like you define the components properties like you add a new property here and you saw props here whenever we set up the constructor as well alright so now the next thing we want to do is add a better we want to render the component out on the page now the next thing we want to do is render the account on the page in a more pleasing way so right now you can barely see it's the same text color so I'm gonna basically delete this and add some markup that looks like this okay so this is basically just creates a unordered list with bootstrap that's going to make it look a lot nicer all right so let's save that you can just you can just fetch this from the code down in the description below if you don't want to code this out step-by-step alright so there you go we can see the account here looks a little bit nicer alright and then the last thing we want to do is add this icon here alright so this is the identical that's going to correspond to the account itself okay so how do we do that well if you look at the identic on library that we saw at the very beginning it shows us how to do that so um it shows you how to do it basically you just pass it a hash in this case this is going to correspond to the etherium address and then you know here you go you can see this image with the width height and then for the source attribute it's going to have this data alright and it's gonna we're gonna concatenate the string and pass in the data this way so I'm gonna kind of create a better version of this like this that we're gonna use in our application so don't don't worry if like you don't fully understand what's happening with this library that's okay you can just kind of go back and reflect upon this later try to get a better understanding of it so for now I'm going to do is just import the identic on library inside this component alright like this and then I'm going to create a way to list it out the page so just below the ending Li tag before the ending UL tag I'm gonna put this in here alright so basically if the account exists that we want to show this image alright and this image is going to be the identity on so we give it a width a height and then we create this source attribute alright that looks like this alright and then we pass in the account this dot props that account alright let's go back to page and see if it worked alright it did work it looks kind of funny so let's just fix it so we need to move this inside the Li so sorry about that let's try it again and boom there we go awesome it worked this looks just like our just like our finished product which I accidentally just closed it's a very cool so basically does is it takes your aetherium address and then it creates this icon and you know if we change accounts in meta mask you'll see the account change refers to page and boom there we go we get a new identity con alright so that's it for this video this part of the tutorial series you know we've connected the application to the blockchain we've wired up our web browser to talk to the blockchain we've the account we've loaded the balance we've learned about react Jas you've gotten a lot in this section right so congratulations for making it this far so in the next video what we're going to do is continue building out the project and implementing the BI tokens feature that we created with the smart contracts on the backend now we're going to wire up the client-side application to actually talk to those smart contracts we'll see you talk to the smart contracts and purchase the tokens all right you know we have created the smart contracts for the east swap exchange we created a token smart contract and we've connected our website to the blockchain now we want to do is actually load these smart contracts into our app so that we can use them all right we want to end up building this and we need the token smart contract and we need the eath swap smart contract to facilitate this you know buy and sell mechanism that you see here you know the client side website that we're building right now is our front end and we basically finished the back end already and what we're doing right now is essentially just you know connecting the front end and the back end parts of our application all right so the first thing I want to do is go ahead and open up the code and go back to where we were we loaded the account and we loaded the ether balance of this account all right so we can take out this console logging statement and we want to continue on with this all right we want to load up the smart contracts into this project so the nice thing is we can we can just import the smart contracts directly from our truffle project right that's one of the reasons that we have this special setting instead of our truffle project to change where the smart contracts are basically we can take this eath swap file and import it into this app Tijs file to use the smart contract directly with web 3 j/s okay so basically this is just an ABI right here that you see this is a JSON array that describes the functions of the smart contract you just tells you how all the code works basically and we can use this ABI to create a JavaScript version of the smart contract so that we you know call its functions just like we didn't set our tests but inside the web application all right the front-end application so I show you how to import that to the project like this you just say 'i swamp i'll stood above the nav bar actually alright he swapped it's an import capital e capital swap right just like the smart contract from dot dot means go up a directory right we're here go up or directory and then go to the api's folder and then take eath swap out of it json and assigned to this variable and then likewise we'll do the same thing for our token so just above each swap will import the token now technically this entire file isn't an ABI so this isn't necessarily the best name for this but you get the idea all right the ABI is technically inside this big JSON object but that's okay now that we have both of these imported we can use them inside ablow blockchain data so right here what we want to do is create a JavaScript version of the smart contract so that we can you know fetch we can use we can interact with it we can call its functions like balance of we can do all kinds of stuff so first we'll start with the token and the main thing we want to do is get the token balance so that we can show it on the page like this right here all right so we've got the ABI for the token here but let's see how we create a JavaScript version of it well we do with the web 3 library and if we go look at the web 3 documentation they tell us how to create a new web 3 contract like this all right you just say new web 3 eath contract and then you need two pieces of information you need the JSON interface and you need the address all right so I'm literally just going to copy and paste this inside if you're alright so so new web 3 eath contract and you need the ABI any of the address so we'll just say Const token equals this and we need constant a bi we need to fill that in and then use a conscience we need to fill that in all right a bi address so those are two pieces information we need in order to create a JavaScript version the smart contract so why is that well the ABI tells us you know how the smart contract works what the functions are basically just tells us what the code looks like all right and then the address is where that smart contract is on the blockchain so you can multiple you could you could have multiple smart contracts that have the same ABI but you want to tell it the address of the specific smart contract that you want to use okay so I'll show you how to get all that information we'll start with the ABI so if you look inside this ABI is file token JSON you know when we imported this right here we imported this entire JSON object so we can literally just get the ABI right here this ABI will just equal token token to ABI and then the address will be inside of this file so if you look inside of here here's ABI let's look at the networks all right so there's just like there's a bi key there's also a network key so this will tell you the different networks that the smart contracts deployed to on the blockchain and we're specifically gonna look at this network this is ganach 5777 like if you go to a ganache you can see here 5777 right here all right it's the same ID and you want to find the address so you look inside this file you find networks this network and then this address alright so we can do that like this we can basically just say token got networks literally just pass in 5777 all right and then get the address and then that would be the token and we can say console.log token go back to the web browser and there we go there it is there's the lab 3 contract so now what I want to do is make this code a little more robust because this is really brittle like we don't want to just hard code this address here or we don't want a hard code the network like if we change networks we want this to be a dynamic all right so what I'm gonna do is actually get the network ID that we're currently connected to in meta mask so we do that like this we just say network ID load network ID all right so wait web 3 eath net get ID this will return 5777 because we're connected to ganach say network ID all right and then go back to the project sorry looks like we had a type over here all right boom there we go still works awesome so now we want to do is refactor this little more so potentially this could be this could be empty so we don't necessarily want to call address we might get undefined on this so we'll do this we'll say we'll refactor this to call it token token data and then we'll say you know if token data because it may not exist if we change networks all right we'll just do something here if the token data exists the address will just be token data dot address all right so yeah pause for a second and just kind of let that sink in there further we don't necessarily need to do address here anymore we can just put token data address here because that's pretty easy to read all right then finally we don't need to use this a bi variable because that's pretty self-explanatory - and then we put that here okay awesome so finally if the tokens not it's not deployed to the network we say window alerts token contract not deployed to detected network all right so save that go back here and boom there we go we see it log to the console so now let's see if our alert works let's go to main net and boom there we go token contract not deployed to detect a network if we click go back to ganache all right click refresh awesome works perfect all right so we're getting somewhere we'll just say load token here and now we want to do is store the token in the state so down here we'll just say let's do like this so just below it count say token equals this empty object alright and then I'll see here token data token will say this set state and then we'll say token goals token and remember we can do this shorthand like this all right and then now we want to do is you know refresh the page make sure everything we're properly you have no issues now we want to do is actually fetch the balance so we'll we'll do that just waiting the test like this we'll say let token balance this will be the balance of the actual user who's connected so we want to load this balance right here so you already have this information and now we want to do this okay you know we got the eath balance here so here's eath balance now we're gonna do token balance co8 token right because we able to talk to the smart contract now we can call its functions we say token methods balance of all right let me say this that state count right we're trying to get the balance of the person who's connected to the blockchain right now with meta masks and then finally we can't just do this we also have to say call all right and then we'll say console.log token balance and token balance I'll also set the state this set state took in balance and we'll do two string and same here we'll do two string all right so let that sink in and then finally we're going to do a default token balance here just below each balance say zero okay so let's refresh the page and see if it worked all right there we go token balance is zero that's actually what we expect because this person hasn't purchased any tokens yet from the eath swap exchange so now really quickly I want to talk about this right this call right here so essentially like you have to do call whenever you're fetching information from the blockchain there's two types of methods in webs 3 there's call methods which you can see here and then there's send methods okay so call methods all they do is fetch information from the blockchain you know actually create any transactions so you you have to use call whenever you do that all right so whenever you send that's when you're actually signing transactions and putting new data on the blockchain and you have to pay gas so that's when you call send after those functions which we'll see later in the tutorial but I want to just make a mention of that while we're here that's why you have to do call on the end of this right here this just returns the function that's going to get executed with its arguments and this actually executes sit but it just reads information and doesn't actually write any information right ok so I'm gonna take this away so we've loaded the token we've loaded the token balance next thing we want to do is load up swap okay so it's very similar operation we can just literally copy and paste this and modify it instead of load token we can say load eath swap okay so we don't need the network ID already got that but instead of token data let's just change this eath swap data and this will be e swap alright and this will be e swap do this and this and then I'll see your token this would be e swap and then we don't need to load the balance all we need to do is load the smart contract okay so let's see here I swap data is this alright you swap you swap let's just console law let's let's do this next sorry II thought equals you know empty object here and then finally let's just do a console log yes state eath swap make sure worked all right there we go there's e swap contract so that's pretty easy so you know it took whatever to get this going and to understand it but you know it makes it a lot faster the second time whenever you load the second smart contract it's can you just follow the same pattern alright so that loads both smart contracts into the project now the next thing we want to do is create the user interface that we see here so we can start filling out the information and then wire up the by tokens function okay so we're gonna create this layout alright and then we're gonna create a way to fill in the balance and then we'll actually wire up the buy and sell alright so what I want to do now is go ahead and start adding more conscious sorry more content to the page whole do is create a new component alright and I'll see your hope sorry hit don't save is here a new file new file we'll call this main J s capital M okay so we have app digests now we're gonna have a main bjs and we're gonna do is just copy well let's do it this way yeah let's just copy the basics here all right and then paste it in here we'll take out all this stuff all right we're just literally taking all this away and then taking out all this and when you can have a render function alright and then I take this h1 right here and you this and then put it in here and take out all the rest of the code so you just have this one div all right and then you this will say id equals content all right instead of app we'll call this main so there's gonna be our main component alright and then inside of here we'll import the main component so p2 the navbar say main all right and we'll render this out on the page like this instead of hello world to say main all right make sure still works boom there we go awesome so there's a there's a one big reason that I want to do this all right so you know whenever we're loading up all this data here it takes a while and we don't want to show content on the page until it's finished okay so we want to have a basic loading screen whenever the app is you know loading up data and we can do that like this we can just tell it that it's loading and when it is loading will show a loader and when it's not loading will show the main so we'll do that like this all right so we'll say let content all right this will say if well actually us do this select content and then let loading equals true right so if loading and then say this else right so basically we'll take this away well see this so if if it's loading will say content equals this we're gonna create a paragraph that just says you know hey I'm loading it alright like this a paragraph ID loader class name text center loading right the next if it's not loading will say content equals the main component that we just created so I'll just copy this put it here alright so the apps loading show the loader it's not loading show the content alright and then in react we can use curly braces but the content here alright so now when i refresh the page I should just see the loader because it's you know just hard coded to true alright so yeah there's the loader and if we make it false all right boom there we go hello world so now we take the next step and actually store the loader value into state so we can go down here and say loading alright say true and then instead of this loading we can say you know this state that loading save it go to the page loading is true alright girls let's say a false and I'll show their page awesome yeah so true again so we want the default state to be that loading is true so we want to tell the app when loading is finished so we do that right here basically once all this stuff's done we just do this set state loading pulse so now it'll update dynamically and there you go yeah boom there you go so you'll see the loader for just a second and whenever all the blockchain date is loaded it'll show hello world on the page awesome so that's you know a really great step in the right direction that's going to help us build this application in a much better way and we'll do now is continue on creating the layout inside this main component so we're kind of done inside this file for a little while we're going to on this to build layout now inside of this main digest component what I'm gonna do is go ahead and just paste in some predefined template code to get started really fast it would take a really long time to code all this out step-by-step it's really just HTML code I don't want the focus of this tutorial to be you know how to write HTML I wanted to be more about blockchain so I'm gonna just take this out and then paste this in you can you know you can check out this point in the project in the in the linked in the description below to get this if you want to so I'll just paste this in like this alright and then really quickly just see what was generated all right boom there we go so here's our basic template it's looking a lot closer to what we see here just a few things we'll need to adjust but you can see basically you know we got a card here in the card body and then we've got the input for the balance well wire this up in a second the input for the our started output value and the exchange rate and then the button to swap the tokens all right and then we've got a form that shows us how to do that all right no sorry that allows us to do that so let's just remove some of this space all right it's looking better go safe so the next thing we want to do is go to the app that J's file I'm sorry the main yeah so good apt is and let's do this make it wider all right looking kind of scrunched right now we want to make it widened like this so we'll go to the see this main element here we'll say style max width 600 pixels okay just like that yeah so that didn't quite work I wanted to do one more thing instead of D Flex Center let's do ml OTO ml or CMR OTO and boom there we go looking a lot closer all right so the same width we don't we won't do these buy and sell buttons yet just gonna focus on the by part okay and then what we want to do now is show the token images all right so what I'm going to do now is pull the images for the cryptocurrencies into their project you could just download these images from my github repository you know I've created these locally on my computer so you know you could just basically clone the either the completed project or you know the the link in the description below for this part of the project but I would just copy and paste the files into your project inside of the source directory so it's that source I'm just going to drag the eath logo in like this alright and then I'm also going to drag in the token logo like this source token logo so here we go just token logo and then here's the eath logo all right boom so let's import those into the project inside the inside the main dot J's component we're gonna say token logo so inside main jjs we're gonna import them both like this boom token logo alright and then eath logo like this okay and we'll put them inside of the project see your image see your let's find the first one so here's the one for ether we'll just use some curly braces and say eath logo and then we'll say source token logo save that go back to the page and boom there we go there's the etherium logo and there's the DAP token logo so we got the exchange right here we got the input now let's put the balances in so we're gonna take the ether balance and the token balance so we can just pass those values down we've already saved them inside of low blockchain data so here inside our main component just like we did with the nav bar you know we'd be passed on the account we can say you know ether balance passing only say either balance equals this state balance and also for token balance equals this state token balance all right so now I'm going to format this code a little bit like this break it up into multiple lines that it's easier to read and there we go so now inside of main we can just format the balances and put them on the page like this I'll see here let's put balance so this is for the ether balance we'll say let's just do the mouths for now just stop props that ether balance save it and the flow didn't quite work all right so let's see what's going on here oh I see what it is I said ether balance it should be eath balance okay awesome so we see the balance it's not formatted correctly so let's format it it's currently displaying the way value let's actually display the ether value or eath value so we just use our helper web 3 utils from way right I'll be doing the tests and we do it like this boom window dot web 3 utils from way this dart props to be either balance eath balance eath balance and then either all right all right there we go it's formatted now we can do the same for the token balance let's just do this again and let's do token balance here and boom there we go still zero that's what we expect so we have it purchased many tokens yet but when we do buy them we'll see that go up ok so the next thing that we want to do is wire up the user interface that so whenever we actually do this input it shows the amount of tokens we want to purchase here it does the conversion for us because you know we see 1/8 equals 100 app so we do that like this we want to do a non change handler like this so basically like I'll show you we go here and find the input so just blow text we can say on change and this is what's going to trigger any time you know we change the value of that input say event oops there's a console I'm sure it's like changing right so you'll see what that happens oops looks like a something went wrong here need to know the curly brace all right so now if I change this one to three you can see this changing happens so basically whenever this changes we're gonna calculate the number of tokens and show it here so yes that's what the finished product does so it goes one two three and we see the output change like this game so basically you're saying whenever if you put in one ether we want to see that you're gonna purchase a hundred tokens input output right here's the conversion and then you would swap to purchase that many so whatever it changes we're gonna keep track of the value so we do that with something called a ref and react we just say ref equals input input I hate it when it does that that's really annoying I wish sublime text wouldn't do that say this input equals input okay and then we say Const ether amount equals this input value to string okay and then we'll say this set state output is equal to e thir amount times 100 all right then we'll say this console.log this state the output okay so let's go here and say 1 then it kind of bombs here so I doesn't know what state is so we need to set the state object just like we did in the parent component all right so we can have a special state just for this one like this so just like we did in there the component say I'll put a 0 by default and then we'll do you know one two all right there we go is changing we see it multiplies it to 100 1200 300 yada yada yada awesome very cool okay awesome so now let's let's see here let's show that value in the output okay so basically the output is a disabled form field that doesn't take any you know human input and we can just assigned a value like this so we'll go here we on the output she's disabled and just above that we'll say value equals this state output and we can remove this console logging statement here go back to the app 1 yep there we go so there's a preview of how many will purchase awesome so let's remove this console log here and then let's actually wired up to make the purchase so how we're going to do this is with something called on submit this is going to be a handler that's gonna fire whenever the form submits so up here we'll just say on submit equals events and then we'll say vent prevent defaults because we don't want the page to change whenever the form submit so I'm gonna set console log purchasing tokens alright and then let's just do it here click swap and you can see purchasing tokens right log to the console and so it's not doing anything yet we're gonna wire this up so essentially we're going to do is call a smart contract function that does the buy tokens function that we created you know and then the older videos when we did it in the test suite now we want to do that here but we don't really want to write the code for that inside this particular you know part we want to actually add it here instead of at that J s because we have access to the smart contract inside of here right so essentially what we'll do is just create a new function that wraps the smart contract function like this alright so just above render below the constructor well actually let's do it above the constructor dude here we'll say buy tokens this one look a little bit different from our other functions we'll say equals ether amount all right and we'll say what you want to do is call the function a lot like we did with get balance all right so a weight you know token methods balance of so we'll say this that states that each swap right that's the smart contract okay right here and we'll say methods they'll say buy tokens all right and then we'll say sins all right so remember I said that earlier I talked about call methods and web 3 versus send methods well this is a send method ok so go back to web three documentation see send alright yet this this is how you do a method that creates a transaction you have to tell it who's calling it you have to tell it the value if you're setting in aetherium and etc etc so we'll say send will pass in the user say value I'll say from this state account and will pass in the amount of aetherium that they want to send so they value equals ether value so we're going to put in or start ether amount right so e thermal we're gonna pass this into the function and send it in here so when this happens we're gonna say this set state loading true all right and then essentially this is gonna be asynchronous so we want to wait for it to finish I will say on transaction hash passing the hash I'm gonna do it or a function here is getting kind of long sorry hit him well uh set the loading to false so we'll say this set state loading false okay so we could probably like you know do this or something make this little more readable it's kind of silly to but you get the idea all right so it's working all right it's actually you could do this as a one-liner let's do that that might be a little cleaner CV so compiles no I didn't work let's just go back and sorry everybody all right awesome good enough for now actually you know what I'm gonna make this all one line this is starting it kind of funny it's kind of long but at least it's correct alright so sorry about that little detour so now we want to do is pass this function down to the component how do we do that well we go down here and we say buy tokens equals this step by tokens all right and then now go to main digests and inside this function we're gonna actually purchase tokens because we have access to that now so let's calculate the amount of meter we want to buy we shall let ether amount say ether amount equals this input that value to string all right that's this input right here we said you know this right we take that value is a ether amount equals window dot web 3.8 ills two-way right ether amount ether and then we say this props dot by tokens in the past Mather Mountain and now we submit this form we should see a meta mass confirmation pop-up click sign it and it should purchase so before we do this I hope it works but take note that the etherion balance is 97 the token balance is zero so let's go by you know 200 tokens so we should see our eath balance go down to like 95 point something and our token balance go up to you know 200 so let's click swap and I had a minute mask confirmation pop-up off screen click confirm and boom there we go awesome so I've got 200 tokens and my ether bounds went down so it is working awesome so congratulations we've come really far in this tutorial series so far we've got a way to purchase tokens with the client side website you know you can see the rate calculation here before you purchase it's really nice user experience you can just sign the transaction actually buy them like this so in the next we're gonna create a way to sell tokens all right we'll be able to you know kind of bounce back and force me to buy form in a cell form and we'll be able to swap them so let's go ahead and open up the main component right we got two components so far well 3 the apt is this is the you know the one more you do most of the work the main component this is the main content I guess I should say this is where the the by form currently is and then we have the navbar so let's create a new component and we'll call this by form capital B capital F for form jjs alright and we'll just copy this main content put it in by form and then we're gonna take the form content all right take all this content all the way the ending form tag and take it out and then take out all this all right and inside this return all you should have is the form code all right so do form like this all right so we'll change you'll see your main we'll change this to form or by form okay and then yeah eath logo this all looks right to me yep all good so now we'll import this into main so we'll take out eath logo all that kind of stuff say import by form from by form okay and then right here where we have this form let's just replace it with the by form all right and now we're gonna pass down all the data that we need to the by form right because we have some functions inside of there so basically we'll just say you know by form and then we'll add like eath balance see this props eath balance okay and then we'll do this I must say token balance this step prop stop took a balance and one more time will do by tokens okay so this is the balance for ether this is the token balance and this is the buy tokens function so now we should go back to our page and so look the same yep this measure still works let's just buy 100 tokens with one ether let's do decimals just to make sure you know it works properly do 50 tokens with half an ether and click swap she made a mass pop up click confirm and there we go now we have 250 all right so the by form still works we've refactored this so now we want to do is create a cell form as well all right so I'm just gonna copy this well it's just it this way new file cell form there Jess paste all this code in here and for now let's just take out the form I just say you know div say cell form alright and then cell form we're just gonna you know have a placeholder so that we can switch in between the forms okay so the by form still works and it's not the main jjs component what we want to do is track the current the current format selected okay so basically we don't need this output here anymore because this got moved to the by form we're gonna say current form and the default value is gonna be by alright and now we want to do is create some buttons that will actually change this value and when this is by then we'll show this and when its cell will show something else but I'll do that in a minute so let's handle the difference let's let's first import the cell form cell form okay and then we'll do cell form here alright let's just see it below are here cell form right save it make sure still working yeah here's self form so now we can say you know if the current form is by show the by form if the current form is cell then show the self form will do that with a conditional statement just like we did and other component will say let content let's say actually got above the returned let content will say if this state dot current form equals bi else all right so if it's by form then kind it's gonna equal this right and let's do content type over here and if not it's going to be the cell form and we'll say content this is just like we did another component alright so let's go back to page and here it is self form so it's not by let's see I've made a typo here current form all right boom there we go so the current form is by cuz the default now if we say cell it's change alright cell form awesome so we haven't you know created a cell form just yet this is just a placeholder but we want to make sure that the state is actually changing that so by alright awesome so now what I want to do is create buttons that actually change this value so we can toggle between the by form in the cell form okay so I'm gonna do that like this so inside of here you know just above the card when I paste this in here boom alright let's go look at on the page there we go looks a lot like our our the mock-up so this just added some buttons of the page so you know you could code this out yourself you wanted to or you could just fetch this from the completed project in the description sorry in the description below what this does is it just adds you know a new div here with two buttons buy and sell all right and then this little spacer in between alright and we're not quite we have a little extra space in our final mock-up or on our final version so let's say class name equals MT 3 that's margin top three all right and then boom there we go awesome perfect so now what we want to do is click on these buttons and change the forms right now they don't do anything they just you know sit there but it's pretty easy so what we'll do is but add a new row here okay and then we'll say on click simmer we did unchanged for the by form here unchanged and we did an on submit here we're gonna do on click so whenever we click the button will say events it's pretty easy we'll just say this set state current form by and then likewise down here well uh let's do this replace this here so I'll see you in action bye and so awesome pretty easy so yeah we just changed the state value and this reads the state and says if the state says the current form is by showed by form and if it's set and show the self form okay awesome so now let's let's keep coding out the self form because right now it's just this bear form like this okay so let's you know copy all the content that's in the by formats other render function let surprice sorry replace it and we're just gonna do the opposite right so basically put all this inside here here's the old form alright so basically gonna be two by forms right now oops we got a problem let's pass the data down that we need okay for now let's just do this and do the exact same data so the form works alright so cell works it looks the exact same that's because it is the exact same and let's change this okay so we're gonna reverse this first let's change the tokens so we'll just do it one by one here first this should be token balance alright the input is now tokens because they're gonna sell them all right and then whenever we're converting the values the ether amount should be should be token amount and instead of multiplying it by a hundred it should be divided by a hundred right because you sell the tokens to buy them 100 all right and then that's the output okay and then instead of East logo will say token logo and say DAP it's actually just copy this do this oops sorry Emma and swap these okay and then for the output this will be ether balance or eath balance all right and then I'll do a slow go okay and then exchange rate she we could say you know 100 DAP equals 1/8 and then swap then that should work let's click it sell yeah there you go so the balance is now 254 tokens and then 95 for ether we see the exchange rate change as well all right boom there we go so the last thing we want to do is wire up the form submission so I'll see you like this basically we'll change some values here so instead of ether mail this can be token amount all right this input value to string all right so say cell tokens here and it's gonna blow up because it doesn't know what sail tokens is or ether amount so they ether amount sorry all right so I'm not sure why cell tokens is we're not calling the function that's why it's not blowing up yet all right so now let's change this so don't buy form so go sell tokens here all right for the cell form all right and then finally we actually want to create a cell tokens inside of here cell tokens equals this cell tokens all right and all right it still works that's because we're not calling the function yet and finally we want to create a cell tokens function like this say cell tokens all right and the cell tokens function is going to work a little bit differently so we'll be the token amount it's gonna be the opposite now this is really the final thing once this works the entire project should work but here's a very critical thing I want to go back to the tests and remind you that you know selling tokens is a two-step process sorry there's two functions at play if you go to the contracts actually sleeping test first when I would do sell tokens remember the investor must approve the tokens before the purchase all right because the eath swap token the eat swap exchange contract sells it for the investor and the investor must say yes approve the tokens before that happens all right so we have to call this function and then this function so inside abjad yes we'll say this say eat up sorry you swap methods sell tokens actually no no sorry we're not gonna call this on the exchange we're gonna call them a token first token methods all right and then approve write must be approved first and we want to do the approval to this state eath swap to address all right and we want to do the token amount we want to say yes you can sell the number of tokens that I'm telling you - all right now we do send we don't do value here we just say from this state on account all right then on transaction hash that's okay once that's finished then we sell the tokens say this state eath sorry eath swap methods sell tokens token amount all right and then send so just like we did here I'm gonna copy this literally oops sorry and then we copy this alright and then we set the state loading false all right now let's give it a try so let's go back to the page here here's the BIOS make sure it still works let's buy you know 100 tokens click swap minute mask will pop up click confirm all right so there we go we got a hundred more tokens now let's go sell those hundred tokens one hundred should get one ether back click swap oh we got a problem alright so this step props that sell tokens is not a function says in the self forum alright let's just trace it all the way down so sell tokens is here alright and then sell tokens is here this sell tokens that looks right so now let's go to the main components ah sell token that's the problem sell token no s let's just keep going though make sure so sell form I'll see your let's go down to the self form and say sell tokens alright perfect this docprops/app.xml it's 200 tokens and then we should see the balance get out of 350 if it worked so swap so do you want to spend your DAP yes we do click confirm and then a second confirmation could come up I click on firm and boom there we go we sold the tokens back our balance went down out of 350 and our ether balance went back up to 94 alright so there you have it that is the completed project you have successfully created each swap the instant exchange where you can buy and sell cryptocurrencies at a fixed price so congratulations you've really come a long way in this tutorial series you know we started out from scratch you learned about blockchain you learned about how to build smart contracts how to work the cryptocurrencies how to build a client-side application and react yes so yeah take a minute to congratulate yourself you've come really far so I'll say there's you know several ways you could get extra credit by improving on this project maybe you want to turn this into a portfolio piece if you're trying to become a professional blockchain developer or you just want to show it off to your friends you know you could support multiple tokens on here and you could change the tokens that you want to swap of course you'd have to add support for that and the smart contracts you could change the redemption rate where that you know it's updatable maybe like over time you change the price you know you can create a way for the person to take profits whoever created the smart contract whenever they you know create this like withdrawal the ether balance from the exchange like that so there's lots of ways you can you know continue on with this for extra credit for homework but this is definitely a great start all right so again the final project codes down the link in the description below and if you want to take that next step to mastering blockchain like let's say you really like this tutorial then I highly recommend that you head on over to DAP anniversary comm for a slash boot camp because inside there I teach you how to build a fully fledged crypto currency exchange where you can create buy orders you can create sell orders way beyond you know just this simple exchange that you see here alright so as always click the like button down below and subscribe to this channel if you have already that really helps these videos get found so that more people can you know benefit from them and until next time thanks for watching University

Channel: Dapp University

Views: 645,293

Keywords: ethereum developer, ethereum solidity, dapp ethereum, ethereum app, ethereum development, ethereum dapps, ethereum application, ethereum tutorial, ethereum mist, decentralized applications, ethereum web3, dapp, ethereum contracts, solidity, programming ethereum, ethereum programming language, ethereum coding, ethereum contract, ethereum code, ethereum virtual machine, ico

Id: 99pYGpTWcXM

Length: 190min 6sec (11406 seconds)

Published: Wed Apr 01 2020