How to Code a Blockchain Wallet Step-by-Step

in this video I'm gonna show you how to build and aetherium wallet step by step we're gonna create a wallet for the dice table coin which is a cryptocurrency whose price doesn't change we can use it just like you know real money on the internet so you'll learn how to use the die token in this tutorial and also you'll be able to learn how to create this aetherium wallet for any aetherium based cryptocurrency so I think you're really going to enjoy this tutorial there's a lot of value here for you alright so before we get into that if you're new around here hey I'm Gregory from DAP university and on this channel I think you got 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 want to take the next step towards mastering blockchain then head on over to DAP university com4 slash bootcamp so this is the wall that we're gonna build and it's gonna focus on the die cryptocurrency alright so I'll talk about that more here in a second but just a quick preview you know be able to specify a recipient in this wallet specify the amount we want to send and then you know sign the transaction and see you know history so there you go we can see that I previously sent 100 die to this address and just sent another 100 die while you're here watching on screen and you can watch the amount you know debited here we've got this cool dial logo so yeah this works just like a real world cryptocurrency wallet alright before we start building the project let's just go over some quick concepts so there everyone's on the same page and we understand like what we're building ok so you know we're gonna build this aetherium wallet that uses die but really quickly if you don't know what die is so it is a cryptocurrency alright and it's called a stable coin which basically means it's price doesn't change okay so you can see that it's pegged to the u.s. dollar here you know equal to about $1 you know some minor price fluctuation but basically one die is $1 so that is really useful when you're using cryptocurrency on the web because basically it means you know you don't have to worry about this price you know being crazy volatile and changing all the time okay so that's one benefit to our wallet is we can use this just money on the web so dye is a token which basically means that it's built on top of the etherium platform okay it doesn't run its own blockchain or anything like that it's just powered by a smart contract okay so you can actually see the die smart contract here pretty sure this is the right one I think so dies got two versions got a multi collateral die and a single collateral die I think this is the multi collateral yeah yeah yeah here it is yeah dice table coin so I mean you can interact with it you can look at it on a website like ether scan this is just a block chain Explorer and you can find the smart contract address for die we'll keep this handy for later and you know you can see all the transactions you can you look at look at the code and things like that so basically yeah dies it's a smart contract that lives on the etherium blockchain and it's ERC 20 compatible which basically means it's got a predictable set of functions you know you can see these ERC 20 token transfers you can look at the contract here here's the source code for it if you're developer you read all this if you want to well I assume your developer if you're watching this video you can do more stuff like you know read the contract you can see like here's the balance of function this is a function that we're going to use in this tutorial there's also like a transfer function let's just see here that'll be under the right contract tab alright you can see see your transfer right here you just show the address and then like the amount of tokens you want to send so I've got more videos on my channel if you want to learn more about er see 20 tokens it basically just means that they have a set of predictable functions that all ERC 20 tokens must have in order to be compatible with like cryptocurrency wallets which we're gonna build in this tutorial or exchanges for example right it's basically a standard so everyone agrees how they work we're not just building currencies willy-nilly without any kind of predictable set of rules okay so yeah you can see how to use the Daiya stable coin the smart contract itself like when you're developing under smart contracts this is a really good if I remember I'll try to put a link to this down description below but this shows you you know more about the smart contract how it works if you want to you know call up from your other smart contracts that give you some examples here like maybe you wanted to build a die faucet where people can just claim died tokens this would be like how you do it or let's say you wanted to accept die payments and another smart contract for example here's a great developer guide on how to use it basically all you need is a reference to the die token and it's address in order to use it in your applications whether it's in the smart contract or in a client-side application like this wallet that we're gonna build that's exactly what we're gonna do we're gonna create sort of our own version of die like a mock version of die and we're gonna you know take the address and we're gonna send it around in our application so I hope that makes sense and let's go ahead and start programming all right before you get started programming you need a few dependencies first the first is NPM or node package manager so you can see if you had that already installed by going your terminal typing node - V alright if you don't have it already installed you can install it from the node.js website directly I'll just pull that up here yeah here it is it's basically you can just go to the node.js website go to the download tab and pick your operating system here alright so the next dependency is the ganache personal blockchain so ganache basically is gonna allow us to run a blockchain on our computer without having to you know worry about spending real money or anything like that so ganache is pretty easy to install you can just get on Google and look for ganache blockchain should point you to a download link and you'll should see this page and you can just download the correct version for your operating system with this link right here and then once you've got that installed go ahead and boot ganache up it'll ask you probably if you want to create a new project or a QuickStart I would do a quick start and once you've clicked that you'll see your blockchain running just like this alright so it's got some accounts here already with some private keys which you can see here so don't use this account on the real aetherium network because you might lose your money but you'll see you know some money already in these accounts to just fake money for development purposes but yeah that's how it works and I've already used this account so you know I've lost a little bit of ether already but that's okay so that's what you need for dependencies now let's go ahead and create the code for the project all right oh sorry one last dependency you need meta mask okay so this is an ethereal wallet that's going to allow us to interact with the application so meta mask is pretty easy to install you can just like Google how to install meta mask and it should take you to a page like this and you can just click get Chrome extension or you can search for it in the Chrome Web Store and you can find it and then just click Add to Chrome once it's added to Chrome just make sure it's activated and you should see the Fox icon here it'll prompt you to like set it up with a password and everything just follow those steps it's pretty straightforward and I'll show you how to you know use meta mask more in this tutorial okay so now that the dependencies are actually installed let's go ahead and create the project so in order to get started really fast I'm gonna use a project template that I've created on my own this is my starter kit so this is going to allow us to create the project without setting everything up step by step it'll save a lot of time and it'll make the tutorial just easier to follow okay so you can create your new project with this template just like this just say git clone paste in the URL here and I'm gonna call this I'm gonna call this project eath wallet alright and that should create the new project like this and then you can enter into that newly created directory like this C D eath wallet alright and I'm gonna go ahead and open this project in my text editor which I'm using sublime text and this is how I open it in my terminal I've got this configured as a special sim link so here you go here's a project this is what we just created this is a truffle project which is a smart contract development framework used for building blockchain based applications you've got a configuration file here that's already done for you you've got a package JSON file here with all of your packages so yeah this got everything that we need we've also got a react application inside of here we can you know go to the source directory and components and look at the app.js file right this is the where we're going to put all the code for react application so yeah we've got everything wired up for us already alright so let's go ahead and install the project dependencies we've got pretty much everything installed here with the package.json file but I'm gonna go ahead and kind of just do a smoke test and make sure everything's set up properly let's do that first will say npm install all right and that should go ahead and solve the initial packages that we've specified here in our package that json file but we will want to install a second dependency or an additional dependencies excuse me here in a minute alright so it looks like that worked just fine so I want to install one more dependency here which is open zeppelin library alright so basically this is a library of pre-made smart contracts that we're going to use for this tutorial ok we're not gonna run a bunch of smart contract code really all we're doing is creating a fake dye token or a mock dye token that we can you know use in our tutorial to make things a lot easier we can do everything on our computer so i'm gonna install open zeppelin like this alright so just paste this npm install open zeppelin contracts this is going to give us basically a way to create a token really quickly so if you look at the contracts in here I'll show you this while it's installing you know two contracts and then let's see here let's go to token all right and then we can go to a RC 20 which is what die is an RC 20 token and it's it's a pretty complexity RC 20 token it's got some extra functionality than a basic GRC 20 token but basically what we'll do is create a mock die token with this smart contract already concluded for excuse me basically we're gonna create this minta bull token so here it is here's the ERC 20 min table token because it's got a mint function it's just gonna allow us to create tokens on the fly and I believe the die token also is mental as well so it'll work very similar but don't have all the features that dye has it's just basically a mock so that we can understand how to use die in our application I'm gonna create the new smart contract just like this I'm gonna go to the let's see here the source alright contracts directory and you can see you've got a file in here already I create a new one like this alright I'm going to call this dye token mock soul and inside this files we're gonna make our fake dye token alright so a mock and software development is something that really just stands in place of something else so in this case this is gonna stand in place of the dye token so it's going to work like it it's not gonna have all the same features but we'll see how to use it so basically I'm gonna declare the version of the solidity programming language that we want to use like this say prog muscle iddah teen and then pass in this version 0.5 dot 0 and the next thing I want to do is declare the smart contract like this alright say I want to say contract die token Mach alright and then I want to use these curly braces and we're gonna put all of the code for it inside of the curly braces here so we won't write much code in this tutorial we're just gonna get it up and running with this open zeppelin library so i'm gonna import it like this alright we're gonna create a mental token i'm gonna paste in the import like this alright so we're gonna go from the open zeppelin library we're gonna pull in the contracts token here see 20 here actually 20 min table and what we're gonna do is say the diet token mach is he or she 20 min table okay and then we're gonna configure this you know die has a name a symbol and decimals so you know we're gonna create that in our contract like this basically we're just going to create some variables to give it a name the symbol and the decimals all right so in solidity you know it's statically typed so we have to tell the name is a string which Attell the symbol is a string and that the decimal resolution is an unsigned integer right and we use public for all these so that we can read these values outside the smart contract so lastly what we need to do inside of here is create a constructor function which is the function that gets run whenever the smart contract is created or deployed it's where I'm once and only once and we just create the constructor keyword like this and set all the variable values like this boom alright so here's a constructor function it's public this will get run whenever the smart car trash created will set the name as die stable coin alright just like we saw here on ether scan I'm actually using these values verbatim so if you go here just says die stable coin alright and the symbol is die and the decimal resolution is 18 which is just like ether so basically if you're wondering about decimals it's like how many zeros are behind the decimal so for the US dollar for example it's two decimal places but for like ether it's like 18 so for most a are she 20 tokens it's also 18 that should be our smart contract let's go ahead and compile it see if it works it's a truffle compile all right and let's make sure we have ganache running before we try to deploy it alright so make sure you got good nice running just like this okay awesome so they compile with no problems so make sure you can pass this step before you continue and the next thing I want to do is put it on the blockchain so that we can use it so I'll do that like this I'm gonna go to see here migrations and you'll see this initial migrations file and I'm going to add the die token just like this I'm gonna copy this line and come down one oops sorry wrong copy copy pastes alright and we're gonna get the diet Oken mock that we just created die token mock okay so truffle exposes these things called artifacts which we can you know read just like this so we had a die token mock here which is in the same oops sorry revealing sidebar yeah you can see you had a migrations contract in here and now we have the die token mock so basically this was already there for us and then truffle also exposes this just like it did migrations and now we can put the smart contract on the blockchain inside this function just like the migrations contract okay I'm going to modify this a little bit I'm gonna use the async/await pattern basically this is a way of handling asynchronous function calls in JavaScript I was we can wait for them to finish some and say oh wait deploy or deploy migrations and then I'm going to deploy the die token mock next all right pesos in here and then I'm finally going to actually mint some tokens for the deployer inside of here so that we can you know actually have some tokens to use in this tutorial okay so I can do that just like this I'm gonna get a copy of the deployed token they just can't open Mach equals a weight diet oaken mocked out deployed and then I'm going to basically meant a thousand tokens for the deployer by calling the mint function alright I can use this async/await pattern to do that like this alright boom okay so oh wait token Mach we're called a mint function and I'm actually passing in the account address here that I use inside ganache so you can just copy this from your ganache instance and paste it inside here alright just like that and then I'm using a thousand tokens so I'll show you how to do that a minute ago I talked about how I as eighteen decimal places so basically you need to write out the number 1000 and use 18 decimals or short 18 zeros after that now you can do this with a helper with web 3GS or something like that but sometimes in like migrations I'd try to be explicit just so that everything is you know straightforward so you can say 1000 so 1 2 3 alright that's 1000 and then you have to actually type 18 zeroes but if you know how to use web bjs or you want to like write this out programmatically that's fine - I'm just being explicit for tutorial purposes so 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 is 1000 tokens alright so now let's deploy this a lot chain like this will say truffle migrate alright and that will put it on ganache forest if there's no problems okay there we go done so no issues we've deployed our mock die token to the blockchain so now let's go ahead and open up the website and create the etherium wallet I'll say npm run start alright this will open up the client-side application the react app inside our browser here so this was the old version that are already created we're gonna refresh this and see what you should actually have whenever you open up your project so there you go this is the DAP University starter kit this is the website that came for free whenever we use this project template here alright so we're gonna do is modify this code to build the etherium wallet that I just flashed upon the screen okay so there's several steps that we need to do in order to make that happen but we've got all our back-end done it's really good you know the smart contracts on the blockchain all we need to do is connect this client-side application to the blockchain pull the smart contract in and work with it to build the wallet create the transactions show the transaction history show the balance so it's a few steps but let's go in get started so go ahead and head over to your source directory and then go to the components directory find the app j/s alright so here's where all the code is you know you can see your DAP university starter kit it's the same test as you see here that's where the code is we're just gonna modify this so we can do is you know just change this up and add our code to the connect to the blockchain here alright so that's exactly what I'm gonna do first the first thing I'm going to do is connect to the blockchain alright and so you can see you know if you're not familiar with react really quickly I'll just give you an explanation this is a react component this is the react class this is how we it works you put all the components inside these classes they're just these reusable you know modules of code that have JavaScript and HTML mixed in and that's what we'll do and then we'll also use the react state object to act like a database on the front end where we can you know fetch information and store information inside of it as well so you'll see all that in action here pretty quickly so really quickly I'm just gonna recap that again in case you all didn't understand if you need to react I want to give you a quick primer cuz I don't want you to feel lost so again react is a JavaScript library for building user interfaces faces its component-based you can see this is what a react component looks like that's what I just shows you it's got this return function that has HTML code inside of it you know mixed in with JavaScript this is all JavaScript this is HTML and you can put JavaScript back inside here of your HTML like this okay so you can add more functions than just that render function like you can see a constructor function here here's this custom tick function which will create something kind of like that in this video it has these life cycle methods like component did mount which get called whenever the you know react components mounted to the virtual Dom which will create one of these as well so yeah that's how it works and then finally here's the state object so you can see this here basically this is how react manages its data it uses this state so we can add items just like you wouldn't a to-do list here you know how does this to-do list know how many items are on the list well it uses the state object right it shows you what the items are it shows you the text for what somebody's added here so yeah that's what we're gonna make use of in this tutorial so that's a quick primer on react alright so back to coding let's go ahead and create one of these life cycle methods that I just talked about earlier to connect to the blockchain you can see here this component did mount we're gonna create something like this all right but we're gonna call it component will mount so I'll just copy this from react put it inside of here alright this will say components will mount and what we're gonna do is say await this load web 3 ok write a new function that's going to connect to the blockchain so what does that mean well basically this application doesn't connect to the blockchain by default we have to create a way for it do that so we use the web 3 library basically as a JavaScript library that will turn our application into a blockchain application so we import into our project just like this alright and then we can create a function to load web 3 just like this alright so I'm gonna do a little magic here pasting some code don't worry if you don't understand everything that's going on here I'll explain kind of high level what this is so basically this loads the web 3 connection which basically means it connects the application to the blockchain and honestly this is just kind of modified code that is specified inside the meta mask documentation on how to connect your app to the blockchain you know meta mask is the etherium wallet provider that we're using here and basically meta mass provides a way to connect to a theorem and this is essentially their instructions so don't worry if you don't understand everything that's going on inside of here you can read through the documentation if you want a greater understanding but this is just a quick implementation on how to wire this up to the blockchain so that's kind of just done for you and you can copy and paste this out of the completed tutorial code which I'll put a link to down the description below alright so we've loaded web 3 now the next thing we want to do is load blockchain data so say a weight this load blockchain data just like we did load web 3 all right and this is where we'll create a new function to you know connect to the smart contract get the balance allow us to create transactions and things like that all right so here's our new function where we'll load the blockchain data and basically what we want to do inside of here is first just get a connection to web 3 like this all right so we don't load blockchain data and we say this web 3 equals window dot web 3 so what I want to do now is console.log this and just say web 3 and make sure that everything is wired up properly alright so let's go back to our website and we can already see that you got some errors here so what's going on here oh wait it's not working so that means we haven't properly done the async wait pattern I believe all right so that's because we didn't do it here async we forgot the async keyword in front of component wheel mount so I fixed that let's go back to our project refresh and let's see there's any more errors all right there we go so we can see the contents let's open the dev console here you can do inspect element if you want to by right-clicking I use some command that's involving an eye I just do it from memory I can't actually remember what the command is but anyways we can see web 3 has been log to the console here alright so it's been successfully set up alright and what you want to do now is go ahead and install we're going to import the accounts from meta mask ok so what I would do is open ganache alright we're gonna get the first two accounts so show the private keys alright right here don't actually use these private keys in real world just use them for development purposes copy them a you're gonna want to just step twice alright for this account right here and then also this account alright so go ahead and read the first one go ahead meta mask open your account I've already imported it but basically you'll want to go to import account paste the private key and click import alright so you want to do that for both accounts which I've already done because you can see my account here and you want to do it for this one and then do it for this one too where you can have access to each account alright and just remember which one it is whenever you add them to meta masks cuz we're gonna switch back and forth here in a minute ok now what we'll do is actually fetch that account out of your meta mask wallet and show that in the console ok so I can load the account up from web 3 just like this alright I'll go back to sublime text here and instead of console lock and web 3 what we'll do is console.log the account alright so I can get the count just like this say it counts equals web 300 wait web 3 eath I get it counts alright and I what I can do is console.log accounts just like this so you can see what's in there alright boom there you go so there's your accounts that are provided from meta masks alright that should match whatever's in ganache if you selected the account correctly alright AEC AEC so we can see this is an array and we just want to fetch the first one so we can add it like this we just say this set state can we say account equals accounts alright and then we just get the first one from the array like this we just use these brackets and pass in 0 because 0 refers to the first item in the list ok and so state here is we're updating this react state object which I showed you a minute ago here let's see your yeah we see this you know state equals this we can do set state alright just like this where we pass in a function and we you know say the key and then the value okay so the key here is gonna be a count and then there's the counts so now what I want to do is configure the default state inside of react so you can see that here they show you an example use this constructor function alright and basically what it does is it sets a default state and we will modify this for our own purposes to show you all the data that we're gonna load up in our app so in their example you know they use a to-do list so it's got items and text all right but I want to add more things to this alright I'm gonna kill this instead of items we're gonna add you know our etherium account and we're gonna add stuff like transactions and our balance and all that kind of stuff right reference to the smart contract so I'll do that just like this alright so instead of what they have here I'm gonna put make our default state look like this okay so we'll store the account will store the die token mock smart contract will store the user's balance and then we'll also get their entire transaction history and add them to the state as well so here's our defaults okay so we can get continue filling this out we've loaded up the state loose up the account the next thing we want to do is actually get the die token okay so what I want to do is find it inside of our a B eyes so go to source let's see here a B eyes and we can see our diet oak and mock here alright scroll all the way down this will show you the address of where it's located on the blockchain so copy this address and put it here alright so we'll say Const die token address all right place die address here and then also the dye a be eyes when we next so we can import it into our projects like this I'm going to go here and say dye token mock alright so I just imported the a B eyes file a B eyes - I took and mocked up JSON that's this right here this is what was created whenever we compile the smart contract with truffle okay so that's what we need we need the ABI and we need the address in order to create a web 3 version or a JavaScript version of the smart contract so that we can call its functions in JavaScript okay so now let me make a quick mention you know I'm doing this in development with this mock here that we've created okay I just created a test version of this so that you can play around with it on your computer you could use this in the real world with a real blockchain by using the real die address that I showed you here right you can just get the smart contract ABI for this the actual smart contract like which is right here you could just copy this and put it in your app right and then go find the actual ABI as well all right you can find that information here yeah you go to code you can find the ABI here right so you can just pull this into your app in order to actually use the real die token but I'm gonna continue on with the test version in this case just so that we can you know know exactly what's going on we can use ganache we don't have to risk real cryptocurrency we don't have to get test cryptocurrency on a test blockchain this is everything you need right here okay so I'm gonna create a an instance of the diet Oken with web 3 just like this all right I'm gonna say die token Mach equals new web 3 eath contract all right this is how you do it in web 3 you create a new contract like this and then you pass in two pieces of information to ABI right which is this diet Oken Mach which would just import it here and then the address which I have pasted in here and like I said this will be different for you you got to find it from your file or you could use the actual die token if you want to connect to a test network and you have test ether or the main net for that matter okay so um yeah there we go and then next what I want to do is add it to the state just like this all right this set state die choking Mach equals die token mock all right you can do this shorthand with the es6 like this but I'm gonna keep it explicit for now so that everyone's on the same page all right and now what I'm going to do is just console.log this state that die token mock save that go back to our page and let's just make sure everything's still working properly all right there we go there's the diet soaking mock all right okay so next let's keep loading up the blockchain data what I want to do is get the balance okay so here's the balance is zero we want to show the users balance on the page so we can call the balance of method on the ERC 20 token just like this oops sorry I kind of got lost here for a second guys my apologies I would say like this say Const balance equals a weight died token mock we use methods and then we say balance of all right that's the function that's used on the smart contract itself with the ERC 20 token this is an Arg 20 function and then we pass in the account that's the account we want to read the balance of this state dot account which we just set here you know we pulled this from meta mask and we're showing the current users die balance okay and then we can't just call the function yet we actually have to say dot call okay and we can read that information from the blockchain when we do this okay so let's do this and then we'll pay console.log balance boom there we go awesome so it's working and you can say you can see this is a big number that's got a hex so we can do is say two string and boom there we go so here's your diet oak imbalance all right as you can see it's this huge number with a bunch of zeros after it this is the same number we did here all right but it's only a thousand diet oaken's all right that's because it's got 18 zeros behind the three zeroes that represent a thousand so now what we can do is basically show you how to convert this to a human-readable number I can do this I can use a utility provided by web three so I say window dot web three all right which is right here we can just do this and so we've got access to it web three dots and then do from way all right and then we can say ether all right and then do another oops sorry basically what this does is this is a utility for converting ether to way so way is the smallest the nomination of ether kind of like a penny and it's the same for the dyed token it's basically dye has a really small penny so to speak and then as eighteen decimal places behind it just like ether so we can use the same helpers to convert dye to its own you know bigger denomination just so we can't either two-way all right so we can use this function to convert it alright so there you go boom now we can see the balance is actually one thousand and not like a bajillion okay so now what I want to do is update the state I paid that balance here all right so we'll just say you know this set state set state and then we'll pass in balance and then we'll do this here I think they got that right I don't think there should be any errors let's look on screen alright so something the Consul anymore that's okay I removed the console logging statement but yeah there you go so next what I'm going to do is get the final piece of data from the blockchain which is the user's transaction history okay so basically what we're gonna do is get the past events or the event stream from a smart contract okay so I'll show you what I mean by that a smart contract let's actually I'm sorry I'm poems on the screen here you c20 transfer event so basically all you are 'shy 20 tokens must implement this thing called a transfer function right and that's we're gonna see that here in action here in a minute but basically like that function also must emit an event so you'll see here like here's basically our c 20 token transfer okay so this basically calls a transfer function but what it also does is it triggers an event and basically what events do is they emit messages that consumers can subscribe to to know that something happened on the blockchain and in this case basically it's going to know that cryptocurrency was sent from one person to another and the cool thing about events is you can get the entire history of all the events that were ever created okay so we can get a event stream alright so we can find all the transfer events that ever happened and we can also find the ones that just pertain to us so we can do that like this we can say Const transactions equals oh wait die token mach dot get past events all right and I'm gonna get all the transfer events and what I'm gonna do is say from block 0 to block latest so it's going to look in the entire blockchain alright and then finally I'm going to filter these events so that we only get the ones that pertain to us all right so I'll say from this will be at least all of the transactions that we sent all right won't show the ones who receive I can leave that to use an exercise but will at least be able to see all of our outgoing transactions say from this state count all right and that should be everything all right yep awesome so let's say console.log transactions and probably won't show anything yet because we haven't sent any but I'll see all right so we got a problem here I think I made a typo all right forgot to capitalize this token mock all right so this callback is not a function so we got a little bit of an issue here let's just see if we can fix it all right so it was like a little typo here but it's all fixed up now okay I forgot a forgot a extra curly brace here so yeah there we go so we can see that the events were logged and it's got no events yet which is expected because we haven't sent any outgoing transactions yet right but if I like clear this filter you'll be able to see that there is an event all right so boom here it is this is only minted the token so we can see an actual transfer function was called okay so I'm gonna put this filter back in and we'll see this more in action later all right so save that all right so that should be all the data that we need from the blockchain itself I'm gonna leave this console logging statement in here so we can inspect the transactions but what I want to do now is start laying some this content out on the page actually update the UI and build out our aetherium wallet okay so I'm gonna kind of make this smaller here well I'll do that in a second first what I want to do is replace this logo all right so instead of the logo that we have here I want to put the die logo so I'm just gonna like get on coin market cap and take their logo off there so if you might as watch this from market cap my apologies I'm not trying to plagiarize anybody this is just for tutorial purposes so that people can learn how to be a blockchain programming if you have any issues with this just reach out to meet Gregory sorry Gregory adaptive bursary comm but I don't think you'll mind okay so I'm just gonna say this put it in the project I'm gonna resize it my downloads folder and I'll pop it in here if you want to take the image from my repo you can do that just it'll probably save you some time all right so I've pulled this into my project here I can see here's the logo and then here's the logo alright so I'm just gonna replace what we have inside of here where's my logo here so they died logo and then we'll replace this say die logo all right looks like die - logo save that go back to page all right there we go it's a big old die logo so let's resize it let's see here we'll just remove this and we'll say width say 150 all right there we go make a lot smaller and the next one will do is say let's actually put the balance okay we can add the balance like this let's just clear this out we're gonna execute JavaScript inside of here so we use curly braces oops alright yeah Oh everything's kind of going haywire here guys will say this state balance and we'll say die alright let's go back to the page here boom there we go awesome done and done alright so next we want to do is create a form that will send the dies we'll be able to specify recipient and also the amount alright so what I'm gonna do is just copy and paste in some boilerplate code so that you can see how this form works alright so I've added some basic code here for the form alright so this is just a form HTML element and I've got this on submit handler here with a function that will fill out here in a minute alright so so to do handle submit all right and then I've got a button here that will actually do the submission okay so basically here's the submit button whenever this is clicked for sending tokens will actually send the tokens here so all you can see right now is a send button alright doesn't do anything yet we also need to be able to specify you know where it's going to so the first thing we'll do is add a recipient just like this alright I've created an input for the form alright and then what we'll do is use these things in react call refs so whenever we fill this out it's gonna store the value here for the input all right this will be the recipient and I'll just have a placeholder of recipient address so we can see that here recipient address and then what we want to do is also just like that just like the recipient we want to specify the amount so I'll add a new field here like this all right so here's the amount go back to page alright address and amount okay so now I want to clean up our UI a little bit and create a width okay so on this very top element here just below main I'm gonna say style equals width 600 pixels all right just like that save it go back here right yep there we go we can make it a little narrower even since it's a wallet let's say like 500 save that's even a little less let's do 400 just a wallet we don't need a lot of space boom there we go awesome it looks nice and clean so now let's wire this up okay whenever they click the submit button the first thing we want to do is you know preventative eval behavior we don't want the page to refresh so there we go and then we'll track the recipient all right like this say recipient equals this that recipient value that's what we did here alright and then next we want to do is get the amount will say Const amount equals this amount value all right and then let's just console.log those let's see your recipient amount your first page go back here and let's - let's just put in somebody's address let's copy this address here from ganach the second one oops sorry put in the sabia then to 100 diet oaken's click send and here you here's a recipient and here's the amount log to the console alright so now we want to do is format this because we're sending die we don't want to just send you know a thousand we actually have to convert it to its decimal resolution which is 18 so here you know we converted it from the decimal resolution with web 3 utils from way so we'll do it kind of similarly basically we'll just copy this and then paste it here amount alright so instead of from way we want to do two way alright and then say value ether so I'll show you what that looks like in the terminal oh so it's window dot web 3 all right and then putting the recipient address again sorry let's just copy it from ganache so say 10 died tokens and 10 looks like this okay when we convert it that's what we want all right so the last thing we want to do is actually call this in the smart contract to send the cryptocurrency okay so let's do that let's create a function where we're gonna interact with the smart contract we'll just create a transfer function right here alright let's say transfer and then we say recipient and then amount because those are the two arguments for the ERC 20 function transfer will say this state died token mock methods transfer will pass in recipient and then amount alright and then finally we have to call send on this we can't just call the function by itself we actually have to trigger it and then when we call send we must tell who is sending it so there from we say this state dot account this state account because they must sign this transaction with meta mask and finalize it on the blockchain that way alright so that's all we have to do here actually there's one more step we need to bind it here like this boom just transfer equals this transfer bind this all right so now inside this form submission we can call that function just like this pretty simple basically we will change this and do this this dot transfer pass in recipient and amount and it will call this function and talk to the smart contract provided that we wired everything up correctly but that's the idea so let's paste in the recipient address sorry I was copied again from ganache let's actually send 100 die tokens this time all right let's click send and you should see a meta mask confirmation pop-up all right it's even telling you that you're sending a hundred die which is pretty cool plus the fee click confirm refresh the page and boom there you go your trends your die balance went down by a hundred tokens so now let's build up the final feature where we actually show our transactions at the bottom our transaction history okay so you know now that we've logged these out to the console we can see that we actually have some transactions now and what we want to do is basically dig into each one of these transactions find the return values and then pass those in to the table so we want to show like who the transaction went to and then also the amount which is going to be stored here in the values basically to and then value that's what we're gonna show on the screen who you sent money to and then how much okay so we're just gonna create a basic table like this all right I'll just copy this and paste it in here let's see a table after the form with this alright so table it's gonna have a header that's gonna have recipient and the value alright and it's gonna have a body alright so save that and looks like we're missing one more tag closing tag T body or table sorry table tag was it closed alright so let's go back to screen here alright there we go so recipient and value are the two things that we want to show and we can fill is that like this basically which to map over all these play this that state dot transactions map all right we'll pass it a function basically this will be the transaction and then the index all right and then we will display them out on the page like this basically we'll say return and then we'll pass in TR equal or like this is itd all right and we'll start with the TX return values and - that's gonna be here the transaction went - and then we'll also the same for the value okay say - string so it'll blow up on us if we don't okay all right so the last thing is react needs a key here because all these elements to be unique on the react fertile Dom so we're just gonna use the index as a unique key all right so that's just a weird react thing don't worry if you don't totally understand why we did that that's okay all right so looks like I need to put this on the table body as well sorry guys we just come down here alright let's refresh the page like this and alright there we go so we should see something here let's make sure I got all this right alright so I just realize we never actually put the transactions in the state so we'll do that like this all right we'll just do console.log through this set state transactions alright we'll just pass in the transactions here clear that out transactions all right so see all right boom there we go awesome so here are the transactions logged out to the page all right we got some overflow going on here we can fix all that don't worry but let's do one other thing first okay so instead of just showing out you know this crazy big number we want to show a human readable version of this so let's do this and set of you know just showing the raw value let's convert it to its human readable value with the same helper that we used up here when we showed the balance we use web three utils from way all right we'll do it just like this boom so window dot web three utils from way transaction return values value to string and we'll convert it to ether all right so boom there you go awesome so this recipients kind of big so it may not take our specified width here so maybe we should bump this up to let's do 500 pixels all right there we go so 500 pixels seems to be an appropriate width that will accommodate all this one alternative is we could truncate this but for now let's just show everything explicitly on-screen okay so that's it you have now created your own etherium wallet with the dice table coin congratulations this is a really amazing app that uses a real-world currency or at least oh you know a fake version of it but you could very easily use the real die token by replacing this address by using the actual die token ABI which you can find here on ethos cam you know explain to all that in this tutorial that's a way that you can level this thing up to be a real world application alright so if y'all like this video again that source codes down in the description below you know as always subscribe to the channel click the like button down below really helps these videos get found so that more people can benefit from them and if you want to take that next step to mastering blockchain then head on over to adapt university comm for a slash bootcamp alright until next time thanks for watching dap university

Channel: Dapp University

Views: 42,889

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

Length: 52min 55sec (3175 seconds)

Published: Mon Feb 24 2020