{"id":2232,"date":"2022-01-25T17:51:25","date_gmt":"2022-01-25T17:51:25","guid":{"rendered":"https:\/\/lvboard.infostore.in.ua\/?p=2232"},"modified":"2022-01-26T08:50:56","modified_gmt":"2022-01-26T08:50:56","slug":"how-to-build-an-ethereum-transaction-app-with-react-and-solidity-part-2","status":"publish","type":"post","link":"https:\/\/lvboard.infostore.in.ua\/?p=2232","title":{"rendered":"How to Build an Ethereum Transaction App with React and Solidity: Part 2"},"content":{"rendered":"\n

What you\u2019ll be building: see a live demo<\/a> and Git Repo Here<\/a>. Remember, the online demo uses the ropsten test network.<\/p>\n\n\n\n\n\n\n\n

\"Dalto<\/figure>\n\n\n\n

#Introduction<\/h2>\n\n\n\n

Following part one of this tutorial, we will be building the frontend side of this project. If you haven\u2019t seen the PART-ONE<\/a>, I recommend you do it for the sake of understanding this part-two.<\/p>\n\n\n\n

If you are ready, let\u2019s crush this app\u2026<\/p>\n\n\n\n

#Project Setup<\/h2>\n\n\n\n

Make sure you already have NodeJs<\/a> installed on your machine, if you don\u2019t, follow the link below to do that.<\/p>\n\n\n\n

Jump into your projects directory and create a new folder called \u201cdalto\u201d. You can name it whatever you want, but for the sake of uniformity, I suggest you flow with me on the namings.<\/p>\n\n\n\n

Within this dalto<\/strong> directory, create two more folders called client<\/strong> and smart_contract<\/strong>, our ethereum code will live in the smart_contract folder, while the react app will live in the client directory. Lastly, open this project in your code editor, I prefer VS Code<\/strong>. If you did all that correctly, your project structure should look like this.<\/p>\n\n\n\n

\"Project<\/figure>\n\n\n\n

Project Structure<\/strong> The codes should be structured in the following way.<\/p>\n\n\n\n

\"Client<\/figure>\n\n\n\n
\"Smart_contract<\/figure>\n\n\n\n

#The Smart Contract Setup<\/h2>\n\n\n\n

Jump into the terminal, move (cd)<\/strong> into the smart_contract<\/strong> directory and run the command below.NoneBashCSSCC#GoHTMLObjective-CJavaJavaScriptJSONPerlPHPPowershellPythonRubyRustSQLTypeScriptYAMLCopy<\/p>\n\n\n\n

npm init -y<\/code><\/pre>\n\n\n\n
This will create an npm<\/strong> file in the root of the smart_contract<\/strong> folder. To specify the packages to be used for building the smart contract, we will run the code snippet below.NoneBashCSSCC#GoHTMLObjective-CJavaJavaScriptJSONPerlPHPPowershellPythonRubyRustSQLTypeScriptYAMLCopy<\/p>\n\n\n\n
yarn add @nomiclabs\/hardhat-ethers @nomiclabs\/hardhat-waffle chai ethereum-waffle ethers hardhat --dev\n# or\nnpm install -D @nomiclabs\/hardhat-ethers @nomiclabs\/hardhat-waffle chai ethereum-waffle ethers hardhat<\/code><\/pre>\n\n\n\n
Please note that these packages are listed only in the development environment. After the installation is done, you will have a result similar to mine.<\/p>\n\n\n\n
\"Smart_contract<\/figure>\n\n\n\n
Now you need to run the code below to set up hardhat<\/strong> in the current smart_contract<\/strong> folder.NoneBashCSSCC#GoHTMLObjective-CJavaJavaScriptJSONPerlPHPPowershellPythonRubyRustSQLTypeScriptYAMLCopy<\/p>\n\n\n\n
yarn hardhat\n# or\nnpm hardhat<\/code><\/pre>\n\n\n\n
You will be prompted with some questions, you should select the following options.<\/p>\n\n\n\n