{"id":2255,"date":"2022-01-25T18:14:49","date_gmt":"2022-01-25T18:14:49","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2255"},"modified":"2022-01-25T18:14:49","modified_gmt":"2022-01-25T18:14:49","slug":"build-an-ethereum-transaction-app-with-react-and-solidity","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2255","title":{"rendered":"Build an Ethereum Transaction App with React and Solidity"},"content":{"rendered":"\n<p id=\"1169\"><strong>Part 1:<\/strong>&nbsp;What you\u2019ll be building. See live&nbsp;<a href=\"https:\/\/dalto-98c21.web.app\/\" rel=\"noreferrer noopener\" target=\"_blank\">demo<\/a>&nbsp;and Git Repo&nbsp;<a href=\"https:\/\/github.com\/Daltonic\/dalto\" rel=\"noreferrer noopener\" target=\"_blank\">Here<\/a>. The online demo uses the Ropsten test network.<\/p>\n\n\n\n<!--more-->\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*rLi64RPAiO9vWA9Q.gif\" alt=\"\"\/><\/figure>\n\n\n\n<h1 id=\"7204\">Introduction<\/h1>\n\n\n\n<p id=\"2764\">As the Web3 movement ripples throughout the world wide web, you must jump in as a developer and become one of the beneficiaries of this blockchain technology.<\/p>\n\n\n\n<p id=\"77cc\">By the way, what is Web3? It is a concept for a new version of the World Wide Web with blockchain-based decentralization. That is to say, data autonomy will no longer be in the hands of a single person or corporation, but will be distributed throughout the web. In other words, information will now be secure, immutable, and distributed across a network.<\/p>\n\n\n\n<p id=\"0d4e\">This tutorial will teach you how to build a decentralized blockchain application from the ground up that will interact with a ReactJs frontend.<\/p>\n\n\n\n<p id=\"a02a\">This is part one of a two-part series, and we will focus on setting up a blockchain development environment for you and also create the smart contract on the&nbsp;<a href=\"https:\/\/remix.ethereum.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">remix editor<\/a>.<\/p>\n\n\n\n<h1 id=\"fcdd\">Prerequisite<\/h1>\n\n\n\n<p id=\"0dcd\">Here is a list of items you will need to build along with me, as well as the instructions on how to get them to work together.<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/metamask.io\/\" rel=\"noreferrer noopener\" target=\"_blank\">Metamask<\/a><\/li><li><a href=\"https:\/\/remix.ethereum.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">Remix Editor<\/a><\/li><li><a href=\"http:\" rel=\"noreferrer noopener\" target=\"_blank\">Hardhat<\/a><\/li><li><a href=\"https:\/\/www.alchemy.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Alchamy<\/a><\/li><li><a href=\"https:\/\/reactjs.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">ReactJs<\/a><\/li><li><a href=\"https:\/\/www.alchemy.com\/\" rel=\"noreferrer noopener\" target=\"_blank\">Tailwind CSS<\/a><\/li><li><a href=\"https:\/\/soliditylang.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">Solidity<\/a><\/li><li><a href=\"https:\/\/docs.ethers.io\/v5\/\" rel=\"noreferrer noopener\" target=\"_blank\">EthersJs<\/a><\/li><li><a href=\"https:\/\/faucets.chain.link\/rinkeby\" rel=\"noreferrer noopener\" target=\"_blank\">Faucet<\/a><\/li><li><a href=\"https:\/\/vitejs.dev\/\" rel=\"noreferrer noopener\" target=\"_blank\">Vite<\/a><\/li><\/ul>\n\n\n\n<p id=\"ee42\">To proceed, let\u2019s start with installing Metamask on your browser, Google Chrome is the recommended browser for this tutorial. After the installation, you will also be thought how to receive some free ethers in your wallet so you can make transactions as we build our application.<\/p>\n\n\n\n<h1 id=\"37f1\">Metamask Installation<\/h1>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*4U1UfcMdDB41e__D.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"dbde\">Head to the Chrome store with this&nbsp;<a href=\"https:\/\/chrome.google.com\/webstore\/detail\/metamask\/nkbihfbeogaeaoehlefnkodbefgpgknn?hl=en\" rel=\"noreferrer noopener\" target=\"_blank\">link<\/a>&nbsp;and install Metamask by clicking on the button as seen in the image above.<\/p>\n\n\n\n<p id=\"bd17\">After the installation, Metamask will take you through an account creation process which you should follow as guided by the images below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*5Rxjcm7UPDurTmOZ.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*m2keXUWfvKz0xNDj.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*MsLmw34Pxo84jBUI.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*vKlyFnXQXCZlva3w.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"4614\">Now follow the installation guide on the video provided in this Metamask installation phase. Once you watch it, click on the Next button as seen in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*ehRTnELHKZDbEctS.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*N48sA_UH9AGMjAqw.png\" alt=\"\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*wkBjOzuMY4RBQlB8.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"1182\">Once you have completed the account creation process, you will be greeted with the screen below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*N8mDsdHsi_BDS2Vd.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"8d15\">Next click on the network dropdown, which is marked with the red arrow above, and choose&nbsp;<strong>show\/hide test networks<\/strong>&nbsp;as seen in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*v9Gn21TBGngh3w5i.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"32e8\">Now toggle show test networks as ON as seen in the image below, scroll to the top and close the settings.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*xwO5DMM3ttki4hxA.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"b22b\">Now click on the networks tab and you will see a list of test networks including a provision for you to add a custom one, see the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*nbgcIVJjmO9hrA_U.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"b3b9\">We will use the&nbsp;<strong>Rinkeby test network<\/strong>&nbsp;for this tutorial, click on it as seen in the image above and let\u2019s proceed to fund it with some ethers.<\/p>\n\n\n\n<h1 id=\"0e3a\">Funding Your Rinkeby Account<\/h1>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*z98rKhJZMtFdafif.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"d5d2\">I have been using this account and you can see my current balance. If you are creating a Metamask account yours will be&nbsp;<strong>zero(0)<\/strong>&nbsp;but don\u2019t worry. Copy the address of your<strong>&nbsp;Account 1<\/strong>, see the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*gOewlgDB9fjYSKNi.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"21b8\">The account address point to you, and anyone can use it to send you ethers anywhere in the world. Click to copy the address, now visit this&nbsp;<a href=\"https:\/\/faucets.chain.link\/rinkeby\" rel=\"noreferrer noopener\" target=\"_blank\">link<\/a>&nbsp;to fund it with some free ethers for testing purposes. These ethers are fake and can\u2019t be used in the real ethereum network, but they serve the purpose of testing your ethereum smart contract before deployment to the main network.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*oyvwAyN0q9hRggH0.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"43a4\">This faucet lets you send free ethers to your wallet. What you can do to receive these free ethers is to enter your&nbsp;<strong>Account 1<\/strong>&nbsp;wallet address and click on the&nbsp;<strong>send me test ether<\/strong>&nbsp;button. It takes about 30sec to 1min for the transaction to go through as seen in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*LoV4iaqeYfZY-XuS.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"3edc\">After the transaction is successful, when you check your Rinkeby Metamask Account 1, you will see that you have received 0.1 ether in your wallet.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*57UzFjUobC4j7WlU.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"f74f\">When you compare the previous balance with the new balance, you will find that you received 0.1 ether into your Rinkeby account.<\/p>\n\n\n\n<p id=\"6962\">If you have successfully followed through, you are awesome. We will next proceed to set up the&nbsp;<a href=\"https:\/\/remix.ethereum.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">remix editor<\/a>&nbsp;for coding up our solidity smart contract.<\/p>\n\n\n\n<h1 id=\"d879\">Creating Smart Contract<\/h1>\n\n\n\n<p id=\"4813\">To create deploy and test our smart contract, we will use the remix editor. Head on to&nbsp;<a href=\"https:\/\/remix.ethereum.org\/\" rel=\"noreferrer noopener\" target=\"_blank\">remix<\/a>&nbsp;and you will be presented with this interface seen in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*RutGxFkrL69ljBnb.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"24d2\">What is remix in the first place? Remix is an online editor for creating, compiling, and deploying smart contracts written in the solidity programming language to the ethereum blockchain network.<\/p>\n\n\n\n<p id=\"7268\"><strong>How do we create this smart contract?<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*qgnB0oNisI-UMRXQ.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"d0c7\">To create our smart contract, on the remix editor click on the&nbsp;<strong>contracts folder<\/strong>, and a list of existing files will appear on the dropdown.<\/p>\n\n\n\n<p id=\"e0af\">Next, right-click on the contracts directory and create a new file with the name&nbsp;<strong>Transactions.sol<\/strong>, be sure you name it appropriately. Use the image above as a reference point.<\/p>\n\n\n\n<p id=\"10af\">Once the file has been created, it will immediately present you with the coding interface as seen in the above image. Now let\u2019s start coding\u2026<\/p>\n\n\n\n<p id=\"369b\"><code><em>\/\/ SPDX-License-Identifier: MIT<\/em><\/code><\/p>\n\n\n\n<p id=\"a3a2\"><code><em>pragma<\/em>&nbsp;solidity ^0.8.0;<\/code><\/p>\n\n\n\n<p id=\"62ef\">The above code tells the remix editor which software license and version of the compiler your smart contract will be using.<\/p>\n\n\n\n<p id=\"b96d\"><code>contract Transactions {<\/code><\/p>\n\n\n\n<p id=\"151f\"><code>address private owner;<\/code><\/p>\n\n\n\n<p id=\"5b71\"><code>uint256 transactionCounts;<\/code><\/p>\n\n\n\n<p id=\"83fa\"><code>mapping (address =&gt; uint) balanceOf;<\/code><\/p>\n\n\n\n<p id=\"1a47\"><code>}<\/code><\/p>\n\n\n\n<p id=\"1098\">The code above creates a solidity smart contract with the name Transactions. Note that the name of the file is the same as the smart contract\u2019s name. It is of the convention that your solidity smart contract follows this rule.<\/p>\n\n\n\n<p id=\"3f58\"><strong>Owner, transactionCounts,&nbsp;<\/strong>and&nbsp;<strong>balanceOf<\/strong>&nbsp;are properties or variables. The&nbsp;<strong>owner<\/strong>&nbsp;variable will only contain wallet addresses.&nbsp;<strong>transactionCounts<\/strong>&nbsp;will carry unsigned integers, and&nbsp;<strong>balanceOf<\/strong>&nbsp;is an array that will hold the addresses of the users that interact with our smart contract.<\/p>\n\n\n\n<p id=\"5bfa\"><code>event Transfer(address indexed sender, address indexed receiver, uint256 amount, string remark, uint256 timestamp);<\/code><\/p>\n\n\n\n<p id=\"4d9e\"><code>struct TransferStruct {<\/code><\/p>\n\n\n\n<p id=\"0d2d\"><code>address sender;<\/code><\/p>\n\n\n\n<p id=\"1b97\"><code>address receiver;<\/code><\/p>\n\n\n\n<p id=\"155c\"><code>uint256 amount;<\/code><\/p>\n\n\n\n<p id=\"0f06\"><code>string remark;<\/code><\/p>\n\n\n\n<p id=\"50f5\"><code>uint256 timestamp;<\/code><\/p>\n\n\n\n<p id=\"9386\"><code>}<\/code><\/p>\n\n\n\n<p id=\"2c3a\"><code>TransferStruct[] transactions;<\/code><\/p>\n\n\n\n<p id=\"9531\">On this block of code, we are telling our smart contract to use a transfer event whenever a transfer is carried out between two accounts. This event will bear a record of the sender and receiver\u2019s address, the amount sent, a remark made for the transaction, and a timestamp that will mark when the transaction was made.<\/p>\n\n\n\n<p id=\"740d\">Also, we defined a structure that our smart contract transactions will carry. This is necessary to keep things uniform. And lastly, we defined a transactions array, that will keep track of all the transactions that are made on this smart contract.<\/p>\n\n\n\n<p id=\"a545\"><code>constructor() {<\/code><\/p>\n\n\n\n<p id=\"789d\"><code>owner =&nbsp;<em>msg.sender<\/em>;<\/code><\/p>\n\n\n\n<p id=\"b70c\"><code>balanceOf[<em>tx<\/em>.origin] =&nbsp;<em>msg.sender<\/em>.balance;<\/code><\/p>\n\n\n\n<p id=\"c27d\"><code>}<\/code><\/p>\n\n\n\n<p id=\"1f91\"><code>function getOwner() public view&nbsp;<em>returns<\/em>&nbsp;(address) {<\/code><\/p>\n\n\n\n<p id=\"2232\"><code><em>return<\/em>&nbsp;owner;<\/code><\/p>\n\n\n\n<p id=\"c2fc\"><code>}<\/code><\/p>\n\n\n\n<p id=\"e713\"><code>function sendMoney(address payable receiver, uint256 amount, string memory remark) public&nbsp;<em>returns<\/em>(bool success) {<\/code><\/p>\n\n\n\n<p id=\"dc2b\"><code><em>if<\/em>&nbsp;(balanceOf[owner] &lt; amount)&nbsp;<em>return<\/em>&nbsp;false;<\/code><\/p>\n\n\n\n<p id=\"3566\"><code>balanceOf[owner] -= amount;<\/code><\/p>\n\n\n\n<p id=\"4ea9\"><code>balanceOf[receiver] += amount;<\/code><\/p>\n\n\n\n<p id=\"381f\"><code>transactionCounts += 1;<\/code><\/p>\n\n\n\n<p id=\"fed4\"><code>transactions.push(<\/code><\/p>\n\n\n\n<p id=\"5d52\"><code>TransferStruct(<\/code><\/p>\n\n\n\n<p id=\"475c\"><code>owner,<\/code><\/p>\n\n\n\n<p id=\"391c\"><code>receiver,<\/code><\/p>\n\n\n\n<p id=\"565d\"><code>amount,<\/code><\/p>\n\n\n\n<p id=\"18b2\"><code>remark,<\/code><\/p>\n\n\n\n<p id=\"1f0e\"><code><em>block<\/em>.timestamp<\/code><\/p>\n\n\n\n<p id=\"04d1\"><code>)<\/code><\/p>\n\n\n\n<p id=\"e252\"><code>);<\/code><\/p>\n\n\n\n<p id=\"c29b\"><code><em>emit<\/em>&nbsp;Transfer(<em>msg.sender<\/em>, receiver, amount, remark,&nbsp;<em>block<\/em>.timestamp);<\/code><\/p>\n\n\n\n<p id=\"1759\"><code><em>return<\/em>&nbsp;true;<\/code><\/p>\n\n\n\n<p id=\"7dc8\"><code>}<\/code><\/p>\n\n\n\n<p id=\"85de\"><code>function getBalance(address addr) public view&nbsp;<em>returns<\/em>(uint) {<\/code><\/p>\n\n\n\n<p id=\"c33f\"><code><em>return<\/em>&nbsp;balanceOf[addr];<\/code><\/p>\n\n\n\n<p id=\"c45a\"><code>}<\/code><\/p>\n\n\n\n<p id=\"5298\"><code>function getAllTransactions() public view&nbsp;<em>returns<\/em>(TransferStruct[] memory) {<\/code><\/p>\n\n\n\n<p id=\"f2b9\"><code><em>return<\/em>&nbsp;transactions;<\/code><\/p>\n\n\n\n<p id=\"36d3\"><code>}<\/code><\/p>\n\n\n\n<p id=\"1298\"><code>function getTransactionsCount() public view&nbsp;<em>returns<\/em>(uint256) {<\/code><\/p>\n\n\n\n<p id=\"0b3d\"><code><em>return<\/em>&nbsp;transactionCounts;<\/code><\/p>\n\n\n\n<p id=\"5519\"><code>}<\/code><\/p>\n\n\n\n<p id=\"346b\">This last block contains six different methods or functions that can be executed on this smart contract. The first is the constructor function, which is the first one that runs whenever this smart contract is executed. It will set the owner to the one sending a transaction and also get his balance.<\/p>\n\n\n\n<p id=\"bd79\">The&nbsp;<strong>getOwner&nbsp;<\/strong>function returns the address of the one making transactions with this smart contract.<\/p>\n\n\n\n<p id=\"8696\">The&nbsp;<strong>sendMoney&nbsp;<\/strong>function transfers a certain amount of ethers specified by the sender to the receiver. This function requires the sender and receiver\u2019s address, the amount, and the remark on the transaction. Once it finishes with the logic as seen in the function\u2019s code block, it will emit a transfer event which would be seen on the terminal.<\/p>\n\n\n\n<p id=\"a9b7\">The last three functions perform their duties as their names imply. Here is a complete version of our code.https:\/\/coinsbench.com\/media\/4055a73f9fa6a08aee108032c3abe036<\/p>\n\n\n\n<p id=\"facc\">Fantastic, let\u2019s proceed to test this code on the remix editor.<\/p>\n\n\n\n<h1 id=\"a2a3\">Compiling Smart Contract<\/h1>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*KARBgcRUP4gGB-wX.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"d3c0\">To compile our smart contract click on the compilation button on the remix editor. From the compiler\u2019s list select the latest and click on the big blue compile button. If you have done this correctly, you will have a similar view as seen in the image below.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*Vjoe0GDM_szGXc9i.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"5bbe\">Take note of the green check label on the compilation tab now, this indicates that our smart contract was successfully compiled. See the image above, now since we have no errors in our compilation, it\u2019s time we deploy this smart contract to a network.<\/p>\n\n\n\n<h1 id=\"aa2c\">Deploying and Run Smart Contract<\/h1>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*0-EdhIrUl0tQMzng.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"b3ae\">To deploy the smart contract, you click on the Deployment tab, select an environment. You can use the JavaScript VM (London) for this process for the sake of simplicity. Remix has a lot of options as to how you want to deploy your smart contract.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*u6kjrgUfIC45_Ti3.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"1161\">Once you have clicked on the deploy orange button, a transaction success will be recorded on the terminal. You will see a deployed contract hash code on the bottom left of the page and a reduction in your ether balance.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img src=\"https:\/\/miro.medium.com\/max\/700\/0*epHuKm1Zz_1Yekb8.png\" alt=\"\"\/><\/figure>\n\n\n\n<p id=\"102c\">To start doing some transactions, copy the address of a second account on the JavaScript VM (London) and paste it as the receiver\u2019s address on the sendMoney method seen in the image above. Also pass an amount you want, a remark, and click on the transact button. This will immediately transfer the entered amount to the receiver\u2019s account and you can also check their balance with the check balance function. Refer to the image above to be properly guided.<\/p>\n\n\n\n<p id=\"8ed0\">Amazing, you have just completed your first smart contract with solidity programming language. In part two of this tutorial, we will merge it with a react frontend. See you in the next part.<\/p>\n\n\n\n<h1 id=\"ae73\">About the Author<\/h1>\n\n\n\n<p id=\"27da\">Gospel Darlington kick-started his journey as a software engineer in 2016. Over the years, he has grown full-blown skills in JavaScript stacks such as React, ReactNative, VueJs, and more.<\/p>\n\n\n\n<p id=\"04ea\">He is currently freelancing, building apps for clients, and writing technical tutorials teaching others how to do what he does.<\/p>\n\n\n\n<p id=\"686c\">Gospel Darlington is open and available to hear from you. You can reach him on&nbsp;<a href=\"https:\/\/www.linkedin.com\/in\/darlington-gospel-aa626b125\/\" rel=\"noreferrer noopener\" target=\"_blank\">LinkedIn<\/a>,&nbsp;<a href=\"https:\/\/www.facebook.com\/darlington.gospel01\" rel=\"noreferrer noopener\" target=\"_blank\">Facebook<\/a>,&nbsp;<a href=\"https:\/\/github.com\/Daltonic\" rel=\"noreferrer noopener\" target=\"_blank\">Github<\/a>, or on his&nbsp;<a href=\"https:\/\/daltonic.github.io\/\" rel=\"noreferrer noopener\" target=\"_blank\">website<\/a>.<\/p>\n\n\n\n<p id=\"0dc2\"><em>More content at&nbsp;<\/em><a href=\"http:\/\/plainenglish.io\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>plainenglish.io<\/em><\/a><em>. Sign up for our&nbsp;<\/em><a href=\"http:\/\/newsletter.plainenglish.io\/\" rel=\"noreferrer noopener\" target=\"_blank\"><em>free weekly newsletter<\/em><\/a><em>. Get exclusive access to writing opportunities and advice in our&nbsp;<\/em><a href=\"https:\/\/discord.gg\/GtDtUAvyhW\" rel=\"noreferrer noopener\" target=\"_blank\"><em>community Discord<\/em><\/a><em>.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Part 1:&nbsp;What you\u2019ll be building. See live&nbsp;demo&nbsp;and Git Repo&nbsp;Here. The online demo uses the Ropsten test network.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[178],"tags":[174,65],"_links":{"self":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2255"}],"collection":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2255"}],"version-history":[{"count":1,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2255\/revisions"}],"predecessor-version":[{"id":2256,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=\/wp\/v2\/posts\/2255\/revisions\/2256"}],"wp:attachment":[{"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2255"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2255"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lvboard.infostore.in.ua\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2255"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}