Create your own Cryptocurrency & ICO Page with Solidity | Sebastian Armand | Skillshare

Create your own Cryptocurrency & ICO Page with Solidity

Sebastian Armand

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
45 Lessons (3h 4m)
    • 1. Intro

      2:21
    • 2. Introduction

      3:26
    • 3. What is Ethereum?

      3:53
    • 4. What is a Blockchain?

      5:33
    • 5. Difference: Bitcoin-Blockchain & Ethereum-Blockchain

      1:57
    • 6. Download Metamask

      2:01
    • 7. Buying Test-Tokens

      1:29
    • 8. Writing our first Smart Contract

      3:22
    • 9. Deploying Smart Contract with JavaScript VM

      2:41
    • 10. Deploying Smart Contract with Injected Web3

      3:27
    • 11. Creating the Variables for our ICO

      2:37
    • 12. Basic Variables in Solidity

      4:01
    • 13. Values of the Variables in the Constructor

      2:01
    • 14. Buy Tokens Function - Payable

      3:31
    • 15. Differences: Ether, Finney, Gwei, Wei

      2:34
    • 16. Gas-System

      4:46
    • 17. Differences: Payable & Return Functions

      2:25
    • 18. Two More Functions

      1:53
    • 19. End-Sale Function

      3:13
    • 20. ERC20 Standard-Interface Implementation

      2:59
    • 21. ERC20 Standard Explanation

      6:35
    • 22. Buy Tokens Function & Events

      5:00
    • 23. Requirements: Code-editor & Node.js

      0:47
    • 24. Download ReactJS

      2:09
    • 25. What is ReactJS?

      4:39
    • 26. Creating the Navbar

      4:35
    • 27. Styling the Navbar - Part1

      6:06
    • 28. Creating & Styling the Start-Component - Part1

      15:28
    • 29. Creating & Styling the Start-Component - Part2

      2:08
    • 30. The About-Component

      3:03
    • 31. The Whitepaper-Component

      4:39
    • 32. The Roadmap-Component

      3:09
    • 33. The Contribute-Component

      2:00
    • 34. The Team-Component

      1:42
    • 35. React Scroll to Component

      4:06
    • 36. What is Web3?

      5:10
    • 37. How can we deploy the SmartContract to the Blockchain?

      1:37
    • 38. Compiling Solidity Code into JSON

      7:34
    • 39. Ico.js

      2:00
    • 40. Returning Values from Blockchain on our Webpage

      7:51
    • 41. Returning Values from Blockchain on our Webpage - Part2

      7:51
    • 42. Contribute to the ICO Part-1

      5:24
    • 43. Contribute to the ICO Part-2

      5:40
    • 44. Setting up Infura Provider

      7:44
    • 45. Deployment with Truffle-HD-Wallet-Provider & Infura

      6:32

About This Class

What is an ICO?

An Initial Coin Offering (ICO) is a fundraising mechanism in which new projects sell their underlying crypto tokens in exchange for bitcoin or ether. It's similar to an Initial Public Offering (IPO) in which investors purchase shares of a company. But an ICO is much, much easier to create and basically everyone is able to start an ICO.

In 2018 ICOs earned in total over 20.000.000.000$. Therefore an ICO is at that moment the most powerful kickstart for your business or App-idea in order to raise money from investors!

What do we cover in this course?

In short: we will cover everything  you need to know in order to start with your own ICO-project. The course is structured in 3 major lectures:

1. Ethereum, Blockchain and Smart Contracts:
In this lecture we will cover all the basic stuff you need in order to start writing your first Smart-Contract. We will learn for example:

  • What is Ethereum?

  • What is a Blockchain?

  • Creating the ERC20 Token from scratch

  • Creating the ICO-SmartContract

  • Deploying SmartContracts to the Rinkeby Testnetwork


2. Creating the ICO-Webpage with ReactJS

We will set up the ICO LandingPage for your ICO project. This lecture contains:

  • What is ReactJS

  • Download & Installation of ReactJS

  • Creating basic Html, CSS & JavaScript Code for the Webpage


3. Combing the ICO-Webpage with the ICO SmartContract

We will cover here for example:

  • What is Web3?

  • How to compile Solidity code into JSON

  • Setting up Infura provider

  • Deployment of Smart-Contracts with Truffle-HD-Wallet-Provider

Transcripts

