Ethereum Dapp (Solidity & React)

Step 1: In this exercise, we will create a simple Ethereum Dapp (Solidity Smart Contract + React UI) that can store and retrieve a number on the blockchain. We will be using hardhat to deploy the smart contract on a local Ganache blockchain. We will then use React, to build a web app that can interact with the deployed smart contract.

Step 2: First step is to create a hardhat project. Normally, we can use 'npx hardhat' command to create a hardha project with new hardhat.config.js file. But in this case, we will be using a pre-created hardhat project.

Step 3: Clone already created hardhat project from github repo.

Step 4: Switch to 'VS Code' and check the cloned 'solidity-react-dapp' directory. You will be able to see 'contacts', 'scripts', 'test' and 'webapp' directories. In this first 3 directories are related to hardhat and last one is related to React.

Step 5: Open the Smart Contract written in solidity language in 'contracts' folder. The smart contract has two methods. setNumber(number) stores passed integer 'number' on blockchain and getNumber() returns the stored number.

Step 6: Before running hardhat, we will have to install all the dependencies. This can be done using 'npm install' command. In terminal, from the cloned directory, run the command.

Step 7: Compile the hardhat source code to generate byte code. This can be done using 'npx hardhat compile' command. Run the compilation command.

Step 8: Hardhat allows a user to use test cases to test the contract. Open 'Storage.js' test file present in 'test' folder. In this test file, we have used Mocha test suite to test our NumberStorage smart contract. The file is adequately commented so you can understand all steps.

Step 9: Run the tests. This can be done using 'npx hardhat test' command in the terminal. You will observe that the test is passed. This means the Smart contract is working as expected. During the testing, hardhat uses its internal network to deploy and test the smart contract.

Step 10: open a new terminal and run Ganache to start a local blockchain. Ganache is a personal blockchain for Ethereum development that can be used to deploy contracts, develop applications, and run tests.

Step 11: Let Ganache run in the current tab and Open a new terminal tab to proceed with the next steps.

Step 12: In this case, we have already added private keys of second account (accounts[1]) provided by Ganache to 'hardhat.config.js' file. This will be used to deploy the Smart contract to Ganache blockchain. We will have to change this with appropriate private keys if we want to deploy it on public Testnets or Mainnet.

Step 13: We are now ready to deploy this contract. Switch to 'scripts' folder. deploy.js is the deployment script written in Javascript which will deploy the smart contract using the hardhat configuration.

Step 14: Switch to terminal and run deployment script to deploy the smart contract on 'ganache' network.

Step 15: A successful deployment will generate a new file called 'NumberStorage.json' in the 'artifacts' folder. This file contains the contract address and ABI for the deployed smart contract.

Step 16: Let's interact with the deployed contract. Switch to 'scripts' folder. The script 'interact.py' is a javascript file to interact with the deployed smart contract using an private account key provided by Ganache. Script is heavily commented to explain each step.

Step 17: Replace the Contract address present in 'interact.py' file with the ones you have acquired in the previous step.

Step 18: Switch to terminal and run the script to interact with the deployed smart contract. The script will first show the transaction hash of storing the value 26 on the local ganache blockchain (write operation) by setNumber(26) and log message of retrieving the value by the getNumber() function.

Step 19: Contarct is deployed and we can interact with it. Now, let's proceed to create a react project to build a web app that can interact with the deployed smart contract

Step 20: At this point, the next step is to create a react project using 'npx create-react-app [project_name]' command. But, we already have a project named 'webapp' in the cloned repo. So, we will be using that.

Step 21: Change the project directory to webapp.

Step 22: Let's install create-react-app tool that makes it easy to bootstrap a new React project. Make sure to run this command in 'webapp' directory.

Step 23: Launch local app server. This will serve the web app over port 3000. Keep this command running in the terminal and use new terminal tab for next steps.

Step 24: Switch to 'localhost:3000' tab, press 'Go' button. If you are facing issues and seeing a warning in a browser regarding 'Embedded page not allowed', then please use the provided button to access this link in a new browser tab. Then, you should be able to see the webapp page.

Step 25: The react web app contains code to interact with the deployed 'NumberStorage' smart contract. However, we wil have to make some changes for it to work.

Step 26: Switch to VS Code and check 'App.js' in 'webapp/src' directory. This is the main app file. Replace the Contract address 'contractAddress' present in this file with the contract address acquired in the previous steps.

Step 27: Similarly, in folder 'webapp/src/components' you wil find two javascript files i.e. 'fetch.js' and 'store.js'. As the name suggests, These are components to be used in the parent component 'App.js' (imported in lines 4-5). As the name suggests, 'fetch.js' displays the value of storedNumber, whereas 'store.js' stores the store value on blockchain.

Step 28: As we will be using Metamask to interact with the smart contract, we will need to add our local Ganache network to Metamask. To do so, click on the provided button. This will take you through the process of adding a custom RPC to Metamask.

Step 29: Now, we need to add an address to Metamask which has some test Ether. Click on Account section of Metamask and select 'Import Account'.

Step 30: Enter the private key of the second account (accounts[1]) provided by Ganache. This will import the account to Metamask. This account has 1000 test Ether.

Step 31: Reading the value doesn't need write to blockchain, so we will view the saved value without any transaction. However, to save a new value, enter a new number (e.g., 897) in the text field and press the 'Store' button. As this is a write operation, Metamask will initiate a transaction to the smart contract. You'll need to click the 'Confirm' button to authorize the transaction and proceed with the value updation.

Step 32: After the transaction is confirmed, refresh the page, and you will observe that the most recent value (897 in this case) will be displayed on the page. in front of storednumber feild.

Step 33: We leaned how to interact develop, test, deploy a Solidity Smart Contract on Ganache blockchain and create a UI for it in React.