1. Intro: Hi, everybody. And welcome to this video and this cross, we will create our own Cryptocurrency and icy rep edge from scratch. Before I'm going to show you this main project. I want to give you some general informations about ideals. Well, an initial coin offering and short ideo is similar to an initial public offering on rich investors. Purchase shares over company. But when I see oh, it's much, much easier to create, and basically everyone is able to start in I C E. O. For example, if we have a nice business or up idea, then you can simply present your idea on the Social Media's on the Bitcoin Forum on Reddit Trita, etcetera. Interested investors can contribute to the offering by buying a new crypto currency total specified to Z. I see old. If your idea is good, then you can raise tons off money. I really mean 20 off money. Here's more diagram. So in 2018 we had about 1000 I CEOs they earned in total over $20 billion. That means an average ratio. So just like that, what you were created this cross from scratch raise the boat $20 million therefore, an I c e o. Is at that moment the most powerful kick start for your business or up idea to raise money from investors. So enough about I CEOs what we would create here. Exactly. Well, we will create his men Project. This s your webpage with our own your asi 20 token based on your free room blood form. So we will create this template. But you can easily modify for your project. This I seo contains all the basic stuff. Like an area for the road map. Right paper and the team. You can contribute to the i c e o by buying our own era. See 20 totem referee Liza by using metal mask like really a receipt 20 token. All off. All transactions will be tricked on the block. Shane, if you're interested in this topic, then you can check the next videos. They I give you more information about sea ice. Your rep edge. What? The block. Shen is a free room, etcetera. 2. Introduction: okay, in this short video, I want to show you is the main project. And we will coat your from scratch and hope we can approach this. I see all project read. We will create this ice, your landing page and our own Your seat. 20 crypto talking on their free room Blood form re happier everything. What an ideal needs. For example, at the start, we have here an area for your video and you can present your idea areas for the white paper road map and the team and off course. And we can also contribute to the i c e o. And to do so, we can buy DC tokens. For example. Let's do this. No buys Ray, and we have fewer protections to stop somebody from just writing nonsense. For example, if you're right, you're a string No, I want to buy deceit. Orton's for to either we have fewer Bono's off 25% for the next two weeks. His portal to the broke shade we will use madam ask. You can see this pop ups or a medically The Blue Ocean has an asynchronous behavior. Therefore, to buy that opens on this Always take some amount of time. For this reason, refuse a small rating animation and then, after time re successfully bought DC Tolkien's you can see your new tokens, for example, here under my d. C told means, and we can also shake No, this transaction on the ring p dot is a skin rink is a test network, but everything here is also working on the main It you can see the block. Shane has successfully tricked our transaction. But no. How can we approach this project? Read. We will cover a lot of stuff here. Therefore, I structured on this project into three major next rules. In the first lecture, we will create the I C o smart contract and see here asi 20 total. We will only for example, what if you're is how abruption works. Hope to write your own smart contract of solidity at Sarah. Next in the second lecture, we will set up a lot Rep itch. We will create your basic extreme Elegies is in travel script code as foundation Through its framework, people use wreck Jess and it last we will combine a smart contract with our rep age. This is probably the most difficult part because I'm here. We will do all the stuff. Like working rough. Rep. Three. No dress. We're compiling the solidity code into Jason. But then finally, we basically covered everything in order to start rough solidity and creating your own icy Oh, Page and Brutal told me. Okay, Does everything for no. And in the next video will start roof. What if he room actually is? 3. What is Ethereum?: first off oil. Before we start, let's discuss what the few room actually is. Well, in short, we could say the fear, um, is a decentralized database. The big difference here, compared with centralized databases, which are used by applications like Facebook trigger etcetera, is that no specific person is control over the data's. Instead, the data's redecorated by the users are controlled by the whole network. The network preceded this one by one or more so called notes, and now it can be everyone. So everyone has a computer or a laptop. Just can install the software on the note, and it's then participant off the few room network. All of these notes are connect together from the actual network, and every note can contain a full copy off the so called Blockchain the block. Shane is the technology behind the scenes, which makes this decentralize behavior possible. Holder Blockchain is working and detail people discuss in the next video. No, let's have a look at a real application that is made by a few room because theoretical you can create any kind off application with a few room ready, you need to start. Data's the famous example for dead is probably is a game. Crypto kitties. Crypto Kitties is interesting because it's the first game based on the fracture and technology at all. By xray the structure off our I C E o and people coat in this cross from scratch. It's really similar to this game. To play this game, you need to kind off Porter and to get access to the if you're in production, the portal, I mean the drone metal mask. We will use this everyone for over. I see all is very well. We can install metal mask. We will see in another video for no. I only want to show you hold the front end off such applications on the few implant from are working. Therefore, let's look in the mirror misc As you can see, middle mask displaced, different networks. And this is important because it shows us that there are different block chains off fume. The Ring P test network is a test environment for developers so perfect for our purposes. All the transactions we make here doesn't cost real money. Then we have the a few your main it. As you can see, the page is refreshing because the main. It is the real if, um, production. I'm so disturbed. Election, where you can buy, for example, is so and the game Crypto kitties is running on this block, Shane. And what I want to show you is that you can see the interface looks like in other games. There are no big differences in the front end. The only big difference here is the big end. So the ray and who restored Data's off the users. That's everything. What I want to mention in this short video so summarize it's important to understand that we have different fractions and that the if you implied from is a kind off, decentralized database which is formed by every participant off the fear, um, network. And in the next video, we're gonna have a look at the block. Shane 4. What is a Blockchain?: in this video, we will have a look at the fundamentals off block Shane because the Blockchain is the based technology off a few room and revolt. Understanding these basics. It will be really hard to understand how if you're in Brooks, therefore, let's have a look at this diagram. We can see here the basic structure off the big corn production. The bit coin collection is really similar toe fumes. There are only a few differences which we will discuss in the next video. So in general block, Shane contains a block and block can store any kind off data. For example, the index off the block time stem. So when we created this block and nuns this we will discuss in just a few moments. And Data's the data can be anything but particular in the case. Off this bit corn production, we only store on the transactions. Then we always have ah, hash toe. Understand? Hesh, let's pivot toe another tip. We have here to 56 from hash generator. This generator has a similar behavior, like it's used on the block. Shame the shar On 2 56 Igor, written on, produces a fingerprint off digital data, for example. That's right. A. Then you can see the hash off a Let's add a B. Then you concede the hash off a B. If we remove being, we can see we have the same hash, just like before. We can also right here. Any kind off data so important here is you're always going to get ahead. Sh that it's this long. So this many characters, with that in mind, let's go big in the case. Off the production, the hash is the thing happened off all off thes status On the one thing here special, you can see the hash starts with four zeros. This has something to do with the month did. None is just a number that you can say to try to fight the number that fits so that the hash starts with four zeros. That means the hash is the combination off. All off the status end right number off the nuns to create the hash, and that starts before zeros and pride. Ray, they put we call mining. It's a calculation off the right number off the nuns so that the hash starts prefer certain number off zeros and therefore the number of zeros is responsible for the difficulty. The more zero stash needs, the more difficult is it to find the right number off the nuns. And finally, if a minor confined the right fish, so the fish that starts before zeros, then the whole block assigned and we can start a new one. We have a Shane off blocks, and therefore we call this block shame in order to create no a new bell oclock, we need to consider the head off the previous block the cross, the new hash that the miners are going toe calculate. It's a combination off the data that also contains the periods Hesh and, of course, the number off the nuns. And this runoff, the key futures off the block. Shane across the new Hashem contains Allred's Dahesh off the purest blocks, and that makes the block Shane really safe. We can not just change that off from the past, because that would break the shame and the block wouldn't be village anymore. Therefore, the longer the collection is, the safer it is. Another important topic is the public and private key across with auto public private key, and there would be no protection and to stop somebody from just adding a transaction that spends oil off someone else's money. Tow them. Therefore, the ray hold of luxury and solstice is by very fire. Transactions refer. Signature. So not just anyone can create these transactions. The user can only send relative signatures toe the block. Shane The Signatures contains informations about a transaction. It says, for example, that Kim saw the public key off. Kim sends $25 toe Donald. And to make sure that Kim is the owner off $25 we need the private key in short grifter Private key, and we just can verify that we are the owner. Off her particular public key over a signature is venit. That means if we can very five or private key that we are the owner off public key, and then we can add the transaction toe the Blockchain. That was a short explanation off the most important parts off a production. And in the next video, I will show you the difference between this Bitcoin pluck Shane and off the fumes block. Shane 5. Difference: Bitcoin-Blockchain & Ethereum-Blockchain: Okay, So, no, what is the big difference between the big corn production and fumes? Well, as we discussed in the last video, the Bitcoin Blockchain stores only pure transactions. The transactions only contained informations about the transaction itself. For example, home, Any money, person, a sense toe person be on the if your inflection. Or instead we have an extension to the transaction itself. The account owner on the Ethereum production can hold programming code. This programming code and can be executed automatically. Assume Embry sent money and from off Visa toe the account owner and the programming code instead on what we call a smart contract in Syria that looks something like this. This is the public key. And this key holds the smart contract. If nor person sends money to this key, we will execute this coat or a medic leave. And that's basically ensured a big difference to the auction off Bitcoin. So all transactions can also hold dynamic programming code. And this is the cue future off the If you're in production because every node on the network and has a copy off the block, Shane and the production can hold the smart contracts. Therefore There is no way whole single person could manipulate the court. We want toe execute. And this is what the fear on platform Mexico powerful Because we only need to trust the whole network and how we can create the smart contracts and how we can send them and toe the block. Shane, we will see in the next videos. 6. Download Metamask: this front video. I want to show you how we can download and install metal misc. As I said in one off the last videos, Meta Mask is a kind of porter on birth that we can access to the Syrian bloc. Shane. Okay, so first off, I'm here on Google. Type in metal mask download and click the first link at the meta MISC. Everyone to the pros are and don't notice if the download is complete, then you should see this madam ISC symbol. Open it and click Tried. No, no, let's go through the installation first grade and possible up great next and accept all off the steps. No, it's important that you're safe these routes on your PC because we will get them later and click next Now, I reckon, dropped the roads in the right order into the field and corn from everything. And at last we are now on the fear. Um, minute. Therefore, let's go through ah tested Brooke shoes. The rink be tested work, and that's basically everything we need for no and in the next video, evil by some test Oden's for what test environment 7. Buying Test-Tokens: Okay, Now let's buy some chest. Opens for the ring P test. It broke. So for that, please go to this rep age. You confined link off this webpage at the end off this video? Well, there are three possibilities where we can get some test opens the traitor good plus or Facebook. In order to get these tokens, you just need to create a post on one off these platforms that contains your ethereum address. So let's do this right now. Open meta, misc and copia. Your address. I will go to a traitor, and I create a new post. Or if the if you address, copy the link off the post and paste a link in tow. This input off, I 17.5. No, you need to read a short time. And as you can see, we have no 7.5 on the ring. P testing it, Brooke 8. Writing our first Smart Contract: in this video, we're going to start writing our first smart contract. In order to write the first contract, we will use an online called Eddie Tour called Remix remixes, made specifically for creating and testing solid EGY smart contracts. Therefore, please goto remakes dot affirm that work. You can see you know, some default code. We will not use this so you can ignore this. Instead, let's create a new fire click. The plus name It I see all don't solidity. So first of all, let's write some code. Let's stop prove Break, Ma saluted to you is your point for poor and 21? So this is just a Russian off solidity and we will use for our smart contract. No, let's write contract I c E o a new a string public name and the function that we name, I see oh, public. And in the function, we will set the name toe de McCoy before we continue a small thing I want to mention if you've got in there a message like that, then you need to shoes another version off the compile off. Please do not change the solidity. Russian cross. It's important, and that we have toe same version two prior end on Eros, depending on the version. Okay, So if you have got these error messages and then just goto compiled and select years of Russian, you're important. 4.21. No, all ever messages should be gone. No, let's talk aboard and what we make here. So in order to create a new contract, we always start with the key road contract, followed by the name So ho you want toe name the contract by Xray. This is similar like class, if you're are formula of object oriented program Gingrich's. Then we created a new Rabel string, the public string that recall name and we created a new function. I see old and in the function we have set the name Toe de McCoy important here is to understand You can see the name off. The function is the same, like the contract. Therefore, dysfunction is a so called constructor. That means assume we create a new instance off the contract. I c e o. You will execute the function. I see. Oh, sorry. Will set immediately. And the name Toe de McCoy 9. Deploying Smart Contract with JavaScript VM: Well, in this video, I want to show you how you can deploy and test a smart contract and brief the built in local and room. And so for that you need to shoes under environment, the JavaScript little machine you can see here five testicle owns Richard Opera, right US 100 fr. In order to create no and your instance off the smart contract, you simply need to click deploy. You can see ref court immediately. A new instance off the smart contract without delay. This is important across the JavaScript. Right machine is a local environment. That means this simulates us No real production. Because if you want to deploy something on the real production and we always need read a short time remember the notes on the networks and first must approve the changers Another thing we can see here is what deployment has costs on ESA so or rest if you make a transaction. That means if he changed something on the pluck Shane, we need to pay for that. How does this calculated and hold? This is working and detail. We will discuss in a not a video. For now, it's only important to understand that Every change on the block. Shane Cross money. Okay, now let's have a look at a rod Smart contract. First of all, as soon I'm remake your Rabel public the remix Any tour creates or medically, a new function that returns to value off the Rabel. In our case, you can see if you click the name it really return us to string de McCoy that we set in the constructor function. Another way we can initialize some default values is as following. We can give the construct a paramedic off. Then we can set the Param Eter toe the name to initialize the radio. We can simply personal the argument under deploy. Let's name the stem according to and under the new instance who can see the name has changed. 10. Deploying Smart Contract with Injected Web3: in this video, I'm going to show you another possibility. How you can test the smart contract instead Testing this locally. I'm briefed. JavaScript. Brutal machine. You can transfer to Smart contract directly to the rinky test network. For that, we need our our portal metal mask, breath some ether and ordered to pay the transaction. So to do this shoes here, the injected rep three library brought rep three, actually is We will discuss in the last section off this cross when we connect the smart contract before Rep ege. OK, no, let's deploy the smart con trick. You can see this cross also money. Remember, we make some changes on the Blockchain. Let's confirm this. No, you can see the behavior off production across. It always takes some time to deploy the smart contract toe the election. So this is something we definitely need to consider for later. When we create the rep edge and render user can interact with the smart contract. No. First of all, you can see the instance off The smart contract looks like if you have trust your the local environment, there are no differences on the remakes interface, but you can see no link. Let's open the link. This is the skin off rinky that means or a smart contract is no public. So everyone is no able to see what smart contract we have here. The pro kite were four confirmations. Remember here the blocks off abruption, then from, um, does the address from a long metal Miska ConEd to the contract we just created. We can click. No, the contract to see more details. We can see here the contract traitor. So in this case or mid MSK, address the balance off the smart contract. So how many visa on disk Smart contract contains? End the number off transactions? Another thing I want to mention is we don't have always to create in your instance off a smart contract if we want to test something. We also can dress at theatrics off a smart contract. We can do this by Kropp theatrics and pasting. Good under it, Edris. No, you can see it the same, just like before. So that's everything I wanted toe discuss in this video. But in general test the court I arrest would recommend to youth javascript brittle machine the cross. This is much, much faster for testing purposes 11. Creating the Variables for our ICO: In this video we will start creating or r I C o quote So we will create all the ray build we need for our I c e o. And in the next video we will talk about the Rayburn or in detail. So what in solidity here is special. So let's start write them all down. So first we have our name. I think that should be clear. This will be the name off our our total. Then a string public symbol. This will be the symbol off are talking for example deceive and into draw decimals. This is for the decimal places off. Our crypto currency and public image are born with ends I c e o and and I see old stops and into char that console the contributors your end all tokens for all tokens that are I still has generated interests Hitman and the mapping at ris your end Public balances No, Let's initialize all the radios in the constructor decimals toe 18 symbol toe deceive born with ends and now plus two weeks I feel ends and four weeks and I see all starts to know we will set to start supply off all told things Toe 100. The woman is the Emma's. She don't send off and it lasts. Reset. The balance is off, Emma. She don't sender toe all Tobin's. Okay, that's everything for this short video. And in the next video, we'll talk about the ray birds more in detail. 12. Basic Variables in Solidity: Well, no. Let's talk about the basic ray birds and solidity, chief. First of all, you can see here a list with all the basic rapers you was often solidity. So we have toe strength, public name and symbol. The string is just the secrets off characters like Dima Corn or deceived The next X ray builds our InterTrust. I think you should known them from other programming languages. In short, they can only hold whole numbers like that and solidity weekend juris, different types off InterTrust, the unsigned and normal inter drop. The difference here is that a normal inter track and also hold minus values and unsigned can only hold positive numbers. Another thing I want to mention here is following. Let's create in your instance off the smart contract. Click deploy and no, let's click. For example, here on decimals, you can see the Eddie torque rates here and unsigned immature to 56. This is because we don't specify the inter tre and therefore solidity has created us or medically and urine to 56. You can also use year for example, 8 16 so to tour etcetera upto run for 56. So your aunt is the smallest type you can use to store, only rarely use from zero upto 255. That means the higher the number here is the more real use Ukraine store, and you're in 2 56 can store pretty much every number. Rather, maybe you wonder why we can specify the inter dress. So does it across. Remember, if we want to deploy a contract into the production, this will cost or raise money. Therefore, the larger type, the more you have to pay for storage but at present does not really relevant because the increase in price it's not extremely significant. For this reason, I produced the biggest numbers for O. R I. C O Next dressed for completeness. We can also use 60 and unsigned fixed values so we can start here. Numbers were of decimal. You can see here two examples. Another special type from solidity is the address does special Rabel only for solidity. This can hold Hexi decimal addresses from the user's off. The If you're, um, network for a wise you American justice, for example, to specify the creator off smart contract. Another special type from solidity is the nothing in short this like an area. So does the default type, abuse and solidity to create a collection off key value pairs. Important year is all keys must be off the same type and all that rebels must be off the same type for our project. Use this in order to return the amount of money it's into draw off a specified address. For example, let's testes Copia de address from the account paced us in here, and you can see really the great off the smart contract have 100 cc coins. That's everything for this video. And in the next video, we can have a look at the values in the constructor or function. 13. Values of the Variables in the Constructor : Let's continue on with the values off the constructor. So as soon with red An instance off the smart contract thats the case when we deployed a smart contract, then the smart contract or medically called this constructive function. So in the constructor re initialized all the rebels, the strength and indeed dressed like name decimal and all Tolkien's special. Here is the time to Cuba No returns and into Tre. Under I see all start you can see this Integra. Let's copy this and it's go, for example, toe this rep age. As you can see, you doesn't trust the inter dry in seconds since January 1st, 1970. In our case, it's to tempt them when we have deployed the smart contract two weeks or four weeks. I think this is Kia sort of dead began at two or four weeks to our time. Then next we have see hitman so chemistry dot sender and the trust returns the Hexi Decimal address off the person who caused the function in this case. And this is the address from our opponent because we are the creator off the smart contract and in the last line we said the balances off the MSC dot sender toe. All told means so all the 100 start opens and despise rate reason right? The great off the contract has all 100 start opens. 14. Buy Tokens Function - Payable: Well, no. I want to create the necessary functions we need for our i c e o. I want to start with to buy it, open its function. So let's start function by tokens. Public pay able The key broad pay able I'm is important because pay able means whenever we want to call this function, we have to pay money for this. Call the cross with pay able. We make some changes on the block, Shane. Then we need endure in totems. So the actual totals and we want to create in the next line reset the Tobins toe. Emma she dot value and the Shia don't value. I'm holds the amount of money that re sent to this function. How does Cole looks like in this very tour on? We will see in just a few moments. Then we need access to the address off the industry dot sender. So the person who calls this function and because we want to give him the new totems, just created and at last, in order to increase the total supply off all tokens on, we will set all tokens toe all tokens plus tokens. Let's test us by creating in your instance off the smart contract. As you can see, the new function is red. So whenever the function may drift, the remakes editores read it will cost money in order to call a paper function on. We can do so by using the built in JavaScript rattle machine. You can type here. Z Amount off is a for example, let's buy tokens for one either. And then just click the buy tokens function. Now we can see here in the concert Successful transaction from the controlled er toe the bite open functions off the smart contract you can see under the You can't know that we have less money left. So the run esa plus C amount off guests. We just paid for the transaction. No, let's check the balance off our count Kobe and paste our interests under the balances function. And as you can see, we have no really big number of tokens. So the 100 initialized tokens from the start and the number of tokens and we just bored and right. This is such a big number we will discuss in the next video across. This is really important 15. Differences: Ether, Finney, Gwei, Wei: something we haven't really discussed yet. Another differences between Issa Rae, etcetera. Let's go, for example, toe this rep edge. You can find a link off this rep age a. T end off this video. So these are all units or measurement off the same thing, so run it. So here, for example, is this amount off Ray. If you change the value off ESA, you can see holds the amount changing. This is really important because the default measurement unit smart contracts is rave. Therefore, reef under balances and such a big number across this demon off run Isa and Ray plus 100 Ray. And from the start, as you can imagine, 100 Ray and for the smart contract told her to start isn't really much. Therefore, let's changes. No, let's say, for example, the smart contract told her once 100 visa to start, Um, that would be this amount of rape. Let's copy and paste this year. Another thing we need to consider know is if we buy it told us the cross novel. If you buy tokens and this is the same unit like ISO. That means in this example, one TC toting because one piece off. This is because we set the tokens toe. The MSC don't value. So the value and visa that call off dysfunction sends toe this function. If you want to convert one ether no into 100 cc talking, for example, then you can simply multiply Emma's She will You have 100. So no, run esa this 100 d c tokens Bruce. But in this case, we also need toe multiply. The start opens riff 100 because as you remember, this are only 100 diesel. 16. Gas-System: Well, no. Let's talk about the guest system in a few, as I already said in one earlier video, whenever you modify the production. So if you send tokens, interact with a contract, send Isa or do anything else on the production, you must pay for that computation. The payment is killed, relented, and guess and gas is paid in. Ease off, right? Do we need this care system? Well, you can compare this roof. Emerson Rep Services, for example. This is also not for free. You need to pay for storage on the service and the red off fume. We do not pay Amazon but instead repay the miners with guests. More precisely, we pay for every single line off court. For example, if you have looked on our code, let's take all tokens equals all tokens plus tokens and tokens. Eagles Emma She value multiplied Roof 100 in this list, and you can see how much every single operation and crossed in our example the two lines of code and would cost it's re guest for addition, plus five years for multiplication. So in total three plus +58 So this is basically for what you pay But how does this look like in practice? So, for example, when we create a transaction, if you create a transaction, we need to distinguish three properties the gas price, the guest limit and the actual transaction costs or feel Get a better idea I'm holding is used in practice. Let's pivot toe this tip I'm here on is a skin thought i o I thought the skin off the minute f You're a random transaction from someone who has send 0.2 visa to this address. So let's talk abroad the guest price. The guest price is the amount off Ray. We are offering per unit off guests. Based on this example, if we are willing to pay a guest press off 10 that would be 10 times eight. So 10 rape unit off guests. In other words, the gas price would be 80. Rave The brace you pay for each unit increases or decreases how quickly your transaction will be Mind the more you revealing to pay per unit off guests the foster I'm the transaction rather processed. Next, we have a guest limit. This is the maximum amount off units off gas, and the sender is willing to spend on a transaction by default. Istana Transaction and crust. At least 21,000 guests. This is Ah good example here because the spend I just against limit off 90,000. But it's already said the full transaction like this, of course, only 21,000 guests. So the actual get consumed. And by the transaction, Ross 21,000. In this case, all Andrews guests is refunded to the sender. So the 90,000 miners 21,000. What happens if you spend less than 21,000 as guest limit? Then you have a problem because you will lose all your guests. And the transaction won't be executed because that the minor is even able to detect it. Transaction. You need to pay for that and the love property, and we can find in all transactions. It's the actual transaction fees. It is simple. The cross doesn't trust the guest limit multiplied with the guests Price. In this case, it's this multiplied birth 21,000. Okay, that's everything for the guest system. No. And in the next video, we will continue with our I c o cold 17. Differences: Payable & Return Functions: in this short video, I want to show you the other kind of function we can use and solidity for that. Let's right function total to play public, constant returns and your int return all tokens. So this is a function that returns to value as indica off. All told mints, I wanted to show you the pay, able and return function at the beginning because I want to make the difference. Keel. So let's deploy the smart contract with the Ring P test network. Look in a metal mask on click deploy. Confirm it. Okay, now let's have a look at the total supply function whenever you only return a visual. So if you only want to call a function, we do not change anything on the block. Shane. Therefore, this doesn't cost money, and it's runs instantly compared with the paper function. The pay able function course money here because we modify the block Shane and therefore you need to consider that this takes always some amount of time to execute. For example, let's buy some told ones on the rial test network, and you can see just take some amount of time. So summarized. Basically, these are the tour main types of functions we can use and solidity, it's so important to understand is that table functions cost money and that it takes some amount of time and to be executed. And the other one, I'm just returns value, and this doesn't cost money because we do not make any changes year on the block, Shane. 18. Two More Functions: in this video, I want to create some helper functions for I c E o So one function that checks the actual balance off the user who called the new function and another function that returns the address off the use. Of course, the function Let's get started proof my balance. So dysfunction will be public and it will return an integer. And what do we want to return? The balance is off the energy dot sender sort of person who calls this function the same procedure and we can do for my address. A dispute returns the address. Let's create a new address, my address and set it to the sandal. And then let's return this value. Finally, let's test the new functions with the local and Raymond. First, let's check the function, my balance and this is rocking. You can see here all the start opens and my address is rocking as better 19. End-Sale Function: No, let's continue on Griffin Entire function that sends all the collected money that holds My contract contains toe the Edmund. So to us, the greater off the smart conflict. That means if the ice you ends, U S hitman can call its function and then you have access to all the collected money off the smart con rate. To do this, we can write following function and sail public. Emma's she bartender equals Hetman and Edmundo Trance fair at risk. This balance, the key ruined Recre are here is important because we only want that the EP in off The smart contract can call its function. If required. We can shake. If the MSG don't sender is the Edmund. If this is true, then the next line off court will be executed as arise. The function stops here and you will receive an aero message. If the call off this function is the Edmund, then we want to transfer all the money off the smart contract to the address off the Edmund . The balance we get here is the money in Giza and not the d. C. Told Newton's we have created We can't simply test us. No, um safety US proof control s, um, ups. It's more type of all removed. The point you let's great. No, in your instance off the smart contract changed the account and gets by tokens for one easily. We can check. No, our current balance. I'm here and under the cone to conceive. We have one is our listener. Let's call drift this account. No, the sale function. Remember, this is not the Edmund off the smart contract on because we shall change the account. Therefore, you can see receive an error message. No change. Do you konw toe the weapon off the smart contract And we have a successful transaction or Redman has no all the collected. These are from smart contract. Under the account, we have no m, plus one easily. 20. ERC20 Standard-Interface Implementation: in this video, we are going to extend our I see. Oh, my contract. Thrifty era, see 20 standard interface. So what s t e receipt 20 Standard the era. See 20 standard outlines A set of common rules that all it opens can follow on the ethereum network to produce expected rules. This is important for later if you decide to interact roof other smart contracts or if you want to lunch on the Cryptocurrency on an exchange, for example So in order to be fully here, see 20 compliant we need to incorporate a specific set of functions in tow. Smart contract. These are basically four functions. Get the total total supply gets the corn balance transfer told. Didn't end to prove spending the token because there's a standard We don't need to quote this from scratch. We simply can go to this rep age. For example, you can find the link off this rep age and at the end, off this video for no, let's just copy all off the necessary functions. And then in the next video, we will talk about every single function. First, we need the U. S. C. 20 interface. Copa does Paste is and law Smart contract. It's Kobe. It is a safe Miss library. Let's extend your smart contract. And with the new contract first, let's write contract. I seo is your receipt 20 interface. That means the nucleus is now available in a right smart contract and it right using safe met from you. And so now we have access to the safe miss level green in our smart contract. Then let's copy it. This mapping and it last all off these functions paste them into the smart contract. That's everything for no. And in the next video, we will discuss all the new functions. 21. ERC20 Standard Explanation: Well, no. Let's talk about the new functions off the receipt. 20 standard interface. Okay, So first we created a new contract that we named you received 20 interface. The first functions are all returning some values. What they are returning exactly. You will see in just a few moments. And the other two lines of code are events. They are really important because they are responsible for in order to trick changes on the block. Shane, for example, if you make a transaction, this will just play here or we can use the events we will see in the next video. We also edit library safe mess. This is for security. In order to prevent overflows. I have entered link about overflows and solidity at the end off this lecture. So if you want a more detailed explanation about that But in short, if we do not use the slavery, we could get incorrect results from arithmetic operations. And this is something we definitely need toe prevent. Then we have all the new functions off the receipt, 20 interface, and what they are doing is basically exact it and what you can see in the comments. But let's test all off these functions. No toe. Make this more clear. Shoes the built in Britain machine and deploy the I c o Let's start roof balance off. This is similar to the function, my balance, but here have toe piss his argument. The original That's testes could be the Edris off our account and paste is in the balance off function so you can see no, the same Palin's. I'm just like before. Then the transfer function does transfer the balance from talking almost a cone toe to work owned on off the count. My self sufficient balance to retreat. Spare zero Radio trim Trees are alone. Forward testers. You concede your price rate, the use case off the safe mess. This an addition. And this is a sub direction and for youth, your transfer event in order to treat this transfer on the block. Shane. Let's test the snow. Change our cone toe cone to copy the address, and they change the A contacto ConEd one pasty address in the transfer function. And let's say we want to transfer 10,000 BC Tokens to this address from a walker and ConEd in the concert who can see no a successful transaction. They checked the balance. No off the address. You can see the account to has no 10,000 BC tokens. And that's basically everything you need to know for this function. And finally, we have three functions which are all connected together. Let's test them first, change to a cone to there's a contest. 10,000 D C. Titans change to the cone three and cope. Easy address change big toe a cone to no, because graphic onto the approved function. Let's say, for example, we're willing to spend 1000 and tokens toe country. The country is the address beige Scope. It you can see the transaction is successful. Breath the threat function we can check. Know how much conto is willing to spend toe cone. Three. This is a public function so anyone can call this. For example, let's do this roof cone. Five. You can see 1000 remaining deceit. Colton's No country is able to call this function in order to get the tokens from a cone to , so we need to you. The transfer from function entries from is the Cone tool and tour is the cone three. Let's say, for example, we want 100. Tolkien's and important here is that you shoes cone three in order to call the transfer from function, and now you can see the remaining one told NTC Tokens Miners 100. The changes to 400 you can see minus 400 to 500 and zero left. If you click the transfer from function again, we will receive an aero message. And that's basically everything and what these functions are doing. As I already said this only important for the year. See 20 interface in order to make the potent work and it last. Let's delete on these comments and in the next video, even modify o r by Tolkien's function. 22. Buy Tokens Function & Events: Okay, No, in this last video off this lecture leaving modify O R by tokens function because there are still some problems with this function. I want to show you this problems now, so let's deploy the smart contract toe the ring p. Test it, Brooke. Copious the address off the new smart contract and let's go toe Rinke. Don't is a skin. Don't I owe click? Few tokens paste the address in the outfield. You can see it's a scan is able to detect our New Year's Eve 20 interface token. We have your old values we created in the last videos. Let's go to this link and let's bite, hoping for one ether. So normally we should see no. After some amount of time, the transaction under the trends fails. You can see Madam's case approved our transaction on the prop Shane. If he refresh the page, the total supply has increase. But the transfers field Mr Empty. This is because a Z I already said in the last video we need to call an event that rex the nutrients actions here. Therefore, we need to modify the buy tokens functional, especially on. We need to call the transfer event. Therefore, that's right. France fail Edris zero and this she Zenda totems. That means we are going to send the tokens from the ETRA zero to the energy dot sender. Let's also yours. No, the safe Miss and the by token function I thought we were. Multiply Emma. She value of 100 and let's get the two additions Also next. Let's at the bonus for I see all So if the time now smaller or eaters bonus and remember both ends. It's the time in two weeks. Then we will offer Bono's or 25%. We simply can multiply. Emma she value of 125. As a wise, If you are not in the window off the bonus, then evil you surprise. I'm just like before. Well, and it last. Let's simply increase the integer off all contributors plus born Okay, that should be everything for the I c o. Quote off the smart contract. So finally, let's test our changes. Deployed a smart contract to the Ring P test network. Such a one, your total. Let's buy one ether confirm it and lit rate for the improvements on the test broke Shane so the function or country. POTUS is working plus one my billons Also Internets refresh with the skin page and you can see no a lot transaction. So that was everything I wanted to show you in this lecture? No, our basic. I see. Oh, code is ready. Therefore, in the next lecture, people create over the page for this. I see. Oh, and then in the last lecture will combine this icy oh chord riffs the I. C O page. 23. Requirements: Code-editor & Node.js: okay, Before we can start the section, we need some requirements. So first off oil and please don't load the code editor for your PC. You can just, for example, supply I'm or item and this course able Brooke Proof atan. And next, please make sure that you don't know and install no dress. If you have done this open any kind of terminal and shake the current Russian, you can check this roof note dish, reef, this cross we need at least and the Russian 8.0. These are requirements we need for no. And in the next video, people don't vote and install react at. 24. Download ReactJS: okay? No, we will don't know. Facebook's react at react is the frame broke and foundation, which we will use for Seo Webpage. But more informations about that we will see in the next video. So first off, euro termina create in your folder roof make you I will name the folder I C o Stuff and opened the new folder Roof CD. And no, let's write suitable NPM install this year. Create react EP If you are on windows and then you don't get right the pseudo at the beginning and then confirm it with your piss route Create Raked up is a comment toe to create new wrecked applications so we can use this in order to create a new react project. And no, it's right trade rate. Yep. I see all the dem acorns, so I see all dish. Dima coin will be the name off a lot project. If the don't lord is complete, then please open the project or if you're ready tour. As I already said, I use item and discourse and no, let's write in the concert NPM run start in order to start the reacts over. So this will pop up automatically your brother and no, you should be able to see the standard react front and 25. What is ReactJS?: No, let's discuss in short and what re actress actually is and hold. It works. But first off, all for more informations, you can go to the official react page. There are two tourists, etcetera. If you want to dive deeper and this topic because we will not cover everything from react, it will only cover on the basic stuff we need for creating rep edge for a while. I see old, it's so react is a JavaScript library for building user interfaces and its component based . What is the special thing rough component based, for example, Let's have a look at this official react rep. Age you can see we have ahead are a section the food a terrible. So all of these areas we could split up into components and to split up pages into components is something that we can see really often in rep development. Because this has a lot off at one teachers, and that's rocks really ready wretches. No. Takes this concept off, splitting your webpages into components and lost zero to build such components for your webpage. With JavaScript, you can see this really read in the project photo. All of the's component fires our and JavaScript. So they are reusable components, which you continues to hold the html code and additionally toe that it can hold JavaScript logic. For example, if you need to interact with a few other actions display content dynamically loading data's from the back end without refreshing the whole page, it's it all wrong. And this is my opinion. Is the main future off react. So enough theory. No, let's dive right into our s your project. Because if you see and write the actual coat, you will learn the functionality off Rick much, much faster. So, Horace, the reptile and wrecked. In short, we have the index dot dress, and here we have the rectum, not render miss it that holds the HTML code and redness or this place the extreme El Code in the root element. Yep. This HTML code that we return under Dodd slash Yep. Which is this JavaScript Fine. And the root element. See index dot html file. The index dot html file is over. Basic extreme infrastructure that renders the actually ml coat. You can find the root element in the body takes the route. Just a dictator. Okay, so let's create our own first component from scratch. For us, that's to need all the stuff we don't need. For example, the local a za Cancino. We have an error message. This is a nice future from Richt, so you don't have to refresh the page anytime wrecked for the dude is automatically for us . Let's open No the fire Yep dot dress. Let's delete here the import, local and let's delete or the basic HTML code and you can see or aero message is gun. Let's delete the cease fire index dot c Asses rehab Another error message. Go to the indexed or chess and delete import index tortillas s. Let's create a new folder for the C. S S and move. The upstarts eases into this fall off. We need to modify Know the directory at the same folder? No, let's write something in the diff takes in order to shake our basic set up. You can see this is working. We have no aero messages and we can see a lot of string 26. Creating the Navbar: No. Let's discuss the code we have here. So first we have over two name spaces. They're important because with the name spaces, we make the rate functionality and the door seizes file in this EP togs file available and the Epcot CSS file, we will create in the next videos all the style for HTML code by his rate and let's delete or the coat from this final Then we have here a class EP. This is the same name, just like the Java script Fire. We extend this nucleus riff the component retreat edit at the top from re eight. In this class, we will also right in the last lecture All the JavaScript logic and order tour interact with the train entry If you the random is it in the render message We will write and return all off our HTML code and it last proof export default. Yep, We return this fire. So then we have access to this fire in z index dot Js file. That's everything. What we need to know for now. Basically, we will right now and in the next videos only all the html and CSS stuff. So if you are already family are redirect HTML and CSS. Then you can skip this lectures at the end of each video on my reel It all the created coat a za rice We will start no rift. The next bar. Let's create new myth Tex. First we work Great link roof the class title A. So we need to classes in order to have access to the extreme El Tex before what's years as cold in the link left? Create a new def demo. I c E o. Let's create a new def class middle Neff In this stiff, we will set up all the links we need the boats, right, paper road map. And we need to def take rightness in dissed If we will display a lot at risk for no omelet space here. Placeholder. Let's it or middle misc address he saw and D. C told. Okay, that's everything for no. And in the next video, we're going to start to style this Neff bar 27. Styling the Navbar - Part1: No. Let's continue on with some styles for a CEO, but first we need to. Don't note some pick Atriss Press. Let's don't note and install the material design from Google. You can find the link at the end. Off this video opened the terminal. Let's Go Noor Brodrick Directory and Let's install this package with NPM. Install material de shuai slash core. If the download is complete, then we can add the buttons off this package with import button from at Material Dish you I slash court slash styles on the rep age. Under component demons and under buttons, you can find the buttons. Let's have a look on the source code. The small mistake. They changed the name space, and now you can see the new styles for the buttons. And no, let's import another picket toe. Our project. Let's at the items from glue we can etc. Heightens by trust, including, um, this line toe our HTML code. So copy this line. Go to the index dot xml file and paste this year. No, we has excess toe all the items. Let's take this icon and paste this Iten under the class title, I see. Oh, let's start with modifying our epic tortillas, this fire for us People set up the general fund family and let's also modify body Take the very removed is a petting and the margin Our default color is blank. And let's set the opacity to zero point 95. Let's start zone if tick the background color too right and display to flex. That means all child items off the next bar are no lined up in a row. Trust. If I content space round, we set up a space to the right and left on the Shyatt. Items off the next bar line items to center, snakes rip to know rip and the position toe fixed, fixed means if we scroll or repechage, then the position off the next bar will not move. But then we also need to set the left top and rightto zero picture. And finally, let's get a shadow with the Nef Bar 28. Creating & Styling the Start-Component - Part1: Well, now let's continue on grifter component. Start. So under source, let's create a new folder Components and in the Components folder, let's create a new fire start. Don't dress. Let's create the basic wrecked structural. So let's import wrecked and the component from react. Create a new class start and we will extend to start Klis roof the component. Be the court, render mess it and in the render message, we will return and you take Let's write, test and export this place. Go to dot HS and let's important you class roof import starting from the current directory on the components slash start. And no, let's return the new component in this class. So let's create a new def. Stopped if and just write stopped. Okay, we have no aero messages, but we cannot see the test take. This is because the test tech is under the next bar. I'm for testing. Let's copy and paste it several times. No, we can see our new component. Okay, so we can start no writing. O r html coat. We need a new class container. Styler container in the EPD. Ortiz is fire. Set up the background color toe. This value the risk to 100%. And let's dial the background image depending toward the bottom toe. 25 pics of No, we can see Oh, are back around. Let's replace the test. Take proof, you container middle and in this container we create in your heads on I saw lending page for your Cryptocurrency project. Let's style the container middle, the risk toe 1000 pixel The margin we will set to the centre. It's the color right and the petting top. So the distance to the top toe 80 pixel. Okay, I think this looks good. No, let's customize the hitter. One cliffs, the font size toe, 20 epics of front raid too bold and the distance to the bottom toe 30 pixel. Let's also set up the flex in the C S s fire so that we not always have to write this CSS tire. Instead, we can simply call this class No in the HTML text, for example, let's right. Def Class flicks a nucleus text area with the new def and some text and another def button container Rift. The takes sign up to join another class movie container that shake If the Flex is working. Just ride test. Okay, Does rocking test is on the right side? No. Let's at the button design from the material design. Let's go to the rep, edge on the buttons and let's shake the source coat. Copy the values off the button and pace. This year que button is not defined. We have to import the name space import, but from at Materia this you I slash core slash button. Okay, this looks good. No, we can important video. I want to add this basic player. You can see here all of the instructions in order to install as a player. So open your terminal opened the project until it's right. NPM install dish dish Safe video dish React, React OK, No, let's go on components. You can see here all the parameters you can 45 on the big play button. Let's copies a player coat and paste us under the movie container. We need also the name space. Okay, we can see the video player. No, but there are no styles for the videos. Therefore, that's fixed us. Go to the get up page and let's simply at here the C s s link and paste is under the index dot xml file. We also need toe style. The movie container. No, we can see our playoff. Let's set up a march into the sign up to join Button, so we want modify the diff under the button container. And they are. Let's set up the distance to the top 2 20 pixel and set a size in the text area toe 18 pixel. And finally, we will modifies the movie container. I want to modify the control bar, especially. I want this line of code copious and removed the class name. And we need this property this able completely true. So by default, I want to disable the control bar. Okay, this is rocking. No, let's at the default image for the video player under poster image. Just let's GOP pollster and the pollster weaken set link to an image for the image. Let's type in Google decentralized P and G. And let's take this one here, for example. Kobe is the address. If you want to create a really icy off, then you need to shake, of course, copyrights off the images. Okay, this looks court and it last. Let's remove the Blake big round. Let's check in the HTML code. The name off the cliff, Copy the classes and let's set the opacity toe zero. 29. Creating & Styling the Start-Component - Part2: Well, now, let's continue on rift the remaining court for the start component. So the procedure create HTML and CSS code is or raise the same. I don't want to bore you rift stuff. Therefore, I have added you to complete code at the end off this video. So please don't know this folder. Open the start. Audrey s file, Kobe. Everything and paste is and I will start component. Copy also the new CSS Fire and paste us and our current CSS fire. No, you should be ever to see this container. This is the HTML coat. Here is nothing really. Especially I created to your terrible def takes rift. The states here after dis comment, the only special thing here is following. You can see here the HTML code for items, but we can't see this on our webpage because we need to install another item. Pick it. So let's do this. I used years of phoned awesome Aiken's so simply copy this link and paste us in the index start html file safety changers and no recon see or new State. Aiken's 30. The About-Component: No. Let creates the boat component for our I c O page. So the procedure is the same just like before. Go to the Components folder, create a new fire The boat don't dress Import wreck component from Rick Cliffs The name of class is about people. Extend this class with the component and in the render function evil Return a test, def. Take Let's exporters class goto the EPD O. J s fire import boat from components about. And let's see if this is rocking the boat and we can see our test def take Okay. No, please don't load. This folder opens Theobald Dodgers fired copias a new html code basters under a boat. And also add the new CSS fire. Okay, this is rocking, But let's also adhere the image that's such an image Breath Google, decentralized PNG. And let's take, for example, this one here copiously address and paste er's unders you much okay. And that's everything for the bold page 31. The Whitepaper-Component: indicia want video, We will create the white paper component, go to components, create a new fire white paper and it's right is the basic react coat. Let's also import the buttons from the material design greats. The nucleus. We need a new def class. Right paper does the white paper. We will create a new button for if the color primary. Let's search. Nice looking Aiken, for example. File Copia at this, too, was a button and white paper. Let's go to the EPT or dress fire imports the new cliffs right paper and we need, of course, toe export the nucleus. Okay, and it lasts. Let's Tyler's Let's at the White paper Place toe riff 1000 pixel The margin to the center display Flex line items center and rusty five Continents Center. Let's set up the border. One picture solid if the color briefed this value depending to the top and the bottom off. 10 pixels and the distance to the top. Breath 80 pics of 32. The Roadmap-Component: the next component is a road map. Create a new component roadmap thought trays print or the basic coat. Let's create a new class road map. - A new place, road map, image, breath and image and export Is the class important nuclear's minto. The EP Door dress fire and return the component under the right paper. Let's search road map image road map. PNG. Um, I think this one looks good. Paste the link under the image and it lasted. Also style this image. 33. The Contribute-Component: okay. And this short video virile. Simply copy and paste. All the HTML code was contribute component. Go under components and create a new file Contribute door dress. I added you this photo, please copy all this coat The news diets em a little. And under EPT address, we need to return the new place. Okay? No, you should see this container. So we have. Here's three messages for later on. If we buy it told ones press run is an error message. Even display this message. If we write, for example, unders by field, incorrect values, then we have to message rating for confirmation readers. Because, remember, I might take some amount of time to get the response from the auction and it last we have a message for successful transaction. 34. The Team-Component: the last component. We will create this the team component, so creating your fire team don't dress. I also uploaded. You hear the HTML code copy and paste the new team component, and the new style it's under Epcot ceases and it lasts. Simply modify the EP torture as fire imports the team. And at last, let's display the new team component. Let's shake if this is working and you can see it's a new team component, so that's older. Html antes is called Weaver used for or I C. O Page. And in the last video off this lecture, we will add the slight effect. 35. React Scroll to Component: okay. And this last video off this lecture off, we will get the scroll effect. So first we need to install this package we have here, for example, a demon. So if you click the button, then we will slide through the container. We want toe. So let's installed a new pick it. Open your own termina and open your project and let's write NPM. Install wrecked dish, scroll dish, tour dish, component dish, dish safe we have. Here's a source court We need copy this line of code and co. P this line replace and the idea about we don't need to. The idea and its co p this year. Tasters in the diff take idea boat If and this don't about remove the class name, we don't need us. And let's rename this year also to a boat. Let's test us. You can see it. This is working, but let's customized. Here is a perimeter offs it, Let's say, minus 70 testis again. Okay, this is bit on off. No, let's do the same for the other ones, Right? Paper, road map and team also here under the components team, contribute road map and right paper and one thing here is missing. Let's alter at a contribute button under the next bar. Let's just copias a team and renamed This will contribute. And finally, let's test everything. And as you can see, all the buttons are working. So that's everything we need for this lecture. And in the next one we will combine this rep age or smart contrary. 36. What is Web3?: in this video. Evil Install. Rep. Three. But first of all, let's discuss what rep three actually is and write readers read in short Rib three is a library that lost us to interact with the production or the rinky test network. Important to understand is a soon you have installed metal MISC. Then madam ask or medically and drinks the referee library in any active rep. Age off your prose off. That means we don't need any configurations. We instantly has access to rip three roof middle MISC. This is important for later because if the user hasn't installed Mira Misc, we need toe. Consider that case, but for no rehab installed metal misc. Therefore we have access to referee and by default. So what we will do? No well, we will create an instance off this rope three library and in the instance we will set up or the configurations we need, especially we will set up a writer. I'm rich is a kind off communication layer to the auction, and the provider has different message, and we can use in order to make courts or get a response from the Blockchain. So let's start, and by installing rep. Three. Open your terminal in PM and store safe. Rep. Three. If you have installed rep three, then you should see it ripped. Three on about this package portrays in five. No, let's create a new file. Rep. Three. Don't dress first. Um, let's import rep three and creating your Raber Rep. Three. No, if type of Riendeau is not undefined and type off Riendeau not rips for you is not undefined. That means if he has accessed reps free fall Prozac. This is the case when we have installed metal mask. Then we want to set up in your instance off reps Fear if the current provider and let's print old member of the concert madam esque is installed as a rice. If you have no access to reps for you, then we will do something else. We will do this later and export default reps we've and that last Let's check if he has access to rep three Goto EPD address and right consulate that Locke reps for you but Russian So we will shake the current Russian off reps three. Okay, we have an arrow. We need to import reps three off course and you can see the current Russian off. Rep. Three 37. How can we deploy the SmartContract to the Blockchain?: no. How can we deploy the smart contract toe the auction read and discourse on people Discuss two possibilities. The 1st 1 I'm You should already know this is the ray to deploy its rift Remakes editor. Read it. It's on several times in the first lecture, the other one this roof truffle HD water Pereda and in furor But more informations about that we will see later for no, let's have a look at the first possibility. So first Beeville deploy or a smart contract toe the rinky test network. And as we already deters in the first lecture, then we will take the address off the smart contract and we will paste us into a file s e o dot Js. So if this fire, we will have access to the corruption. But before we can communicate with the block Shane, we need to compile the solidity code in tow. Jason, we will do this river file compiled dot Js And this is important because then it last we can easily call the functions on the block Shane for four reps, three message in the EPD address file, for example, And then we can simply interact with the content of Java script. And that's basically everything. And we will do in the next videos. So we will start with the compile daughter s file in the next video. 38. Compiling Solidity Code into JSON: Okay, now let's create a file in order to compile our solidity code in tow. Jason, we need our solidity code and Drazen on because this is the easiest ray to interact with the solidity code. Rough genre script. So let's start. Let's create a new folder, Ethereum, and create a new folder contract and the new file compiled Doctor s Let's Go Toe Remix and Kobe. The Smart Con Trait. Create a new file under the contract folder named this icy oh dot Soul and Paste. A Smart Conflict and safety. No, open your a terminal. I'm here in the I C O D M A coin project and let's install it song pick Atriss. First we need the solidity. Pick it breath look and the specific Russian with net 0.4 point 25. And if it's extra, this is a fire system. What, you don't these packages And now let's create or compiled Daughtry's foil. First, we need access to the past, and this is a standout mature. We can access toe thought. This module is installed by default so past will help us to build a fast. For example, toe our solidity file in the contracts follow. Then we need access to the solidity module and two F s. So the new fire system, then let's create a new constant build fast. This will be over fast, very well built on your photo. Even the name the new folder are built. So in this photo, we will provide our new compliant I'm Drazen Solidity Code. Then let's call the function removed. Think from the S module riff removed think and we will remove the entire directory and everything inside off it. So first of evil delete the whole build fast. This is a nice future because if you compile your quotes over the times you don't need toe delete a build folder every time. Next, let's create so fast towards the I c o solidity fire. So starting from your name, that means from the home directory. So under a Z, if you're unfold off, then under contracts I see. Oh, Soledad Chief, no. Let's athe actual source code in the constant force roof. If esto read fall, think so first or file. I see old, not solidity. And to type off encoding. This is utf eight. Write a new constant output. This will put concerned we will save the compiled on contract. To do so, we can use our solidity. What? You'll don't compare reform or source court and the number of corn breaks we want to compile. This will be one and we will shake before build folder exist. If this is not the case, then we re creates a bill farce on brief dysfunction from the FS module. And finally, let's write a new follow up. Four. Let contract in output It s dot or portrays and think past. Don't resolve both fast contract, not replace and a second argument output con trait. Okay, this looks more complicated. Zenit is to make this more clear. First, let's run the new compiled but your script open your terminal open. I see Oh, Dash demo corn and opens the If your home folder And now let's run descript with notes compiled Don't dress. You can see this is working. We have here Oh, a new bid folder and another Bill folder. We have always smart con trait in Drazen files. Okay, so basically what we do here with the for loop is following rift function or portrays and sink and we create a new Jason Fire and in dysfunction we specify the build fast directory . So very want to build or new compliant contract and the contract we want toe compiled on both the Drazen ending and rift, the second argument output contract really reference to the actual content. We want toe deploy, and that's basically controlled everything we need to know for this file. 39. Ico.js: In addition, video created fire. I'm in order to get access toe a smart contract on the auction, So let's go to the Fearing folder. Credit New Fire. I feel don't trays. First, we need to import reps three. So the instant off three we already created. We also need to import the compliant contract from the last video. Um, this is from dots. Slash builds. I see all don't Jason knowledge great or contract. Instance that refers to occurrence marr. Contrary address. So an address that already exists on the block. Shane Great. A new constant instance. We will sent us toe new reps three dot if he room that contract. The first document is Shays in the process. New icy Oh, but interface. So this is the compiled contract and a second argument We need toe. Specify the address off the smart contract. Therefore, let's deploy an instance off or smart contract toe the Laksono. Let's go to the remakes. Any tour and deployed roof injected. Rep. Three. Kobe is the address from the Smart Conflict and Paste this year as second document and it lasts. Let's export default instance 40. Returning Values from Blockchain on our Webpage: in this video, we will test if we can call the functions for smart contract. That means we will test if he can communicate with the block. Shane especially. We will test if we have, for example, access to the functions, my address and my balance so that we can provide on teeth failures from the production. 10 R. Rep Age. Let's start Go toe to toe trays First, we need toe import the ideo instance from the last video. First, we need to call the function from wrecked the component. That moment dysfunction helps us to write a synchronous coat because the calls to rip election are not synchronous and drift dysfunction we can easily use try catch instructions and for everyone handling. But this ability later. No, let's write a new raber. Let the cones we will stop, Risa Cuba wrote of eight Remember and does not synchronous. That's really don't get a cones, so this would be an area. They'd be safe. Older cones from Metta MISC create a new raber. My balance read. I see old but message my balance dot corn from our first account, so we will call here this smart contract and especially, we were called Message my billions. So we should get Noah this value here In order to return its value with HTML, we need to create in your state and you're stayed my billions We will set us to an empty string and there's a component that moment function we will set to state toe my balance and then we simply can return this in the html section roof this about ST dot My balance. Let's shake if this is rocking, okay, it's more type or changed the name off component that moment we need t and no, we are able to see our rail. You so is working. Therefore, let's continue. So let's convert my balance in tow. Esa because remember, this is the moment in Wraith. We can simply use your reps freeze function from way. First argument is my balance and the second in ESA. Okay, Now let's pays my balance under the D c token. Remove this. I'm here and that you're my d c plus. Okay, this looks good. No, we can also read the address and eso we need to New States My isa and my interest. Great new raber. My balance. Esa is the Reds reps three dot issa. Don't get villains from the first account and my ballons and convert this into isa my visa because my balance either. And let's return to us. And let's set the state my esa this start stage. Don't my visa the check If this radio is correct? Open, madam, ask and you can see here on the same value. And finally, let's do the same for my address. So we would call the function my address from or smart contract and had set us here toe address the state don't my address and is working as well. 41. Returning Values from Blockchain on our Webpage - Part2: knowledge to the same procedure for start component in order to get the values for token sold contributors. It's terrible. So it's gold toe start. Don't raise. First, we need to important reps. Three from don't want slash rips. We've and I see all from It's ferial. I see all Rio artful needs. Several states contribute us total supply days. How waas minutes and seconds and we need an asynchronous function component. Did Moment frustrates grade. Contribute Does is right. I see all message, but all contributors that coin. So we would call here dysfunction and the total supply. This is the message Poulter supply but coy. Let's also on convert this into ISA and set the state's contributors and total supply. A smaller type of here changed us. No, let's go to the XML coat. Um, let's change your something. Let's rename Token sold birth. Total Supply said he has the contributors rift. This both state or contributors and set a total supply here. And as you can see, the values are broking. Let's also test us. For example, let's buy some tokens and you can see we have here new values. No, no, let's continue on brief the date here first. Great Rabel! Icy! Oh, in time and let's call the message. I see all ends. And that's great Rabel time. No, this is JavaScript code. And so with this land off court, we get the current time in seconds because no, we can create a new Raber Time left. This is simply I C o n time minus time. No, We will create in your dates in the Shabwa script. New date. Time left. Multiply it! Reform toll isn't no. We can simply access to the days how Ross minutes and seconds set the state's days horse minutes and seconds and let centers in the extreme cold. - I'm a small type of the parentheses are missing you at this, please. And no, the check this again and you can see the time is also looking 42. Contribute to the ICO Part-1: No, let's modify its a contribute component. Let's get started. Opens the contribute daughter is fire. First we need to import rips free and C I c o instance from the theory. Um, I see. Oh, first, we will create state value in this string on the real safety value off this input field. Here it's the click the submit button. Then we will call an event. We will name this event on submit. This will be an asynchronous event for us. We do here following, for example, clicked by D C tokens button. You can see the event and will be executed. We need to prevent us so we can write following the rent dot prevented fold and you can see nothing happens. Okay, Now let's create a raber for account arrayed rip three is don't get account and no, we will do something. I'm different. We will call and payable function sold by a token function. We need the key road of eight across this an asynchronous cold. I see old message by totems instead choosing here core. We will use no dot sent from our first account and is value value from the input field and people convert us here in tow easily. No. Let's go to the text field Frosted set year the state off the very You and let's create another event on change. So we will set a new state if you change the video and it's multiplies value Riff 125. Let's check if this is rocking and you can see it's a transformation from ESA into a D. C. Tokens is working. And finally, let's shake. If you can buy, it opens. Let's say we want to buy the report and one is so this our truth, poor and five DC told ins. Okay, madam, ask opens. This looks good. Confirm it. Okay, now you can see nothing happens. We get no response to you for debt. Are these messages you but fever implement these messages in the next video? No. Let's rate for the improvement and forget the message. Confirmed transaction. Let's refresh the page, and the buy tokens function is working. Let's go Toe is a skin pasty address from smart contract and we can see here or transaction on a Blockchain 43. Contribute to the ICO Part-2: Okay. Now let's implement all off these messages. First, we need some brilliance. Status, a room by default. And this is fourth status loading. Also two Fords and success to Fourth and the new string For the Aero message. Let's write this dot state dot status Air Worth. This is the short Syntex. And for if it that means, if status aero is true, then we want to show the error message as arise. We want to return, um, night. And that means nothing. Status, Aero, despite afforded fault. And therefore we should see No, nothing. Check this and the first message has disappeared. Let's do the same for the other two messages. Copy this. Rinne Enders, toe status loading and the same for the last one. Okay, this looks good. Okay. No, it's great. It's right, Errol. Instruction kitsch own. If you will receive now an arrow, then we would save this Errol in this aero object. Therefore, we can signal a new state aero message is a row plus a rowboat message Status loading. Fourth success. Ford's Let's test us. Let's click. Buy tokens. Okay. You're something missing the check this and we need to return. I'm here the status. Let's do this distant ST dot error message. No, or every message is Brooking. Let's continue if we want to call. The bite opens function than first. The auto oneto set to state status arrow to foot and status. Bloating too. True because no, if you buy tokens, we can see the loading message. And finally, if you can buy tokens, then we will set the state to status. Loading two faults and success. True, let's buy tokens waiting for confirmation. This looks good. Confirm it and to consider your successfully brought the sequence. 44. Setting up Infura Provider: Okay. Now let's have a look at the case if the user hasn't installed Metal Mask currently, and we can make a request to the block. Shane B. Crosby used the rep three provider that Madame Ask provides us. But for the case, If the user hasn't installed madam ask then we need toe provide our own reps. Three. Instance We can do to simply riff see in furor MP I. So let's do this. No, But first, let's check what happens if we haven't installed metal misc. So let's remove Madam esque and from a law pros are and you can see Big Nestea aero messages. So let's fix them. Go to infuriate. Don't I owe and create a new account. Then look into and furor, go to the sport and create a new project. I will name this icy old Dima corn. It's important you must choose your production. We will use the rinky test network and no cope Easy ap I link and let's go to the reps free dress fire. Because here we can simply, um, create no in your constant provide on new Rex Reed. What providers thought http provide on rough the link from an furor and then we create in your instance off reps free with new reps. Free provider and it's basically everything you can see. The first Arrow message is gone, but we have another error message. Check this Goto, Pepto, Jez and let's use year. It's riot time. Catch instruction. Catch their own and free will. Right here, Consul. That look, Madam Ask isn't installed, and now you can see everything is broking. Okay, Now let's have a look at the case if the user hasn't installed Metal mask currently, and we can make a request to the block. Shane, because we use the rep three provider that Madame ISC provides us. But for the case, if the user hasn't installed madam ask then we need toe provide our own reps. Three. Instance We can do to simply riff see in furor MP I. So let's do the snow. But first, let's check what happens if we haven't installed metal mask. So let's remove madam esque and from a law pros are, and you can see Big Nestea aero messages. So let's fix them. Go to infuriate. Don't I owe and create a new account, then look into and furor go to the sport and create a new project. I will name this ideal Dima Corn. It's important. You must choose your production. We will use the rinky test network and no cope Easy AP I link and let's go to the reps Free dress fire. Because here we can simply, um, create no in your constant provide on new Rex Reed. What providers? I thought http provide on rough the link from an furor. And then we create in your instance off reps free with new reps. Free provider. And it's basically everything you can see. The first arrow message is gone, but we have another error message. Check this Goto, Pepto, Jez, and let's use year. It's riot time. Catch instruction. Catch their own and free will. Right here, Consul. That Look, madam ask isn't installed. And now you can see everything is broking 45. Deployment with Truffle-HD-Wallet-Provider & Infura: Okay, at last. Let's have a look at the other possibility, or we can deploy the smart contract to the auction. For that, we can use truffle h develop Reuter end and furor. First, let's create a new file deployed. Don't dress open your terminal and opens the project. Let's install truffle HD. What it right off So this module will help us to create a write off that will connect with the IMF Euro note. Let's create a new constant, actually, Will it? Parietal constant reps reef and a constant compiled new icy off. First, let's set up the brighter in order to get access to the IMF urinal. For that, we must look in a cone. We can do this by specifying, Here is first argument our seat and a second argument re needs the A P I link to Z and Fury Arnold. That means a Movil deploy or smart contract. With this account souls you cones riff this seat phrase the cross ref deceit. We have total access to our account. So it was a public and private Keith and no, we can create a new constant rep Steve New rep Steve and we can piss the new provided Finally, let's right the court in order to deploy and our smart contract to the rinky test network riff constant accounts. We have access to the accounts of richly unlocked in the provider. Right, The consulate Outlook message attempting to deplore for a McCone. So from the first account and it lost, we can write or extra contract deployment and statement create a new constant result. Perhaps three s off and a new contract Here we will. Pets are welcome, pirate. I see. Oh, quote. Then we will deploy the smart contract and we were sent us to the IMF Euro note from our first record riff. Consul, don't lock contract deployed to result but option but address. We will return the address off the smart contract and we need to call this deployment statement. Let's shake If this is working open your terminal opens the human folder and it's right Note deployed or trace attempting to deploy from a walk owned. This looks good and it's ready. Short time and contract deployed toe this new smart contract we can test a smart contract null umber of remix. Just that year, the new Edris and Truth of course I feel and the Ring P tested work miss able to take the new smart contract. We can also change the smart contract here under I see old door dress. Let's refresh a little page and it seems to work.